/* Form C Plus — landing */
:root {
  --bg: #FBF7F2;
  --bg-2: #F4EEE6;
  --ink: #1A1613;
  --ink-2: #3D342D;
  --muted: #7A6B5F;
  --line: #E6DDD1;
  --line-2: #D9CCB9;
  --card: #FFFFFF;
  --orange: #F39240;
  --orange-2: #E47A23;
  --orange-soft: #FFE5CE;
  --accent: #F39240;
  --green: #2F7D5B;
  --red: #B84A3A;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(26,22,19,.04), 0 1px 1px rgba(26,22,19,.03);
  --shadow-md: 0 4px 12px rgba(26,22,19,.06), 0 2px 4px rgba(26,22,19,.04);
  --shadow-lg: 0 24px 48px -12px rgba(26,22,19,.14), 0 8px 16px -4px rgba(26,22,19,.06);
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* Type */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 450; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ink); }
h1 { font-size: clamp(44px, 6.2vw, 88px); letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.03em; }
h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; }
h4 { font-size: 20px; letter-spacing: -0.015em; font-weight: 500; }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(243,146,64,.15); }
.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
header.site.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: auto; }
.brand-text { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
.brand-text .plus { color: var(--orange); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a.nav-link { font-size: 14px; color: var(--ink-2); transition: color .15s; }
.nav a.nav-link:hover { color: var(--ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; font-weight: 500; font-size: 15px;
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn svg { flex: 0 0 auto; }
.btn-primary { background: var(--ink); color: #FBF7F2; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(26,22,19,.4); }
.btn-accent { background: var(--orange); color: #1A1613; }
.btn-accent:hover { background: var(--orange-2); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--card); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 13px; }

/* LTD ribbon */
.ltd-ribbon {
  background: var(--ink); color: #FBF7F2; font-size: 13px;
  border-bottom: 1px solid #2a221c;
}
.ltd-inner { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 9px 20px; flex-wrap: wrap; }
.ltd-inner .flame { color: var(--orange); }
.ltd-inner strong { color: var(--orange); font-weight: 500; letter-spacing: 0.02em; }
.ltd-inner .ltd-count { font-family: var(--font-mono); font-size: 12px; opacity: .9; }
.ltd-inner a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(251,247,242,.4); }
.ltd-inner a:hover { text-decoration-color: var(--orange); }

/* Hero */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.hero h1 { margin: 18px 0 22px; }
.hero h1 em { font-style: italic; color: var(--orange-2); font-weight: 400; }
.hero-lede { font-size: 19px; color: var(--ink-2); max-width: 560px; line-height: 1.5; }
.hero-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 24px; margin-top: 26px; color: var(--muted); font-size: 13px; }
.hero-meta .check { color: var(--green); }
.hero-meta div { display: inline-flex; align-items: center; gap: 6px; }

/* Hero visual */
.hero-visual { position: relative; height: 560px; }
.hero-dashboard {
  position: absolute; right: 0; top: 20px; width: 540px; max-width: 100%;
  background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(1.2deg);
}
.hero-phone {
  position: absolute; left: -20px; bottom: 10px; width: 240px; z-index: 2;
  transform: rotate(-4deg);
  filter: drop-shadow(0 30px 40px rgba(26,22,19,.18));
}

/* Dashboard mock */
.dash-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; background: #d9cdbb; }
.dash-dot.r { background: #e9a497; } .dash-dot.y { background: #e9c97a; } .dash-dot.g { background: #9ac49a; }
.dash-url { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--card); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.dash-body { padding: 18px; display: grid; gap: 14px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; }
.dash-head h5 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; }
.dash-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dash-stat .n { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.dash-stat .l { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dash-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dash-row { display: grid; grid-template-columns: 1.3fr 1fr .7fr .9fr; gap: 10px; padding: 10px 12px; font-size: 13px; align-items: center; border-top: 1px solid var(--line); }
.dash-row:first-child { border-top: 0; background: var(--bg-2); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.flag { display: inline-flex; align-items: center; gap: 8px; }
.flag-sq { width: 18px; height: 12px; border-radius: 2px; border: 1px solid var(--line); background: linear-gradient(180deg, #ef4444 33%, #fff 33%, #fff 66%, #3b82f6 66%); }
.flag-sq.uk { background: #012169; position: relative; overflow: hidden; }
.flag-sq.uk::before { content:""; position:absolute; inset:0; background: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%); }
.flag-sq.de { background: linear-gradient(180deg, #000 33%, #dd0000 33%, #dd0000 66%, #ffcc00 66%); }
.flag-sq.jp { background: #fff; position: relative; }
.flag-sq.jp::after { content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:#bc002d; transform: translate(-50%, -50%); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); }
.pill.success { background: #e8f1ec; color: var(--green); }
.pill.pending { background: #fbefe1; color: #a6691a; }
.pill.draft { background: var(--bg-2); color: var(--muted); }
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Sections */
section { padding: 96px 0; }
.section-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.section-eyebrow::after { content: ""; height: 1px; background: var(--line-2); flex: 1; }
.section-title { max-width: 820px; }
.section-title p.lede { font-size: 20px; color: var(--ink-2); margin-top: 18px; line-height: 1.5; }

/* Before / After */
.ba { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.ba-card { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; }
.ba-card.bad { background: #F9F4ED; }
.ba-head { padding: 20px 24px; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; }
.ba-head .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 4px 9px; border-radius: 4px; }
.ba-head .tag.bad { background: #f4e0db; color: var(--red); }
.ba-head .tag.good { background: #e1efe7; color: var(--green); }
.ba-head h3 { font-size: 22px; }
.ba-time { font-family: var(--font-display); font-weight: 450; font-size: 36px; letter-spacing: -0.02em; }
.ba-body { padding: 10px 0; }
.ba-step { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 24px; border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent); font-size: 15px; }
.ba-step:first-child { border-top: 0; }
.ba-step .ix { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ba-step .mt { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ba-step.bad .ix { color: var(--red); }
.ba-step.good .ix { color: var(--green); }
.ba-step strong { font-weight: 500; }

/* How it works */
.how { position: relative; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; position: relative; }
.how-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; position: relative; overflow: hidden; }
.how-step .num { font-family: var(--font-display); font-size: 64px; font-weight: 400; color: var(--orange); line-height: 1; letter-spacing: -0.04em; }
.how-step h3 { margin: 18px 0 10px; }
.how-step p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.how-step .visual { margin-top: 24px; height: 160px; background: var(--bg-2); border: 1px dashed var(--line-2); border-radius: 12px; overflow: hidden; position: relative; }

/* Calculator */
.calc { background: var(--ink); color: #FBF7F2; border-radius: 0; border-top: 1px solid #2a221c; border-bottom: 1px solid #2a221c; }
.calc h2 { color: #FBF7F2; }
.calc .section-eyebrow::after { background: #3a2f27; }
.calc .eyebrow { background: transparent; color: #c7b9a8; border-color: #3a2f27; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; align-items: center; }
.calc-controls { display: flex; flex-direction: column; gap: 28px; }
.calc-ctrl label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc-ctrl label .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #c7b9a8; }
.calc-ctrl label .v { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; color: #fff; }
.calc-ctrl input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: #3a2f27; border-radius: 999px; outline: none;
}
.calc-ctrl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); cursor: grab; border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--orange); }
.calc-ctrl input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); cursor: grab; border: 3px solid var(--ink); }
.calc-result { background: #231d18; border: 1px solid #3a2f27; border-radius: var(--radius-lg); padding: 36px; }
.calc-result .row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed #3a2f27; }
.calc-result .row:last-child { border-bottom: 0; }
.calc-result .row .k { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #c7b9a8; }
.calc-result .row .v { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; color: #fff; }
.calc-result .row .v.hero { font-size: 56px; color: var(--orange); }
.calc-result .row .v.sm { font-size: 20px; }

/* Feature sections */
.fdeep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 56px 0; }
.fdeep-row + .fdeep-row { border-top: 1px solid var(--line); }
.fdeep-row.rev { direction: rtl; }
.fdeep-row.rev > * { direction: ltr; }
.fdeep-row h3 { margin: 12px 0 14px; }
.fdeep-row p { color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.fdeep-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fdeep-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 15px; }
.fdeep-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.fdeep-vis { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; min-height: 380px; }

/* Chrome extension mock */
.chrome-mock { padding: 20px; }
.chrome-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ext-popup { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-top: 14px; max-width: 320px; margin-left: auto; position: relative; }
.ext-popup::before { content:""; position: absolute; top: -8px; right: 40px; width: 14px; height: 14px; background: var(--bg-2); border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); }
.ext-popup h6 { margin: 0 0 10px; font-family: var(--font-display); font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ext-guest { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 12px; }
.ext-btn { margin-top: 10px; width: 100%; padding: 10px; background: var(--orange); color: #1A1613; border-radius: 8px; font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Form mock */
.form-mock { padding: 26px; }
.form-field { margin-bottom: 12px; }
.form-field .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 4px; }
.form-field .i { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--ink); }
.form-field .i.focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(243,146,64,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Pricing */
.pricing-wrap { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing-top { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 32px; gap: 24px; flex-wrap: wrap; }
.price-toggle { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; font-size: 13px; }
.price-toggle button { padding: 8px 16px; border-radius: 999px; color: var(--muted); font-weight: 500; }
.price-toggle button.on { background: var(--ink); color: #FBF7F2; }
.price-toggle .save { margin-left: 6px; background: var(--orange-soft); color: #8a4a15; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; }

.pricing-grid { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 0; margin-top: 40px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pcol { padding: 28px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 540px; position: relative; }
.pcol:first-child { border-left: 0; background: var(--bg-2); }
.pcol.featured { background: #FFF7EF; }
.pcol.ltd { background: var(--ink); color: #FBF7F2; }
.pcol.ltd h4, .pcol.ltd .pname { color: #fff; }
.pcol.ltd .ptag { color: var(--orange); }
.pcol .ribbon { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--orange); color: #1A1613; }
.pcol .ribbon.dark { background: var(--orange); color: #1A1613; }
.pcol .pname { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.pcol .ptag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.pcol .pprice { font-family: var(--font-display); font-size: 42px; font-weight: 450; letter-spacing: -0.03em; line-height: 1; }
.pcol .pprice .unit { font-size: 14px; font-family: var(--font-sans); color: var(--muted); font-weight: 400; margin-left: 4px; letter-spacing: 0; }
.pcol.ltd .pprice .unit { color: #c7b9a8; }
.pcol .psub { font-size: 13px; color: var(--muted); margin-top: 6px; min-height: 38px; }
.pcol.ltd .psub { color: #c7b9a8; }
.pcol ul.pfeat { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.pcol ul.pfeat li { font-size: 14px; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.pcol.ltd ul.pfeat li { color: #d9cdbb; }
.pcol ul.pfeat svg { flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.pcol .pcta { margin-top: auto; padding-top: 22px; }

/* LTD bar */
.ltd-progress { background: #3a2f27; height: 6px; border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.ltd-progress .bar { height: 100%; background: linear-gradient(90deg, var(--orange), #ffb36b); border-radius: 999px; }
.ltd-caption { font-family: var(--font-mono); font-size: 11px; color: #c7b9a8; text-transform: uppercase; letter-spacing: .08em; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; margin-top: 48px; }
.faq-item { border-top: 1px solid var(--line); padding: 22px 0; cursor: pointer; }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.015em; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform .2s ease; color: var(--orange); flex: 0 0 auto; }
.faq-item[open] summary .chev { transform: rotate(45deg); }
.faq-item p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 620px; }

/* CTA final */
.final-cta { background: var(--ink); color: #FBF7F2; position: relative; overflow: hidden; }
.final-cta h2 { color: #fff; }
.final-cta .container { position: relative; z-index: 1; }
.final-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.final-cta .ghost { border-color: #3a2f27; color: #FBF7F2; }
.final-cta .ghost:hover { background: #231d18; }
.final-blob { position: absolute; right: -100px; top: -50px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(243,146,64,.35), transparent 60%); pointer-events: none; }

/* Contact */
.contact-form { display: grid; gap: 12px; background: #231d18; border: 1px solid #3a2f27; border-radius: var(--radius-lg); padding: 24px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form input, .contact-form textarea {
  background: var(--ink); border: 1px solid #3a2f27; border-radius: 10px; padding: 12px 14px;
  color: #FBF7F2; font: inherit; font-size: 14px; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--orange); }
.contact-form textarea { resize: vertical; min-height: 110px; }

/* Footer */
footer.site { padding: 40px 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-grid h6 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 14px; font-weight: 500; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--ink-2); font-size: 14px; }
.footer-grid a:hover { color: var(--orange-2); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Reveal — staggered when multiple .reveal elements are siblings inside
   the same section. nth-of-type counts within the parent regardless of
   tag, so this works across .ba-grid, .how-grid, .pricing-grid, etc. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; transition-delay: 0ms; }
.reveal.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal:nth-of-type(2).revealed { transition-delay: 70ms; }
  .reveal:nth-of-type(3).revealed { transition-delay: 140ms; }
  .reveal:nth-of-type(4).revealed { transition-delay: 210ms; }
  .reveal:nth-of-type(5).revealed { transition-delay: 280ms; }
}

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { height: 480px; }
  .hero-dashboard { width: 100%; right: auto; left: 40px; }
  .hero-phone { left: -10px; width: 200px; }
  .ba-grid, .calc-grid, .fdeep-row, .final-grid, .faq-grid, .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pcol { min-height: auto; border-left: 0; border-top: 1px solid var(--line); }
  .how-grid { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .dash-row { grid-template-columns: 1fr 1fr; }
  .dash-row span:nth-child(3), .dash-row span:nth-child(4) { display: none; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
  h1 { font-size: 44px; }
  .nav a.nav-link { display: none; }
}

/* LTD waitlist modal */
.ltd-modal { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; max-width: 440px; box-shadow: var(--shadow-lg); background: var(--card); color: var(--ink); font-family: var(--font-sans); }
.ltd-modal::backdrop { background: rgba(26,22,19,.55); }
.ltd-modal h3 { margin: 0 0 10px; }
.ltd-modal p { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; }
.ltd-modal label { display:block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.ltd-modal input, .ltd-modal textarea { display:block; width:100%; margin-top: 4px; padding: 10px 12px; border:1px solid var(--line); border-radius: 8px; font: inherit; font-size:14px; background: var(--bg); color: var(--ink); font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.ltd-modal button[type=submit] { margin-top: 6px; width: 100%; }
.ltd-close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }