/* ─────────────────────────────────────────────────────────────────────────
   AutoFetch — design system.

   hora's visual language (horacal.app), taken from their stylesheet rather
   than a screenshot: Geist for everything, Newsreader for the editorial
   voice, a near-white ground, and — the rule that does most of the work —
   SURFACES SEPARATE BY LINE, NOT BY LIFT. Almost no drop shadows. That one
   decision is what makes a web page read as a Mac app.

   The palette departs from hora's in exactly one place: their accent is red,
   ours is green, because on this site the accent's whole job is to mark
   money — "£1,840 under" — and red already means the opposite to a dealer.
   ───────────────────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  --bg: #fafafa;        --panel: #efeff1;      --raise: #ffffff;
  --text: #171b20;      --muted: #5b6471;
  --line: #171b201f;    --line-strong: #171b2033;
  --overlay: #171b200b; --overlay-strong: #171b2016; --dim: #171b206b;
  --accent: #0a7c4a;    --accent-hover: #096640;   --border: #c0c4cc;
  --btn-fg: #fafafa;    --field: #ffffff;
  /* verdicts — the board's own vocabulary, kept identical here */
  --v-definitely: #0a7c4a;  --v-buy: #1668c9;  --v-negotiate: #b07d05;
  --v-maybe: #5b6471;       --v-avoid: #cc272c;
  --warn-bg: #fdf6e4;
}
[data-theme="dark"] {
  --bg: #0a0a0a;        --panel: #141416;      --raise: #131315;
  --text: #fafafa;      --muted: #a4abb8;
  --line: #fafafa17;    --line-strong: #fafafa24;
  --overlay: #fafafa0a; --overlay-strong: #fafafa12; --dim: #fafafa52;
  --accent: #35c98a;    --accent-hover: #2bb87c;   --border: #27292f;
  --btn-fg: #0a0a0a;    --field: #101114;
  --v-definitely: #35c98a;  --v-buy: #4c9bf5;  --v-negotiate: #e0a92a;
  --v-maybe: #a4abb8;       --v-avoid: #ff6568;
  --warn-bg: #241f10;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,p,figure,table { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
button,input,select,textarea { font: inherit; letter-spacing: inherit; }
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .07s ease, opacity .07s ease; }
a.link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
         text-decoration-color: var(--line-strong); }
a.link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── type ─────────────────────────────────────────────────────────────── */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ed  { font-family: Newsreader, Georgia, "Times New Roman", serif; font-weight: 500; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

.h-hero { font-size: 78px; line-height: 78px; letter-spacing: -0.055em; font-weight: 600; }
.h-1 { font-size: 46px; line-height: 50px; letter-spacing: -0.045em; font-weight: 600; }
.h-2 { font-size: 38px; line-height: 44px; letter-spacing: -0.038em; font-weight: 600; }
.h-3 { font-size: 28px; line-height: 34px; letter-spacing: -0.035em; font-weight: 600; }
.h-4 { font-size: 19px; line-height: 26px; letter-spacing: -0.025em; font-weight: 600; }
.h-5 { font-size: 16px; line-height: 23px; letter-spacing: -0.02em;  font-weight: 600; }
.lede { font-size: 20px; line-height: 31px; letter-spacing: -0.015em; color: var(--muted); }
.body-sm { font-size: 14.4px; line-height: 22.4px; color: var(--muted); }
.tiny { font-size: 12.5px; line-height: 18px; color: var(--dim); }
.muted { color: var(--muted); } .dimtext { color: var(--dim); }
.eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: -0.01em;
           color: var(--accent); }
