/*
  Better Search Lab — the one hand-written stylesheet.
  No build step, no framework. "Daylight" design system (shared with the product).
  Light, high-contrast, typographically loud: huge Hanken display type, pill
  controls, a floating pill nav, big framed product imagery, and one deep-ink
  section for contrast. Colour is reserved for data + one evergreen accent.

  Width discipline: every section's content shares ONE column (.wrap). The only
  deliberate exception is the full-bleed ink band, which is symmetric, so nothing
  ever ends up with a ragged right edge.
*/

/* ---------------------------------------------------------------------- */
/* Font — one self-hosted variable woff2 (weights 100–900 in one file).   */
/* ---------------------------------------------------------------------- */
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2-variations"),
      url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");
}

/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */
:root{
  --n-50:#f6f7f9; --n-100:#eef0f3; --n-200:#e7e9ee; --n-300:#d9dce3;
  --n-400:#b8bec9; --n-500:#8b93a0; --n-600:#6b7280; --n-700:#565e6b;
  --n-800:#2b313b; --n-900:#12151b; --n-950:#0a0c10;

  --accent:#157f5c; --accent-strong:#10684c; --accent-tint:#e9f4ef;
  --up:#157f5c; --down:#c24457;

  --ground:var(--n-50); --ink:var(--n-900); --body:var(--n-700); --muted:var(--n-600); /* n-600 keeps small text at AA contrast on the ground */
  --hairline:var(--n-200);
  --radius:12px; --radius-lg:18px; --radius-xl:28px;

  --shadow-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-pop:0 2px 6px rgba(16,24,40,.06), 0 20px 44px -14px rgba(16,24,40,.22);
  --shadow-float:0 10px 22px rgba(16,24,40,.10), 0 64px 96px -28px rgba(16,24,40,.42);

  --maxw:1160px;
  --section:clamp(56px,7vw,104px);
  color-scheme:light;
}

/* ---------------------------------------------------------------------- */
/* Reset & base                                                            */
/* ---------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html{ font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-size:1.09rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[id]{ scroll-margin-top:6rem; }
img{max-width:100%;display:block;}
a{color:inherit;}

/* Type scale. Display type is for page titles and section statements only;
   sequences (features, steps, questions) use the medium scale so hierarchy
   comes from contrast, not from everything being huge. */
h1,h2,h3{ color:var(--ink); margin:0; text-wrap:balance; font-weight:800; }
h1{ font-size:clamp(3rem,1.1rem + 7.8vw,6.75rem); line-height:0.94; letter-spacing:-0.045em; }
h2{ font-size:clamp(2.15rem,1.2rem + 4vw,3.85rem); line-height:0.99; letter-spacing:-0.038em; }
h3{ font-size:1.2rem; line-height:1.28; letter-spacing:-0.015em; font-weight:700; }
.h-md{ font-size:clamp(1.9rem,1.2rem + 2.2vw,2.75rem); line-height:1.04; letter-spacing:-0.032em; font-weight:800; }
p{ margin:0; }
.txt{ color:var(--n-600); font-size:1.12rem; }
.txt + .txt{ margin-top:.85rem; }
.txt a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--n-400); text-underline-offset:.15em; }
.txt a:hover{ text-decoration-color:var(--accent); }
.txt code, .way code, .prose code{ font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; font-size:.9em; color:var(--ink); background:var(--n-100); border:1px solid var(--hairline); border-radius:6px; padding:.08em .38em; }

.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-0.02em; }

