/* ==========================================================================
   OmniRep — "Canopy"
   Dark forest hero dissolving into an airy white page. Pills, glass, hairlines.
   Tokens are the source of truth; do not hardcode a colour below this block.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Hero — dark world */
  --hero-deep:#22300B;     /* darkest — deep olive, never black */
  --hero-base:#2A3B0D;
  --hero-mid:#36500F;
  --hero-lift:#4E7614;     /* green opens up */
  /* The light end. Every stage sits at hue 85-88deg — green, not yellow —
     and the stops are spaced so the RGB change per pixel stays even all the
     way to white. Reaching white always needs a big jump in blue, so the
     spacing has to tighten as it goes or the last few percent read as a cut. */
  --hero-chart:#64932A;
  --hero-soft:#8CB65C;
  --hero-pale:#B4CE95;
  --hero-wisp:#D9E5C9;
  --hero-mist:#F1F5EC;
  --glow:#C6DD5E;
  --glow-soft:#EFF7D6;
  --hero-line:rgba(255,255,255,.13);
  --hero-text:#F5F8EE;
  --hero-muted:rgba(245,248,238,.84);
  --hero-faint:rgba(245,248,238,.52);

  /* Page — light world */
  --ink:#12140E;
  --ink-2:#3B4034;
  --muted:#6C7263;
  --paper:#FFFFFF;
  --paper-soft:#F6F7F1;
  --line:#E6E9DF;
  --line-soft:#F0F2EA;

  /* Functional green. Deliberate departure from the reference, which keeps
     green above the fold only: orange previously carried BOTH "action" and
     "live data", and dropping green below the fold would leave live state
     with no colour at all. Green marks state here; black marks action. */
  --green:#4C7A26;
  --green-deep:#33521A;
  --green-bright:#8FBF3F;
  --green-wash:rgba(126,163,62,.09);
  --green-line:rgba(126,163,62,.30);

  /* Action */
  --pill:#14170F;
  --pill-hover:#272C1E;
  --pill-text:#FFFFFF;

  /* Type */
  --display:'Space Grotesk','Instrument Sans',system-ui,-apple-system,sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono','JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Shape — every interactive control is a pill, every container is soft */
  --r-pill:999px;
  --r-card:20px;
  --r-sm:12px;
  --r-xs:8px;

  --container:1180px;
  --measure:640px;
  --section:104px;

  --shadow-card:0 1px 2px rgba(18,20,14,.04),0 12px 32px -12px rgba(18,20,14,.14);
  --shadow-lift:0 2px 4px rgba(18,20,14,.05),0 24px 56px -18px rgba(18,20,14,.20);
  --shadow-float:0 24px 70px -20px rgba(5,12,4,.55),0 4px 14px rgba(5,12,4,.22);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--green-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--r-xs)}
.sr-defs{position:absolute;width:0;height:0;overflow:hidden}

/* --- 3. Typography ------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--ink);
  letter-spacing:-.026em;line-height:1.07}
h1{font-size:clamp(2.15rem,5.4vw,4.15rem);letter-spacing:-.032em}
h2{font-size:clamp(1.85rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.3rem,1.9vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
p{color:var(--ink-2)}
p + p{margin-top:.85em}
.lead{font-size:1.1rem;line-height:1.6;color:var(--muted);max-width:var(--measure)}
b,strong{font-weight:600;color:var(--ink)}

/* --- 4. Layout ---------------------------------------------------------- */
.container{
  width:100%;max-width:var(--container);margin:0 auto;
  padding-left:24px;padding-right:24px;
}
section{padding-top:var(--section);padding-bottom:var(--section)}
.section-head{margin-bottom:52px;max-width:760px}
.section-head h2{margin-top:14px}

/* Eyebrow — the connective tissue of this theme. Every section opens with
   one, which is what makes five unrelated blocks read as one document. */
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;line-height:1;
  padding:7px 13px 6px;border-radius:var(--r-pill);
  background:var(--paper-soft);border:1px solid var(--line);color:var(--muted);
}
.eyebrow.on-dark{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  color:var(--hero-muted);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* --- 5. Buttons — every interactive control is a pill -------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:.95rem;font-weight:500;line-height:1;
  padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),
             transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:11px 20px;font-size:.875rem}

/* Dark fill — the only accent on white sections */
.btn-primary{background:var(--pill);color:var(--pill-text);box-shadow:var(--shadow-card)}
.btn-primary:hover{background:var(--pill-hover);box-shadow:var(--shadow-lift)}

/* Outline — never two filled pills side by side */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-soft);border-color:var(--muted)}

/* On the dark hero the fill inverts: white pill primary, glass pill secondary */
.on-dark .btn-primary{background:var(--paper);color:var(--ink);box-shadow:0 6px 20px rgba(5,12,4,.35)}
.on-dark .btn-primary:hover{background:var(--glow-soft);box-shadow:0 10px 28px rgba(5,12,4,.45)}
.on-dark .btn-ghost{
  background:rgba(19,30,10,.34);color:var(--hero-text);border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.on-dark .btn-ghost:hover{background:rgba(19,30,10,.48);border-color:rgba(255,255,255,.44)}

/* --- 6. Nav ------------------------------------------------------------- */
/* Sits over the hero rather than sticking. A sticky bar would have to flip
   from light text to dark text as it crosses the hero/white seam, and the
   only CSP-safe ways to do that are a JS class (forbidden here) or
   scroll-driven animation (not yet in Safari). Absolute is honest. */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px 0}