.fig-xl { font-size: 68px; line-height: 70px; letter-spacing: -0.05em; font-weight: 600; }
.fig-l  { font-size: 46px; line-height: 50px; letter-spacing: -0.04em; font-weight: 600; }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 40px; }
.section { padding: 64px 0; }
.section-tight { padding: 46px 0; }
.rule-top { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.grow { flex-grow: 1; min-width: 0; }
.shrink0 { flex-shrink: 0; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 56px; }
.split-wide { grid-template-columns: 1.15fr 1fr; }
.split > *, .fgrid > *, .stat-grid > * { min-width: 0; }

/* Section heading block. Two columns on desktop — heading left, lede right,
   sharing a baseline — because a heading that uses half the page and leaves
   the other half blank is what makes a long page feel thin. */
.shead { display: grid; grid-template-columns: 1.05fr .95fr;
         gap: 6px 56px; align-items: end; margin-bottom: 38px; }
.shead > .eyebrow { grid-column: 1; grid-row: 1; }
.shead > .h-1, .shead > .h-2 { grid-column: 1; grid-row: 2; margin-top: 10px; }
.shead > .lede { grid-column: 2; grid-row: 2; margin-top: 0; align-self: end;
                 padding-bottom: 4px; }
/* A heading with no lede beside it would otherwise wrap hard inside half the
   page with nothing in the other half. Let it have the width instead. */
.shead:not(:has(> .lede)) > .h-1,
.shead:not(:has(> .lede)) > .h-2 { grid-column: 1 / -1; max-width: 940px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; border-radius: 999px; border: 1px solid transparent;
  height: 38px; padding: 0 17px; font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer; text-align: center;
  transition: background-color .08s ease, border-color .08s ease,
              color .08s ease, transform .08s ease, opacity .08s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0); }