/* The one uppercase motif: the product's own lockup line and small data labels. */
.eyebrow{ display:inline-block; font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin:0; }
.lbl{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------------------------------------------------------------------- */
/* Layout primitives                                                       */
/* ---------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
main > section{ padding-block:var(--section); }
main > section:first-child{ padding-top:clamp(40px,6vw,72px); }

.skip{ position:absolute; left:12px; top:-52px; z-index:60; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:999px; transition:top .15s ease; }
.skip:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* Overflow safety — grid/flex children must be allowed to shrink. */
.split > *, .ink-section .wrap > *, .steps > li, .metric, .integ, .way, .two-col > *, .feature-head > *, .sec-head-row > *, .ledger-row > *, .foot-grid > *, .more-list > *, .ways > *{ min-width:0; }

/* ---------------------------------------------------------------------- */
/* Buttons — pills                                                         */
/* ---------------------------------------------------------------------- */
.btn,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.02rem; font-weight:650; line-height:1;
  padding:.95rem 1.6rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn{ background:var(--ink); color:#fff; }
.btn:hover{ background:#000; transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(10,12,16,.45); }
.btn-secondary{ background:#fff; color:var(--ink); border-color:var(--n-300); box-shadow:var(--shadow-1); }
.btn-secondary:hover{ border-color:var(--n-500); transform:translateY(-1px); }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.more{ display:inline-block; color:var(--accent-strong); font-weight:650; text-decoration:none; border-bottom:1px solid transparent; }
.more:hover{ border-color:currentColor; }

/* ---------------------------------------------------------------------- */
/* Header / floating pill nav                                             */
/* ---------------------------------------------------------------------- */
.site-head{ position:sticky; top:0; z-index:50; background:transparent; padding-top:14px; }
.head-inner{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  max-width:1000px; margin-inline:auto;
  padding:.55rem .6rem .55rem 1.15rem;
  background:#fff; border:1px solid var(--hairline); border-radius:999px; box-shadow:var(--shadow-1);
}
.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.brand-mark{ width:24px; height:24px; }
.brand-name{ font-weight:800; letter-spacing:-0.03em; color:var(--ink); font-size:1.02rem; }
.site-nav{ display:flex; align-items:center; gap:1.8rem; }
.site-nav ul{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.site-nav a{ text-decoration:none; color:var(--n-700); font-weight:550; font-size:.95rem; transition:color .15s ease; }
.site-nav a:hover, .site-nav a[aria-current=page]{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:1.1rem; }
.nav-ext{ text-decoration:none; color:var(--n-700); font-weight:550; font-size:.95rem; }
.nav-ext:hover{ color:var(--ink); }
.nav-cta{ background:var(--ink); color:#fff!important; padding:.55rem 1.05rem; border-radius:999px; font-weight:650; }
.nav-cta:hover{ background:#000; }
.nav-toggle{ display:none; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero{ padding-top:clamp(48px,6vw,88px)!important; padding-bottom:0!important; }
.hero-copy{ text-align:center; }
.hero .eyebrow{ margin-bottom:1.2rem; }
.hero h1{ max-width:14ch; margin-inline:auto; }
.hero .lede{ max-width:36rem; margin:1.5rem auto 0; font-size:clamp(1.15rem,1rem + .6vw,1.38rem); line-height:1.45; color:var(--n-600); }
.hero .cta-row{ justify-content:center; margin-top:2.2rem; }
.hero .btn,.hero .btn-secondary{ padding:1.05rem 1.85rem; font-size:1.08rem; }
.cost-note{ margin-top:1.4rem; font-size:.98rem; color:var(--muted); }
.cost-note .tnum{ color:var(--ink); font-weight:700; }
.cost-note a{ color:var(--accent-strong); text-decoration:none; font-weight:650; border-bottom:1px solid transparent; }
.cost-note a:hover{ border-color:currentColor; }

/* The hero shot sits in the same column as everything else; depth comes from the frame and shadow. */
.hero-shot{ margin-top:clamp(44px,5vw,72px); }
.hero-shot .shot{ box-shadow:var(--shadow-float); }

/* Screenshot frame — browser chrome + depth, no markup needed. */
.shot{
  position:relative; margin:0; background:#fff;
  border:1px solid var(--n-300); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); overflow:hidden; padding-top:42px;
}
.shot::before{ content:""; position:absolute; top:0; left:0; right:0; height:42px; border-bottom:1px solid var(--n-200); background:#f9fafb; }
.shot::after{ content:""; position:absolute; top:17px; left:18px; width:9px; height:9px; border-radius:50%; background:#d5d9e0; box-shadow:16px 0 #d5d9e0, 32px 0 #d5d9e0; }
.shot img{ display:block; width:100%; height:auto; }

/* ---------------------------------------------------------------------- */
/* Metric band                                                             */
/* ---------------------------------------------------------------------- */
.metric-strip{ padding-block:clamp(40px,5vw,64px)!important; }
.metric-band{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--n-200); border:1px solid var(--n-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-pop); }
.metric{ background:#fff; padding:1.6rem 1.4rem; text-align:left; }
.metric .lbl{ margin-bottom:.55rem; }
.metric .val{ display:block; font-size:clamp(1.7rem,1.2rem + 1.2vw,2.3rem); font-weight:800; color:var(--ink); line-height:1; letter-spacing:-0.03em; }
.strip-note{ margin-top:1rem; text-align:right; font-size:.9rem; }
.strip-note a{ color:var(--muted); text-decoration:none; }
.strip-note a:hover{ color:var(--ink); }

/* ---------------------------------------------------------------------- */
/* The ledger — the loudest moment on the site                             */
/* ---------------------------------------------------------------------- */
.compare{ padding-block:clamp(72px,9vw,128px)!important; }
.compare h2{ max-width:26ch; }
.nowrap{ white-space:nowrap; }
.ledger{ margin-top:clamp(2rem,4vw,3.5rem); border-top:1px solid var(--n-300); }
.ledger-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem clamp(1.5rem,4vw,4rem); align-items:start; padding:clamp(1.7rem,3vw,2.7rem) 0; border-bottom:1px solid var(--n-300); }
.ledger .who{ font-size:clamp(1.25rem,1rem + .9vw,1.7rem); font-weight:750; color:var(--ink); letter-spacing:-0.025em; line-height:1.15; }
.ledger .note{ grid-column:1; color:var(--n-600); font-size:1.08rem; max-width:44ch; }
.ledger .price{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:clamp(3.4rem,1.4rem + 7.4vw,8.25rem); font-weight:800; letter-spacing:-0.055em; line-height:.95; color:var(--ink); text-align:right; white-space:nowrap; }
.ledger .price span{ font-size:.3em; font-weight:650; color:var(--muted); letter-spacing:-0.02em; margin-left:.08em; }
.ledger-row.us .price{ color:var(--accent-strong); }
.ledger-row.us .price span{ color:var(--accent); }
.ledger-foot{ margin-top:1.4rem; color:var(--muted); font-size:.98rem; }

/* ---------------------------------------------------------------------- */
/* Section heads + splits                                                  */
/* ---------------------------------------------------------------------- */
.sec-head{ max-width:36rem; }
.sec-head p{ margin-top:1.1rem; color:var(--n-600); font-size:1.15rem; }
.sec-head-row{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1rem clamp(1.5rem,4vw,4rem); align-items:end; }
.sec-head-row .txt{ max-width:40rem; }
.lede{ color:var(--n-600); }

.split{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.28fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split.reverse{ grid-template-columns:minmax(0,1.28fr) minmax(0,0.9fr); }
.split.reverse .split-media{ order:-1; }
.split-copy .txt{ margin-top:1.2rem; }
.split-copy .more{ margin-top:1.5rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.chip{ font-size:.9rem; font-weight:600; color:var(--n-700); background:#fff; border:1px solid var(--hairline); border-radius:999px; padding:.45rem .95rem; }

/* ---------------------------------------------------------------------- */
/* Feature grid (home) — plain blocks separated by hairlines               */
/* ---------------------------------------------------------------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; margin-top:3rem; }
.feature-grid article{ background:#fff; padding:1.8rem 1.6rem; }
.feature-grid p{ margin-top:.7rem; color:var(--n-600); font-size:1rem; }
.section-link{ display:inline-block; margin-top:2rem; color:var(--accent-strong); font-weight:650; text-decoration:none; border-bottom:1px solid transparent; }
.section-link:hover{ border-color:currentColor; }

/* ---------------------------------------------------------------------- */
/* Feature rows (Features page) — statement, then a big product panel      */
/* ---------------------------------------------------------------------- */
.feature-row{ padding-block:clamp(48px,6vw,88px)!important; }
.feature-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem clamp(1.5rem,4vw,4rem); align-items:start; }
.feature-head .txt{ max-width:40rem; }
.feature-row .shot{ margin-top:clamp(1.8rem,3.5vw,3rem); }
.feature-row .chips{ margin-top:1.2rem; }
.covers{ margin-top:1rem; font-size:.95rem; color:var(--muted); }

.more-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,4vw,4rem); border-top:1px solid var(--n-300); margin-top:clamp(2rem,4vw,3.2rem); }
.more-list article{ padding:1.7rem 0; border-bottom:1px solid var(--hairline); }
.more-list h3{ font-size:1.32rem; letter-spacing:-0.02em; }
.more-list p{ margin-top:.6rem; color:var(--n-600); font-size:1.02rem; max-width:52ch; }
.more-list .code{ margin-top:1rem; }

/* ---------------------------------------------------------------------- */
/* How it works / install                                                  */
/* ---------------------------------------------------------------------- */
.steps{ list-style:none; counter-reset:step; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.steps li{ counter-increment:step; background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:1.8rem; position:relative; }
.steps li::before{ content:counter(step); display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:999px; background:var(--ink); color:#fff; font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums; margin-bottom:1.1rem; }
.steps strong{ display:block; color:var(--ink); font-size:1.1rem; font-weight:700; margin-bottom:.5rem; letter-spacing:-0.01em; }
.steps p{ color:var(--n-600); font-size:1rem; }

.ways{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-top:2.4rem; }
.way{ background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:1.7rem; display:flex; flex-direction:column; gap:1rem; }
.way h3{ font-size:1.3rem; letter-spacing:-0.02em; }
.way p{ color:var(--n-600); font-size:1.02rem; }
.way .code + .code{ margin-top:-.3rem; }
.two-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem clamp(2rem,4vw,4rem); }
.two-col h3{ font-size:1.4rem; letter-spacing:-0.02em; }
.two-col .h-md + .txt, .two-col h3 + .txt{ margin-top:.9rem; }
.two-col .code{ margin-top:1.2rem; }
.demo-card{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:2rem; display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; box-shadow:var(--shadow-pop); }
.demo-card h3{ color:#fff; font-size:1.4rem; }
.demo-card p{ color:var(--n-400); font-size:1.02rem; }
.demo-card .btn{ background:#fff; color:var(--ink); margin-top:auto; }
.demo-card .btn:hover{ background:var(--n-100); }

/* ---------------------------------------------------------------------- */
/* Code / command block                                                    */
/* ---------------------------------------------------------------------- */
.code{ display:flex; align-items:center; gap:1rem; justify-content:space-between; background:var(--n-100); border:1px solid var(--hairline); border-radius:12px; padding:.85rem 1rem; }
/* The command scrolls inside its own box, so the Copy button never leaves the viewport. */
.code code{ display:block; flex:1 1 auto; min-width:0; overflow-x:auto; padding-block:.15rem; font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; font-size:.9rem; color:var(--n-800); white-space:pre; scrollbar-width:thin; }
.copy{ flex:none; font-family:inherit; font-size:.82rem; font-weight:650; cursor:pointer; background:#fff; color:var(--n-700); border:1px solid var(--n-300); border-radius:999px; padding:.4rem .85rem; transition:border-color .15s ease, color .15s ease; }
.copy:hover{ color:var(--ink); border-color:var(--n-500); }
/* The featured one-liner: the biggest, most copyable thing on the Install page. */
.code-lg{ margin-top:2.4rem; padding:1.25rem 1.4rem; border-radius:16px; background:#fff; border:1px solid var(--n-300); box-shadow:var(--shadow-pop); }
.code-lg code{ font-size:clamp(.9rem,.8rem + .3vw,1.02rem); color:var(--ink); }
.code-lg .copy{ padding:.55rem 1.05rem; font-size:.9rem; background:var(--ink); color:#fff; border-color:var(--ink); }
.code-lg .copy:hover{ background:#000; color:#fff; }

/* ---------------------------------------------------------------------- */
/* Integrations grid                                                       */
/* ---------------------------------------------------------------------- */
.integrations{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:3rem; }
.integ{ background:#fff; border:1px solid var(--hairline); border-radius:var(--radius); padding:1.25rem 1.3rem; }
.integ .name{ color:var(--ink); font-weight:700; font-size:1.05rem; letter-spacing:-0.02em; }
.integ .role{ color:var(--muted); font-size:.88rem; margin-top:.35rem; }
.integ.primary{ grid-column:span 2; background:var(--accent-tint); border-color:#cfe6dc; }
.integ.primary .name{ color:var(--accent-strong); font-size:1.2rem; }
.integ.primary .role{ color:var(--accent-strong); }

/* ---------------------------------------------------------------------- */
/* Costs card — a receipt                                                  */
/* ---------------------------------------------------------------------- */
.cost-card{ margin-top:2.4rem; background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden; }
.cost-card table{ width:100%; border-collapse:collapse; }
.cost-card th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; padding:1.1rem 1.5rem .8rem; }
.cost-card th:last-child{ text-align:right; }
.cost-card td{ padding:1.05rem 1.5rem; border-top:1px solid var(--n-100); color:var(--n-700); font-size:1.02rem; }
.cost-card tr td:last-child{ text-align:right; color:var(--ink); font-weight:700; white-space:nowrap; }
.cost-note-2{ margin-top:1.3rem; color:var(--n-600); font-size:1.02rem; }
.cost-note-2 a{ color:var(--accent-strong); font-weight:650; text-decoration:none; }
.cost-note-2 a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* Deep-ink section                                                        */
/* ---------------------------------------------------------------------- */
.ink-section{ background:var(--n-950); color:var(--n-300); }
.ink-section .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ink-section h2{ color:#fff; }
.ink-section .txt{ margin-top:1.2rem; color:var(--n-400); max-width:32rem; }
.ink-section .cta-row{ margin-top:2rem; }
.ink-section .btn{ background:#fff; color:var(--n-950); }
.ink-section .btn:hover{ background:var(--n-100); }
.ink-section .btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); box-shadow:none; }
.ink-section .btn-secondary:hover{ border-color:rgba(255,255,255,.6); }
.terminal{ background:#05070a; border:1px solid #20262f; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 34px 64px -22px rgba(0,0,0,.6); }
.terminal .bar{ display:flex; align-items:center; gap:.4rem; padding:.85rem 1rem; border-bottom:1px solid #171c24; }
.terminal .bar i{ width:9px; height:9px; border-radius:50%; background:#2b323c; display:block; }
.terminal .bar span{ margin-left:.6rem; font-size:.78rem; color:var(--n-500); font-family:ui-monospace,monospace; }
.terminal pre{ margin:0; padding:1.15rem 1.25rem; overflow-x:auto; }
.terminal code{ font-family:ui-monospace,"SF Mono",monospace; font-size:.86rem; line-height:1.65; color:#c7f0dd; white-space:pre-wrap; word-break:break-all; }
.terminal .muted{ color:var(--n-500); }

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                           */
/* ---------------------------------------------------------------------- */
.faq{ margin-top:2.8rem; border-top:1px solid var(--n-300); }
.faq-group{ margin-top:clamp(2.4rem,4vw,3.6rem); }
.faq-group .h-md{ margin-bottom:1rem; }
.faq-group .faq{ margin-top:0; }
.qa{ border-bottom:1px solid var(--hairline); }
.qa summary{ list-style:none; cursor:pointer; padding:1.3rem 0; display:flex; justify-content:space-between; gap:1rem; font-weight:700; color:var(--ink); font-size:1.18rem; letter-spacing:-0.015em; line-height:1.3; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; color:var(--muted); font-weight:400; font-size:1.5rem; line-height:1; flex:none; transition:transform .2s ease; }
.qa[open] summary::after{ transform:rotate(45deg); }
.qa p{ padding:0 0 1.4rem; color:var(--n-600); max-width:62ch; }
.faq-more{ margin-top:2.2rem; color:var(--n-600); }
.faq-more a{ color:var(--accent-strong); font-weight:650; text-decoration:none; }
.faq-more a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* Final CTA                                                               */
/* ---------------------------------------------------------------------- */
.final-cta{ text-align:center; }
.final-cta .inner{ background:var(--ink); color:#fff; border-radius:var(--radius-xl); padding:clamp(3.5rem,7vw,6rem) 1.5rem; box-shadow:var(--shadow-float); }
.final-cta h2{ color:#fff; max-width:16ch; margin-inline:auto; }
.final-cta .cta-row{ justify-content:center; margin-top:2.2rem; }
.final-cta .btn{ background:#fff; color:var(--ink); }
.final-cta .btn:hover{ background:var(--n-100); }
.final-cta .btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); box-shadow:none; }
.final-cta .btn-secondary:hover{ border-color:rgba(255,255,255,.6); }
.final-cta .sub{ margin-top:1.3rem; color:var(--n-400); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-foot{ background:#fff; border-top:1px solid var(--hairline); padding-block:clamp(56px,7vw,88px) 2rem; margin-top:0; }
/* Brand + sign-up on the left, three link columns on the right: four items, four tracks. */
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr)); gap:2.5rem clamp(2rem,4vw,4rem); align-items:start; }
.foot-brand .tag{ margin-top:1.1rem; color:var(--n-600); max-width:30ch; font-size:1.02rem; }
.foot-label{ display:block; margin-bottom:.9rem; color:var(--ink); font-weight:700; font-size:.95rem; letter-spacing:-0.01em; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.site-foot a{ text-decoration:none; color:var(--n-600); font-size:.95rem; }
.site-foot a:hover{ color:var(--ink); }
.subscribe{ margin-top:1.8rem; max-width:26rem; }
.subscribe .foot-label{ margin-bottom:.5rem; }
.subscribe-row{ display:flex; gap:.5rem; }
.subscribe input[type=email]{ flex:1 1 auto; min-width:0; padding:.7rem 1rem; border:1px solid var(--n-300); border-radius:999px; font:inherit; font-size:.95rem; background:#fff; color:var(--ink); }
.subscribe input[type=email]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.subscribe button{ flex:none; font:inherit; font-weight:650; font-size:.95rem; padding:.7rem 1.2rem; border:0; border-radius:999px; background:var(--ink); color:#fff; cursor:pointer; }
.subscribe button:hover{ background:#000; }
.subscribe-msg{ margin-top:.5rem; font-size:.88rem; color:var(--accent-strong); }
.subscribe-msg:empty{ display:none; }
.subscribe-note{ margin-top:.6rem; font-size:.85rem; color:var(--muted); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.foot-legal{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--n-100); display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; }
.foot-legal p{ color:var(--muted); font-size:.85rem; }

/* ---------------------------------------------------------------------- */
/* Interior page helpers                                                   */
/* ---------------------------------------------------------------------- */
.page-head{ padding-top:clamp(40px,6vw,72px)!important; padding-bottom:clamp(20px,3vw,36px)!important; }
.page-head h1{ max-width:22ch; }
.page-head .lede{ max-width:40rem; margin-top:1.4rem; font-size:clamp(1.15rem,1rem + .6vw,1.35rem); line-height:1.45; }
.page-head .lede + .lede{ margin-top:.8rem; }
.after-head{ padding-top:clamp(16px,3vw,40px)!important; }
.notfound{ text-align:center; padding-block:clamp(96px,13vw,180px); }
.notfound h1{ margin-bottom:1rem; margin-inline:auto; }
.notfound p{ color:var(--n-600); font-size:1.2rem; }
.notfound .cta-row{ justify-content:center; margin-top:2.2rem; }
.prose{ max-width:44rem; }
.prose p{ margin-top:.9rem; color:var(--n-600); }
.prose .h-md{ margin-top:2.6rem; }
.prose a{ color:var(--ink); }
.privacy-updated{ margin-top:2.6rem; color:var(--muted); font-size:.95rem; }

/* ---------------------------------------------------------------------- */
/* Motion — one restrained page-load reveal                                */
/* ---------------------------------------------------------------------- */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.hero .eyebrow{ animation:rise .5s ease both; }
.hero h1{ animation:rise .65s ease .05s both; }
.hero .lede{ animation:rise .65s ease .13s both; }
.hero .cta-row{ animation:rise .65s ease .2s both; }
.hero .cost-note{ animation:rise .65s ease .26s both; }
.hero-shot{ animation:rise .8s ease .32s both; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width:900px){
  .split,.ink-section .wrap{ grid-template-columns:1fr; gap:2rem; }
  .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-head,.sec-head-row,.two-col,.more-list,.ways{ grid-template-columns:minmax(0,1fr); }
  .feature-head,.sec-head-row{ gap:.8rem; }
  .steps{ grid-template-columns:1fr; }
  .integrations{ grid-template-columns:repeat(2,1fr); }
  .integ.primary{ grid-column:span 2; }
  .metric-band{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0 10px; background:none; border:1px solid var(--n-300); border-radius:999px; cursor:pointer; }
  .nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded=true] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded=true] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded=true] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .site-nav{ position:absolute; left:0; right:0; top:calc(100% + 10px); flex-direction:column; align-items:stretch; gap:0; background:#fff; border:1px solid var(--hairline); border-radius:20px; box-shadow:var(--shadow-pop); padding:.5rem 1rem 1.1rem; display:none; }
  .site-nav.open{ display:flex; }
  .site-nav ul{ flex-direction:column; gap:0; }
  .site-nav ul li{ border-bottom:1px solid var(--n-100); }
  .site-nav ul a{ display:block; padding:.9rem .2rem; font-size:1.05rem; }
  .nav-actions{ margin-top:.9rem; gap:1.4rem; padding-inline:.2rem; }
  .hero .lede{ max-width:30rem; }
}
@media (max-width:560px){
  .feature-grid,.integrations{ grid-template-columns:1fr; }
  .integ.primary{ grid-column:span 1; }
  .metric-band{ grid-template-columns:repeat(2,1fr); }
  .metric{ padding:1.25rem 1.1rem; }
  .cta-row{ width:100%; }
  .hero .btn,.hero .btn-secondary{ flex:1; }
  .ledger-row{ grid-template-columns:1fr; gap:.4rem; }
  .ledger .price{ grid-column:1; grid-row:auto; text-align:left; margin-top:.4rem; }
  .foot-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .subscribe{ max-width:none; }
  .cost-card th,.cost-card td{ padding-inline:1rem; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* Install lead sits right under the page head. */
.install-lead{ padding-top:clamp(8px,2vw,24px)!important; }