.nav-inner{display:flex;align-items:center;gap:20px}

.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.brand svg{width:22px;height:22px;color:var(--glow)}
.brand-txt{font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--hero-text)}

/* Glass pill track holding the links */
.nav-links{
  display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.nav-links a{
  padding:8px 16px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--mono);color:var(--hero-muted);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-links a:hover{background:rgba(255,255,255,.12);color:var(--hero-text)}
.nav-links a[aria-current="page"]{background:rgba(255,255,255,.16);color:var(--hero-text)}
.nav-cta{flex:0 0 auto}

/* Mobile menu. <details> rather than JS, so it still opens with JavaScript
   blocked — the CSP forbids inline scripts and a JS-only menu would leave a
   no-JS phone visitor with no navigation at all. */
.menu{display:none;position:relative;flex:0 0 auto;margin-left:auto}
.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:42px;padding:0 11px;cursor:pointer;list-style:none;
  border-radius:var(--r-pill);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn span{display:block;height:1.5px;background:var(--hero-text);border-radius:2px}
.menu[open] .menu-btn{background:rgba(255,255,255,.18)}
.menu-panel{
  position:absolute;top:calc(100% + 10px);right:0;min-width:212px;
  display:flex;flex-direction:column;gap:2px;padding:10px;
  border-radius:var(--r-card);
  background:rgba(14,26,10,.82);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--shadow-float);
}
.menu-panel a{
  padding:11px 14px;border-radius:var(--r-sm);font-size:.95rem;color:var(--hero-text);
}
.menu-panel a:hover{background:rgba(255,255,255,.10)}
.menu-cta{margin-top:6px;justify-content:center}

/* --- 7. Hero ------------------------------------------------------------ */
/* Three stacked paint layers, top of the list painted last:
   1. a white veil that takes over the full width at the bottom edge
   2. the bloom — a lime spotlight rising from bottom-centre, white at its core
   3. the forest base
   The page section below is plain white, so the seam disappears. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:160px;padding-bottom:250px;
  background:
    /* 3. A thin pure-white finish over the LAST 3% only. The bloom leaves a
       faint yellow-green cast on the final rows (measured #f1f7d7 against
       the #fff section below), which shows as a band at the seam. Confined
       to 97-100% so it cannot reach the chartreuse stage at 87-94% — the
       earlier full-height veil started at 84% and desaturated exactly that. */
    linear-gradient(180deg,rgba(255,255,255,0) 98.4%,
      rgba(255,255,255,.30) 99.4%,var(--paper) 100%),
    /* 2. a warm hot spot at bottom centre — the light source the falloff
       appears to come from. Kept narrow and low so it lights the seam
       instead of fogging the colour above it. */
    radial-gradient(62% 32% at 50% 104%,
      rgba(255,255,255,.80) 0%,
      rgba(250,253,240,.44) 30%,
      rgba(214,232,160,.18) 58%,
      rgba(214,232,160,0) 82%),
    /* 1. The ramp, and it runs all the way to white on its own. An earlier
       version laid a white veil over the last 16% to finish the seam, which
       desaturated the yellow-green into a milky sage — the chartreuse stage
       measured #91b05a instead of #82B022. Ending the ramp in white keeps
       every stage saturated and still lands on flat white at the edge.
       Purely vertical (180deg) on purpose: any tilt makes the bottom edge
       reach white at different points left and right, and the seam shows.
       Deliberately flat and dark through the top 63% — that is where the
       copy sits, and every stage below it costs contrast. */
    linear-gradient(180deg,
      var(--hero-deep) 0%,
      var(--hero-base) 32%,
      var(--hero-mid) 54%,
      var(--hero-lift) 70%,
      var(--hero-chart) 78%,
      var(--hero-soft) 85%,
      var(--hero-pale) 90.5%,
      var(--hero-wisp) 95%,
      var(--hero-mist) 98%,
      var(--paper) 100%);
}
/* Faint concentric rings + a crosshair, masked so they fade out before the
   edges. Static by choice — subtlety over animation. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 34%,
      transparent 0 92px,var(--hero-line) 92px 93px),
    linear-gradient(90deg,transparent calc(50% - .5px),
      var(--hero-line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(34% - .5px),
      var(--hero-line) calc(34% - .5px) calc(34% + .5px),transparent calc(34% + .5px));
  -webkit-mask-image:radial-gradient(62% 52% at 50% 34%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
  mask-image:radial-gradient(62% 52% at 50% 34%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
  opacity:.85;
}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero-copy h1{color:var(--hero-text)}
.hero-copy .eyebrow{margin-bottom:26px}
.h1-tail{color:var(--hero-muted)}
/* The homepage headline is three hand-broken lines and must stay three at
   every width. "Built, hosted, handled." is the longest at 23 characters and
   measures ~10.1px of width per 1px of font size, so the size has to be
   capped against the space the line actually has:
     under 1000px the copy is full width  -> the viewport is the limit
     at 1000px and up it is a grid column -> that column is the limit
   The two expressions below are tuned so the longest line always fits with
   room to spare. Do not raise them without re-measuring; the failure is a
   silent fourth line. */
