/* ═══════════════════════════════════════════════════════════════════
   WEDDING WEBSITE GENERATOR — a Boring Stories offering
   Design language inherited from the live intake wizard:
   warm-dark #1a1714 · ink #f6f1e7 · gold #d8c4a0 · ease(.32,.72,0,1)
   Display: "Wedding" script · Body: Suisse (Book 400 / Medium 500)
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Wedding";
  src:url("fonts/custom.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Suisse"; font-weight:400; font-style:normal; font-display:swap;
  src:url("fonts/suisse-book.woff2") format("woff2");
}
@font-face{
  font-family:"Suisse"; font-weight:500; font-style:normal; font-display:swap;
  src:url("fonts/suisse-medium.woff2") format("woff2");
}

:root{
  --font-display:"Wedding", cursive;
  --font-body:"Suisse", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ink:#f6f1e7;
  --ink-soft:rgba(246,241,231,.78);
  --ink-faint:rgba(246,241,231,.5);
  --ink-ghost:rgba(246,241,231,.3);
  --rule:rgba(246,241,231,.16);
  --rule-strong:rgba(246,241,231,.34);
  --bg:#1a1714;
  --field:rgba(0,0,0,.26);
  --shell:rgba(246,241,231,.045);
  --gold:#d8c4a0;
  --gold-dim:rgba(216,196,160,.55);

  --ease:cubic-bezier(.32,.72,0,1);
  --max:1140px;
  --max-narrow:760px;

  /* modular scale */
  --fs-h2:clamp(34px, 5vw, 56px);
  --fs-h3:clamp(19px, 2.2vw, 22px);
  --fs-lede:clamp(17px, 2.2vw, 21px);
  --fs-body:16px;
  --sec-pad:clamp(110px, 16vw, 190px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ min-height:100%; }

body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  background-image:
    radial-gradient(120% 80% at 25% 0%, rgba(86,68,48,.5) 0%, rgba(26,23,20,0) 55%),
    radial-gradient(120% 90% at 85% 100%, rgba(60,48,42,.4) 0%, rgba(26,23,20,0) 60%);
  background-attachment:fixed;
}

/* film grain — fixed layer, never on scrolling content */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:var(--gold); color:#1a1714; }
a{ color:inherit; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

.container{ max-width:var(--max); margin:0 auto; padding:0 clamp(22px, 5vw, 48px); position:relative; }
.container.narrow{ max-width:var(--max-narrow); }

/* ── Shared type ────────────────────────────────────────────────── */
.script{ font-family:var(--font-display); font-weight:400; line-height:1.1; }

.eyebrow{
  display:inline-block; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--rule-strong); border-radius:999px;
  padding:6px 14px; margin-bottom:26px;
}

h2{
  font-family:var(--font-body); font-weight:500;
  font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.02em;
  margin-bottom:26px; text-wrap:balance;
}

.body-lg{ font-size:var(--fs-lede); line-height:1.6; color:var(--ink-soft); max-width:58ch; margin-bottom:22px; }
.micro{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em; }
.micro.center{ text-align:center; }

/* ── Buttons (intake-native) ────────────────────────────────────── */
.btn{
  font-family:var(--font-body); font-size:14.5px; font-weight:500; cursor:pointer;
  border:0; border-radius:999px; padding:13px 22px; text-decoration:none;
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  transition:transform .4s var(--ease), background .4s var(--ease),
             color .4s var(--ease), border-color .4s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn.ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--rule-strong); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--ink-soft); }
