/* ═══════════════════════════════════════════════════════════════════════════
   Shaadi Sheets — public-page finish layer ("lux")
   Same vocabulary as The Back Room and the sign-in page: ivory paper, gold
   hairlines, Fraunces display type at lighter weights with italic accents,
   letterspaced small caps, pill buttons, soft-shadowed cards.

   Loaded LAST in <head> on the public marketing pages (landing, FAQ, Our
   Story, blog, What's New, free tools, vendor application, day-of
   coordination, gift, privacy, signup). Presentation only: no markup or JS
   depends on it, and removing the <link> restores the previous look.

   Rule of thumb for this file: change feel, not size. Each page's own
   @media rules set font sizes for phones; this layer mostly changes weight,
   style, spacing, colour, radius and shadow so those responsive sizes keep
   working. Where a size is changed it is relative (em) or scoped.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --lx-paper:#FBF8F3; --lx-card:#FFFEFC; --lx-line:#ECE3D6; --lx-line-soft:#F2ECE3;
  --lx-ink:#2A1E1C; --lx-muted:#7A6A64;
  --lx-gold:#B8955A; --lx-gold-deep:#9C7A3F; --lx-gold-soft:rgba(184,149,90,.38);
  --lx-shadow:0 1px 2px rgba(74,23,28,.04),0 18px 40px -26px rgba(74,23,28,.30);
  --lx-shadow-lift:0 1px 2px rgba(74,23,28,.05),0 26px 54px -28px rgba(74,23,28,.38);
  --lx-btn:linear-gradient(180deg,#7A2A33,#6F222A);
  --lx-btn-hover:linear-gradient(180deg,#6F222A,#4A171C);
  --lx-display:'Fraunces','Cormorant Garamond',Georgia,serif;
}

html,body{background-color:var(--lx-paper)}
body{-webkit-font-smoothing:antialiased}
::selection{background:rgba(195,164,109,.28)}

/* ─── Display type: lighter Fraunces, italic accents ─────────────────────── */
/* opsz: the display cut (96) only suits the big hero lines; section heads use 48 or
   they turn hairline-thin at 26-38px */
h1,h2,.st{font-family:var(--lx-display);font-weight:500!important;letter-spacing:-.01em;font-variation-settings:"SOFT" 50,"opsz" 48}
h1{font-variation-settings:"SOFT" 60,"opsz" 96;letter-spacing:-.015em}
h1 em,h2 em,.st em{font-style:italic!important;font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 48}
h1 em{font-variation-settings:"SOFT" 100,"opsz" 96}
h3{letter-spacing:-.005em}

/* Eyebrows / kickers: widely spaced gold small caps */
.sec-eyebrow,.problem-eyebrow,.gb-eyebrow,.eyebrow,.bc-eyebrow,.wc-eyebrow,.step-tag,.rel-tag{
  letter-spacing:.24em!important;font-weight:600!important;text-transform:uppercase}
.sec-eyebrow,.gb-eyebrow,.eyebrow,.bc-eyebrow,.wc-eyebrow{color:var(--lx-gold-deep)}

/* Hero badges: from tinted pill to a gold-hairline label */
.hbadge,.va-hero-badge,.coord-chip,.badge{
  background:transparent!important;border:1px solid var(--lx-gold-soft)!important;
  font-family:var(--lx-display);font-style:italic;font-weight:500!important;letter-spacing:0;
  font-size:1em;font-variation-settings:"SOFT" 100,"opsz" 24}
.hbadge,.va-hero-badge,.badge{color:var(--lx-gold-deep)!important}