.hero:not(.page-head) .hero-copy h1{font-size:min(3.25rem,8.2vw)}

/* Same idea for the sub-line, which is 52 characters and must not wrap.
   It needs ~22.7px of width per 1px of font size, which on a 375px phone
   works out at about 14.6px. That is why this shrinks faster than the rest
   of the type below ~500px. */
.hero:not(.page-head) .hero-copy .lead{
  color:var(--hero-muted);margin-top:22px;max-width:none;
  font-size:min(1.1rem,3.8vw);white-space:nowrap;
}
.hero-copy .lead{color:var(--hero-muted);margin-top:22px;max-width:460px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* --- 8. Hero search graphic --------------------------------------------- */
/* A stylised search result, not a copy of any search engine's UI: the SHAPE
   is what people recognise, and reproducing a real product's chrome and logo
   is a trademark problem for no gain.
   All colours are --s-* tokens scoped to .serp because this depicts a
   third-party interface, exactly like the .dsite mock. Nothing leaks. */
.serp-wrap{position:relative;transform:translateY(28px)}
/* A soft white halo so the panel reads as lit from behind rather than pasted
   onto the green. This is the bloom the card is sitting in. */
.serp-wrap::before{
  content:"";position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 56%,rgba(239,247,214,.40),rgba(198,221,94,.12) 52%,transparent 74%);
  filter:blur(28px);
}
.serp{
  --s-bg:#FFFFFF; --s-ink:#1F2430; --s-body:#5B6B85; --s-link:#1A56DB;
  --s-line:#E4E9F2; --s-ai:#F3F7FF; --s-star:#F5B301; --s-open:#15803D;
  position:relative;z-index:1;
  background:var(--s-bg);border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-card);overflow:hidden;
  font-family:var(--sans);color:var(--s-ink);
  box-shadow:var(--shadow-float);
}
.serp-bar{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--s-line)}
.serp-mag{width:16px;height:16px;flex:0 0 auto;color:var(--s-body)}
/* inline-block so the caret's left:100% resolves to the text width. */
.serp-q{position:relative;display:inline-block;white-space:nowrap;font-size:14px;color:var(--s-ink)}
.serp-qt{display:block;clip-path:inset(0 100% 0 0)}
.serp-caret{position:absolute;top:50%;left:0;width:1.5px;height:16px;margin-top:-8px;background:var(--s-link)}

.serp-ai{background:var(--s-ai);border-bottom:1px solid var(--s-line);padding:13px 17px}
.serp-ai-label{display:inline-block;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
  color:var(--s-link);border:1px solid rgba(26,86,219,.25);border-radius:var(--r-pill);padding:3px 8px;margin-bottom:8px}
.serp-ai p{font-size:11px;line-height:1.55;color:var(--s-ink);margin:0 0 8px}
.serp-ai p b{font-weight:600}
.serp-cite{display:inline-block;font-size:8.5px;color:var(--s-link);
  border:1px solid var(--s-line);background:#fff;border-radius:var(--r-pill);padding:3px 9px}

.serp-results{padding:6px 17px 15px}
.serp-item{padding:12px 0;border-bottom:1px solid var(--s-line)}
.serp-item:last-child{border-bottom:none}
.serp-url{display:block;font-size:8.5px;color:var(--s-body);margin-bottom:3px}
.serp-title{display:block;font-size:13.5px;line-height:1.25;color:var(--s-link);margin-bottom:4px}
.serp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:9px;color:var(--s-body)}
.serp-stars{color:var(--s-star);font-size:9px;letter-spacing:.5px}
.serp-open{color:var(--s-open);font-weight:600}
/* The other two results are deliberately dimmed and generic — no real
   business is named or implied. */