.pill-lg { height: 48px; padding: 0 24px; font-size: 15px; gap: 10px; }
.pill-xl { height: 54px; padding: 0 28px; font-size: 16px; gap: 10px; }
.pill-solid { background: var(--text); color: var(--btn-fg); }
.pill-solid:hover { opacity: .88; color: var(--btn-fg); }
.pill-accent { background: var(--accent); color: #fff; }
.pill-accent:hover { background: var(--accent-hover); color: #fff; }
.pill-line { background: transparent; color: var(--text); border-color: var(--line-strong); }
.pill-line:hover { background: var(--overlay); border-color: var(--border); }
.pill:disabled, .pill[aria-disabled="true"] {
  background: var(--overlay-strong); color: var(--dim);
  cursor: not-allowed; transform: none; border-color: transparent;
}
.pill-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── surfaces ─────────────────────────────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
        background: var(--raise); }
.card-lg { border-radius: 16px; }
.card-flat { background: transparent; }
.panel { background: var(--panel); border-radius: 16px; }
.inset { background: var(--overlay); border-radius: 8px; padding: 16px 20px; }
.pad { padding: 26px 28px; }
.pad-lg { padding: 34px 36px; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 23px;
       padding: 0 9px; border-radius: 6px; background: var(--overlay-strong);
       font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tag-line { background: transparent; border: 1px solid var(--line-strong); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }

/* verdict pills — same five words the board uses */
.vd { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
      border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
      border: 1px solid currentColor; }
.vd-definitely { color: var(--v-definitely); } .vd-buy { color: var(--v-buy); }
.vd-negotiate  { color: var(--v-negotiate);  } .vd-maybe { color: var(--v-maybe); }
.vd-avoid      { color: var(--v-avoid); }
.vd .dot { background: currentColor; }

/* ── the Mac window ───────────────────────────────────────────────────── */
.window { border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
          background: var(--raise);
          box-shadow: 0 40px 90px -50px rgba(23,27,32,.5); }
[data-theme="dark"] .window { box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
.window-bar { display: flex; align-items: center; gap: 14px; padding: 11px 15px;
              border-bottom: 1px solid var(--line); background: var(--overlay); }
.lights { display: flex; gap: 7px; flex-shrink: 0; }
.lights span { width: 11px; height: 11px; border-radius: 50%; }
.urlpill { display: inline-flex; align-items: center; gap: 7px; height: 24px;
           padding: 0 12px; border-radius: 999px; background: var(--overlay-strong);
           font-size: 12px; color: var(--dim); }

/* ── the board replica ────────────────────────────────────────────────── */
.board { display: grid; grid-template-columns: 208px 1fr; min-height: 380px; }
.board-rail { background: var(--panel); border-right: 1px solid var(--line);
              padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; }
.rail-lbl { font-size: 11px; font-weight: 600; color: var(--dim); padding: 10px 10px 5px; }
.rail-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px;
            border-radius: 7px; font-size: 13px; cursor: default;
            transition: background-color .07s ease; }
.rail-row:hover { background: var(--overlay); }
.rail-row.on { background: var(--overlay-strong); font-weight: 600; }
.rail-row .n { margin-left: auto; font-size: 11.5px; color: var(--dim); font-weight: 500; }
.chip { width: 9px; height: 9px; border-radius: 2.5px; flex-shrink: 0; }

.board-main { display: flex; flex-direction: column; min-width: 0; }
.board-top { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
             border-bottom: 1px solid var(--line); }
.vrow { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
        padding: 12px 16px; border-bottom: 1px solid var(--line);
        transition: background-color .07s ease; }
.vrow:last-child { border-bottom: none; }
.vrow:hover { background: var(--overlay); }
.vrow .t { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.vrow .m { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.vrow .r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.under { font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.norank { font-size: 13px; color: var(--dim); }

/* ── feature grid (bare, no boxes — hora's pattern) ───────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 38px 40px; }
.fgrid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fgrid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 36px 32px; }
.feat { display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
        transition: transform .08s cubic-bezier(.2,.7,.2,1); }
.feat:hover { transform: translateY(-2px); }
.feat .ic { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent); }
.feat p { color: var(--muted); font-size: 14.6px; line-height: 22.5px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
             gap: 1px; background: var(--line); border: 1px solid var(--line);
             border-radius: 12px; overflow: hidden; }
.stat-grid > div { background: var(--bg); padding: 26px 24px; }
.stat { font-size: 38px; line-height: 42px; letter-spacing: -0.04em; font-weight: 600; }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); border-radius: 14px;
         overflow: hidden; }
.step { background: var(--bg); padding: 30px 28px; }
.step .no { display: grid; place-items: center; width: 27px; height: 27px;
            border-radius: 50%; background: var(--text); color: var(--btn-fg);
            font-size: 13px; font-weight: 600; margin-bottom: 16px; }

/* ── pricing ──────────────────────────────────────────────────────────── */
.price-card { border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.price-head { padding: 34px 36px 30px; border-bottom: 1px solid var(--line); }
.price-body { padding: 28px 36px 34px; }
.price-amt { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.tick-list li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0;
                font-size: 14.8px; line-height: 22px; }
.tick-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px;
               padding: 19px 2px; cursor: pointer; list-style: none;
               font-size: 16.5px; font-weight: 600; letter-spacing: -0.022em;
               transition: color .07s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .pm { flex-shrink: 0; width: 15px; height: 15px; color: var(--dim);
                   transition: transform .16s cubic-bezier(.2,.7,.2,1); }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 2px 21px; color: var(--muted); font-size: 15px; line-height: 24px;
            max-width: 680px; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent);
       backdrop-filter: saturate(180%) blur(14px);
       -webkit-backdrop-filter: saturate(180%) blur(14px);
       border-bottom: 1px solid transparent; transition: border-color .12s ease; }
.nav.stuck { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px;
          height: 60px; }
.navlinks { display: flex; align-items: center; gap: 26px; }
.navlink { font-size: 14px; font-weight: 500; color: var(--muted); }
.navlink:hover { color: var(--text); }
/* Sign in sits outside .navlinks so it is still there at phone width. */
.nav-signin { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 18.5px; font-weight: 600;
         letter-spacing: -0.035em; }
.brand svg { width: 22px; height: 22px; flex-shrink: 0; }
.theme-btn { display: grid; place-items: center; width: 34px; height: 34px;
             border-radius: 999px; border: 1px solid var(--line-strong);
             background: transparent; color: var(--muted); cursor: pointer;
             transition: background-color .07s ease, color .07s ease; }
.theme-btn:hover { background: var(--overlay); color: var(--text); }
.theme-btn .i-moon, .theme-btn .i-sun { display: none; width: 15px; height: 15px; }
html[data-theme="light"] .theme-btn .i-moon { display: block; }
html[data-theme="dark"]  .theme-btn .i-sun  { display: block; }
.navtoggle { display: none; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 56px 0 0; overflow: hidden; }
.aurora { position: absolute; left: 50%; top: -180px; width: 1240px; height: 820px;
          transform: translateX(-50%); pointer-events: none; z-index: 0;
          background-image:
            radial-gradient(ellipse 62% 68% at 40% 32%, oklch(0.72 0.13 158 / 0.16), transparent 72%),
            radial-gradient(ellipse 58% 70% at 68% 42%, oklch(0.66 0.11 205 / 0.12), transparent 74%),
            radial-gradient(ellipse 82% 70% at 52% 16%, oklch(0.55 0.10 150 / 0.09), transparent 76%);
}
[data-theme="dark"] .aurora { opacity: .5; }
.hero-in { position: relative; z-index: 2; }

/* trust strip */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px;
         padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust .it { display: flex; align-items: center; gap: 9px; font-size: 13.4px; color: var(--muted); }
.trust .it b { color: var(--text); font-weight: 600; }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 52px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); gap: 40px; }
.foot h5 { font-size: 12.5px; font-weight: 600; color: var(--dim); margin-bottom: 14px; }
.foot li { padding: 5px 0; }
.foot a { font-size: 14px; color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot-base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
             margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ── forms ────────────────────────────────────────────────────────────── */
.field { width: 100%; height: 48px; padding: 0 15px; border: 1px solid var(--line-strong);
         border-radius: 10px; background: var(--field); color: var(--text);
         font-size: 16px; outline: none; transition: border-color .07s ease; }
.field:focus { border-color: var(--accent); }
.field::placeholder { color: var(--dim); }
.field-label { display: block; font-size: 14px; font-weight: 500; color: var(--muted);
               margin-bottom: 8px; }
.field-hint { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--dim); }
.flash { display: flex; gap: 12px; padding: 14px 18px; border-radius: 8px;
         background: var(--overlay); font-size: 14.5px; line-height: 22px;
         box-shadow: inset 3px 0 0 var(--accent); margin-bottom: 20px; }
.flash.warn  { box-shadow: inset 3px 0 0 var(--v-negotiate); background: var(--warn-bg); }
.flash.error { box-shadow: inset 3px 0 0 var(--v-avoid); }

/* ── motion — near-instant, hora's tempo ──────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .18s cubic-bezier(.2,.7,.2,1) both; }
.d1{animation-delay:0s}.d2{animation-delay:.03s}.d3{animation-delay:.06s}
.d4{animation-delay:.09s}.d5{animation-delay:.12s}.d6{animation-delay:.15s}

/* scroll-in, observed by app.js — cheap and does not fight the browser */
.sr { opacity: 0; transform: translateY(10px);
      transition: opacity .32s cubic-bezier(.2,.7,.2,1), transform .32s cubic-bezier(.2,.7,.2,1); }
.sr.in { opacity: 1; transform: none; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
            animation: blink 2.2s ease-in-out infinite; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .live-dot { animation: none !important; }
  .sr { opacity: 1; transform: none; transition: none; }
  .pill:hover, .feat:hover { transform: none; }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .h-hero { font-size: 44px; line-height: 46px; letter-spacing: -0.04em; }
  .h-1 { font-size: 33px; line-height: 37px; }
  .h-2 { font-size: 27px; line-height: 33px; }
  .h-3 { font-size: 22px; line-height: 28px; }
  .lede { font-size: 17px; line-height: 27px; }
  .fig-xl { font-size: 46px; line-height: 48px; }
  .section { padding: 60px 0; }
  .hero { padding-top: 48px; }
  .split, .fgrid, .fgrid-2, .steps, .foot-grid { grid-template-columns: 1fr; }
  .shead { grid-template-columns: 1fr; gap: 0; }
  .shead > .eyebrow, .shead > .h-1, .shead > .h-2, .shead > .lede
    { grid-column: 1; grid-row: auto; }
  .shead > .lede { margin-top: 14px; }
  .fgrid-4, .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { border-radius: 12px; }
  .board { grid-template-columns: 1fr; }
  .board-rail { display: none; }
  .pad-lg { padding: 26px 22px; }
  .price-head, .price-body { padding-left: 24px; padding-right: 24px; }
  .navlinks { display: none; }
  .navtoggle { display: grid; }
  .foot-grid { gap: 28px; }
}
@media (max-width: 560px) {
  .stat-grid, .fgrid-4 { grid-template-columns: 1fr; }
  /* Brand, Sign in and the trial button are what a phone header has room
     for. The theme follows the phone's own light/dark setting here. */
  .nav .theme-btn { display: none; }
  .nav-in { gap: 12px; }
  .h-hero { font-size: 37px; line-height: 40px; }
}