/* ─── Top bar ────────────────────────────────────────────────────────────── */
.nav{background:rgba(251,248,243,.92)!important;border-bottom-color:transparent!important}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lx-gold) 18%,var(--lx-gold) 82%,transparent);opacity:.5}
.nlinks a,.ndrop-trigger{font-size:11px!important;font-weight:600!important;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-muted)}
/* Plain links and dropdown triggers share one box so their capitals sit on one line */
.nlinks a,.ndrop-trigger{display:inline-flex;align-items:center;line-height:1;padding-top:6px;padding-bottom:6px}
.nlinks a:hover,.ndrop-trigger:hover,.ndrop:hover .ndrop-trigger{color:var(--m)}
.nlinks a.for-planners{color:var(--m)}
.ndrop-menu{background:var(--lx-card)!important;border-color:var(--lx-line)!important;border-radius:16px!important;
  box-shadow:0 22px 48px -20px rgba(74,23,28,.32)!important;padding:8px!important}
.ndrop-menu a{border-radius:10px}
.ndrop-menu a:hover{background:#F8EDE3}

/* ─── Buttons: pills with a little depth ─────────────────────────────────── */
.bl,.bcta,.bp,.bs,.hbp,.hbs,.pct,.cf-submit,.demo-cta-btn,.gb-cta,.coord-bp,.coord-bs,
.faq-cta-btn,.sig-cta,.va-submit,.bc-cta,.article-cta,.endcta a,.btn-primary,.btn-ghost,.dl-btn,.gf-btn,
.fnews-form button{
  border-radius:999px!important;letter-spacing:.1em;text-transform:uppercase;font-size:.86em}
.bcta,.cf-submit,.demo-cta-btn,.gb-cta,.va-submit,.faq-cta-btn,.btn-primary,.gf-btn,
.pl.bv .pct,.hbp{
  background:var(--lx-btn)!important;color:#fff;border-color:transparent!important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 22px -12px rgba(111,34,42,.6)}
.bcta:hover,.cf-submit:hover,.demo-cta-btn:hover,.gb-cta:hover,.va-submit:hover,.faq-cta-btn:hover,.btn-primary:hover,.gf-btn:hover,
.pl.bv .pct:hover,.hbp:hover{background:var(--lx-btn-hover)!important}
.bl,.btn-ghost{border-width:1px!important;border-color:var(--lx-gold-soft)!important;color:var(--m)}
.bl:hover,.btn-ghost:hover{border-color:var(--m)!important;background:#F8EDE3}
.hbs{border-width:1px!important;border-color:var(--lx-gold-soft)!important;background:rgba(255,254,252,.7)!important}
.hbs:hover{border-color:var(--m)!important;background:#fff!important}
.bp,.coord-bp{box-shadow:0 10px 24px -12px rgba(195,164,109,.7)!important}
.bs,.coord-bs{border-width:1px!important;border-color:rgba(222,197,141,.5)!important}

/* ─── Cards: ivory, hairline, soft shadow ────────────────────────────────── */
.pl,.faq-item,.contact-form,.tog-card,.bcell-card,.va-benefit-card,.va-form-card,.bc-card,.bc-faq-item,.wc-faq-item,
.pcard,.card,.gf-card{
  background:var(--lx-card);border-color:var(--lx-line)!important;box-shadow:var(--lx-shadow)}
.pl,.contact-form,.va-form-card,.gf-card{border-radius:22px!important}
.faq-item,.bc-faq-item,.wc-faq-item{border-radius:16px!important}
.faq-item:hover,.bc-faq-item:hover,.wc-faq-item:hover{border-color:var(--lx-gold-soft)!important}
.faq-q h3,.bc-faq-item h3,.wc-faq-item h3{font-family:var(--lx-display);font-weight:500;letter-spacing:0;font-variation-settings:"SOFT" 60,"opsz" 24;font-size:1.12em}
.faq-item.open .faq-q h3{font-style:italic}

/* Pricing: the featured plan gets a gold inner frame */
.pl{position:relative}
.pl.pp{background:linear-gradient(180deg,#7A2A33,#5E1C23)!important;border-color:transparent!important;box-shadow:0 30px 60px -28px rgba(111,34,42,.65)!important}
.pl.pp::before{content:"";position:absolute;inset:8px;border:1px solid rgba(222,197,141,.45);border-radius:16px;pointer-events:none}
.pn{font-family:var(--lx-display);font-style:italic;font-weight:500!important;font-variation-settings:"SOFT" 100,"opsz" 48}
.pprc{font-weight:500!important;letter-spacing:-.02em}
.pk{background:rgba(184,149,90,.16)!important;color:var(--lx-gold-deep)!important}

/* Comparison table: from traffic-light cells to a quieter ledger */
.ct{border-radius:20px!important;box-shadow:var(--lx-shadow)!important;border:1px solid var(--lx-line)}
.ct th{background:linear-gradient(180deg,#7A2A33,#6F222A)!important;font-size:10.5px!important;letter-spacing:.18em;text-transform:uppercase}
.ct th:nth-child(2),.ct th:nth-child(3){text-align:center}
.ct td{background:var(--lx-card)!important;border-bottom-color:var(--lx-line-soft)!important}
.ct td.cell-y{background:rgba(184,149,90,.09)!important}
.ct td.cell-n{background:var(--lx-card)!important}
.cy{color:var(--lx-gold-deep)!important}
.cn{color:#C9B8B2!important;font-weight:400!important}

/* Forms */
.cf-field label,.va-input+label,.bc-field label,.field label,.gf-field label{letter-spacing:.14em;text-transform:uppercase;font-size:.84em;color:var(--lx-muted)}
.cf-field input,.cf-field select,.cf-field textarea,.va-input,.bc-input,.field input,.field select,.field textarea,.gf-input{
  border-width:1px!important;border-color:var(--lx-line)!important;border-radius:14px!important;background:#fff}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus,.va-input:focus,.bc-input:focus,
.field input:focus,.field select:focus,.field textarea:focus,.gf-input:focus{
  border-color:var(--lx-gold)!important;box-shadow:0 0 0 4px rgba(195,164,109,.16)!important;outline:none}

/* Imagery */
.founder-img,.demo-video-wrap{border-radius:24px!important;box-shadow:0 30px 60px -32px rgba(74,23,28,.45)!important}
.founder-content h2{font-style:italic}
.founder-role{letter-spacing:.18em;text-transform:uppercase;font-size:.84em;color:var(--lx-gold-deep)!important}

/* Dark bands: a gold hairline at the top edge */
.problem,.stats,.coord,.trycta{position:relative}
.problem::after,.stats::after,.coord::after,.trycta::after{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(222,197,141,.55),transparent)}
.coord::after{bottom:auto;width:auto;border-radius:0}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer{position:relative;background:linear-gradient(180deg,#4F181E,#3E1217)!important}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(222,197,141,.7) 20%,rgba(222,197,141,.7) 80%,transparent)}
.fcl h4{letter-spacing:.24em!important;font-weight:600!important}
.fnews-copy h4{font-family:var(--lx-display);font-style:italic;font-weight:500;font-size:1.25em;font-variation-settings:"SOFT" 100,"opsz" 48}
.fnews-form input[type=email]{border-radius:999px!important}
.fba{letter-spacing:.06em}

/* ─── Mobile menu ────────────────────────────────────────────────────────── */
.mob-menu{background:var(--lx-paper)!important}
.mob-menu a,.mob-group-trigger{border-color:var(--lx-line)!important}
.mob-menu-actions .bl,.mob-menu-actions .bcta{font-size:11px!important}

/* ─── Signup (onboarding) & gift: the same invitation card as sign-in ───── */
.ob-card,.gf-card{box-shadow:0 1px 2px rgba(74,23,28,.04),0 34px 70px -38px rgba(74,23,28,.42)!important}
.ob-btn{border-radius:999px!important;letter-spacing:.1em}
.ob-input{border-radius:14px!important;border-color:var(--lx-line)!important}
.ob-input:focus{border-color:var(--lx-gold)!important;box-shadow:0 0 0 4px rgba(195,164,109,.16)!important}
.ob-chip,.ob-plan-badge{border-radius:999px}