.serp-item.is-other .serp-title{color:#7C8BA5}
.serp-item.is-other .serp-url{color:#9AA7BC}

/* The one orchestrated motion moment: the query types, then results land.
   Finishes in about 2s and never repeats. */
@keyframes serpType{to{clip-path:inset(0 0 0 0)}}
@keyframes serpMove{to{left:100%}}
@keyframes serpCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes serpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.serp-qt{animation:serpType .85s steps(19,end) .25s forwards}
.serp-caret{animation:serpMove .85s steps(19,end) .25s forwards,
                     serpCaret 1.06s steps(1,end) infinite}
.serp-ai{opacity:0;animation:serpIn .35s ease 1.18s forwards}
.serp-item{opacity:0;animation:serpIn .35s ease forwards}
.serp-item:nth-child(1){animation-delay:1.3s}
.serp-item:nth-child(2){animation-delay:1.42s}
.serp-item:nth-child(3){animation-delay:1.54s}

/* --- 9. Segmented control ----------------------------------------------- */
/* Driven by radio inputs, so it works with JavaScript blocked. The sliding
   pill is a real element moved by transform — sibling :checked selectors do
   the switching, no script involved. */
.tabs{position:relative}
.tab-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.tablist{
  position:relative;display:flex;gap:0;padding:5px;margin:0 0 56px;max-width:720px;
  border-radius:var(--r-pill);background:var(--paper-soft);border:1px solid var(--line);
}
.tab-slider{
  position:absolute;top:5px;bottom:5px;left:5px;z-index:0;
  width:calc((100% - 10px) / 4);border-radius:var(--r-pill);
  background:var(--pill);box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease);
}
.tablist label{
  position:relative;z-index:1;flex:1 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 10px;border-radius:var(--r-pill);cursor:pointer;
  font-size:.85rem;font-weight:500;color:var(--muted);
  transition:color .25s var(--ease);
}
.tablist .tn{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;opacity:.6}
.tablist .tl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tablist label:hover{color:var(--ink)}

#t2:checked ~ .tablist .tab-slider{transform:translateX(100%)}
#t3:checked ~ .tablist .tab-slider{transform:translateX(200%)}
#t4:checked ~ .tablist .tab-slider{transform:translateX(300%)}
#t1:checked ~ .tablist label[for=t1],
#t2:checked ~ .tablist label[for=t2],
#t3:checked ~ .tablist label[for=t3],
#t4:checked ~ .tablist label[for=t4]{color:var(--pill-text)}
#t1:checked ~ .tablist label[for=t1] .tn,
#t2:checked ~ .tablist label[for=t2] .tn,
#t3:checked ~ .tablist label[for=t3] .tn,
#t4:checked ~ .tablist label[for=t4] .tn{opacity:.55}

.tabpanel{display:none}
#t1:checked ~ .tabpanels #p1,
#t2:checked ~ .tabpanels #p2,
#t3:checked ~ .tabpanels #p3,
#t4:checked ~ .tabpanels #p4{display:block;animation:panelIn .34s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.tabpanel-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.tab-copy h3{margin-bottom:16px}
.tab-copy p{color:var(--muted)}
.tab-art{min-width:0}

/* --- 10. Mock website (tab 01) ------------------------------------------ */
/* An illustration of someone ELSE's site. Scoped --d-* tokens so its palette
   cannot leak into OmniRep's own. No heading tags anywhere inside: these
   would land in this page's outline and create an h1-to-h3 skip. */
.dsite{
  --d-bg:#FFFFFF; --d-ink:#1A1D16; --d-body:#61675A; --d-line:#E9EBE3;
  --d-chrome:#F4F5EF; --d-accent:#2F5E22; --d-faint:#9AA08F; --d-dot:#D3D7CA;
  background:var(--d-bg);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-lift);color:var(--d-body);
}
.dsite-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;
  background:var(--d-chrome);border-bottom:1px solid var(--d-line)}
.dsite-dot{width:8px;height:8px;border-radius:50%;background:var(--d-dot)}
.dsite-url{margin-left:10px;font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;
  color:var(--d-faint);background:#fff;border:1px solid var(--d-line);border-radius:var(--r-pill);padding:4px 11px}
.dsite-body{padding:20px 22px 22px}
.dsite-nav{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--d-line)}
.dsite-word{font-family:var(--display);font-weight:600;font-size:12px;color:var(--d-ink);letter-spacing:-.01em}
.dsite-links{display:flex;gap:12px;margin-left:auto;font-size:9px;color:var(--d-body)}
.dsite-cta{font-size:8.5px;font-weight:600;color:#fff;background:var(--d-accent);
  border-radius:var(--r-pill);padding:6px 12px}
.dsite-eyebrow{margin-top:20px;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--d-faint)}
.dsite-h{margin-top:8px;font-family:var(--display);font-weight:500;font-size:clamp(18px,2.4vw,26px);
  letter-spacing:-.03em;line-height:1.08;color:var(--d-ink)}
.dsite-body > p{margin-top:9px;font-size:10.5px;line-height:1.55;max-width:330px;color:var(--d-body)}
.dsite-btns{display:flex;gap:8px;margin-top:16px}
.dsite-b1{font-size:9px;font-weight:600;color:#fff;background:var(--d-ink);border-radius:var(--r-pill);padding:8px 15px}
.dsite-b2{font-size:9px;font-weight:500;color:var(--d-ink);border:1px solid var(--d-line);
  border-radius:var(--r-pill);padding:8px 15px}
.dsite-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.dsite-card{background:var(--d-chrome);border:1px solid var(--d-line);border-radius:var(--r-sm);padding:11px 12px}
.dsite-card b{display:block;font-size:9.5px;font-weight:600;color:var(--d-ink);margin-bottom:3px}
.dsite-card span{font-size:8.5px;line-height:1.4;color:var(--d-body)}
.dsite-meta{display:flex;gap:7px;margin-top:16px;padding-top:13px;border-top:1px solid var(--d-line);
  font-family:var(--mono);font-size:7px;letter-spacing:.09em;color:var(--d-faint)}

/* --- 11. Answer-engine card (tab 02) ------------------------------------ */
/* Scoped to .tab-art: /get-a-site uses .answer for FAQ answer text, and an
   unscoped rule here would give every FAQ answer a card frame. */
.tab-art .answer{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 26px;box-shadow:var(--shadow-lift);
}
.tab-art .answer-q{font-family:var(--display);font-weight:500;font-size:clamp(15px,1.6vw,18px);
  letter-spacing:-.02em;line-height:1.35;color:var(--ink)}
.tab-art .answer-q b{font-weight:500;color:var(--green);box-shadow:inset 0 -.42em 0 var(--green-wash)}
.tab-art .answer-b{margin-top:16px;padding:18px 20px;background:var(--green-wash);
  border:1px solid var(--green-line);border-radius:var(--r-sm)}
.tab-art .answer-b p{font-size:13px;line-height:1.6;color:var(--ink-2)}
.cites{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.cite{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;color:var(--green-deep);
  background:var(--paper);border:1px solid var(--green-line);border-radius:var(--r-pill);padding:5px 10px}
.tab-art .answer-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--muted)}