.btn.primary{ background:var(--ink); color:#1a1714; padding-right:9px; }
.btn.primary .ic{
  width:32px; height:32px; border-radius:999px; background:rgba(26,23,20,.1);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:transform .4s var(--ease);
}
.btn.primary .ic svg{ width:15px; height:15px; }
.btn.primary:hover .ic{ transform:translateX(3px); }
.btn.sm{ font-size:13.5px; padding:10px 18px; }
.btn.primary.sm{ padding-right:7px; }
.btn.sm .ic{ width:27px; height:27px; }
.btn.lg{ font-size:15.5px; padding:15px 26px; }
.btn.primary.lg{ padding-right:11px; }
.btn.lg .ic{ width:34px; height:34px; }

.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.cta-row.center{ justify-content:center; }

/* ── Header ─────────────────────────────────────────────────────── */
.top{ position:relative; z-index:10; }
.top-inner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(20px, 3vw, 30px) clamp(22px, 5vw, 48px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.wordmark{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.wm-caps{ font-weight:500; font-size:13px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; }
.wm-script{ font-family:var(--font-display); font-size:24px; color:var(--gold); transform:translateY(2px); }
.top-nav{ display:flex; align-items:center; gap:22px; }
.navlink{
  font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.navlink:hover{ color:var(--ink); border-color:var(--rule-strong); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{ padding:clamp(70px, 11vw, 150px) 0 var(--sec-pad); text-align:center; }
.hero .eyebrow{ margin-bottom:34px; }
.hero-lockup{ font-weight:400; margin-bottom:30px; }
.hero-lockup .script{
  display:block; font-size:clamp(52px, 11.5vw, 150px); line-height:1.08;
  letter-spacing:.01em;
}
/* each word is an unbreakable unit that wraps as a whole —
   the script face otherwise refuses to break the line on small screens */
.hero-lockup .script .word{ display:inline-block; }
.hero-lockup .gen{
  display:flex; align-items:center; justify-content:center; gap:clamp(16px, 3vw, 30px);
  margin-top:clamp(14px, 2.5vw, 26px);
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(13px, 2vw, 19px); letter-spacing:.55em; text-indent:.55em;
  text-transform:uppercase; color:var(--gold);
}
.hero-lockup .rule{ display:block; height:1px; width:clamp(40px, 8vw, 110px); background:var(--rule-strong); }
.lede{
  font-size:var(--fs-lede); color:var(--ink-soft); max-width:46ch;
  margin:0 auto 40px; text-wrap:balance;
}
.hero .cta-row{ justify-content:center; margin-bottom:34px; }
.hero-meta{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }

/* ── Premise ────────────────────────────────────────────────────── */
.premise{ padding:0 0 var(--sec-pad); }
.premise .container{ border-top:1px solid var(--rule); padding-top:var(--sec-pad); }

.ledger{ margin-top:54px; border-top:1px solid var(--rule); }
.ledger-row{
  display:flex; gap:26px; padding:20px 4px; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.ledger-row .lk{ flex:none; width:min(38%, 230px); font-weight:500; font-size:14.5px; color:var(--ink-faint); }
.ledger-row .lv{ flex:1; font-size:15.5px; color:var(--ink-soft); }
.ledger-row.is-us .lk{ color:var(--gold); }
.ledger-row.is-us .lv{ color:var(--ink); }

/* ── How it works ───────────────────────────────────────────────── */
.how{ padding:0 0 var(--sec-pad); }
.how h2{ margin-bottom:60px; }
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}

/* double-bezel card: outer shell + inner core (intake architecture) */
.shell-card{
  background:var(--shell); border:1px solid var(--rule); border-radius:22px; padding:6px;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.shell-card:hover{ border-color:var(--rule-strong); background:rgba(246,241,231,.06); transform:translateY(-3px); }
.card-core{
  background:var(--field); border-radius:17px; height:100%;
  padding:30px 28px 32px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05);
}

.step-no{
  display:block; font-size:46px; color:var(--gold); margin-bottom:16px;
}
.step-card h3{ font-weight:500; font-size:var(--fs-h3); margin-bottom:10px; letter-spacing:-.01em; }
.step-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; }

/* ── Features ───────────────────────────────────────────────────── */
.features{ padding:0 0 var(--sec-pad); }
.features h2{ margin-bottom:60px; }

/* hairline matrix: 1px gaps revealing the rule color */
.feature-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:18px; overflow:hidden;
}
.feat{
  background:var(--bg); padding:28px 26px 30px;
  transition:background .5s var(--ease);
}
.feat:hover{ background:#211d19; }
.feat h3{ font-weight:500; font-size:15.5px; margin-bottom:7px; letter-spacing:-.01em; }
.feat p{ font-size:13.5px; color:var(--ink-faint); line-height:1.65; }

/* ── Proof ──────────────────────────────────────────────────────── */
.proof{ padding:0 0 var(--sec-pad); }
.proof-grid{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 90px); align-items:center;
}
.proof-copy h2{ max-width:16ch; }
.proof-copy .cta-row{ margin:10px 0 18px; }

/* abstract intake vignette */
.proof-mock{ perspective:1200px; }
.mock-shell{
  background:var(--shell); border:1px solid var(--rule); border-radius:26px; padding:8px;
  transform:rotateY(-4deg) rotateX(1.5deg);
  transition:transform .8s var(--ease);
}
.proof-mock:hover .mock-shell{ transform:rotateY(0) rotateX(0); }
.mock-core{
  background:#16130f; border-radius:19px; padding:34px 30px 26px; overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05);
  background-image:radial-gradient(110% 70% at 20% 0%, rgba(86,68,48,.4) 0%, rgba(22,19,15,0) 60%);
}
.mock-rail{ height:2px; border-radius:999px; background:rgba(246,241,231,.08); margin-bottom:30px; }
.mock-rail span{ display:block; height:100%; width:34%; border-radius:999px;
  background:linear-gradient(90deg, var(--gold), #f6f1e7); }
.mock-eyebrow{
  display:inline-block; font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--rule-strong); border-radius:999px;
  padding:4px 11px; margin-bottom:18px;
}
.mock-h{ font-weight:500; font-size:clamp(24px, 2.6vw, 32px); line-height:1.05; letter-spacing:-.02em; margin-bottom:26px; }
.mock-field{ margin-bottom:16px; }
.mock-label{ display:block; font-weight:500; font-size:12.5px; margin-bottom:7px; color:var(--ink-soft); }
.mock-input{
  background:var(--shell); border:1px solid var(--rule); border-radius:13px; padding:4px;
}
.mock-input i{
  display:block; height:36px; border-radius:9px; background:var(--field);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05);
}
.mock-input.tall i{ height:26px; margin-bottom:4px; }
.mock-input.tall i.short{ width:62%; margin-bottom:0; }
.mock-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 26px; }
.mock-chip{
  font-size:11.5px; color:var(--ink-soft); border:1px solid var(--rule-strong);
  border-radius:999px; padding:7px 13px;
}
.mock-chip.on{ background:var(--ink); color:#1a1714; border-color:var(--ink); font-weight:500; }
.mock-nav{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--rule); padding-top:18px; margin-top:6px;
}
.mock-save{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-faint); }
.mock-save i{ width:6px; height:6px; border-radius:999px; background:var(--gold); }
.mock-btn{
  font-size:12.5px; font-weight:500; background:var(--ink); color:#1a1714;
  border-radius:999px; padding:9px 18px;
}

/* ── Pricing ────────────────────────────────────────────────────── */
.pricing{ padding:0 0 var(--sec-pad); text-align:center; }
.pricing .container{ border-top:1px solid var(--rule); padding-top:var(--sec-pad); }
.pricing h2{ margin-bottom:54px; }

.price-card{ text-align:center; border-radius:28px; }
.price-card .card-core{ padding:clamp(40px, 6vw, 64px) clamp(26px, 5vw, 64px) clamp(36px, 5vw, 56px); }
.price-script{ font-size:clamp(34px, 4.5vw, 46px); color:var(--gold); margin-bottom:6px; }
.price-figure{
  font-weight:500; font-size:clamp(64px, 9vw, 104px); line-height:1; letter-spacing:-.04em;
  margin-bottom:12px;
}
.price-sub{ color:var(--ink-faint); font-size:14.5px; margin-bottom:38px; }

.includes{
  list-style:none; text-align:left; max-width:480px; margin:0 auto 42px;
  border-top:1px solid var(--rule);
}
.includes li{
  padding:13px 2px 13px 30px; border-bottom:1px solid var(--rule);
  font-size:14.5px; color:var(--ink-soft); position:relative;
}
.includes li::before{
  content:""; position:absolute; left:4px; top:21px; width:12px; height:6px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.cta-col{ display:flex; flex-direction:column; align-items:center; gap:14px; }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq{ padding:0 0 var(--sec-pad); }
.faq h2{ margin-bottom:46px; }
.faq-list{ border-top:1px solid var(--rule); }
.faq-list details{ border-bottom:1px solid var(--rule); }
.faq-list summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 2px; font-weight:500; font-size:clamp(16px, 2vw, 18px);
  letter-spacing:-.01em; transition:color .3s var(--ease);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:hover{ color:var(--gold); }
.faq-mark{ position:relative; flex:none; width:14px; height:14px; }
.faq-mark::before, .faq-mark::after{
  content:""; position:absolute; background:var(--gold); transition:transform .5s var(--ease);
}
.faq-mark::before{ left:0; top:6.25px; width:14px; height:1.5px; }
.faq-mark::after{ left:6.25px; top:0; width:1.5px; height:14px; }
details[open] .faq-mark::after{ transform:rotate(90deg) scaleY(0); }
.faq-a{ padding:0 2px 26px; }
.faq-a p{ color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:62ch; }

/* ── Close ──────────────────────────────────────────────────────── */
.close{ padding:0 0 var(--sec-pad); text-align:center; }
.close .container{ border-top:1px solid var(--rule); padding-top:clamp(90px, 13vw, 150px); }
.close-script{
  font-size:clamp(44px, 8vw, 96px); margin-bottom:38px; text-wrap:balance;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--rule); padding:clamp(54px, 8vw, 90px) 0 46px;
  text-align:center;
}
.foot-script{ font-size:clamp(30px, 4vw, 42px); color:var(--gold-dim); margin-bottom:20px; }
.foot-line{ font-size:14px; color:var(--ink-soft); margin-bottom:10px; }
.foot-line a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-strong);
  transition:border-color .3s var(--ease); }
