/* Conversion refresh v2, 2026-11-04. Scoped, non-destructive styles. */
:root { --ybsi-cta:#b94a71; --ybsi-text:#241f27; --ybsi-border:rgba(55,35,48,.13); }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
:where(a,button,input,textarea,select):focus-visible { outline:3px solid #a44f7b!important; outline-offset:3px; }
:where(input,textarea,select) { font-size: max(16px,1em); }
:where(img,video,svg) { max-width:100%; }

/* Ads land on create.php. Make the useful part of the page actionable at once. */
#Create-My-Invite .hero { padding-top:clamp(24px,3.2vw,54px); }
#Create-My-Invite .hero-shell { align-items:center; gap:clamp(22px,3.5vw,48px); }
#Create-My-Invite .hero h1 { font-size:clamp(2.35rem,4.4vw,4.45rem); line-height:1.025; letter-spacing:-.058em; margin-bottom:15px; }
#Create-My-Invite .hero h1 em { font-style:normal; color:color-mix(in srgb,var(--primary) 80%,#642544); }
#Create-My-Invite .hero-sub { font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.48; margin-bottom:17px; }
#Create-My-Invite .hero-badge { margin-bottom:13px; }
#Create-My-Invite .hero-actions { gap:9px; margin:12px 0 11px; }
#Create-My-Invite .hero-actions .btn-secondary { flex:1 1 auto; min-height:44px; border-radius:13px; padding:10px 12px; font-size:13px; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; }
#Create-My-Invite .hero-proof { font-size:12px; gap:7px 14px; margin:12px 0; }
#Create-My-Invite .hero-dashboard-link { font-size:12px; }
#Create-My-Invite .hero-features { cursor:default; }
#Create-My-Invite .hero-visual { padding:10px 13px 24px; }
#Create-My-Invite .hero-visual-card { transform:none; }
#Create-My-Invite .hero-visual .ybsi-feature-image.has-fallback { aspect-ratio:1.22; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#fce7eb,#eff5fd); }
#Create-My-Invite .hero-visual .ybsi-feature-image.has-fallback::after { content:'Your invitation website · RSVP online · Share one link'; max-width:290px; color:#4e3b50; font-size:clamp(19px,2.5vw,32px); font-weight:850; line-height:1.25; letter-spacing:-.04em; text-align:center; }
#Create-My-Invite .ybsi-feature-image.has-fallback img { display:none; }
#Create-My-Invite .hero-mini-card { border-radius:13px; padding:9px 10px; }

.quick-start-card { width:100%; max-width:660px; padding:17px; border-radius:20px; border:1px solid rgba(81,52,69,.15); background:#fff; box-shadow:0 18px 44px rgba(72,43,58,.13); text-align:left; }
.quick-start-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
.quick-start-head strong { color:#261e26; font-size:17px; letter-spacing:-.025em; }
.quick-start-head span { color:#867981; font-size:11px; font-weight:800; }
.quick-start-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-start-fields label { display:grid; align-content:start; gap:6px; min-width:0; color:#5f515c; font-size:12px; font-weight:800; }
#Create-My-Invite .quick-start-fields input { width:100%; min-width:0; min-height:51px; padding:12px; border:1px solid #e1d6dd; border-radius:12px; background:#fcfbfc; color:#29212a; font-size:16px; font-weight:550; box-shadow:none; }
.quick-start-fields input:focus { border-color:#ac6685; box-shadow:0 0 0 3px #fce3ed; outline:0; }
#Create-My-Invite .quick-start-submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; margin:12px 0 0; border:0; border-radius:13px; background:linear-gradient(120deg,#b94a71,#a54c6e); color:#fff; font-size:15px; font-weight:900; letter-spacing:-.01em; box-shadow:0 11px 24px rgba(163,67,107,.24); cursor:pointer; }
.quick-start-submit svg { width:20px; height:20px; flex:0 0 20px; }
#Create-My-Invite .quick-start-submit:disabled { opacity:.5; cursor:not-allowed; }
#Create-My-Invite .quick-start-note { margin:10px 0 0; color:#72656e; font-size:11px; line-height:1.45; text-align:center; }
#Create-My-Invite .field-help { display:block; color:#756a72; font-size:12px; line-height:1.35; margin:2px 0 12px; }
#Create-My-Invite #createForm input:focus-visible, #Create-My-Invite #createForm textarea:focus-visible { scroll-margin-top:100px; }
#Create-My-Invite #createForm .builder-section { box-shadow:0 12px 35px rgba(39,24,35,.06); }
#Create-My-Invite .final-review-status { margin:0; padding:11px 16px; border-top:1px solid #f3d1d6; background:#fff0f2; color:#942843; font-size:13px; font-weight:750; }
#Create-My-Invite .final-review-status[hidden] { display:none!important; }
#Create-My-Invite .nova-cta-section { margin-top:25px; }
#Create-My-Invite .nova-cta-primary, #Create-My-Invite .nova-cta-secondary { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
/* Remove simulated likes/comments from the phone-video section (not actual customer endorsements). */
#Create-My-Invite .iphone-frame .heart, #Create-My-Invite .iphone-frame .likes, #Create-My-Invite .iphone-frame .comment-btn, #Create-My-Invite #commentsTab { display:none!important; }
#Create-My-Invite .iphone-frame .controls { bottom:16px; }
#Create-My-Invite .iphone-frame .controls button { width:43px; height:43px; min-width:43px; min-height:43px; display:grid; place-items:center; border-radius:50%; }
#Create-My-Invite .iphone-frame .controls button svg { width:21px; height:21px; }
#Create-My-Invite .yb-chat-button { box-shadow:0 12px 34px rgba(42,30,47,.13)!important; }

/* Shared accessibility and non-breaking visual polish on the rest of the live journey. */
body.ybsi-guest-2026,body.ybsi-host-2026,body.ybsi-host-handoff-2026 { -webkit-font-smoothing:antialiased; }
body.ybsi-guest-2026 :where(input,select,textarea),
body.ybsi-host-2026 :where(input,select,textarea),
body.ybsi-host-handoff-2026 :where(input,select,textarea) { font-size:max(16px,1em); }
body.ybsi-guest-2026 :where(button,a),
body.ybsi-host-2026 :where(button,a),
body.ybsi-host-handoff-2026 :where(button,a) { -webkit-tap-highlight-color:transparent; }
body.ybsi-guest-2026 .invite-card, body.ybsi-guest-2026 .rsvp-card { box-shadow:0 22px 58px rgba(41,28,42,.10); }
body.ybsi-host-2026 .section-card { border:1px solid rgba(39,31,41,.07); box-shadow:0 13px 38px rgba(39,31,41,.06); }
body.ybsi-host-2026 .section-card h2 { letter-spacing:-.025em; }
body.ybsi-host-handoff-2026 .copy-btn,body.ybsi-host-handoff-2026 .go-btn { border-radius:12px; }
@media(max-width:1000px) {
  #Create-My-Invite .hero-shell { grid-template-columns:1fr; max-width:700px; }
  #Create-My-Invite .hero-visual { max-width:660px; margin:0 auto; width:100%; }
}
@media(max-width:760px) {
  html { scroll-padding-top:68px; }
  #Create-My-Invite .hero { padding:22px 14px 18px; }
  #Create-My-Invite .hero h1 { font-size:clamp(2.15rem,10.4vw,3.35rem); line-height:1.03; margin:0 0 11px; }
  #Create-My-Invite .hero-sub { font-size:15px; line-height:1.46; margin-bottom:15px; }
  #Create-My-Invite .hero-badge { font-size:10.5px; margin-bottom:10px; padding:7px 10px; }
  #Create-My-Invite .hero-proof { gap:6px 10px; font-size:11px; }
  #Create-My-Invite .hero-actions { margin:10px 0 8px; display:grid; grid-template-columns:1fr 1fr; }
  #Create-My-Invite .hero-actions .btn-secondary { font-size:11px; text-align:center; min-width:0; padding:8px 5px; min-height:44px; }
  #Create-My-Invite .hero-dashboard-link { margin:8px 0 0; }
  #Create-My-Invite .hero-visual { margin-top:4px; }
  #Create-My-Invite .hero-mini-card { display:none; }
  .quick-start-card { padding:14px; border-radius:17px; }
  .quick-start-head { margin-bottom:11px; }
  .quick-start-head strong { font-size:16px; }
  .quick-start-head span { display:none; }
  .quick-start-fields { grid-template-columns:1fr; gap:10px; }
  #Create-My-Invite .quick-start-submit { min-height:53px; font-size:14px; }
  #Create-My-Invite .hero-features { margin-top:0; }
  #Create-My-Invite .hero-features article { min-height:66px; }
  #Create-My-Invite .conversion-strip { margin-top:0; }
  #Create-My-Invite .sticky-create-cta.is-hero-visible { display:none!important; }
  #Create-My-Invite .final-review-shell { max-height:95dvh; }
  body.ybsi-host-2026 .container { max-width:100vw; padding-left:12px; padding-right:12px; }
  body.ybsi-host-2026 .section-card { padding:clamp(14px,3.5vw,20px); border-radius:17px; }
  body.ybsi-guest-2026 .invite-card { max-width:100%; }
}
@media(max-width:365px) {
  #Create-My-Invite .hero-actions { grid-template-columns:1fr; }
  #Create-My-Invite .hero h1 { font-size:2rem; }
  #Create-My-Invite .quick-start-submit { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  #Create-My-Invite .hero-visual, #Create-My-Invite .hero-visual *, #Create-My-Invite .quick-start-card * { animation:none!important; transition:none!important; }
}

/* Faster final review for the two-field hero flow; the complete builder is unchanged. */
#Create-My-Invite .create-popup-overlay.quick-review .review-color-section{display:none!important}
#Create-My-Invite .create-popup-overlay.quick-review .review-detail-list>div:nth-child(n+3){display:none!important}
#Create-My-Invite .create-popup-overlay.quick-review .review-invite-card{margin-bottom:2px}
#Create-My-Invite .review-email-section{border-color:color-mix(in srgb,var(--primary) 32%,#e8dce1);background:color-mix(in srgb,var(--primary) 3%,#fff)}
#Create-My-Invite .review-email-section input{font-size:16px!important}
@media(max-width:760px){
  #Create-My-Invite .yb-chat-widget.is-hero-visible{display:none!important}
  #Create-My-Invite .create-popup-overlay.quick-review .final-review-scroll{padding-bottom:12px}
}

/* v2.1 — RSVP List as a true second nav action (desktop and mobile). */
#Create-My-Invite .nav-links .yb-rsvp-nav-link{background:color-mix(in srgb,var(--primary) 10%,#fff);border:1px solid color-mix(in srgb,var(--primary) 25%,#fff);font-weight:850;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;}
#Create-My-Invite .nav-links .yb-rsvp-nav-link:hover{background:var(--primary);color:#fff;}
#Create-My-Invite .mobile-menu .yb-rsvp-nav-link{color:var(--primary);border-block:1px solid #e8dce3;padding:15px 0;}
.ybsi-rsvp-finder{width:min(440px,calc(100vw - 32px));max-height:90dvh;border:1px solid #eadde6;border-radius:22px;background:#fff;padding:0;box-shadow:0 28px 90px #241b2940;color:#2c2430;}
.ybsi-rsvp-finder::backdrop{background:rgba(27,22,32,.55);backdrop-filter:blur(6px);}
.ybsi-rsvp-finder form{padding:clamp(20px,4vw,30px);position:relative;}
.ybsi-rsvp-finder-close{position:absolute;right:17px;top:17px;border:0;border-radius:12px;background:#f7f0f4;display:grid;place-items:center;width:38px;height:38px;cursor:pointer;}
.ybsi-rsvp-finder-close svg{width:19px;height:19px;}
.ybsi-rsvp-finder-kicker{font-size:11px;letter-spacing:.12em;font-weight:900;color:var(--primary);margin:0 0 10px;}
.ybsi-rsvp-finder h2{font-size:clamp(25px,4vw,31px);letter-spacing:-.045em;margin:0 0 10px;color:#26202a;}
.ybsi-rsvp-finder p{line-height:1.5;color:#625663;font-size:14px;margin:0 0 21px;}
.ybsi-rsvp-finder label{font-size:12px;font-weight:850;display:block;margin-bottom:7px;}
#Create-My-Invite .ybsi-rsvp-finder input{display:block;width:100%;border:1px solid #d9cbd4;background:#fcfafc;border-radius:12px;padding:13px;font-size:16px;min-height:52px;}
.ybsi-rsvp-finder-submit{width:100%;margin-top:13px;min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--primary);color:#fff;font-weight:900;font-size:15px;border-radius:12px;cursor:pointer;}
.ybsi-rsvp-finder-submit svg{width:19px;height:19px;}
.ybsi-rsvp-finder small{display:block;text-align:center;color:#857886;margin-top:12px;font-size:11px;}
.ybsi-rsvp-finder-error{color:#9d303c;font-size:12px;margin-top:6px;}
.ybsi-confirmation-notice{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid #e8dce8;border-radius:17px;box-shadow:0 12px 32px rgba(39,31,41,.05);padding:17px;margin:15px 0 20px;}
.ybsi-confirmation-icon{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;color:#864468;background:#f9eaf0;border-radius:13px;}
.ybsi-confirmation-copy{flex:1 1 auto;min-width:0;}
.ybsi-confirmation-copy strong{font-size:14px;color:#28212d;}
.ybsi-confirmation-copy p{margin:5px 0;font-size:13px;color:#635865;line-height:1.45;}
.ybsi-confirmation-copy span{font-size:11px;color:#837884;overflow-wrap:anywhere;}
.ybsi-resend-button{flex:none;min-height:42px;padding:10px 15px;border-radius:11px;border:1px solid #bb7c99;background:#fff;color:#853558;font-size:12px;font-weight:850;cursor:pointer;}
.ybsi-resend-button:disabled{opacity:.55;cursor:progress;}
@media(max-width:680px){.ybsi-confirmation-notice{flex-wrap:wrap;padding:15px;}.ybsi-confirmation-copy{flex-basis:calc(100% - 60px);}.ybsi-resend-button{width:100%;}}


/* v2.2: two editable colors above the fold, synced with the original form. */
#Create-My-Invite .quick-color-studio{margin-top:13px;padding-top:13px;border-top:1px solid #f0e5ec;}
#Create-My-Invite .quick-color-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px;}
#Create-My-Invite .quick-color-heading strong{font-size:12.5px;color:#45333f;letter-spacing:-.015em;}
#Create-My-Invite .quick-color-heading span{color:#958793;font-size:10px;}
#Create-My-Invite .quick-color-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#Create-My-Invite .quick-color-picker{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:1px solid #e9dfe6;border-radius:12px;background:#fcfafc;cursor:pointer;}
#Create-My-Invite .quick-color-picker:focus-within{border-color:#af718d;box-shadow:0 0 0 3px #f8e8ef;}
#Create-My-Invite .quick-color-picker input[type=color]{flex:none;width:37px;height:37px;min-width:37px;min-height:37px;border-radius:9px;padding:3px;border:1px solid #d8ced6;background:#fff;cursor:pointer;box-shadow:none;}
#Create-My-Invite .quick-color-picker-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
#Create-My-Invite .quick-color-picker-copy strong{color:#453944;font-size:11px;font-weight:800;}
#Create-My-Invite .quick-color-picker-copy small{color:#877985;font-size:10px;letter-spacing:.015em;font-variant-numeric:tabular-nums;}
#Create-My-Invite .quick-color-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
#Create-My-Invite .quick-color-preset{display:inline-flex;align-items:center;gap:0;min-height:32px;padding:5px 9px;border:1px solid #e7dce3;border-radius:999px;background:white;color:#685864;font-family:inherit;font-weight:800;font-size:10px;line-height:1.1;cursor:pointer;box-shadow:none;}
#Create-My-Invite .quick-color-preset i{display:block;width:12px;height:12px;border-radius:50%;background:var(--quick-swatch);border:1px solid #ffffffba;margin-right:-3px;}
#Create-My-Invite .quick-color-preset span{margin-left:8px;}
#Create-My-Invite .quick-color-preset.active{border-color:color-mix(in srgb,var(--primary) 55%,white);background:color-mix(in srgb,var(--primary) 7%,white);color:#403440;}
#Create-My-Invite .quick-color-preset:hover{border-color:var(--primary);}
#Create-My-Invite .quick-details-link{display:table;width:max-content;max-width:100%;margin:11px auto 0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;color:#654455;font-size:12px;font-weight:800;line-height:1.45;}
#Create-My-Invite .quick-details-link:hover{color:var(--primary);}
#Create-My-Invite .quick-start-note{margin-top:5px;}
#Create-My-Invite #formContainer{scroll-margin-top:88px;}
@media(max-width:760px){
  #Create-My-Invite .quick-color-studio{margin-top:11px;padding-top:10px;}
  #Create-My-Invite .quick-color-heading span{display:none;}
  #Create-My-Invite .quick-color-inputs{gap:7px;}
  #Create-My-Invite .quick-color-picker{gap:6px;padding:6px 7px;}
  #Create-My-Invite .quick-color-picker input[type=color]{width:34px;min-width:34px;height:34px;min-height:34px;}
  #Create-My-Invite .quick-color-preset{padding:5px 7px;font-size:9.5px;min-height:30px;}
  #Create-My-Invite .quick-color-presets{gap:5px;}
  #Create-My-Invite .quick-color-picker-copy strong{font-size:10.5px;}
}
@media(max-width:360px){
  #Create-My-Invite .quick-color-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  #Create-My-Invite .quick-color-preset{justify-content:center;}
}

/* v2.2 final polish: keep primary action visible and presets usable on narrow phones. */
#Create-My-Invite .quick-color-presets{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
#Create-My-Invite .quick-color-presets .quick-color-preset{width:auto!important;min-width:0!important;margin:0!important;justify-content:center;white-space:nowrap;padding:5px 4px!important;}
#Create-My-Invite .quick-start-fields label{margin:0!important;gap:5px;}
#Create-My-Invite .quick-start-fields{gap:9px;}
#Create-My-Invite .quick-start-fields input{margin:0!important;}
@media(max-width:760px){
  #Create-My-Invite .hero h1{font-size:clamp(2rem,9.4vw,3rem);line-height:1.035;}
  #Create-My-Invite .hero-sub{font-size:14px;line-height:1.42;}
  #Create-My-Invite .quick-start-fields{gap:8px;}
  #Create-My-Invite .quick-start-fields input{min-height:47px;padding:9px 11px;}
  #Create-My-Invite .quick-color-heading{margin-bottom:6px;}
  #Create-My-Invite .quick-color-presets .quick-color-preset{font-size:9px;}
}
@media(max-width:360px){#Create-My-Invite .quick-color-presets{grid-template-columns:repeat(2,minmax(0,1fr));}}