/* --- 12. Form → alert (tab 03) ------------------------------------------ */
.pipe{display:flex;flex-direction:column;align-items:center;gap:14px}
.dform{
  width:100%;max-width:400px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);padding:20px 22px;box-shadow:var(--shadow-card);
}
.dform-title{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);margin-bottom:14px}
.dfield{display:flex;align-items:baseline;gap:10px;padding:9px 12px;margin-bottom:7px;
  background:var(--paper-soft);border:1px solid var(--line-soft);border-radius:var(--r-sm)}
.dfield .k{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);flex:0 0 58px}
.dfield .v{font-size:11.5px;color:var(--ink)}
.dsubmit{margin-top:12px;text-align:center;font-size:11px;font-weight:500;color:var(--pill-text);
  background:var(--pill);border-radius:var(--r-pill);padding:10px}
.pipe-arrow{font-size:15px;color:var(--green);line-height:1}

/* The alert is frosted glass over a soft green plate — the one place the
   "notification" metaphor earns a different material from the flat cards. */
.notif{
  position:relative;width:100%;max-width:400px;border-radius:var(--r-card);
  padding:15px 17px;overflow:hidden;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 2px rgba(18,20,14,.05),0 18px 44px -14px rgba(51,82,26,.35);
}
.notif::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(143,191,63,.30),rgba(76,122,38,.16) 55%,rgba(255,255,255,0));
}
.nhead{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.nicon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:var(--r-xs);background:var(--green-deep);color:var(--glow)}
.nicon svg{width:13px;height:13px}
.napp{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.nago{margin-left:auto;font-size:9px;color:var(--muted)}
.ntitle{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);margin-bottom:5px}
.nbody{font-size:11px;line-height:1.55;color:var(--ink-2)}
.pipe-note{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--muted);text-align:center}

/* --- 13. Estimate queue (tab 04) ---------------------------------------- */
.queue{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-lift)}
.qhead{display:flex;align-items:center;gap:10px;padding:15px 18px;
  background:var(--paper-soft);border-bottom:1px solid var(--line)}
.qtitle{font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink)}
.qnew{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:4px 11px 4px 9px;
  border-radius:var(--r-pill);background:var(--green-wash);border:1px solid var(--green-line)}
.qpulse{width:6px;height:6px;border-radius:50%;background:var(--green-bright);
  box-shadow:0 0 0 0 rgba(143,191,63,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,191,63,.55)}
  70%{box-shadow:0 0 0 7px rgba(143,191,63,0)}100%{box-shadow:0 0 0 0 rgba(143,191,63,0)}}
.qcount{font-family:var(--mono);font-size:8.5px;color:var(--green-deep)}

.est{padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.est:last-child{border-bottom:none}
.est.fresh{background:linear-gradient(90deg,var(--green-wash),transparent 60%);
  box-shadow:inset 3px 0 0 var(--green-bright)}
.eid{display:flex;align-items:center;gap:9px;margin-bottom:7px;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;color:var(--muted)}
.etag{color:var(--green-deep);background:var(--paper);border:1px solid var(--green-line);
  border-radius:var(--r-pill);padding:3px 8px}
.etitle{font-size:12px;font-weight:500;line-height:1.4;color:var(--ink);margin-bottom:8px}
.emeta{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.emeta svg{flex:0 0 auto;color:var(--muted)}
.efoot{display:flex;gap:9px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);
  color:var(--muted);opacity:.5}

/* --- 14. CTA band ------------------------------------------------------- */
/* A dark forest card that bookends the hero, so the page opens and closes on
   the same material instead of trailing off into white. */
.cta-wrap{padding-bottom:var(--section)}
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:32px;padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px);
  background:
    radial-gradient(76% 128% at 90% 116%,
      rgba(217,229,201,.54) 0%,rgba(140,182,92,.32) 26%,
      rgba(100,147,42,.17) 50%,transparent 74%),
    linear-gradient(150deg,var(--hero-deep) 0%,var(--hero-base) 46%,
      var(--hero-mid) 74%,var(--hero-lift) 100%);
  box-shadow:var(--shadow-float);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 88% 108%,
    transparent 0 74px,var(--hero-line) 74px 75px);
  -webkit-mask-image:radial-gradient(58% 90% at 88% 108%,#000,transparent 72%);
  mask-image:radial-gradient(58% 90% at 88% 108%,#000,transparent 72%);
}
.cta-band h2{color:var(--hero-text);margin-top:16px;max-width:16ch}
.cta-band .lead{color:var(--hero-muted);margin-top:18px}

/* --- 15. Footer --------------------------------------------------------- */
.footer{
  background:linear-gradient(180deg,var(--hero-base) 0%,var(--hero-deep) 100%);
  color:var(--hero-muted);padding:64px 0 40px;
}
.footer .brand svg{color:var(--glow)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.10)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.footer-links a{
  padding:8px 15px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hero-muted);border:1px solid rgba(255,255,255,.12);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.footer-links a:hover{background:rgba(255,255,255,.10);color:var(--hero-text);border-color:rgba(255,255,255,.26)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:26px;
  font-size:.8rem;color:var(--hero-faint)}
.footer-bottom > span:last-child{margin-left:auto;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--hero-muted)}
.footer-legal a{color:var(--hero-muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.24)}
.footer-legal a:hover{color:var(--hero-text)}