.foot-line a:hover{ border-color:var(--ink); }
.foot-meta{ font-size:12px; color:var(--ink-faint); }
.foot-meta a{ text-decoration:none; transition:color .3s var(--ease); }
.foot-meta a:hover{ color:var(--ink-soft); }

/* ── Scroll reveal ──────────────────────────────────────────────────
   Hidden state only applies once JS tags <html class="js"> — with JS
   off (or a crawler), everything is simply visible. */
html.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
html.js .reveal.in{ opacity:1; transform:none; }
html.js .reveal.d1{ transition-delay:.08s; }
html.js .reveal.d2{ transition-delay:.16s; }
html.js .reveal.d3{ transition-delay:.24s; }
html.js .reveal.d4{ transition-delay:.32s; }
html.js .reveal.d5{ transition-delay:.4s; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:980px){
  .steps{ grid-template-columns:1fr; gap:14px; }
  .feature-grid{ grid-template-columns:repeat(2, 1fr); }
  .proof-grid{ grid-template-columns:1fr; }
  .proof-mock{ max-width:520px; }
  .mock-shell{ transform:none; }
}
@media (max-width:620px){
  .top-inner{ flex-direction:row; }
  .top-nav .navlink{ display:none; }
  .wm-caps{ font-size:11px; letter-spacing:.2em; }
  .wm-script{ font-size:20px; }
  .feature-grid{ grid-template-columns:1fr; }
  .ledger-row{ flex-direction:column; gap:4px; }
  .ledger-row .lk{ width:auto; }
  .cta-row .btn{ width:100%; justify-content:center; }
  .btn.primary{ justify-content:space-between; }
  .hero .cta-row, .cta-col{ width:100%; }
  .cta-col .btn{ width:100%; justify-content:center; }
  .cta-col .btn.primary{ justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .mock-shell{ transform:none; }
}