/* --- 16. Scroll motion -------------------------------------------------- */
/* Scroll-driven, not JS-driven: the CSP forbids inline scripts, and a
   JS-applied "is visible" class flashes the wrong state before it lands.
   Behind @supports, so browsers without it simply show the content. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Lighting only — no fade-and-rise. A section that fades up as you reach
       it is the clearest generated-page tell, and a scroll-driven fade on the
       LAST element never finishes: the page runs out of scroll before the
       range completes and it sticks at partial opacity forever.
       A light sweep has no such failure mode — incomplete just means the
       highlight is parked, which is invisible. */
    .cta-band::after{
      content:"";position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;
      background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);
      animation:sheen linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
    @keyframes sheen{from{transform:translateX(-38%)}to{transform:translateX(38%)}}

    /* The glass panel catches the light as it scrolls. */
    .serp{
      animation:panelLight linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes panelLight{
      from{box-shadow:0 18px 50px -20px rgba(5,12,4,.50),0 2px 10px rgba(5,12,4,.18)}
      to{box-shadow:0 34px 90px -22px rgba(5,12,4,.60),0 6px 18px rgba(5,12,4,.26)}
    }
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .serp-qt{animation:none;clip-path:none}
  .serp-caret{animation:none;left:100%;opacity:1}
  .serp-ai,.serp-item{animation:none;opacity:1;transform:none}
  .qpulse{animation:none}
  .tab-slider{transition:none}
  .btn:hover{transform:none}
  #t1:checked ~ .tabpanels #p1,#t2:checked ~ .tabpanels #p2,
  #t3:checked ~ .tabpanels #p3,#t4:checked ~ .tabpanels #p4{animation:none}
}

/* --- 17. Responsive ----------------------------------------------------- */
/* 1000.02px, not 1000px: max-width:1000px and min-width:1000px BOTH match at
   exactly 1000, which handed that one width the single-column layout and the
   two-column font size at the same time. */
@media (min-width:1000.02px){
  /* Above this width the copy is a grid column, not the full container, so
     the headline is capped against the column instead of the viewport. */
  .hero:not(.page-head) .hero-copy h1{font-size:min(3.25rem,4.7vw)}
}

@media (max-width:1000px){
  :root{--section:80px}
  .hero{padding-top:132px;padding-bottom:210px}
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-copy .lead{max-width:var(--measure)}
  .serp-wrap{transform:none;max-width:520px}
  .tabpanel-inner{grid-template-columns:1fr;gap:40px}
  .nav-links{display:none}
  .menu{display:block}
  .nav-cta{display:none}
  .nav-inner{justify-content:space-between}
}

@media (max-width:760px){
  :root{--section:68px}
  .tablist{flex-wrap:wrap;gap:6px;padding:6px;border-radius:var(--r-card);max-width:none;margin-bottom:40px}
  .tab-slider{display:none}
  .tablist label{
    flex:1 1 calc(50% - 3px);justify-content:flex-start;gap:6px;
    padding:13px 11px;font-size:.78rem;border:1px solid transparent;
  }
  /* Let a long label wrap rather than truncate — "Found on Google" was
     losing its last word to an ellipsis at 375px. */
  .tablist .tl{white-space:normal;overflow:visible;text-overflow:clip}
  #t1:checked ~ .tablist label[for=t1],
  #t2:checked ~ .tablist label[for=t2],
  #t3:checked ~ .tablist label[for=t3],
  #t4:checked ~ .tablist label[for=t4]{background:var(--pill);box-shadow:var(--shadow-card)}
  .dsite-cards{grid-template-columns:1fr}
  .footer-links{margin-left:0}
  .footer-bottom > span:last-child{margin-left:0;flex-basis:100%}
}

@media (max-width:520px){
  .container{padding-left:20px;padding-right:20px}
  .hero{padding-top:108px;padding-bottom:170px}
  /* Side by side, not stacked: two full-width pills read as a wall and push
     the search panel a whole screen further down. */
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 auto;padding-left:20px;padding-right:20px}
  .eyebrow{font-size:.56rem;letter-spacing:.09em}
  .cta-band{border-radius:24px}
  .dsite-links{display:none}
}

/* ==========================================================================
   18. Interior pages
   Every page opens on the same dark band so the nav — which is light text,
   absolutely positioned — always has a dark ground under it. A page with no
   head section would render the nav invisible on white.
   ========================================================================== */

/* Short pages (404, thank-you) must not let the footer ride up the screen. */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}

/* The ramp's stops are percentages, so they compress on a short band and the
   copy ends up far deeper in the gradient than it does on the homepage. At
   104px of bottom padding the sub-line measured 4.14:1, under the 4.5:1 AA
   floor. The extra padding puts the falloff below the copy, not through it. */
/* Interior heads: bleed the falloff BELOW the hero box.
   The ramp's stops are percentages, so on a 470px band the whole four-stage
   fade compresses into roughly 140px where the homepage gives it 285px —
   same colour change over half the distance, which is what reads as a hard
   break. Rather than making these heads taller, the paint moves to a
   pseudo-element that extends past the bottom edge, so the fade finishes in
   the white section instead of at the seam. The hero's own height, and so
   the position of every line of copy, is unchanged.
   Stops are re-spaced for the shorter band: the copy now sits at 31-45% of
   the painted area, so the dark stretch can be compressed and the light end
   given far more room. */
.hero.page-head{padding-top:150px;padding-bottom:180px;overflow:visible;background:none}
.hero.page-head::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-120px;z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 98.6%,
      rgba(255,255,255,.30) 99.5%,var(--paper) 100%),
    radial-gradient(64% 30% at 50% 103%,
      rgba(255,255,255,.78) 0%,
      rgba(250,253,240,.42) 30%,
      rgba(214,232,160,.17) 58%,
      rgba(214,232,160,0) 82%),
    linear-gradient(180deg,
      var(--hero-deep) 0%,
      var(--hero-base) 26%,
      var(--hero-mid) 46%,
      var(--hero-lift) 60%,
      var(--hero-chart) 71%,
      var(--hero-soft) 80%,
      var(--hero-pale) 88%,
      var(--hero-wisp) 94%,
      var(--hero-mist) 97.5%,
      var(--paper) 100%);
}
/* The hero is a stacking context painted after its non-positioned siblings,
   so without this the tail would cover the next section's text. */
.hero.page-head + section{position:relative;z-index:1}
.hero.page-head h1{font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.06}
.hero.page-head .lead{margin-top:16px;color:var(--hero-muted);max-width:620px}
.hero.page-head .eyebrow{margin-bottom:22px}
.hero.page-head .data{color:var(--hero-faint)}

/* --- 19. Utilities ------------------------------------------------------ */
.data{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em}
.muted{color:var(--muted)}
.faint{color:var(--muted);opacity:.78}
.figure{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--green-deep);white-space:nowrap}
.accent{color:var(--green)}
.textlink{color:var(--green-deep);border-bottom:1px solid var(--green-line);
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.textlink:hover{color:var(--green);border-bottom-color:var(--green)}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-40{margin-top:40px}

/* --- 20. Case studies (/customers) -------------------------------------- */
.case-shot{
  aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper-soft);overflow:hidden;box-shadow:var(--shadow-lift);
}
.case-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.work-shot{background:var(--paper-soft);overflow:hidden;position:relative}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split.mt-40{margin-top:40px}

/* The integration path. Mono because it is a data flow, not a sentence. */
.flow{
  font-family:var(--mono);font-size:.82rem;line-height:2.1;color:var(--muted);
  background:var(--paper-soft);border:1px solid var(--line);
  border-radius:var(--r-card);padding:20px 24px;margin-top:24px;
}
.flow .node{color:var(--ink)}
.flow .out{color:var(--green-deep);font-weight:500}
.flow .arrow{color:var(--muted);opacity:.6}

/* --- 21. Pricing -------------------------------------------------------- */
.price-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.price-split h2{margin-bottom:26px}
.price-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:30px 32px;box-shadow:var(--shadow-card);
}
/* The free build is the offer that does the selling, so it gets the green
   edge. Green marks state and emphasis here; black still marks action. */
.price-card.lead-card{border-color:var(--green-line);background:
  linear-gradient(180deg,var(--green-wash),transparent 42%),var(--paper)}
.price-col .price-card + .price-card{margin-top:20px}
.price-tag{font-family:var(--display);font-size:3rem;font-weight:500;
  letter-spacing:-.035em;line-height:1;margin:12px 0 6px;color:var(--ink)}
.price-tag.accent{color:var(--green)}
.price-per{font-family:var(--sans);font-size:1.05rem;font-weight:400;
  color:var(--muted);letter-spacing:0;margin-left:4px}
.price-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted)}
.price-list{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.price-list li{padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;color:var(--muted);display:flex;gap:12px}
.price-list li::before{content:"—";color:var(--green);opacity:.7;flex:0 0 auto}
.price-note{margin-top:22px;font-size:.85rem;color:var(--muted);line-height:1.55}
.price-cta{margin-top:22px;display:inline-flex}

.incl{list-style:none;border-top:1px solid var(--line)}
.incl li{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.incl h3{font-size:1.05rem;margin-bottom:5px}
.incl p{font-size:.92rem;color:var(--muted);line-height:1.55}

.addons{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.addon{flex:1 1 230px;border:1px solid var(--green-line);background:var(--green-wash);
  border-radius:var(--r-sm);padding:16px 18px}
.addon b{display:block;font-family:var(--display);font-weight:600;font-size:.94rem;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
.addon span{display:block;font-size:.86rem;color:var(--muted);line-height:1.45}
.addons-note{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  color:var(--muted);margin-top:14px}

/* --- 22. About ---------------------------------------------------------- */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.about-split h2{margin-bottom:20px}
.about-split p{color:var(--muted)}
.about-split p + p{margin-top:14px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.help-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow-card)}
.help-card h3{font-size:1.05rem;margin-bottom:9px}
.help-card p{color:var(--muted);font-size:.9rem;line-height:1.55}
.about-split .help-grid{margin-top:0;gap:14px}
.about-split .help-card{padding:20px}
.about-split .help-card h3{font-size:1rem;margin-bottom:6px}
.about-split .help-card p{font-size:.86rem;line-height:1.5}

.owner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.owner p{color:var(--muted)}
.owner p + p{margin-top:16px}
.owner-facts{list-style:none;border-top:1px solid var(--line)}
.owner-facts li{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;color:var(--muted)}
.owner-facts .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--muted);opacity:.8;flex:0 0 104px;padding-top:4px}

/* --- 23. Enquiry form (/get-a-site) ------------------------------------- */
.form{max-width:var(--measure)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 16px;font-size:.94rem;color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--muted)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)}
.field textarea{resize:vertical;min-height:120px;font-family:var(--sans)}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:7px}
/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and one that fills this in is answered with success on purpose. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:20px;padding:15px 18px;border-radius:var(--r-sm);
  font-size:.94rem;display:none}
.form-status.ok{display:block;background:var(--green-wash);
  border:1px solid var(--green-line);color:var(--ink)}
.form-status.err{display:block;background:var(--paper-soft);
  border:1px solid var(--line);color:var(--ink-2)}

/* --- 24. FAQ ------------------------------------------------------------ */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:20px;
  align-items:baseline;font-family:var(--display);font-weight:500;
  font-size:1.08rem;letter-spacing:-.015em;color:var(--ink);
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-deep)}
.faq summary::after{content:"+";margin-left:auto;color:var(--muted);
  font-family:var(--mono);font-size:1rem;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 0 24px;color:var(--muted);max-width:var(--measure)}
.faq .answer p + p{margin-top:12px}

/* --- 25. Legal documents ------------------------------------------------ */
/* 150px, not 72px: the page head's fade bleeds 120px past the hero, and at
   72px the opening paragraph landed on #ccddb5 where body copy measured
   3.45:1 — under the 4.5:1 floor. Text has to start clear of the tail. */
.doc{max-width:780px;padding-top:150px;padding-bottom:var(--section)}
.doc h2{font-size:1.45rem;margin:48px 0 12px}
.doc h3{font-size:1.1rem;margin:28px 0 8px}
.doc p,.doc li{color:var(--muted);margin-bottom:14px}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--green-deep);border-bottom:1px solid var(--green-line)}
.doc a:hover{color:var(--green)}
.updated{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--hero-muted);margin-top:14px}

/* --- 26. Interior responsive -------------------------------------------- */
@media (max-width:1000px){
  .hero.page-head{padding-top:124px;padding-bottom:150px}
  .split,.price-split,.about-split,.owner{grid-template-columns:1fr;gap:40px}
  .help-grid{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr;gap:0}
  .price-card{padding:24px 22px}
  .owner-facts li{flex-direction:column;gap:5px}
  .owner-facts .k{flex:none;padding-top:0}
  .flow{font-size:.74rem;padding:16px 18px}
}
@media (max-width:520px){
  .hero.page-head{padding-top:104px;padding-bottom:124px}
}

/* The enquiry form sits in its own white section, not in the hero. Form
   fields need a flat ground — inside the hero they fell across the
   green-to-white falloff and every input had a different backdrop. */
.form-section{padding-top:72px;padding-bottom:var(--section)}
.form-section .form{margin-top:0}

/* --- 27. Utilities on a dark ground -------------------------------------
   These utilities were authored when every page was dark. The site is now
   light with dark bands, so one colour cannot serve both: .figure at
   --green-deep is near-invisible on the hero, and .muted / .faint at
   --muted vanish entirely. Same pattern as the .on-dark button variants. */
.on-dark .figure{color:var(--glow)}
.on-dark .accent{color:var(--glow)}
.on-dark .muted{color:var(--hero-muted)}
.on-dark .faint{color:var(--hero-faint);opacity:1}
.on-dark .data{color:var(--hero-faint)}
.on-dark .textlink{color:var(--glow);border-bottom-color:rgba(198,221,94,.42)}
.on-dark .textlink:hover{color:var(--hero-text);border-bottom-color:var(--glow)}

/* --- 28. Mobile spacing -------------------------------------------------
   Phones were scrolling through a lot of empty green and white. Everything
   below is spacing only; nothing changes shape, colour or type.

   The hero's bottom padding and the page-head tail are the two big ones, and
   they are coupled: the tail paints behind the next section's padding rather
   than adding height, but content still has to begin where the ramp has gone
   essentially white or body copy lands on green. For a hero of height H with
   a tail of T, content needs roughly d >= 0.96T - 0.04H of clearance. Cutting
   the padding without also shortening the tail puts text on #B4CE95, where
   muted body copy measures 2.9:1.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  :root{--section:46px}

  /* Shorter tail -> less clearance needed below it -> less scroll. */
  .hero.page-head::after{bottom:-56px}
  /* The one section that still needs real clearance, because the fade
     finishes inside it. Every other gap on the page is --section. */
  .hero.page-head + section{padding-top:52px}

  .section-head{margin-bottom:34px}
  .tablist{margin-bottom:28px}
  .tabpanel-inner{gap:30px}
  .split.mt-40,.mt-40{margin-top:28px}
  .form-section{padding-top:46px}
  .doc{padding-top:88px}
  .cta-wrap{padding-bottom:var(--section)}
}

@media (max-width:520px){
  /* The homepage hero has no tail — its ramp ends at its own bottom edge —
     so this padding is pure gap and can come down further. */
  .hero{padding-top:108px;padding-bottom:92px}
  .hero.page-head{padding-top:96px;padding-bottom:62px}
}