/* ==========================================================================
   AS Web Design · design system v2 · "Watch it build"
   --------------------------------------------------------------------------
   IDEA     The first screen is the product. Type a business name into the
            headline, pick what kind of business it is, and a phone assembles
            that business a website: layout, words, photos, buttons, link sent.
            Everything after it carries the same three objects: the address
            bar (every section eyebrow is a real URL on this site), the 2px
            line that fills like a progress bar, and the visitor's own name.
            Blueprint linework is the signature detail and is used lightly:
            dimension lines and numbered callouts round the hero phone, a 390
            line over each live site, and a title block in the footer.

   SCOPE    A page opts in with <html class="v2">. Base element rules below are
            written :where(.v2) so they cannot reach unconverted pages, and the
            component class names were chosen so none collides with a v1 class.
            Every page is now on v2, so the scoped v1 block that used to sit
            at the end of this file was deleted (5 Oct 2026, packaging). The
            page blocks after the shared components (g1, g3, g2) are v2.

   COLOUR   Locked to the Enviroplumb system. Every colour has one job.
     token      hex      job
     --ink      #141519  headings, strong values, bezel
     --text     #25262B  body copy on light surfaces
     --muted    #5B5D65  secondary copy and labels on light
     --white    #FFFFFF  the canvas
     --tint     #F7F8FA  alternate light surface
     --tint-2   #EEF1F5  wells inside light sections (never under .wash)
     --blue     #0079C8  links and small blue text, on WHITE ONLY
     --deep     #0B4F9E  small blue text on tints, selected states, filled marks
     --bright   #0091EA  display-size fills, live dots, gradient start
     --lift     #6CC1FF  accent text and linework on night only
     --night    #0A0F1C  dark chapters: proof, the ask, the footer
     --night-2  #0E1626  cards on night, dark example sites
     --mist     #9AA6BC  muted text on night (a neutral, not a new hue)
     --haze     #C9D3E3  body text on night
     --grad     linear-gradient(100deg,#0091EA,#0B4F9E). Three jobs only:
                1 the one key phrase per heading (.wash, light surfaces)
                2 pill buttons
                3 the 2px line: under the sticky header, and the same line
                  filling as progress (build bar, build log, timeline rail).
     No red, pink, gold, green, orange or purple anywhere, including states.

   CONTRAST (WCAG 2.x, computed; AA body text needs 4.5, large text 3.0)
                 on white  #F7F8FA  #EEF1F5  #0A0F1C  #0E1626
     ink           18.24    17.17    16.10      -        -
     text          15.10    14.21    13.33      -        -
     muted          6.57     6.18     5.80      -        -
     blue           4.60     4.33x    4.06x     -        -      white only
     deep           8.00     7.52     7.06      -        -
     bright         3.37     3.17     2.97x    5.68     5.37   large text only
     lift             -        -        -      9.75     9.22
     white            -        -        -     19.13    18.08
     haze             -        -        -     12.67    11.98
     mist             -        -        -      7.79     7.37
     Pills: white on #0091EA is 3.37. Large pills (.pill--lg) carry 19px
     bold labels, which is large text (3:1), on the full gradient. Every
     smaller pill slides the gradient (background-size 165%, position 100%)
     so the label never sits on anything lighter than #0477CC: 4.65.
     Hover never slides the gradient back towards the bright end.
     .wash is display text only (31px and up) and never on #EEF1F5.

   TYPE     Urbanist (display, 500 to 900) and Onest (body, 300 to 700),
            both self-hosted. No third face, no system mono.
     token          320px   390px   1440px   use
     --fs-display    38      40.5    62       h1, Urbanist 800, -0.035em, lh 1.0
     --fs-h2         31      32      56       one per section, 800, -0.035em, lh 1.03
     --fs-h3         20      20.5    26       Urbanist 800, -0.02em
     --fs-lede       17      17.2    20       Onest 400, lh 1.6
     body            17      17      17       Onest 400, lh 1.65
     --fs-small      15      15      15
     label           12      12      12       Onest 600 caps, +0.12em
     figures: Urbanist 800 with tabular-nums. text-wrap balance on headings,
     pretty on paragraphs.
     Signature heading: one closing phrase per heading carries .wash on light
     surfaces or solid --lift (.lift) on night. Never in body text.

   SPACE    4px base: --s1 4 · s2 8 · s3 12 · s4 16 · s5 24 · s6 32 · s7 48 ·
            s8 64 · s9 96. Section padding --sec clamp(80px, 3rem + 6vw,
            152px): 80 on a phone, 134 at 1440. Gutter 16px on a phone to
            48px. Content max 1280px. Radii: 12 / 18 / 28 / pill.
   LINES    --line ink 10% (rules), --line-2 ink 18% (control borders),
            --line-n white 12% on night. --draw blue 55% is blueprint
            linework only (dimension lines, callouts, title block rules).
   SURFACES white (opener) > tint (how) > NIGHT (proof) > white (who) >
            tint (prices) > white (word of mouth) > tint (Archie) >
            NIGHT (the ask, running into the footer as one chapter).
            No two equal surfaces touch.
   MOTION   One feeling: "assembling". Pieces settle into place and lines
            draw left to right like a progress bar.
            --settle cubic-bezier(.16,1,.3,1) for arrivals,
            --snap cubic-bezier(.34,1.56,.64,1) for buttons dropping in.
            Durations --t1 .2s · --t2 .45s · --t3 .9s; the build runs about 6s.
            Only the live dot loops. Hidden start states exist only under
            html.js. prefers-reduced-motion: every piece shows finished,
            nothing types, nothing pulses, no smooth scroll.
   BREAKPOINTS 380 · 640 · 768 · 900 · 1024 · 1240.
   ========================================================================== */

@font-face{font-family:'Urbanist';font-weight:500 900;font-style:normal;font-display:swap;src:url(../font/urbanist.woff2?v=ce6e0dd8) format('woff2')}
@font-face{font-family:'Onest';font-weight:300 700;font-style:normal;font-display:swap;src:url(../font/onest.woff2?v=cc61cbd6) format('woff2')}

:root{
  --ink:#141519; --text:#25262B; --muted:#5B5D65;
  --white:#FFFFFF; --tint:#F7F8FA; --tint-2:#EEF1F5;
  --blue:#0079C8; --deep:#0B4F9E; --bright:#0091EA; --lift:#6CC1FF;
  --night:#0A0F1C; --night-2:#0E1626; --mist:#9AA6BC; --haze:#C9D3E3;
  --grad:linear-gradient(100deg,#0091EA,#0B4F9E);
  --line:rgba(20,21,25,.10); --line-2:rgba(20,21,25,.18);
  --line-n:rgba(255,255,255,.12); --line-n2:rgba(255,255,255,.22);
  --draw:rgba(0,121,200,.55); --draw-n:rgba(108,193,255,.45);
  --grid:rgba(0,121,200,.075); --grid-n:rgba(108,193,255,.06);

  --display:'Urbanist',ui-sans-serif,system-ui,sans-serif;
  --body:'Onest',ui-sans-serif,system-ui,sans-serif;
  --fs-display:clamp(2.375rem,1.62rem + 3.75vw,3.875rem);
  --fs-h2:clamp(1.9375rem,1.32rem + 2.62vw,3.5rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.625rem);
  --fs-lede:clamp(1.0625rem,.98rem + .36vw,1.25rem);
  --fs-small:.9375rem;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gut:clamp(16px,4vw,48px);
  --sec:clamp(80px,3rem + 6vw,152px);
  --max:1280px;
  --r-sm:12px; --r-md:18px; --r-lg:28px;
  --hdr:68px;

  --settle:cubic-bezier(.16,1,.3,1);
  --snap:cubic-bezier(.34,1.56,.64,1);
  --t1:.2s; --t2:.45s; --t3:.9s;
}

/* ── base (v2 pages only) ──────────────────────────────────────────────── */
:where(.v2),:where(.v2) *,:where(.v2) *::before,:where(.v2) *::after{box-sizing:border-box}
:where(.v2){-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){:where(.v2){scroll-behavior:smooth}}
:where(.v2) body{margin:0;background:var(--white);color:var(--text);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
:where(.v2) img,:where(.v2) svg{display:block;max-width:100%}
:where(.v2) a{color:var(--blue);text-underline-offset:.2em;text-decoration-thickness:1px}
:where(.v2) p{margin:0}
:where(.v2) h1,:where(.v2) h2,:where(.v2) h3{margin:0;font-family:var(--display);color:var(--ink);font-weight:800;letter-spacing:-.035em;text-wrap:balance}
:where(.v2) h2{font-size:var(--fs-h2);line-height:1.03;margin-top:20px}
:where(.v2) button,:where(.v2) input,:where(.v2) textarea{font:inherit;color:inherit}
:where(.v2) fieldset{margin:0;padding:0;border:0;min-width:0}
:where(.v2) legend{padding:0}
:where(.v2) ol,:where(.v2) ul{margin:0;padding:0}
:where(.v2) dl,:where(.v2) dd,:where(.v2) figure,:where(.v2) blockquote{margin:0}
:where(.v2) :focus-visible{outline:2px solid var(--bright);outline-offset:3px;border-radius:6px}
:where(.v2) ::selection{background:rgba(0,145,234,.18)}
:where(.v2) [hidden]{display:none!important}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(.v2) .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-weight:600;text-decoration:none}
:where(.v2) .skip:focus{top:12px}
.shell{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}

/* ── type helpers ──────────────────────────────────────────────────────── */
.label{font:600 .75rem/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:where(.v2) .wash{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.06em}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){:where(.v2) .wash{background:none;color:var(--deep)}}
.lift{color:var(--lift)}
.lead{font-size:var(--fs-lede);line-height:1.6;color:var(--muted);margin-top:20px;max-width:40em;text-wrap:pretty}

/* the address-bar eyebrow: the page's one recurring device, and a real link */
.addr{display:inline-flex;align-items:center;gap:7px;min-height:32px;max-width:100%;padding:4px 14px 4px 12px;border:1px solid var(--line-2);border-radius:99px;background:rgba(255,255,255,.75);font:500 .8125rem/1.2 var(--body);color:var(--muted);text-decoration:none;transition:border-color var(--t1),color var(--t1)}
.addr svg{width:10px;height:12px;fill:currentColor;flex:none}
.addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.addr b{flex:none;font-weight:600;color:var(--deep);margin-left:-5px}
a.addr:hover{border-color:rgba(11,79,158,.55);color:var(--text)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:99px;
  background:var(--grad);background-size:165% 100%;background-position:100% 0;color:#fff;font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(11,79,158,.6);transition:transform var(--t1) var(--settle),box-shadow var(--t2) var(--settle)}
.pill:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(11,79,158,.7)}
.pill:active{transform:translateY(0)}
.pill svg{width:18px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pill svg[viewBox="0 0 12 12"]{width:12px;height:12px}
.pill--sm{min-height:40px;padding:0 18px;font-size:.90625rem}
.pill svg[viewBox="0 0 24 24"]{width:17px;height:17px;fill:#fff;stroke:none}
.pill--lg{min-height:60px;padding:0 30px;font:700 1.1875rem/1 var(--display);letter-spacing:-.01em;background-size:100% 100%;background-position:0 0}
.pill--lg svg{width:20px;height:12px}

.ctl{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid var(--line-2);border-radius:99px;background:#fff;color:var(--ink);font:600 .875rem/1 var(--body);cursor:pointer;transition:border-color var(--t1),background-color var(--t1)}
.ctl:hover{border-color:rgba(11,79,158,.55)}
.ctl:disabled{opacity:.45;cursor:default}
.ctl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ctl svg[viewBox="0 0 20 12"]{width:18px;height:12px}
.ctl--dark{background:transparent;color:#fff;border-color:var(--line-n2)}
.ctl--dark:hover{border-color:var(--lift)}
.ctl--dark:focus-visible{outline-color:var(--lift)}
.ctl--next{margin-left:auto}

.tlink{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-weight:600;font-size:.9375rem;color:var(--lift);text-decoration:underline;text-decoration-color:rgba(108,193,255,.4);text-underline-offset:5px}
.tlink:hover{text-decoration-color:var(--lift)}
.aside-link{margin-top:40px;font-size:1rem;color:var(--muted)}
.aside-link a{font-weight:600;color:var(--blue);text-decoration:underline;text-decoration-color:rgba(0,121,200,.35);text-underline-offset:5px}
.aside-link a:hover{text-decoration-color:currentColor}
.band--tint .aside-link a{color:var(--deep)}
.aside-link__end{white-space:nowrap}
/* inline, so a link that wraps keeps its arrow after its last word */
.aside-link svg{display:inline-block;width:16px;height:10px;margin:0 2px 0 8px;vertical-align:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── header (gradient job 3: the 2px line) ─────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;transition:transform var(--t2) var(--settle)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--grad);pointer-events:none}
.hdr.is-up{transform:translateY(calc(-100% - 2px))}
.hdr__in{display:flex;align-items:center;gap:24px;height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--ink);border-radius:10px}
.brand__mark{position:relative;display:grid;place-items:center;width:34px;height:34px;padding-bottom:5px;border-radius:10px;border:1px solid var(--line-2);background:#fff;font:900 .875rem/1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.brand__mark::after{content:"";position:absolute;left:9px;right:9px;bottom:7px;height:2.5px;border-radius:2px;background:var(--grad)}
.brand__name{font:800 1.125rem/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.brand--night{color:#fff}
.brand--night .brand__mark{background:transparent;border-color:rgba(255,255,255,.24);color:#fff}
.hdr__nav{margin-left:auto;display:flex;gap:28px}
.hdr__nav a{position:relative;padding:10px 0;color:var(--text);text-decoration:none;font:500 .9375rem/1 var(--body)}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--settle)}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{transform:scaleX(1)}
.burger{display:none;position:relative;width:44px;height:44px;margin:0 -8px 0 auto;border:0;background:none;border-radius:12px;cursor:pointer}
.burger i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t2) var(--settle),top var(--t2) var(--settle)}
.burger i:nth-of-type(1){top:17px}
.burger i:nth-of-type(2){top:25px}
.burger[aria-expanded=true] i:nth-of-type(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:nth-of-type(2){top:21px;transform:rotate(-45deg)}

.menu{position:fixed;inset:62px 0 0 0;z-index:49;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto;padding:12px var(--gut) calc(24px + env(safe-area-inset-bottom));background:#fff;opacity:0;transform:translateY(-8px);transition:opacity var(--t2) var(--settle),transform var(--t2) var(--settle)}
.menu.is-open{opacity:1;transform:none}
.menu__nav a{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:800 1.75rem/1.1 var(--display);letter-spacing:-.03em}
.menu__nav span{width:24px;font:600 .75rem/1 var(--body);letter-spacing:.12em;color:var(--deep);font-variant-numeric:tabular-nums}
.menu__foot{display:grid;gap:14px}
.menu__foot .pill{min-height:54px}
.menu__mail{text-align:center;color:var(--blue);font-weight:600}
html:not(.js) .burger{display:none!important}

/* ==========================================================================
   1 · THE OPENER: the typing headline and the build
   ========================================================================== */
.opener{position:relative;padding:clamp(24px,.5rem + 2vw,40px) 0 clamp(64px,2rem + 5vw,112px);overflow:hidden;isolation:isolate}
/* the drafting grid the phone is built on */
.opener::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 52% 62% at 76% 52%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 52% 62% at 76% 52%,#000 30%,transparent 75%)}
.opener__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);grid-template-areas:"top rig" "more rig";grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px)}
.opener__top{grid-area:top;padding-top:6px;min-width:0}
.opener__more{grid-area:more;padding-top:24px;min-width:0}

.kicker{display:inline-flex;align-items:flex-start;gap:10px;font:600 .75rem/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kicker__nw{white-space:nowrap}
.kicker__dot{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--bright);box-shadow:0 0 0 4px rgba(0,145,234,.16)}

/* the typing headline: a real input inside the h1 */
.h1{margin-top:18px;font-size:var(--fs-display);line-height:1.0;letter-spacing:-.035em}
.h1 .ln{display:block}
.h1__note{display:inline-flex;align-items:flex-end;gap:4px;margin-left:.45em;vertical-align:.5em;font:600 .6875rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--deep);transition:opacity var(--t2) var(--settle)}
.h1__note svg{width:30px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:translateY(.95em)}
.h1.is-filled .h1__note{opacity:0}
html:not(.js) .h1__note{display:none}
.ln--firm{position:relative;white-space:nowrap;min-height:1.06em}
.firm{display:inline-block;vertical-align:baseline;width:6.6em;max-width:100%;margin:0 -.05em;padding:0 .05em .03em;border:0;border-radius:.1em;
  background-color:transparent;background-image:linear-gradient(90deg,rgba(0,145,234,.75) 55%,transparent 0);background-size:.2em .055em;background-repeat:repeat-x;background-position:0 96%;
  color:var(--deep);font:inherit;letter-spacing:-.035em;line-height:1.08;caret-color:var(--bright);outline:none;transition:background-color var(--t1)}
.firm::placeholder{color:var(--blue);opacity:1}
.firm:focus{background-color:rgba(0,145,234,.07);background-image:linear-gradient(90deg,var(--bright),var(--bright));background-size:100% .06em}
.firm:focus-visible{outline:2px solid var(--bright);outline-offset:4px}
.firm__mirror{position:absolute;left:0;top:0;max-width:100%;overflow:hidden;visibility:hidden;white-space:pre;pointer-events:none}
/* a resting caret says "type here" before anyone has */
.firm__caret{position:absolute;left:0;top:.16em;width:.055em;min-width:3px;height:.78em;border-radius:2px;background:var(--bright);pointer-events:none;opacity:0}
html.js .h1:not(.is-filled) .ln--firm:not(:focus-within) .firm__caret{opacity:1;animation:blink 1.1s steps(1) infinite}
.opener__dom{display:none}

/* the business-type picker (native radios: arrow keys move, one tab stop) */
.picker{margin-top:26px}
.picker legend{margin-bottom:12px}
.picker__grid{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick>span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border:1px solid var(--line-2);border-radius:99px;background:#fff;color:var(--text);font:500 .9375rem/1 var(--body);white-space:nowrap;pointer-events:none;transition:background-color var(--t1),border-color var(--t1),color var(--t1)}
.pick svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t1)}
.pick:hover>span{border-color:rgba(11,79,158,.55)}
.pick input:checked+span{background:var(--deep);border-color:var(--deep);color:#fff}
.pick input:checked+span svg{stroke:var(--lift)}
.pick input:focus-visible+span{outline:2px solid var(--bright);outline-offset:3px}
.pick__t{display:inline}
.pick__x{display:inline}
html:not(.js) .picker,html:not(.js) .log__ctl{display:none}

.opener__stand{font-size:1.125rem;line-height:1.6;color:var(--text);max-width:34em;text-wrap:pretty}
.opener__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:22px}
.opener__note{font-size:.875rem;line-height:1.5;color:var(--muted)}
.opener__note b{font:800 1rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
/* phones: the ready visitor can act without scrolling past the demo */
.opener__go{display:none}

/* ── the rig: drawing (dimensions + phone + callouts), build log, caption ─ */
.rig{grid-area:rig;align-self:center;margin:0;display:grid;grid-template-columns:auto 220px;grid-template-areas:"stage log" "cap cap";column-gap:52px;align-items:center;justify-content:center;min-width:0}
.rig__stage{grid-area:stage;position:relative;display:flex;justify-content:center}
.rig__stage::before{content:"";position:absolute;left:50%;top:55%;width:150%;height:80%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(0,145,234,.18),rgba(0,145,234,0))}
.rig__draw{position:relative;padding:30px 36px 0 30px}
.log{grid-area:log;position:relative}
.rig__cap{grid-area:cap;justify-self:center;max-width:46ch;margin-top:22px;font-size:.8125rem;line-height:1.5;color:var(--muted);text-align:center}

/* dimension lines, drawn */
.dim{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--deep);font:600 .6875rem/1 var(--body);letter-spacing:.08em;font-variant-numeric:tabular-nums;pointer-events:none}
.dim::before,.dim::after{content:"";position:absolute}
.dim span{position:relative;z-index:1;padding:0 6px;background:var(--white)}
.dim--x{left:30px;right:36px;top:6px;height:12px}
.dim--x::before{left:0;right:0;top:50%;height:1px;background:var(--draw)}
.dim--x::after{inset:0;border-left:1px solid var(--draw);border-right:1px solid var(--draw)}
.dim--y{left:6px;top:30px;bottom:0;width:12px;writing-mode:vertical-rl}
.dim--y span{transform:rotate(180deg)}
.dim--y::before{top:0;bottom:0;left:50%;width:1px;background:var(--draw)}
.dim--y::after{inset:0;border-top:1px solid var(--draw);border-bottom:1px solid var(--draw)}
.dim--night{color:var(--lift)}
.dim--night::before{background:var(--draw-n)!important}
.dim--night::after{border-color:var(--draw-n)!important}
.dim--night span{background:var(--night)}

/* the phone */
.phone{--pw:clamp(250px,21vw,300px);position:relative;width:var(--pw);aspect-ratio:9/19.3;padding:calc(var(--pw) * .034);border-radius:calc(var(--pw) * .16);background:#0A0F1C;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09),0 0 0 1px #05070D,0 60px 90px -40px rgba(11,79,158,.55),0 30px 50px -36px rgba(10,15,28,.7)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#1A2234}
.phone::before{left:-3px;top:22%;height:9%}
.phone::after{right:-3px;top:28%;height:14%}
.phone__screen{container-type:inline-size;position:relative;height:100%;overflow:hidden;border-radius:calc(var(--pw) * .13);background:#F7F8FA;font-family:var(--body)}

.ph-status{position:relative;display:flex;justify-content:space-between;align-items:center;height:11cqw;padding:1cqw 7.5cqw 0 9cqw;font:600 3.9cqw/1 var(--body);color:var(--ink)}
.ph-status::after{content:"";position:absolute;left:50%;top:2.6cqw;width:27cqw;height:7.4cqw;transform:translateX(-50%);border-radius:99px;background:#0A0F1C}
.ph-status__r{display:flex;gap:1.6cqw;align-items:center}
.ph-status__r svg{width:auto;height:3.2cqw;fill:currentColor}
.ph-bar{position:relative;display:flex;align-items:center;gap:2cqw;height:10.5cqw;margin:1.2cqw 4cqw 0;padding:0 3.6cqw;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(20,21,25,.07),0 1px 2px rgba(20,21,25,.06)}
.ph-bar__in{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:1.4cqw;font:500 3.9cqw/1 var(--body);color:var(--text)}
.ph-lock{flex:none;width:2.8cqw;height:3.3cqw;fill:var(--text);color:var(--text);transition:opacity var(--t2),width var(--t2) var(--settle)}
.ph-dom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity var(--t2)}
.ph-building{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0;transition:opacity .3s}
.ph-building::after{content:"";width:1.4cqw;height:1.4cqw;margin-left:1.4cqw;border-radius:50%;background:var(--bright);animation:blink 1s steps(2) infinite}
.ph-dot{flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;border:.5cqw solid var(--mist);transition:background-color .3s,border-color .3s}
.ph-prog{position:absolute;left:5cqw;right:5cqw;bottom:-1.8cqw;height:2px;border-radius:2px;background:rgba(11,79,158,.12);overflow:hidden;transition:opacity .6s .9s}
.ph-prog i{position:absolute;inset:0;background:var(--grad);transform-origin:left;transform:scaleX(var(--p,1));transition:transform var(--t3) var(--settle)}
.phone:not(.is-s5) .ph-lock{opacity:0;width:0}
.phone:not(.is-s5) .ph-dom{opacity:0}
.phone:not(.is-s5) .ph-building{opacity:1}
.phone.is-s5 .ph-prog{opacity:0}
.phone.is-s5 .ph-dot{background:var(--bright);border-color:var(--bright);animation:live 2.4s var(--settle) infinite}

/* the example site inside the phone; every size in cqw so it scales with it */
.ms{--sk:rgba(11,79,158,.1);--sk-d:rgba(255,255,255,.13);position:absolute;left:0;right:0;top:26.5cqw;bottom:0;overflow:hidden;background:#fff;color:var(--ink)}
.ms__in{transform:translateY(var(--sy,0));transition:transform 1.6s var(--settle)}
.ms__nav{display:flex;align-items:center;gap:2.4cqw;height:12.5cqw;padding:0 5cqw;border-bottom:1px solid rgba(20,21,25,.07)}
.ms__mark{flex:none;display:grid;place-items:center;width:7.6cqw;height:7.6cqw;border-radius:2cqw;background:var(--deep);color:#fff;font:800 3.1cqw/1 var(--display);letter-spacing:-.02em}
.ms__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 4.4cqw/5.4cqw var(--display);letter-spacing:-.02em;--lh:5.4cqw}
.ms__menu{display:grid;gap:1cqw;width:5cqw}
.ms__menu i{height:.55cqw;border-radius:1cqw;background:currentColor}
.ms__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sk)}
.ms__img svg{width:100%;height:100%}
.ms__copy{padding:5cqw 5cqw 6cqw}
.ms__eye{display:inline-block;margin-bottom:1.8cqw;font:600 2.8cqw/4cqw var(--body);--lh:4cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ms__h{min-height:15.2cqw;margin-bottom:2.4cqw;font:800 7.2cqw/7.6cqw var(--display);--lh:7.6cqw;letter-spacing:-.03em;color:var(--ink)}
.ms__p{margin-bottom:4cqw;font:400 3.45cqw/5.1cqw var(--body);--lh:5.1cqw;color:var(--muted)}
.ms__btns{display:flex;gap:2cqw}
.ms__btn{display:inline-flex;align-items:center;gap:1.4cqw;height:9.4cqw;padding:0 3.8cqw;border:1px solid transparent;border-radius:99px;background:var(--blue);color:#fff;font:600 3.2cqw/1 var(--body);white-space:nowrap}
.ms__btn svg{width:3.4cqw;height:3.4cqw;fill:currentColor}
.ms__btn--o{background:transparent;color:var(--ink);border-color:rgba(20,21,25,.2)}
.ms__sec{padding:5.5cqw 5cqw 0}
.ms__t{display:inline-block;margin-bottom:2.2cqw;font:800 4.6cqw/5.6cqw var(--display);--lh:5.6cqw;letter-spacing:-.02em;color:var(--ink)}
.ms__list{list-style:none}
.ms__list li{display:flex;align-items:center;gap:2.6cqw;padding:2.5cqw 0;border-top:1px solid rgba(20,21,25,.07);font:500 3.4cqw/4.6cqw var(--body);--lh:4.6cqw;color:var(--text)}
.ms__list li::after{content:"";margin-left:auto;width:1.6cqw;height:1.6cqw;border-top:.45cqw solid var(--muted);border-right:.45cqw solid var(--muted);transform:rotate(45deg)}
.ms__list i{position:relative;flex:none;width:4.8cqw;height:4.8cqw;border-radius:50%;background:rgba(0,121,200,.12)}
.ms__list i::after{content:"";position:absolute;left:1.55cqw;top:1.25cqw;width:1.6cqw;height:.9cqw;border-left:.45cqw solid var(--blue);border-bottom:.45cqw solid var(--blue);transform:rotate(-45deg)}
.ms__b{padding-bottom:22cqw}
.ms::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24cqw;background:linear-gradient(rgba(255,255,255,0),#fff 55%);pointer-events:none}
/* the business-type section ("B"): one shape per kind of business */
.ms-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.ms-tile{position:relative;aspect-ratio:1;overflow:hidden;border-radius:2.4cqw;background:var(--sk)}
.ms-tile svg{width:100%;height:100%}
.ms-map{overflow:hidden;border-radius:3cqw;aspect-ratio:5/2;background:var(--sk)}
.ms-map svg{width:100%;height:100%}
.ms-rows{list-style:none}
.ms-rows li{display:flex;justify-content:space-between;gap:3cqw;padding:2.3cqw 0;border-top:1px solid rgba(20,21,25,.07);font:500 3.3cqw/4.4cqw var(--body);--lh:4.4cqw;color:var(--text)}
.ms-rows li b{font-weight:600;color:var(--ink);white-space:nowrap}
.ms-chips{display:flex;flex-wrap:wrap;gap:1.6cqw}
.ms-chips span{padding:1.3cqw 3cqw;border:1px solid rgba(0,121,200,.3);border-radius:99px;font:500 3.1cqw/4.2cqw var(--body);--lh:4.2cqw;color:var(--deep)}
.ms-steps{list-style:none;display:grid;gap:2cqw}
.ms-steps li{display:flex;align-items:center;gap:2.6cqw;font:500 3.4cqw/4.6cqw var(--body);--lh:4.6cqw;color:var(--text)}
.ms-steps b{flex:none;display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:50%;background:var(--tint-2);color:var(--deep);font:800 3.1cqw/1 var(--display)}
.ms-ban{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:4.4cqw;border-radius:3.4cqw;background:var(--deep);color:#fff}
.ms-ban b{display:block;font:800 4.3cqw/5.2cqw var(--display);--lh:5.2cqw;letter-spacing:-.02em}
.ms-ban small{display:block;font:400 3.1cqw/4.4cqw var(--body);--lh:4.4cqw;color:var(--haze)}
.ms-ban__btn{flex:none;display:inline-flex;align-items:center;height:8.4cqw;padding:0 4cqw;border-radius:99px;background:#fff;color:var(--deep);font:700 3.1cqw/1 var(--body)}
.ms__call{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:flex;align-items:center;justify-content:space-between;height:12.5cqw;padding:0 1.6cqw 0 5cqw;border-radius:99px;background:var(--ink);color:#fff;font:500 3.4cqw/1 var(--body);box-shadow:0 3cqw 6cqw -2cqw rgba(10,15,28,.45);transition:transform .7s var(--snap),opacity .3s}
.ms__call>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms__call b{font-weight:700}
.ms__call i{flex:none;width:9.4cqw;height:9.4cqw;margin-left:2cqw;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 3.5 9 3l1.6 4.2-2 1.3a11 11 0 0 0 6.9 6.9l1.3-2L21 15l-.5 2.4a2 2 0 0 1-2 1.6A15.5 15.5 0 0 1 5 5.5a2 2 0 0 1 1.6-2Z'/%3E%3C/svg%3E") center/48% no-repeat}

/* dark-toned example sites */
.phone[data-tone=dark] .ms__nav,.phone[data-tone=dark] .ms__hero{background:var(--night-2);color:#fff;--sk:var(--sk-d)}
.phone[data-tone=dark] .ms__nav{border-color:rgba(255,255,255,.08)}
.phone[data-tone=dark] .ms__mark{background:var(--blue)}
.phone[data-tone=dark] .ms__hero{padding:0 4cqw}
.phone[data-tone=dark] .ms__img{border-radius:3.6cqw;aspect-ratio:16/9.4}
.phone[data-tone=dark] .ms__copy{padding:5cqw 1cqw 6cqw}
.phone[data-tone=dark] .ms__eye{color:var(--lift)}
.phone[data-tone=dark] .ms__h{color:#fff}
.phone[data-tone=dark] .ms__p{color:var(--mist)}
.phone[data-tone=dark] .ms__btn--o{color:#fff;border-color:rgba(255,255,255,.3)}

/* build stages: 1 layout · 2 words · 3 photos · 4 buttons · 5 live */
.ms .b{opacity:0;transform:translateY(1.6cqw);transition:opacity .35s var(--settle),transform .6s var(--settle);transition-delay:var(--d,0s)}
.phone.is-s1 .ms .b{opacity:1;transform:none}
.ms .w{color:transparent!important;background-image:linear-gradient(var(--sk),var(--sk));background-size:100% calc(var(--lh,1em) * .62);background-repeat:repeat-y;background-position:0 calc(var(--lh,1em) * .19);border-radius:1cqw;transition:color .4s var(--settle);transition-delay:var(--d,0s)}
.ms .w.ms__mark{background-image:none;background-color:var(--sk)}
.ms .w i,.ms .w::after{opacity:0;transition:opacity .4s}
.phone.is-s2 .ms .w{color:inherit!important;background-image:none}
.phone.is-s2 .ms .w.ms__mark{color:#fff!important;background-color:var(--deep)}
.phone.is-s2[data-tone=dark] .ms .w.ms__mark{background-color:var(--blue)}
.phone.is-s2 .ms .ms__eye.w{color:var(--blue)!important}
.phone.is-s2[data-tone=dark] .ms .ms__eye.w{color:var(--lift)!important}
.phone.is-s2 .ms .ms__p.w{color:var(--muted)!important}
.phone.is-s2[data-tone=dark] .ms .ms__p.w{color:var(--mist)!important}
.phone.is-s2 .ms .ms-chips .w{color:var(--deep)!important}
.phone.is-s2 .ms .ms-ban small.w{color:var(--haze)!important}
.phone.is-s2 .ms .w i,.phone.is-s2 .ms .w::after{opacity:1}
.phone.is-typing .ms__h::after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.04em;vertical-align:-.08em;background:var(--bright);animation:blink .8s steps(2) infinite}
.ms .p svg{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--settle);transition-delay:var(--d,0s)}
.phone.is-s3 .ms .p svg{clip-path:inset(0 0 0 0)}
.ms .k{background:var(--sk)!important;border-color:transparent!important;color:transparent!important}
.ms .k svg{opacity:0}
.phone.is-s4 .ms .k{background:var(--blue)!important;color:#fff!important;animation:drop .6s var(--snap) both;animation-delay:var(--d,0s)}
.phone.is-s4 .ms .ms__btn--o.k{background:transparent!important;color:var(--ink)!important;border-color:rgba(20,21,25,.2)!important}
.phone.is-s4[data-tone=dark] .ms .ms__btn--o.k{color:#fff!important;border-color:rgba(255,255,255,.3)!important}
.phone.is-s4 .ms .ms-ban__btn.k{background:#fff!important;color:var(--deep)!important}
.phone.is-s4 .ms .k svg{opacity:1}
.ms__call{transform:translateY(calc(100% + 6cqw))}
.phone.is-s4 .ms__call{transform:none}

/* the moment it is sent */
.ph-note{position:absolute;left:3cqw;right:3cqw;top:2.6cqw;z-index:3;display:grid;grid-template-columns:9cqw 1fr auto;gap:2.8cqw;align-items:center;padding:3cqw 3.6cqw 3cqw 3cqw;border-radius:5.4cqw;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(20,21,25,.06),0 4cqw 10cqw -3cqw rgba(10,15,28,.35);transform:translateY(calc(-100% - 6cqw));transition:transform .7s var(--settle)}
.ph-note.is-on{transform:none}
.ph-note__icon{display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:2.4cqw;background:var(--grad);color:#fff;font:900 3.2cqw/1 var(--display);letter-spacing:-.04em}
.ph-note__txt{display:grid;gap:.6cqw;min-width:0}
.ph-note__txt b{font:700 3.3cqw/1.2 var(--body);color:var(--ink)}
.ph-note__txt span{font:400 3.1cqw/1.3 var(--body);color:var(--text)}
.ph-note__t{align-self:start;font:400 2.7cqw/1 var(--body);color:var(--muted)}

/* numbered callouts: a leader from the part to a circle past the bezel */
.callouts{position:absolute;inset:0;pointer-events:none}
.co{position:absolute;left:0;top:0;height:0;width:var(--w,40px);transform:translate(var(--x,0),var(--y,0));opacity:0;transition:opacity var(--t2) var(--settle)}
.co::before{content:"";position:absolute;left:0;right:11px;top:-.5px;height:1px;background:var(--draw);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--settle)}
.co::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;border:1px solid var(--blue)}
.co i{position:absolute;right:-11px;top:-11px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--blue);background:#fff;font:700 .6875rem/1 var(--body);font-style:normal;color:var(--deep);font-variant-numeric:tabular-nums;transform:scale(.4);transition:transform .5s var(--snap)}
.co.is-on{opacity:1}
.co.is-on::before{transform:scaleX(1)}
.co.is-on i{transform:none}
.rig__draw.is-peek .co:not([data-s="5"]){opacity:0}
html:not(.js) .callouts{display:none}

/* build log (the callouts' key) */
.log__h{display:grid;gap:6px;margin-bottom:18px}
.log__dom{font:700 1.0625rem/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.log__list{--lp:1;position:relative;list-style:none;padding:0 0 0 34px}
.log__list::before,.log__list::after{content:"";position:absolute;left:10px;top:20px;bottom:20px;width:2px;border-radius:2px;background:var(--line-2)}
.log__list::after{background:linear-gradient(180deg,#0091EA,#0B4F9E);transform-origin:top;transform:scaleY(var(--lp));transition:transform var(--t3) var(--settle)}
.log__list li{position:relative;padding:9px 0;font:500 .9375rem/1.35 var(--body);color:var(--muted);transition:color .3s}
.log__list li i{position:absolute;left:-34px;top:8px;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(20,21,25,.3);background:#fff;font:700 .6875rem/1 var(--body);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.log__list li.is-now{color:var(--ink)}
.log__list li.is-now i{border-color:var(--bright);color:var(--deep);box-shadow:0 0 0 4px rgba(0,145,234,.16)}
.log__list li.is-done{color:var(--ink)}
.log__list li.is-done i{background:var(--deep);border-color:var(--deep);color:#fff}
.log__ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
#pause .i-play{display:none;fill:currentColor;stroke:none}
#pause[aria-pressed=true] .i-play{display:block}
#pause[aria-pressed=true] .i-pause{display:none}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.band{position:relative;padding-block:var(--sec)}
.band--tint{background:var(--tint)}
.band--tint .addr{background:#fff}
.band--night{background:var(--night);color:var(--haze);isolation:isolate}
.band--night::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 12% 0%,rgba(0,145,234,.2),transparent 70%),radial-gradient(40% 40% at 95% 30%,rgba(0,121,200,.12),transparent 70%)}
.band--grid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-n) 1px,transparent 1px),linear-gradient(90deg,var(--grid-n) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 20%,transparent 80%);mask-image:radial-gradient(120% 70% at 50% 0%,#000 20%,transparent 80%)}
.band--night h2,.band--night h3{color:#fff}
.band--night .lead{color:var(--mist)}
.band--night .addr{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:var(--mist)}
.band--night .addr b{color:var(--lift)}
.band--night a.addr:hover{border-color:rgba(108,193,255,.5);color:#fff}
.band--night .label{color:var(--mist)}
.band--night :focus-visible{outline-color:var(--lift)}
.band__head{max-width:820px;margin-bottom:clamp(40px,2rem + 3vw,80px)}
.band__head--split{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end}
.band__head--split .lead{margin-top:0}

/* ── 2 · the money timeline (WAI-ARIA tabs) ───────────────────────────── */
.tl__rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:40px}
.tl__tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 4px;border:0;border-radius:12px;background:none;color:var(--muted);font:600 .9375rem/1.25 var(--body);text-align:center;cursor:pointer}
.tl__n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink);font:800 1.0625rem/1 var(--display);transition:background-color .3s,border-color .3s,color .3s,box-shadow var(--t2) var(--settle)}
.tl__tab:hover .tl__n{border-color:var(--deep)}
.tl__tab.is-past .tl__n{border-color:var(--deep);color:var(--deep)}
.tl__tab[aria-selected=true]{color:var(--ink)}
.tl__tab[aria-selected=true] .tl__n{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 0 0 7px rgba(0,145,234,.14)}
.tl__track{position:absolute;left:10%;right:10%;top:22px;height:2px;border-radius:2px;background:var(--line-2)}
.tl__track i{position:absolute;inset:0;border-radius:2px;background:var(--grad);transform-origin:left;transform:scaleX(var(--tp,0));transition:transform var(--t3) var(--settle)}
html:not(.js) .tl__rail,html:not(.js) .meter__nav{display:none}
.tl__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:stretch}
.tl__panels{list-style:none;min-height:300px;padding:clamp(28px,2rem + 1.5vw,56px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.tl__p+.tl__p{margin-top:32px}
.js .tl__p{display:none;margin:0}
.js .tl__p.is-on{display:block;animation:rise .6s var(--settle) both}
.tl__p h3{max-width:16em;font-size:clamp(1.625rem,1.1rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.03em}
.tl__pn{display:block;margin-bottom:18px;font:600 .8125rem/1 var(--body);letter-spacing:.12em;color:var(--deep)}
.tl__p p{max-width:36em;margin-top:18px;font-size:1.0625rem;line-height:1.7;color:var(--text)}
.meter{position:relative;display:flex;flex-direction:column;padding:clamp(28px,2rem + 1vw,44px);border-radius:var(--r-lg);background:var(--night-2);color:var(--haze);overflow:hidden;isolation:isolate}
.meter::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 90% 0%,rgba(0,145,234,.28),transparent 70%)}
.meter .label{color:var(--mist)}
.meter__amt{margin-top:10px;font:900 clamp(4.5rem,3rem + 5vw,7.5rem)/.9 var(--display);letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums}
.meter__note{max-width:26em;margin-top:16px;font-size:1rem;line-height:1.55;color:var(--haze)}
.meter__split{margin-top:18px}
.js .meter__split:not(.is-on){display:none}
.meter__split p{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line-n);font-size:.9375rem;color:var(--haze)}
.meter__split b{font:800 1.125rem/1.2 var(--display);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.meter__nav{display:flex;gap:8px;margin-top:auto;padding-top:28px}

/* ── 3 · proof: the live sites, annotated ─────────────────────────────── */
.proof__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:clamp(28px,3vw,48px);border-top:1px solid var(--line-n2)}
html:not(.js) .proof__tabs{display:none}
.proof__tab{position:relative;display:grid;align-content:start;gap:4px;min-width:0;padding:16px 10px 16px 0;border:0;background:none;color:var(--mist);text-align:left;cursor:pointer;transition:color var(--t1)}
.proof__tab+.proof__tab{padding-left:16px;border-left:1px solid var(--line-n)}
.proof__tab::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--lift);transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--settle)}
.proof__tab[aria-selected=true]{color:#fff}
.proof__tab[aria-selected=true]::before{transform:scaleX(1)}
.proof__tab:hover{color:#fff}
.proof__tab:focus-visible{outline-offset:-2px}
.proof__tl{font:700 .75rem/1 var(--body);letter-spacing:.14em;color:var(--lift)}
.proof__tn{font:800 clamp(1rem,.8rem + 1.3vw,1.625rem)/1.1 var(--display);letter-spacing:-.025em}
.proof__tt{display:none;font-size:.875rem;line-height:1.35;color:var(--mist)}
.proof__panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.proof__panel:focus-visible{outline-offset:8px;border-radius:12px}
html.js .proof__panel[hidden]{display:none}
html:not(.js) .proof__panel+.proof__panel{margin-top:72px;padding-top:72px;border-top:1px solid var(--line-n)}

.handset{--pw:clamp(272px,23vw,316px);position:relative;padding-top:28px}
.handset .dim--x{left:0;right:0;top:2px}
.handset__body{position:relative;width:var(--pw);padding:10px;border-radius:40px;background:#05070D;border:1px solid rgba(108,193,255,.3);box-shadow:0 0 0 6px rgba(108,193,255,.04),0 50px 90px -40px rgba(0,145,234,.45)}
.handset__bar{display:flex;align-items:center;gap:7px;height:38px;margin:4px 6px 8px;padding:0 12px;border-radius:99px;background:var(--night-2);color:#fff;font:600 .75rem/1 var(--body);white-space:nowrap;overflow:hidden}
.handset__bar svg{flex:none;width:12px;height:12px;fill:none;stroke:var(--lift);stroke-width:2.4}
.handset__bar span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.live-dot{flex:none;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--bright);box-shadow:0 0 0 3px rgba(0,145,234,.25)}
.handset__screen{position:relative;height:calc(var(--pw) * 1.58);overflow:hidden;border-radius:28px}
.handset__scroll{position:relative;transform:translateY(calc(var(--off,0) * -1px));transition:transform 1.1s var(--settle);will-change:transform}
.handset__scroll img{width:100%;height:auto}
.pin{position:absolute;left:var(--x);top:calc(var(--y) / var(--h) * 100%);display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:var(--night);border:1.5px solid var(--lift);color:#fff;font:700 .75rem/1 var(--body);box-shadow:0 0 0 4px rgba(10,15,28,.35);opacity:.6;
  transition:opacity var(--t2),transform var(--t2) var(--settle),background-color var(--t2)}
/* white numbers sit on --blue (4.60), never on --bright (3.37) */
.pin.is-on{opacity:1;background:var(--blue);border-color:#fff;transform:scale(1.15);box-shadow:0 0 0 6px rgba(0,145,234,.3)}

.notes{min-width:0;max-width:620px}
.notes__live{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;font:500 .875rem/1 var(--body);color:var(--mist)}
.live-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 9px;border:1px solid rgba(108,193,255,.45);border-radius:99px;font:700 .6875rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lift)}
.live-chip i{width:7px;height:7px;border-radius:50%;background:var(--bright);box-shadow:0 0 0 3px rgba(0,145,234,.22)}
.notes__h{margin-bottom:6px;font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.05;letter-spacing:-.03em}
.notes__meta{margin-bottom:22px;color:var(--mist)}
.notes__list{list-style:none;border-top:1px solid var(--line-n)}
.note{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;width:100%;padding:16px 8px 16px 0;border:0;border-bottom:1px solid var(--line-n);background:none;color:var(--haze);font-size:1rem;line-height:1.5;text-align:left;cursor:pointer;transition:background-color var(--t1)}
.note b{display:block;margin-bottom:2px;color:#fff;font-weight:600}
.note:hover{background:rgba(108,193,255,.04)}
.note[aria-pressed=true]{background:linear-gradient(90deg,rgba(0,145,234,.1),transparent 70%)}
.mk{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--blue);background:#fff;font:700 .75rem/1 var(--body);color:var(--deep);font-variant-numeric:tabular-nums;transition:background-color var(--t2),border-color var(--t2)}
.mk--night{background:var(--night);border-color:var(--lift);color:#fff}
.note[aria-pressed=true] .mk{background:var(--blue);border-color:#fff}
html:not(.js) .note{cursor:default}
.notes__also{margin-top:18px;font-size:.9375rem;line-height:1.6;color:var(--mist)}
.quote{margin-top:26px;padding-left:20px;border-left:2px solid var(--lift)}
.quote>blockquote p{font:600 clamp(1.125rem,1rem + .5vw,1.3125rem)/1.4 var(--display);letter-spacing:-.01em;color:#fff;text-wrap:pretty}
.quote figcaption{margin-top:10px;font-size:.875rem;color:var(--mist)}
.quote figcaption b{color:#fff;font-weight:600}
.quote details{margin-top:8px}
.quote summary{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:var(--lift);font-weight:600;font-size:.9375rem;list-style:none;cursor:pointer}
.quote summary::-webkit-details-marker{display:none}
.quote summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.quote details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.quote__full p{margin-top:12px;font-size:.9375rem;line-height:1.65;color:var(--haze)}
.notes__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.notes__cta .pill:focus-visible{outline-color:var(--lift)}

/* ── 4 · who it's for ─────────────────────────────────────────────────── */
.who{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.who__head .lead{max-width:30em}
.who__list>.label{margin-bottom:14px}
.who__list>.label+.sectors{margin-bottom:32px}
.sectors{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.sectors a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 20px;border:1px solid var(--line-2);border-radius:99px;background:#fff;color:var(--ink);font:700 1.0625rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;transition:border-color var(--t1),color var(--t1),transform var(--t1) var(--settle)}
.sectors a::after{content:"";width:12px;height:12px;flex:none;background:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h17M13 1.5 18 6l-5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h17M13 1.5 18 6l-5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t1) var(--settle)}
.sectors a:hover{border-color:var(--deep);color:var(--deep)}
.sectors a:hover::after{transform:translateX(3px)}
.sectors--sm a{min-height:40px;padding:0 14px 0 16px;font:600 .9375rem/1 var(--body);letter-spacing:0;color:var(--text)}
.sectors--sm a::after{width:10px;height:10px}
.who__else{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)}
.who__else a{font-weight:600}

/* ── 5 · the price builder and the bill ───────────────────────────────── */
.pb{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:start;margin:0}
.pb__set{margin:0 0 40px}
.pb__set:last-child{margin-bottom:0}
.pb__set legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:16px;font:800 1.25rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pb__no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:#fff;font:800 .875rem/1 var(--display);color:var(--deep)}
.pb__sub{font:500 .875rem/1.3 var(--body);letter-spacing:0;color:var(--muted)}
.pb__set--row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.pb__set--row legend{float:left;margin:0}
.pb__plans{display:grid;gap:12px}
.plan{position:relative;display:block}
.plan input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.plan__in{position:relative;display:block;padding:20px 22px 20px 58px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;cursor:pointer;transition:border-color var(--t1),box-shadow var(--t2) var(--settle)}
.plan__in::before{content:"";position:absolute;left:22px;top:24px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--muted);background:#fff;transition:border-color var(--t1),box-shadow var(--t1)}
.plan__in:hover{border-color:rgba(11,79,158,.5)}
.plan input:checked+.plan__in{border-color:var(--deep);box-shadow:0 0 0 1px var(--deep),0 18px 36px -24px rgba(11,79,158,.55)}
.plan input:checked+.plan__in::before{border-color:var(--deep);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 10px var(--deep)}
.plan input:focus-visible+.plan__in{outline:2px solid var(--bright);outline-offset:3px}
.plan__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.plan__name{font:800 1.25rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.plan__price{font:800 1.5rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.plan input:checked+.plan__in .plan__price{color:var(--deep)}
.plan__what{display:block;max-width:48ch;margin-top:6px;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.stepper{display:inline-flex;align-items:center;height:50px;border:1px solid var(--line-2);border-radius:99px;background:#fff}
.stepper__b{display:grid;place-items:center;width:50px;height:48px;border:0;border-radius:99px;background:none;color:var(--ink);cursor:pointer}
.stepper__b:hover{color:var(--deep)}
.stepper__b:disabled{opacity:.35;cursor:default}
.stepper__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.stepper__v{min-width:36px;text-align:center;font:800 1.25rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
html:not(.js) .stepper,html:not(.js) #askBtn{display:none}
.pb__hint{flex-basis:100%;max-width:52ch;margin-top:12px;font-size:.875rem;line-height:1.55;color:var(--muted)}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;max-width:100%;padding:4px;border-radius:99px;background:var(--tint-2)}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;height:100%;min-height:42px;padding:6px 18px;border-radius:99px;color:var(--text);font:600 .90625rem/1.2 var(--body);text-align:center;pointer-events:none;transition:background-color var(--t1),color var(--t1),box-shadow var(--t1)}
.seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line-2),0 2px 6px -2px rgba(10,15,28,.18)}
.seg input:focus-visible+span{outline:2px solid var(--bright);outline-offset:2px}
.seg input:disabled{cursor:not-allowed}
.seg input:disabled+span{opacity:.38;text-decoration:line-through}
.band--tint .seg{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.band--tint .seg input:checked+span{background:var(--deep);color:#fff;box-shadow:none}
.bill{position:sticky;top:96px;padding:clamp(24px,1.5rem + 1vw,40px);border-radius:var(--r-lg);background:var(--night-2);color:var(--haze);box-shadow:0 50px 90px -50px rgba(11,79,158,.7);overflow:hidden;isolation:isolate}
.bill::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 50% at 100% 0%,rgba(0,145,234,.26),transparent 70%)}
.bill .label{color:var(--mist)}
.bill__h b{display:block;margin-top:8px;font:800 1.625rem/1.15 var(--display);letter-spacing:-.025em;color:#fff;overflow-wrap:anywhere}
.bill__rows{margin-top:22px}
.bill__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--line-n)}
.bill__rows dt{font-size:.9375rem;line-height:1.4;color:var(--haze)}
.bill__rows dt small{display:block;font-size:.8125rem;color:var(--mist)}
.bill__rows dd{font:800 1.125rem/1.2 var(--display);color:#fff;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.bill__rows dd.is-tick{color:var(--lift)}
/* a worded value ("About £10 a year") may break, so its label keeps room */
.bill__rows dd.bill__wd{flex:0 1 auto;max-width:8.5em;white-space:normal;line-height:1.25;text-wrap:balance}
.bill__rows div:has(> .bill__wd) dt{flex:1 1 9em}
.bill__rows .bill__zero dd{font-size:1.5rem;color:var(--lift)}
.bill__rows .bill__tot dt{color:#fff;font-weight:600;align-self:center}
.bill__rows .bill__tot dd{font-size:1.875rem;letter-spacing:-.02em}
.bill__note{margin:14px 0 24px;font-size:.875rem;line-height:1.55;color:var(--mist)}
.bill .pill{width:100%}
.bill .pill:focus-visible{outline-color:var(--lift)}
.also{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px;margin-top:clamp(56px,2.5rem + 3vw,96px)}
.also div{padding-top:18px;border-top:1px solid var(--line-2)}
.also dt{font:800 1.0625rem/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.also dd{margin-top:8px;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.also a{font-weight:600;color:var(--deep)}

/* ── 6 · word of mouth: the search test ───────────────────────────────── */
.said-it{margin-top:26px;font:600 clamp(1.125rem,.95rem + .6vw,1.5rem)/1.35 var(--display);letter-spacing:-.015em;color:var(--muted)}
.said-it+h2{margin-top:8px}
.wom{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,5vw,96px);align-items:start}
.points{list-style:none;margin-top:36px}
.points li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:24px 0;border-top:1px solid var(--line-2)}
.points li:last-child{border-bottom:1px solid var(--line-2)}
.points__n{padding-top:5px;font:800 .9375rem/1 var(--display);color:var(--deep);font-variant-numeric:tabular-nums}
.points h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.02em}
.points p{margin-top:8px;font-size:1rem;line-height:1.65;color:var(--text)}
.wom .aside-link{margin-top:28px}
.srch{position:sticky;top:96px;margin:0}
.srch .seg{display:grid;width:100%;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.srch .seg input:checked+span{background:var(--deep);color:#fff;box-shadow:none}
html:not(.js) .srch .seg{display:none}
.srch__card{display:grid;margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 40px 70px -40px rgba(10,15,28,.3)}
.srch__card>*{grid-column:1;min-width:0}
.srch__q{grid-row:1;display:flex;align-items:center;gap:10px;height:50px;padding:0 18px;border-radius:99px;background:var(--tint-2);font:500 1rem/1 var(--body);color:var(--ink);overflow:hidden;white-space:nowrap}
.srch__q span{overflow:hidden;text-overflow:ellipsis}
.srch__q svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.srch__res{grid-row:2;padding:6px 4px 2px;transition:opacity var(--t2) var(--settle),transform .6s var(--settle),visibility var(--t2)}
.js .srch__card[data-state=without] .srch__res--with,.js .srch__card[data-state=with] .srch__res--without{opacity:0;visibility:hidden;transform:translateY(10px)}
html:not(.js) .srch__res--with{grid-row:3;border-top:1px dashed var(--line-2);margin-top:8px}
.r{display:block;padding:16px 6px;border-bottom:1px solid var(--line)}
.r:last-child{border-bottom:0}
.r__src{display:flex;align-items:center;gap:8px;min-width:0;font-size:.8125rem;color:var(--muted);overflow-wrap:anywhere}
.r__src>span{min-width:0}
.r__src i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tint-2);font:800 .625rem/1 var(--display);font-style:normal;color:#fff}
.r__t{display:block;margin-top:6px;font:600 1.0625rem/1.3 var(--body);color:var(--blue);overflow-wrap:anywhere}
.r__d{display:block;margin-top:4px;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.r--dim .r__t{color:var(--muted)}
.r--rival{margin-top:8px;padding:16px;border:0;border-radius:var(--r-md);background:var(--tint)}
.r--rival .r__t{color:var(--deep)}
.r__call{display:inline-flex;align-items:center;margin-top:12px;padding:8px 16px;border-radius:99px;background:var(--deep);color:#fff;font:600 .8125rem/1 var(--body)}
.r--you{margin-top:8px;padding:16px;border:1.5px solid rgba(0,121,200,.4);border-radius:var(--r-md)}
.r--you .r__src i{background:var(--deep)}
.r__type{color:var(--muted);font-weight:500}
.r__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.r__thumbs svg{width:100%;height:auto;aspect-ratio:10/7;border-radius:10px}
.r__links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.r__links span{padding:7px 12px;border-radius:99px;background:rgba(11,79,158,.08);color:var(--deep);font:600 .8125rem/1 var(--body)}
.r__links .r__call{margin:0 0 0 auto;padding:8px 16px;background:var(--deep);color:#fff}
.srch__out{margin-top:16px;font-size:.9375rem;color:var(--muted)}
.srch__out b{font:800 1.25rem/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.srch__out span{display:block;margin-top:4px;font-size:.8125rem}

/* ── 7 · Archie ───────────────────────────────────────────────────────── */
.archie{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,104px);align-items:start}
.archie__pic{position:sticky;top:96px}
.archie__pic img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);filter:saturate(.86) contrast(1.03)}
.archie__pic figcaption{margin-top:16px;font-size:.875rem;color:var(--muted)}
.archie__pic figcaption b{display:block;font:800 1.0625rem/1.3 var(--display);color:var(--ink)}
.archie__body .lead{color:var(--text)}
.archie__body>p:not(.lead):not(.aside-link){max-width:38em;margin-top:18px;font-size:1.0625rem;line-height:1.7;color:var(--text)}
.faq{max-width:40em;margin-top:48px}
.faq .label{margin-bottom:10px}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;font:800 1.1875rem/1.3 var(--display);letter-spacing:-.015em;color:var(--ink);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background-color:#fff;background-image:linear-gradient(var(--deep),var(--deep)),linear-gradient(var(--deep),var(--deep));background-size:10px 1.6px,1.6px 10px;background-position:center;background-repeat:no-repeat;transition:transform var(--t2) var(--settle)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:36em;margin:0 0 22px;font-size:1rem;line-height:1.65;color:var(--text)}
.faq details a{color:var(--deep);font-weight:600}

/* ── 8 · the ask ──────────────────────────────────────────────────────── */
.band--end{padding-bottom:clamp(72px,3rem + 4vw,128px)}
.ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.addr--you span{color:#fff}
.addr--you b{margin-left:4px;padding-left:9px;border-left:1px solid rgba(255,255,255,.16);color:var(--mist)!important;font-weight:500}
.ask h2{overflow-wrap:anywhere}
.ask__alt{display:grid;gap:12px;margin-top:36px}
.alt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line-n);border-radius:var(--r-md);color:#fff;text-decoration:none;transition:border-color var(--t1),background-color var(--t1)}
.alt:hover{border-color:rgba(108,193,255,.5);background:rgba(255,255,255,.03)}
.alt svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--lift);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.alt>span{min-width:0}
.alt b{display:block;font:700 1.0625rem/1.3 var(--display);color:#fff;overflow-wrap:anywhere}
.alt span span{display:block;font-size:.875rem;color:var(--mist)}
.form{padding:clamp(20px,1rem + 2vw,44px);border:1px solid var(--line-n);border-radius:var(--r-lg);background:rgba(255,255,255,.03)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:block;min-width:0}
.f--wide{grid-column:1/-1}
.f span{display:block;margin-bottom:8px;font:600 .875rem/1.3 var(--body);color:var(--haze)}
.f input,.f textarea{display:block;width:100%;height:52px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:var(--night);color:#fff;font:400 1rem/1.4 var(--body);transition:border-color var(--t1),box-shadow var(--t1)}
.f textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--mist);opacity:1}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--lift);box-shadow:0 0 0 3px rgba(108,193,255,.25)}
.form__go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:26px}
.form__go .pill:focus-visible{outline-color:var(--lift)}
.form__note{max-width:30ch;font-size:.875rem;line-height:1.5;color:var(--mist)}
.form__done{display:none;padding:28px;border:1px solid var(--line-n);border-radius:var(--r-lg);font:700 1.375rem/1.35 var(--display);color:#fff}
.ask.is-done .form{display:none}
.ask.is-done .form__done{display:block}

/* ── footer: the same night chapter as the ask ────────────────────────── */
.site-foot{background:var(--night);color:var(--haze);padding-bottom:calc(40px + env(safe-area-inset-bottom));font-size:.9375rem}
.site-foot>.shell>.site-foot__top{padding-top:56px;border-top:1px solid var(--line-n)}
.site-foot__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.site-foot__line{max-width:40ch;color:var(--mist)}
.site-foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:48px 0}
.site-foot__cols>*{display:grid;align-content:start;min-width:0}
.site-foot__cols .label{margin-bottom:10px;color:var(--lift)}
.site-foot a{color:var(--haze);text-decoration:none}
.site-foot__cols a{display:block;width:fit-content;max-width:100%;padding:6px 0;overflow-wrap:anywhere}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.site-foot :focus-visible{outline-color:var(--lift)}
.site-foot__base{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;padding-top:28px;border-top:1px solid var(--line-n)}
.site-foot__legal p{max-width:62ch;font-size:.8125rem;line-height:1.6;color:var(--mist)}
.site-foot__row{display:flex;gap:24px;margin-top:12px}
.site-foot__row a{font-size:.875rem;color:var(--haze)}
/* the title block: the drawing's signature, lightly */
.tblock{display:grid;grid-template-columns:repeat(2,minmax(0,auto));border:1px solid var(--draw-n);min-width:0}
.tblock>div{min-width:0;padding:10px 14px;border-top:1px solid rgba(108,193,255,.22)}
.tblock>div:nth-child(-n+1){border-top:0}
.tblock>div:not(.tblock__wide):nth-child(3){border-left:1px solid rgba(108,193,255,.22)}
.tblock__wide{grid-column:1/-1}
.tblock dt{margin-bottom:4px;font:600 .625rem/1.1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.tblock dd{font:700 .9375rem/1.25 var(--display);letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.site-foot__dim{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:.8125rem;line-height:1.45;color:var(--mist)}
.site-foot__dim #built{flex:0 1 auto;max-width:46em;text-align:center;text-wrap:balance}
.dimline{position:relative;flex:1 1 40px;min-width:40px;height:12px}
.dimline::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--draw-n)}
.dimline::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--draw-n)}
.dimline:first-child::after{left:0}
.dimline:last-child::after{right:0}

/* the mobile WhatsApp dock */
.dock{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:none;min-height:54px;transform:translateY(calc(100% + 24px));transition:transform .6s var(--settle)}
.dock.is-on{transform:none}
.dock svg,.menu__foot .pill svg{width:20px!important;height:20px!important;fill:#fff;stroke:none}

/* ── motion ────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes arrive{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drop{0%{transform:translateY(-1.6cqw) scale(.9)}100%{transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(0,145,234,.5)}70%,100%{box-shadow:0 0 0 2.4cqw rgba(0,145,234,0)}}
.js .h1 .ln,.js .kicker,.js .picker{animation:rise var(--t3) var(--settle) both}
.js .h1 .ln:nth-child(1){animation-delay:.06s}
.js .h1 .ln:nth-child(2){animation-delay:.12s}
.js .h1 .ln:nth-child(3){animation-delay:.18s}
.js .h1 .ln:nth-child(4){animation-delay:.24s}
.js .picker{animation-delay:.34s}
.js .opener__go{animation:rise var(--t3) var(--settle) .3s both}
.js .rig__stage{animation:arrive 1.2s var(--settle) .15s both}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--t3) var(--settle),transform var(--t3) var(--settle);transition-delay:var(--rd,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  :where(.v2) *,:where(.v2) *::before,:where(.v2) *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
  .phone.is-s5 .ph-dot,.firm__caret{animation:none!important}
}
/* screenshot mode (?still): final states, nothing moving */
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.still [data-reveal]{opacity:1!important;transform:none!important}

/* ==========================================================================
   LAYOUTS BY WIDTH
   ========================================================================== */
@media (min-width:768px){
  .proof__tt{display:block}
  .proof__tab{padding:20px 18px 20px 0}
  .proof__tab+.proof__tab{padding-left:22px}
}
@media (max-width:1239px){
  .who{grid-template-columns:minmax(0,1fr)}
  .who__head .lead{max-width:40em}
  .rig{grid-template-columns:auto;grid-template-areas:"stage" "log" "cap"}
  .log{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;width:min(100%,400px);margin:28px auto 0}
  .log__h{display:none}
  .log__list{flex:1 1 180px;padding:0}
  .log__list::before,.log__list::after{display:none}
  .log__list li{display:none;padding:0 0 0 32px;color:var(--ink)}
  .log__list li.is-now,.log__list li.is-last{display:block}
  .log__list li i{left:0;top:-2px}
  .log__ctl{margin:0}
  .log::before,.log::after{content:"";position:absolute;left:0;right:0;top:-14px;height:2px;border-radius:2px;background:var(--line-2)}
  .log::after{background:var(--grad);transform-origin:left;transform:scaleX(var(--lp,1));transition:transform var(--t3) var(--settle)}
  .rig__cap{margin-top:16px}
}
@media (max-width:1023px){
  .opener::before{-webkit-mask-image:radial-gradient(ellipse 80% 40% at 50% 70%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 40% at 50% 70%,#000 30%,transparent 75%)}
  .opener__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "rig" "more";grid-template-rows:auto}
  .opener__top{padding-top:0}
  .rig{margin-top:40px}
  .opener__more{padding-top:44px}
  .band__head--split{grid-template-columns:minmax(0,1fr)}
  .tl__body,.pb,.wom,.ask{grid-template-columns:minmax(0,1fr)}
  .bill,.srch{position:relative;top:auto}
  .archie{gap:40px}
  .also{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:1023px){
  .rig{grid-template-columns:auto 230px;grid-template-areas:"stage log" "cap cap";column-gap:48px}
  .phone{--pw:280px}
  .log{display:block;width:auto;margin:0}
  .log::before,.log::after{display:none}
  .log__h{display:grid}
  .log__list{padding:0 0 0 34px}
  .log__list::before,.log__list::after{display:block}
  .log__list li{display:block;padding:9px 0;color:var(--muted)}
  .log__list li.is-now,.log__list li.is-done{color:var(--ink)}
  .log__list li i{left:-34px;top:8px}
  .log__ctl{margin-top:22px}
}
@media (max-width:899px){
  .proof__panel{grid-template-columns:minmax(0,1fr);gap:40px}
  .handset{justify-self:center}
  .site-foot__base{grid-template-columns:minmax(0,1fr)}
  .tblock{justify-self:start}
}
@media (max-width:959px){
  .hdr__nav,.hdr__in>.hdr__wa{display:none}
  .opener__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
  .burger{display:block}
  :root{--hdr:60px}
  .dock{display:flex}
  .site-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (min-width:960px){
  .menu{display:none!important}
}
@media (max-width:767px){
  .phone{--pw:min(270px,calc(100vw - 104px))}
  .rig{margin-top:30px}
  .opener__dom{display:flex;align-items:center;gap:8px;min-width:0;margin-top:14px;font:500 .875rem/1.3 var(--body);color:var(--muted)}
  .opener__dom svg{flex:none;width:10px;height:12px;fill:var(--deep)}
  .opener__dom .opener__k{flex:none}
  .opener__dom [data-dom]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--deep);font-weight:600}
  .opener__stand{font-size:1.0625rem}
  .tl__rail{margin-bottom:28px}
  .tl__tab{gap:10px;padding:0 1px;font-size:.75rem}
  .tl__n{width:40px;height:40px;font-size:1rem}
  .tl__track{top:19px}
  .tl__panels{min-height:0}
  .form__grid{grid-template-columns:minmax(0,1fr)}
  .also{grid-template-columns:minmax(0,1fr)}
  .pb__set--row{display:block}
  .pb__set--row legend{float:none;margin-bottom:16px}
  .seg{display:grid;width:100%}
  .seg span{padding:6px 8px;font-size:.84375rem}
  .points li{grid-template-columns:40px minmax(0,1fr)}
  .opener__cta .pill--lg{flex:1 1 auto}
  .archie{grid-template-columns:minmax(0,1fr);gap:0}
  .archie__txt{display:contents}
  .archie__head{order:1}
  .archie__pic{order:2;max-width:none;margin-top:32px}
  .archie__pic img{aspect-ratio:1/1}
  .archie__pic img{object-position:50% 22%}
  .archie__body{order:3;margin-top:8px}
  .sectors a{min-height:44px;padding:0 14px 0 16px;font-size:1rem}
  .site-foot__dim{align-items:flex-start}
  .site-foot__dim #built{text-align:left}
  .site-foot__dim .dimline{display:none}
}
@media (max-width:639px){
  /* the picker becomes a 3 x 3 grid of drawn tiles with short labels */
  .picker__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pick>span{display:flex;flex-direction:column;justify-content:center;gap:6px;height:64px;padding:4px;border-radius:14px;font-size:.8125rem;line-height:1.1;text-align:center;white-space:normal}
  .pick svg{width:20px;height:20px}
  .pick__x{display:none}
  .proof__tab{padding-right:6px}
  .proof__tab+.proof__tab{padding-left:10px}
  .proof__tx{display:none}
  .site-foot__cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .site-foot__cols>*{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}
  .site-foot__cols>* .label{grid-column:1/-1}
  .site-foot__cols>:last-child{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:379px){
  .brand__name{font-size:1.0625rem}
  .tl__l{font-size:.6875rem}
  .h1__note{display:none}
  .pick>span{font-size:.75rem}
  /* three care options no longer fit side by side: stack them */
  .pb .seg{grid-auto-flow:row;border-radius:26px}
}

/* ==========================================================================
   PAGES · shared components for every page after the home page
   --------------------------------------------------------------------------
   Written by _build/shell.py: the page hero (.phero) and its address-bar
   crumb (.addr--crumb), numbered points (.pts), prose (.prose), a heading
   beside its copy (.split), the live-site cards (.wk), the offer with the
   price card (.offer, .bill--static) and the light quote (.quote--light).
   Everything else on a page reuses the home page's own components: .band,
   .band__head, .addr, .pill, .aside-link, .faq, .who/.sectors, .bill,
   .quote, .ask, .site-foot, .phone. See V2-NOTES.md, "How to convert a
   page". A family that needs more gets its own /assets/css/<family>.css
   (shell.page(css=["family"])), so nobody edits this file in parallel.
   ========================================================================== */

/* ── the page hero (white; the drafting grid sits behind the visual) ────── */
.phero{position:relative;padding:clamp(24px,.5rem + 2vw,44px) 0 clamp(72px,2rem + 5vw,120px);overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 50% 70% at 78% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 50% 70% at 78% 50%,#000 30%,transparent 75%)}
.phero--solo::before{-webkit-mask-image:radial-gradient(ellipse 60% 90% at 90% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 60% 90% at 90% 0%,#000 20%,transparent 70%)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:clamp(32px,5vw,88px);align-items:center}
.phero__grid--solo{grid-template-columns:minmax(0,1fr)}
.phero__txt{min-width:0;padding-top:6px}
.phero__grid--solo .phero__txt{max-width:920px}
.phero__h{margin-top:22px;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.035em}
.phero__stand{margin-top:24px;max-width:34em;font-size:1.125rem;line-height:1.6;color:var(--text);text-wrap:pretty}
.phero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px}
.phero__note{font-size:.875rem;line-height:1.5;color:var(--muted)}
.phero__note b{font:800 1rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.phero__vis{margin:0;display:grid;justify-items:center;min-width:0}
.phero__vis>*{grid-area:auto}
.phero__vis .rig__cap{margin-top:18px;max-width:36ch}
.js .phero__txt>*{animation:rise var(--t3) var(--settle) both}
.js .phero__txt>:nth-child(2){animation-delay:.06s}
.js .phero__txt>:nth-child(3){animation-delay:.14s}
.js .phero__txt>:nth-child(4){animation-delay:.22s}

/* the hero's eyebrow: this page's own address, each part a link back up */
.addr--crumb a{color:inherit;text-decoration:none;border-radius:4px}
.addr--crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.addr--crumb .addr__home{flex:0 1000 auto;min-width:4.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* review-visual: on a narrow phone the host gives way first, so the page's own path stays readable */
.addr--crumb a+a{flex:none;margin-left:-5px;color:var(--deep);font-weight:600}
.addr--crumb b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── numbered points (01, 02...), one or two columns ──────────────────── */
.pts{list-style:none;display:grid;column-gap:clamp(32px,4vw,72px);border-bottom:1px solid var(--line-2)}
.pts li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:28px 0;border-top:1px solid var(--line-2)}
.pts__n{padding-top:6px;font:800 .9375rem/1 var(--display);color:var(--deep);font-variant-numeric:tabular-nums}
.pts h3{font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);line-height:1.2;letter-spacing:-.02em}
.pts p{margin-top:10px;max-width:38em;font-size:1rem;line-height:1.7;color:var(--text);text-wrap:pretty}
.band--night .pts,.band--night .pts li{border-color:var(--line-n)}
.band--night .pts__n{color:var(--lift)}
.band--night .pts p{color:var(--haze)}

/* ── prose: plain paragraphs, optionally led by a large first sentence ─── */
.prose{min-width:0;max-width:40em}
.prose p{font-size:1.0625rem;line-height:1.75;color:var(--text);text-wrap:pretty}
.prose p+p{margin-top:1.1em}
.prose .prose__lead{font:700 clamp(1.25rem,1.05rem + .8vw,1.625rem)/1.35 var(--display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.prose a{font-weight:600}
.band--tint .prose a{color:var(--deep)}
.band--night .prose p{color:var(--haze)}
.band--night .prose .prose__lead,.band--night .prose b{color:#fff}
.band--night .prose a{color:var(--lift)}

/* ── a heading beside its copy ─────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,6vw,104px);align-items:start}
.split__head .aside-link{margin-top:28px}

/* ── the live sites as cards (night) ──────────────────────────────────── */
.wk{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.wk__card{display:flex;flex-direction:column;gap:22px;min-width:0;padding:12px 12px 26px;border:1px solid var(--line-n);border-radius:var(--r-lg);background:rgba(255,255,255,.025);transition:border-color var(--t1)}
.wk__card:hover{border-color:rgba(108,193,255,.35)}
.wk__ph{padding:8px;border-radius:26px;background:#05070D;border:1px solid rgba(108,193,255,.25);box-shadow:0 40px 70px -40px rgba(0,145,234,.4)}
.wk__ph .handset__bar{margin:2px 2px 8px}
.wk__shot{overflow:hidden;aspect-ratio:4/5;border-radius:18px}
.wk__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.wk__txt{min-width:0;padding:0 12px}
.wk__txt .notes__live{margin-bottom:10px}
.wk__txt .notes__live span:last-child{min-width:0;overflow-wrap:anywhere}
.wk__h{font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);line-height:1.1;letter-spacing:-.025em}
.wk__t{margin-top:4px;font-size:.9375rem;color:var(--mist)}
.wk__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.wk__cta .pill:focus-visible{outline-color:var(--lift)}
.wk__quote{max-width:780px;margin-top:clamp(48px,2rem + 2vw,72px)}

/* ── the offer: the page's own closing words beside the price card ────── */
.offer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,88px);align-items:start}
.offer__txt .prose{margin-top:28px}
.offer__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.offer__cta .aside-link{margin-top:0}
.bill--static .bill__note+.bill__note{margin-top:-12px}

/* ── a review on white or tint (the plain .quote is for night) ─────────── */
.quote--light{border-left-color:var(--blue)}
.quote--light>blockquote p{color:var(--ink)}
.quote--light figcaption{color:var(--muted)}
.quote--light figcaption b{color:var(--ink)}
.quote--light summary{color:var(--blue)}
.band--tint .quote--light summary{color:var(--deep)}
.quote--light .quote__full p{color:var(--text)}

@media (min-width:900px){
  .wk__txt .notes__live span:last-child{display:none}
}
@media (min-width:1024px){
  .pts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split__head{position:sticky;top:96px}
  /* review-visual: the hero h1 sits in about 480px of column at 1024, so it scales with the column
     (48px at 1024, 58px at 1240, the full 62px from 1320) and the pill stays above a 768px-high fold */
  .phero__grid:not(.phero__grid--solo) .phero__h{font-size:min(var(--fs-display),4.7vw)}
}
@media (max-width:1023px){
  .phero::before{-webkit-mask-image:radial-gradient(ellipse 80% 40% at 50% 78%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 40% at 50% 78%,#000 30%,transparent 75%)}
  .phero__grid{grid-template-columns:minmax(0,1fr)}
  .phero__vis{margin-top:56px}
  .split,.offer{grid-template-columns:minmax(0,1fr)}
  .bill--static{position:relative;top:auto}
}
@media (max-width:899px){
  .wk{grid-template-columns:minmax(0,1fr)}
  .wk__card{flex-direction:row;align-items:center;gap:18px;padding:10px 16px 10px 10px}
  .wk__ph{flex:none;width:clamp(112px,30vw,180px);padding:5px;border-radius:20px}
  .wk__ph .handset__bar{display:none}
  .wk__shot{border-radius:15px}
  .wk__txt{padding:0}
}
@media (max-width:767px){
  .phero__stand{font-size:1.0625rem}
  .phero__cta .pill--lg{flex:1 1 auto}
  .pts li{grid-template-columns:40px minmax(0,1fr);padding:24px 0}
}
@media (max-width:479px){
  /* the buttons go under the thumbnail row, so the pill keeps one line */
  .wk__card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:14px;align-items:start;padding:10px 12px 16px 10px}
  .wk__ph{grid-row:1/4;width:96px}
  .wk__txt{display:contents}
  .wk__txt .notes__live,.wk__h,.wk__t{grid-column:2}
  .wk__txt .notes__live{margin:4px 0 8px}
  .wk__txt .notes__live span:last-child{display:none}
  .wk__cta{grid-column:1/-1;gap:10px 18px;margin-top:14px}
}

/* v2 pages: g1 */
/* ==========================================================================
   /how-it-works/, /prices/, /about/, /refer/, /word-of-mouth/ (builder g1).
   Only what these five pages need beyond the shared components above.
   Page-specific classes are prefixed g1-. Same tokens, same type scale.
   ========================================================================== */

/* small helpers */
.g1-h3{margin-top:36px;font-size:1.25rem;line-height:1.25;letter-spacing:-.02em}
.g1-after{max-width:40em;margin-top:22px;font-size:1rem;line-height:1.65;color:var(--muted);text-wrap:pretty}
.phero__txt>.aside-link{margin-top:22px}
.g1-phero-wide .phero__txt{max-width:none}
.g1-phero-wide .phero__h{max-width:13em}
.g1-phero-wide .g1-glance dd{font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem)}
.phero .said-it{margin-top:24px}
.phero .said-it+.phero__h{margin-top:8px}
.g1-faq .faq{margin-top:0}

/* ticks: a hairline list with a filled mark (or an outlined arrow: paid elsewhere) */
.g1-ticks{list-style:none;margin-top:14px}
.g1-ticks li{position:relative;padding:12px 0 12px 36px;border-top:1px solid var(--line);font-size:1rem;line-height:1.6;color:var(--text);text-wrap:pretty}
.g1-ticks li:last-child{border-bottom:1px solid var(--line)}
.g1-ticks li::before{content:"";position:absolute;left:0;top:13px;width:22px;height:22px;border-radius:50%;
  background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5'/%3E%3C/svg%3E") center/12px no-repeat}
.g1-ticks--out li::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230B4F9E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 9 3M4 3h5v5'/%3E%3C/svg%3E") center/10px no-repeat;box-shadow:inset 0 0 0 1.5px var(--deep)}
.g1-ticks b{font-weight:600;color:var(--ink)}
.g1-groups{display:grid;gap:44px;min-width:0}
.g1-groups .g1-h3{margin-top:0}

/* a note card on a tint (the yearly check) */
.g1-note{margin-top:44px;padding:clamp(22px,1rem + 1.5vw,36px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.g1-note h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.g1-note p{max-width:40em;margin-top:12px;font-size:1rem;line-height:1.7;color:var(--text);text-wrap:pretty}
.g1-note .aside-link{margin-top:18px}

/* how it works: the steps as a ledger, joined by the 2px rail */
.g1-steps{list-style:none;position:relative}
.g1-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:clamp(16px,2.4vw,32px);padding-bottom:20px}
.g1-step:last-child{padding-bottom:0}
.g1-step::before{content:"";position:absolute;left:23px;top:70px;bottom:-22px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--bright),var(--deep))}
.g1-step:last-child::before{display:none}
.g1-step__n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin-top:22px;border-radius:50%;border:1px solid var(--deep);background:#fff;color:var(--deep);font:800 1.125rem/1 var(--display);font-variant-numeric:tabular-nums}
.g1-step--yes .g1-step__n{background:var(--deep);color:#fff;box-shadow:0 0 0 7px rgba(0,145,234,.14)}
.g1-step__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:20px clamp(24px,3vw,48px);min-width:0;padding:clamp(22px,1rem + 1.5vw,36px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.g1-step__body h3{font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);line-height:1.12;letter-spacing:-.025em}
.g1-step__body p{max-width:38em;margin-top:12px;font-size:1.0625rem;line-height:1.7;color:var(--text);text-wrap:pretty}
.g1-step__paid{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;padding-left:clamp(20px,2vw,32px);border-left:1px solid var(--line)}
.g1-step__paid b{font:900 clamp(2.25rem,1.6rem + 2vw,3.25rem)/.95 var(--display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.g1-step--yes .g1-step__paid b{color:var(--deep)}
.g1-step__paid small{font-size:.875rem;line-height:1.45;color:var(--muted)}

/* prices: the figures at a glance under the hero's button */
.g1-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,2rem + 2vw,64px);border-top:1px solid var(--line-2)}
.g1-glance>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;min-width:0;padding:20px 16px 0 0}
.g1-glance>div+div{padding-left:20px;border-left:1px solid var(--line)}
.g1-glance dd{font:800 clamp(2rem,1.4rem + 2vw,3rem)/1 var(--display);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.g1-glance>div:first-child dd{color:var(--deep)}
.g1-glance dt{font-size:.875rem;line-height:1.4;color:var(--muted)}

/* prices: cards for one page, growing it, bigger jobs, and the care plans */
.g1-cards{list-style:none;display:grid;gap:clamp(14px,1.5vw,24px)}
.g1-card{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,1.2rem + 1vw,36px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff}
.band--tint .g1-card{border-color:var(--line)}
.g1-card--lead,.band--tint .g1-card--lead{border-color:var(--deep);box-shadow:0 0 0 1px var(--deep),0 30px 60px -40px rgba(11,79,158,.55)}
.g1-card__n{font:800 clamp(2.5rem,1.8rem + 2.4vw,3.5rem)/1 var(--display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.g1-card__n small{margin-left:6px;font:600 1rem/1 var(--body);letter-spacing:0;color:var(--muted)}
.g1-card--lead .g1-card__n{color:var(--deep)}
.g1-card h3{margin-top:18px;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.g1-card p:not(.g1-card__n){margin-top:10px;font-size:1rem;line-height:1.65;color:var(--text);text-wrap:pretty}
.g1-care{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:clamp(32px,1.5rem + 1.5vw,56px)}
.also.g1-also{margin-top:0;grid-template-columns:minmax(0,1fr)}

/* about: the photo with a light title block (the footer's device, on white) */
.g1-me{width:100%;max-width:440px;justify-self:center}
.g1-me img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);filter:saturate(.86) contrast(1.03);box-shadow:0 50px 90px -50px rgba(11,79,158,.5)}
.g1-tb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:16px;border:1px solid var(--draw);background:#fff}
.g1-tb>div{min-width:0;padding:10px 14px;border-top:1px solid rgba(0,121,200,.22)}
.g1-tb>div:first-child{border-top:0}
.g1-tb>div:nth-child(3){border-left:1px solid rgba(0,121,200,.22)}
.g1-tb__wide{grid-column:1/-1}
.g1-tb dt{margin-bottom:4px;font:600 .625rem/1.1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.g1-tb dd{font:700 .9375rem/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}

/* refer: the thank you as a dark bill in the hero */
.g1-refvis{width:100%;max-width:460px;justify-self:center}
.g1-refvis .bill{position:relative;top:auto}

/* word of mouth: the home page's search illustration as the hero visual */
.phero .g1-srch{position:relative;top:auto;width:100%;max-width:520px;justify-items:stretch;justify-self:center}

/* three numbered points side by side (refer, word of mouth) */
@media (min-width:1024px){
  .g1-pts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g1-care{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,4vw,72px);align-items:start}
  .g1-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:640px){
  .also.g1-also{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .g1-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1023px){
  .g1-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g1-cards--3>:last-child{grid-column:1/-1}
}
@media (max-width:1023px){
  .g1-me{max-width:400px}
}
@media (max-width:767px){
  .g1-step__card{grid-template-columns:minmax(0,1fr)}
  .g1-step__paid{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
  .g1-step__paid .label{grid-column:1/-1}
  .g1-step__paid b{font-size:2.25rem}
}
@media (max-width:639px){
  /* the number sits on the card's top edge; the rail runs behind the cards */
  .g1-step{display:block;padding:18px 0 0}
  .g1-step+.g1-step{margin-top:12px}
  .g1-step__n{position:absolute;left:18px;top:0;z-index:2;width:36px;height:36px;margin:0;font-size:1rem}
  .g1-step--yes .g1-step__n{box-shadow:0 0 0 5px rgba(0,145,234,.14)}
  .g1-step::before{left:35px;top:18px;bottom:-30px;z-index:0}
  .g1-step__card{position:relative;z-index:1;padding:32px 20px 22px}
  .g1-glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g1-glance>div:nth-child(3){padding-left:0;border-left:0}
  .g1-glance>div:nth-child(n+3){margin-top:4px;border-top:1px solid var(--line)}
  .g1-glance>div{padding-bottom:16px}
  .g1-me{max-width:340px}
}

/* v2 pages: g3 */
/* ==========================================================================
   terms.html and privacy.html (the legal sheet), /partners/ (the spec sheet,
   fit lists, callout) and /check/ (the address form and the report). All
   page-specific classes start g3-. The checker's own script sets .on,
   .score.good/.mid/.poor and li.bad/.warn/.soft on its elements: those are
   styled here, scoped to .g3-chk, in the locked blues and ink only (no red
   or green states; each state also has a word or a shape, not just a hue).
   ========================================================================== */

/* the legal sheet: contents beside a white sheet, on tint */
.g3-doc{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:32px clamp(40px,5vw,88px);align-items:start}
.g3-doc__side{position:sticky;top:96px;min-width:0;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain}
.g3-doc__main{min-width:0}
.g3-toc ol,.g3-toc-m ol{list-style:none}
.g3-toc ol{margin-top:12px;border-top:1px solid var(--line-2)}
.g3-toc a,.g3-toc-m a{display:flex;align-items:baseline;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font:500 .9375rem/1.35 var(--body);transition:color var(--t1)}
.g3-toc a:hover,.g3-toc-m a:hover{color:var(--deep)}
.g3-toc__n{flex:none;min-width:22px;font:800 .8125rem/1.35 var(--display);color:var(--deep);font-variant-numeric:tabular-nums}
.g3-toc-m{border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff}
.g3-toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px;font:800 1.0625rem/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);list-style:none;cursor:pointer;border-radius:var(--r-md)}
.g3-toc-m summary::-webkit-details-marker{display:none}
.g3-toc-m summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background-color:#fff;background-image:linear-gradient(var(--deep),var(--deep)),linear-gradient(var(--deep),var(--deep));background-size:10px 1.6px,1.6px 10px;background-position:center;background-repeat:no-repeat;transition:transform var(--t2) var(--settle)}
.g3-toc-m[open] summary::after{transform:rotate(45deg)}
.g3-toc-m ol{margin:0 18px 12px;border-top:1px solid var(--line-2)}
.g3-toc-m li:last-child a{border-bottom:0}
.g3-sheet{padding:clamp(24px,1rem + 3vw,64px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 40px 80px -60px rgba(10,15,28,.28)}
.g3-sec{scroll-margin-top:96px}
.g3-sec+.g3-sec{margin-top:36px;padding-top:36px;border-top:1px solid var(--line)}
:where(.v2) .g3-sec h2{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.g3-sec__n{flex:none;min-width:1.4em;color:var(--deep);font-variant-numeric:tabular-nums}
.g3-cl{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:10px 0}
.g3-cl__n{padding-top:2px;font:800 .9375rem/1.7 var(--display);color:var(--deep);font-variant-numeric:tabular-nums}
.g3-cl p,.g3-sec>p{max-width:40em;font-size:1.0625rem;line-height:1.7;color:var(--text);text-wrap:pretty}
.g3-sec>p+p,.g3-sec>p+ul,.g3-sec>ul+p{margin-top:14px}
.g3-sec>ul{list-style:none;max-width:40em;margin-top:6px}
.g3-sec>ul li{position:relative;padding:7px 0 7px 26px;font-size:1.0625rem;line-height:1.6;color:var(--text)}
.g3-sec>ul li::before{content:"";position:absolute;left:5px;top:calc(7px + .8em - 3px);width:7px;height:7px;border-radius:50%;background:var(--deep)}
.g3-sec a{font-weight:600;overflow-wrap:anywhere}
.g3-doc__more{display:flex;flex-wrap:wrap;gap:0 36px}
.g3-doc__more .aside-link{margin-top:28px}
.phero__stand b{font-weight:700;color:var(--ink)}

/* /partners/: the spec sheet, a title block on white */
.g3-spec{width:min(100%,460px);justify-self:center}
.g3-spec__sheet{width:100%;border:1px solid var(--draw);border-radius:6px;background:#fff;box-shadow:0 0 0 6px rgba(0,121,200,.04),0 50px 90px -50px rgba(11,79,158,.45)}
.g3-spec__top{display:grid;gap:6px;padding:18px 22px 16px;border-bottom:1px solid var(--draw)}
.g3-spec__top b{font:800 1.375rem/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.g3-spec dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.g3-spec dl>div{min-width:0;padding:16px 22px;border-top:1px solid rgba(0,121,200,.22)}
.g3-spec dl>div:nth-child(-n+2){border-top:0}
.g3-spec dl>div:nth-child(even){border-left:1px solid rgba(0,121,200,.22)}
.g3-spec dt{font:600 .6875rem/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.g3-spec dd{margin-top:6px;font:800 1.25rem/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
.g3-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(32px,4vw,72px)}
:where(.v2) .g3-fit h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.g3-ticks{list-style:none;margin-top:16px;border-top:1px solid var(--line-2)}
.g3-ticks li{position:relative;padding:15px 0 15px 38px;border-bottom:1px solid var(--line-2);font-size:1.0625rem;line-height:1.55;color:var(--text)}
.g3-ticks li::before{content:"";position:absolute;left:0;top:16px;width:24px;height:24px;border-radius:50%;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5.2'/%3E%3C/svg%3E") center/12px no-repeat}
.g3-ticks--no li::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2325262B' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:inset 0 0 0 1px var(--line-2)}
.g3-ticks strong{font-weight:600;color:var(--ink)}
.g3-callout{max-width:56em;margin-top:clamp(40px,2rem + 2vw,64px);padding:clamp(22px,1rem + 2vw,40px);border:1px solid var(--line);border-left:3px solid var(--deep);border-radius:var(--r-md);background:#fff}
.g3-callout__h{font:800 clamp(1.125rem,1rem + .5vw,1.375rem)/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.g3-callout p+p{margin-top:12px;font-size:1.0625rem;line-height:1.7;color:var(--text)}
.g3-rates__label{margin-top:36px}
.g3-rates__small{max-width:40em;margin-top:24px;font-size:.9375rem;line-height:1.65;color:var(--muted)}
.g3-trial{max-width:780px}
.g3-trial .prose{margin-top:28px}
.g3-contact .ask{align-items:end}
.g3-contact .ask__alt{width:100%;max-width:520px;margin-top:0;justify-self:end}

/* /check/: the address form */
.g3-cf{max-width:640px;margin-top:30px}
.g3-cf__label{display:block;margin-bottom:10px;font:600 .875rem/1.3 var(--body);color:var(--text)}
.g3-cf__row{display:flex;flex-wrap:wrap;gap:12px}
.g3-cf__field{flex:1 1 280px;display:flex;align-items:center;gap:6px;min-width:0;height:60px;padding:0 6px 0 20px;border:1px solid var(--line-2);border-radius:99px;background:#fff;box-shadow:0 18px 40px -30px rgba(10,15,28,.4);transition:border-color var(--t1),box-shadow var(--t1)}
.g3-cf__field:focus-within{border-color:var(--bright);box-shadow:0 0 0 3px rgba(0,145,234,.2),0 18px 40px -30px rgba(10,15,28,.4)}
.g3-cf__field svg{flex:none;width:11px;height:13px;margin-right:2px;fill:var(--muted)}
.g3-cf__field span{flex:none;color:var(--muted);font:500 1.0625rem/1 var(--body)}
.g3-cf__field input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--ink);font:600 1.125rem/1 var(--body);outline:none}
.g3-cf__field input::placeholder{color:var(--muted);font-weight:500;opacity:1}
.g3-cf__go{flex:none}
.g3-cf__go:disabled{cursor:progress;opacity:.75;transform:none}
.g3-cf__note{margin-top:14px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.g3-cf__note a{font-weight:600}
.g3-spin{display:none;align-items:center;gap:12px;margin-top:18px;font:600 .9375rem/1.3 var(--body);color:var(--deep)}
.g3-spin.on{display:flex}
.g3-spin i{position:relative;flex:none;width:80px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.g3-spin i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--grad);transform-origin:left;animation:g3load 1.4s var(--settle) infinite}
@keyframes g3load{0%{transform:scaleX(0);opacity:1}75%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.g3-err{display:none;max-width:640px;margin-top:16px;padding:12px 16px;border-left:3px solid var(--ink);border-radius:4px;background:var(--tint-2);color:var(--ink);font-weight:600;line-height:1.5}
.g3-err.on{display:block}
.g3-back{width:min(100%,430px);justify-self:end}
.bill.g3-back{position:relative;top:auto}
.g3-back .bill__rows dd{flex:none}
.g3-back .bill__rows dt{min-width:0}

/* /check/: the report */
.g3-res{display:none;margin-top:clamp(48px,2rem + 3vw,80px);scroll-margin-top:84px}
.g3-res.on{display:block;animation:rise .6s var(--settle) both}
.g3-res__sheet{padding:clamp(22px,1rem + 2.5vw,56px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 50px 90px -60px rgba(10,15,28,.35)}
.g3-res__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line)}
.g3-res__said{min-width:0}
.g3-chk .score{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;border:3px solid var(--deep);background:#fff;color:var(--deep);font:900 2.75rem/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.g3-chk .score.good{background:var(--deep);border-color:var(--deep);color:#fff}
.g3-chk .score.mid{border-color:var(--bright);color:var(--deep);box-shadow:inset 0 0 0 6px rgba(0,145,234,.12)}
.g3-chk .score.poor{background:var(--ink);border-color:var(--ink);color:#fff}
.g3-res__dom{max-width:100%}
.g3-res__dom span{color:var(--ink);font-weight:600}
.g3-res__dom b{margin-left:4px;padding-left:9px;border-left:1px solid var(--line-2);color:var(--muted);font-weight:500}
:where(.v2) .g3-res h2{margin-top:14px;font-size:clamp(1.5rem,1.15rem + 1.4vw,2.25rem);line-height:1.12;letter-spacing:-.03em}
.g3-res__stats{margin-top:10px;color:var(--muted)}
.g3-res__stats:empty,.g3-passed:empty{display:none}
.g3-finds{list-style:none}
.g3-finds li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.g3-finds .dot{width:14px;height:14px;margin-top:5px;border-radius:50%;border:2px solid var(--deep)}
.g3-finds li.bad .dot{background:var(--ink);border-color:var(--ink)}
.g3-finds li.soft .dot{border:2px dashed var(--muted)}
.g3-finds div{min-width:0}
.g3-finds div::before{display:block;margin-bottom:6px;font:600 .6875rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--deep)}
.g3-finds li.bad div::before{content:"Problem";color:var(--ink)}
.g3-finds li.warn div::before{content:"Worth fixing"}
.g3-finds li.soft div::before{content:"Not scored";color:var(--muted)}
.g3-finds b{display:block;font:800 1.1875rem/1.3 var(--display);letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere}
.g3-finds li.soft b{color:var(--text)}
.g3-finds div span{display:block;margin-top:4px;max-width:44em;line-height:1.6;color:var(--text)}
.g3-passed{margin-top:22px;line-height:1.6;color:var(--text)}
.g3-passed b{font-weight:700;color:var(--ink)}
.g3-opps{margin-top:36px;padding:clamp(22px,1rem + 2vw,40px);border-radius:var(--r-lg);background:var(--tint)}
.g3-opps .label{color:var(--deep)}
.g3-opps__lead{margin-top:10px;max-width:40em;font:700 clamp(1.125rem,1rem + .5vw,1.375rem)/1.4 var(--display);letter-spacing:-.01em;color:var(--ink)}
.g3-opps ul{list-style:none;margin-top:18px;counter-reset:g3o}
.g3-opps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 8px;padding:16px 0;border-top:1px solid var(--line-2);counter-increment:g3o}
.g3-opps li::before{content:counter(g3o,decimal-leading-zero);grid-row:1/3;padding-top:4px;font:800 .9375rem/1 var(--display);color:var(--deep);font-variant-numeric:tabular-nums}
.g3-opps li b,.g3-opps li span{grid-column:2}
.g3-opps li b{font:800 1.125rem/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.g3-opps li span{max-width:44em;line-height:1.6;color:var(--text)}
.g3-opps__note{margin-top:18px;max-width:44em;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.g3-fix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:center;margin-top:36px;padding:clamp(22px,1rem + 2vw,40px);border-radius:var(--r-lg);background:var(--night-2);color:var(--haze);isolation:isolate;overflow:hidden;position:relative}
.g3-fix::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 100% 0%,rgba(0,145,234,.24),transparent 70%)}
:where(.v2) .g3-fix h3{font-size:var(--fs-h3);line-height:1.2;color:#fff}
.g3-fix p{margin-top:10px;line-height:1.6;color:var(--haze)}
.g3-fix :focus-visible{outline-color:var(--lift)}
.g3-lead{display:flex;flex-wrap:wrap;gap:12px}
.g3-lead input[type=email]{flex:1 1 220px;min-width:0;height:52px;padding:0 20px;border:1px solid rgba(255,255,255,.22);border-radius:99px;background:var(--night);color:#fff;font:400 1rem/1.4 var(--body)}
.g3-lead input[type=email]::placeholder{color:var(--mist);opacity:1}
.g3-lead input[type=email]:focus{outline:none;border-color:var(--lift);box-shadow:0 0 0 3px rgba(108,193,255,.25)}
.g3-lead .pill{min-height:52px}
.g3-done{display:none;font:700 1.25rem/1.4 var(--display);color:#fff}
.g3-done.on{display:block}

@media (max-width:1023px){
  .g3-doc{grid-template-columns:minmax(0,1fr)}
  .g3-doc__side{position:static;max-height:none;overflow:visible}
  .g3-toc{display:none}
  .g3-back{justify-self:start;margin-top:48px}
  .g3-spec{margin-top:56px}
  /* once a report is on screen, it follows the form directly */
  .g3-chk:has(.g3-res.on) .g3-back{display:none}
}
@media (min-width:1024px){
  .g3-toc-m{display:none}
}
@media (max-width:899px){
  .g3-fix{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .g3-fit{grid-template-columns:minmax(0,1fr)}
  .g3-contact .ask{align-items:start}
  .g3-cf__go{flex:1 1 100%}
  .g3-res__head{grid-template-columns:minmax(0,1fr)}
  .g3-chk .score{width:88px;height:88px;font-size:2.25rem}
}
@media (max-width:639px){
  .g3-sheet{padding:22px 18px}
  .g3-sec+.g3-sec{margin-top:28px;padding-top:28px}
  .g3-cl{display:block;padding:8px 0}
  .g3-cl__n{display:block;padding:0 0 2px;line-height:1.4}
  .g3-spec dl>div{padding:14px 16px}
  .g3-spec dd{font-size:1.125rem}
  .g3-res__sheet{padding:20px 16px}
  .g3-finds li{grid-template-columns:18px minmax(0,1fr);gap:10px}
  .g3-opps{padding:20px 16px}
  .g3-opps li{grid-template-columns:34px minmax(0,1fr)}
  .g3-fix{padding:22px 18px}
  .g3-cf__field{padding-left:16px}
  .g3-cf__field span{font-size:1rem}
}
@media (max-width:379px){
  .g3-cf__field span{display:none}
  .g3-spec dl{grid-template-columns:minmax(0,1fr)}
  .g3-spec dl>div:nth-child(2){border-top:1px solid rgba(0,121,200,.22)}
  .g3-spec dl>div:nth-child(even){border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .g3-spin i::after{animation:none!important;transform:scaleX(.6)}
}

/* v2 pages: g2 */
/* ==========================================================================
   /work/, /work/paul-armstrong/, /work/ellie/, /work/heru/,
   /web-design-worcester/ and /thanks/. Written by _build/pages/work.py,
   local.py and thanks.py. Built from the shared components above; only what
   those pages need on top is here, every class prefixed g2-.
   ========================================================================== */

/* the headline review on /work/ (the hero's visual): Paul's, in full */
.g2-hl{width:100%;max-width:540px;justify-items:stretch}
.g2-hl>*{min-width:0}
.g2-hl__card{position:relative;min-width:0;margin:0;padding:clamp(22px,1rem + 1.6vw,38px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;box-shadow:0 44px 80px -52px rgba(11,79,158,.5)}
.g2-hl__bar{display:flex;align-items:center;gap:8px;min-height:40px;margin-bottom:26px;padding:0 6px 0 14px;border:1px solid var(--line);border-radius:99px;background:var(--tint);color:var(--text);font:600 .8125rem/1 var(--body);text-decoration:none;transition:border-color var(--t1)}
.g2-hl__bar:hover{border-color:rgba(11,79,158,.55)}
.g2-hl__bar svg{flex:none;width:12px;height:12px;fill:none;stroke:var(--deep);stroke-width:2.4}
.g2-hl__dom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-hl__bar .live-chip{margin-left:auto;border-color:rgba(11,79,158,.4);background:#fff;color:var(--deep)}
.g2-hl__q::before{content:"“";display:block;height:.4em;margin:-.06em 0 .02em -.04em;font:800 4.25rem/1 var(--display);color:var(--bright)}
.g2-hl__lead{font:800 clamp(1.5rem,1.1rem + 1.3vw,2.125rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.g2-hl__q p:not(.g2-hl__lead){margin-top:12px;font-size:1.0625rem;line-height:1.6;color:var(--text);text-wrap:pretty}
.g2-hl__lead+p{margin-top:18px!important}
.g2-hl__by{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--muted)}
.g2-hl__by b{font-weight:600;color:var(--ink)}
.g2-hl .rig__cap{justify-self:start;max-width:none;margin-top:14px;text-align:left}
/* a case study's hero: the real site on the phone */
.g2-hph .rig__cap,.g2-map .rig__cap{text-wrap:balance}

/* /work/: each live site as a row on night */
.g2-cases{list-style:none;border-top:1px solid var(--line-n)}
.g2-case{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"ph head" "ph body";column-gap:clamp(40px,6vw,104px);padding:clamp(40px,1.5rem + 3vw,80px) 0;border-bottom:1px solid var(--line-n)}
.g2-case__ph{grid-area:ph;position:relative;align-self:start;padding-top:28px}
.g2-case__ph .dim--x{left:0;right:0;top:2px}
.g2-case__head{grid-area:head;min-width:0;padding-top:28px}
.g2-case__body{grid-area:body;min-width:0}
.g2-case__k{margin-bottom:16px;font:700 .75rem/1 var(--body);letter-spacing:.14em;color:var(--lift)}
.g2-case .notes__live span:last-child{min-width:0;overflow-wrap:anywhere}
.g2-case__h{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.05;letter-spacing:-.03em}
.g2-case__what{margin-top:6px;color:var(--mist)}
.g2-case__sum{margin-top:20px;max-width:38em;font-size:1.0625rem;line-height:1.7;color:var(--haze);text-wrap:pretty}
.g2-case__body .quote{max-width:40em}
/* the attribution reads "Name, Business": no gap before the comma */
.g2-q figcaption b{margin-right:0}
.g2-case__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.g2-case__cta .pill:focus-visible{outline-color:var(--lift)}

/* a case study: the review in full (tint) */
.g2-rv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,6vw,104px);align-items:start}
.g2-rv__src{margin-top:24px;max-width:24em;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.g2-rv__fig{min-width:0;padding-left:clamp(20px,.75rem + 1vw,32px);border-left:2px solid var(--blue)}
.g2-rv__fig blockquote p{max-width:38em;font-size:1.0625rem;line-height:1.75;color:var(--text);text-wrap:pretty}
.g2-rv__fig blockquote p+p{margin-top:1em}
.g2-rv__fig .g2-rv__lead{font:700 clamp(1.25rem,1.05rem + .8vw,1.625rem)/1.35 var(--display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.g2-rv__fig figcaption{margin-top:26px;font-size:.9375rem;color:var(--muted)}
.g2-rv__fig figcaption b{font-weight:600;color:var(--ink)}
.g2-mark{padding:0 .04em;background:linear-gradient(transparent 58%,rgba(0,145,234,.17) 0);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* a case study: what is on it (night): the real capture and its notes */
.g2-built{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.g2-built__notes{min-width:0;max-width:620px;padding-top:28px}
.g2-built .notes__live span:last-child{min-width:0;overflow-wrap:anywhere}
/* the spec, drawn as a title block */
.g2-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(48px,2rem + 2vw,80px);border:1px solid var(--draw-n);background:rgba(108,193,255,.22)}
.g2-spec>div{min-width:0;padding:16px 18px 18px;background:var(--night)}
.g2-spec dt{margin-bottom:8px;font:600 .6875rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.g2-spec dd{font:700 1rem/1.4 var(--display);letter-spacing:-.005em;color:#fff;overflow-wrap:anywhere}

/* a case study: the other two, under the offer (tint) */
.g2-more{margin-top:48px;padding-top:28px;border-top:1px solid var(--line-2)}
.g2-more .label{margin-bottom:14px}
.g2-more__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g2-more__card{display:flex;align-items:center;gap:16px;height:100%;padding:10px 16px 10px 10px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;color:var(--ink);text-decoration:none;transition:border-color var(--t1)}
.g2-more__card:hover{border-color:rgba(11,79,158,.55)}
.g2-more__ph{flex:none;width:64px;aspect-ratio:4/5;overflow:hidden;border-radius:10px}
.g2-more__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.g2-more__t{display:grid;gap:2px;min-width:0}
.g2-more__t b{font:800 1.125rem/1.2 var(--display);letter-spacing:-.015em}
.g2-more__t>span{font-size:.875rem;line-height:1.4;color:var(--muted)}
.g2-more__t .g2-more__go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;color:var(--deep)}
.g2-more__go svg{width:15px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t1) var(--settle)}
.g2-more__card:hover .g2-more__go svg{transform:translateX(3px)}

/* /web-design-worcester/: the county, drawn to scale (the hero's visual) */
.g2-map{width:100%;max-width:600px}
.g2-map__draw{position:relative;width:100%;padding:28px 0 0 28px}
.g2-map__draw .dim--x{left:28px;right:0;top:2px}
.g2-map__draw .dim--y{left:2px;top:28px;bottom:0}
.g2-map__frame{overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-md);background:rgba(255,255,255,.92);box-shadow:0 44px 80px -60px rgba(11,79,158,.5)}
.g2-map svg{width:100%;height:auto}
.g2-map__river{fill:none;stroke:rgba(0,145,234,.42);stroke-width:3;stroke-linecap:round}
.g2-map__dot{fill:#fff;stroke:var(--blue);stroke-width:2}
.g2-map__dot--big{fill:var(--blue);stroke:#fff;stroke-width:2.5}
.g2-map__home{fill:var(--deep)}
.g2-map text{font-family:var(--body);font-size:15px;font-weight:500;fill:var(--text)}
.g2-map .g2-map__t--big{font-weight:700;fill:var(--ink)}
.g2-map .g2-map__k{font-size:12px;font-weight:600;letter-spacing:.06em;fill:var(--muted)}
.g2-map .g2-map__r{font-size:12px;font-weight:600;letter-spacing:.08em;fill:var(--deep)}
.g2-map__scale path{fill:none;stroke:var(--deep);stroke-width:1.5}
.g2-map__n path{fill:var(--deep)}
.g2-towns__l{margin:40px 0 12px}
.g2-towns{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;max-width:40em;border-top:1px solid var(--line-2)}
.g2-towns li{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 0;border-bottom:1px solid var(--line-2);font:700 1.0625rem/1.3 var(--display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.g2-towns li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2px solid var(--blue);background:#fff}
/* the facts, beside the price card */
.g2-facts{margin-top:36px;border-top:1px solid var(--line-2)}
.g2-facts>div{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:4px 24px;padding:15px 0;border-bottom:1px solid var(--line-2)}
.g2-facts dt{padding-top:3px;font:600 .75rem/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.g2-facts dd{font-size:1rem;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.g2-facts a{font-weight:600;color:var(--deep)}

/* /thanks/ */
.g2-cta .aside-link{margin-top:0}
.g2-thx{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:48px;padding:24px 28px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff}
.g2-thx__t{font:800 1.25rem/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.g2-thx__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;min-width:0}
.g2-thx__mail{font-weight:600;color:var(--blue);overflow-wrap:anywhere}

@media (min-width:1024px){
  .g2-rv__head{position:sticky;top:96px}
  .g2-hl{justify-self:end}
}
@media (max-width:1023px){
  .g2-rv{grid-template-columns:minmax(0,1fr)}
  .g2-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2-hl{max-width:600px}
}
@media (max-width:899px){
  .g2-built{grid-template-columns:minmax(0,1fr);gap:24px}
  .g2-built .handset{justify-self:center}
  .g2-case{grid-template-columns:clamp(112px,22vw,168px) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"ph head" "body body";column-gap:clamp(18px,3vw,28px)}
  .g2-case__ph{padding-top:0}
  .g2-case__ph .dim{display:none}
  /* review-visual: the phone fills its column (the .wk__ph width from the cards rule made it 180px in a 112px column at 640 to 899, over the title) */
  .g2-case__ph .wk__ph{width:auto;padding:5px;border-radius:18px}
  .g2-case__ph .handset__bar{display:none}
  .g2-case__ph .wk__shot{border-radius:13px}
  .g2-case__head{align-self:center;padding-top:0}
  .g2-case__k{margin-bottom:10px}
  .g2-case__sum{margin-top:22px}
}
@media (max-width:639px){
  .g2-spec{grid-template-columns:minmax(0,1fr)}
  .g2-more__list{grid-template-columns:minmax(0,1fr)}
  .g2-towns{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .g2-facts>div{grid-template-columns:minmax(0,1fr)}
  .g2-map text{font-size:20px}
  .g2-map .g2-map__k,.g2-map .g2-map__r{font-size:15px}
  .g2-case .notes__live span:last-child{display:none}
  .g2-case__h{font-size:1.5rem}
  .g2-thx{padding:22px 20px}
}
@media (max-width:379px){
  /* the drawing is about 260 px wide here: labels in drawing units grow so they stay legible */
  .g2-map text{font-size:23px}
  .g2-map .g2-map__k,.g2-map .g2-map__r{font-size:17px}
  .g2-map__draw{padding:24px 0 0 22px}
  .g2-map__draw .dim--x{left:22px}
  .g2-map__draw .dim--y{top:24px}
}

/* v2 pages: guides */
/* ==========================================================================
   /guides/ and the guide pages, plus the small pieces the seo-content pass
   added to existing pages (6 Oct 2026). Guide pages reuse the terms page's
   document layout (g3-doc, g3-toc, g3-sheet, g3-sec) and the shared FAQ,
   offer and price card. Classes start gd-. Tokens only.
   ========================================================================== */

/* the byline under a guide's short answer */
.gd-by{margin-top:20px;max-width:40em;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.gd-by a{font-weight:600}

/* related links beside a FAQ: guides as a hairline list, businesses as small pills */
.gd-rel{margin-top:28px}
.gd-rel .label{margin-bottom:10px}
.gd-rel__list{list-style:none;border-top:1px solid var(--line-2)}
.gd-rel__list a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);color:var(--blue);font:600 .9375rem/1.4 var(--body);text-decoration:none;transition:color var(--t1)}
.gd-rel__list a::after{content:"";flex:none;width:14px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h17M13 1.5 18 6l-5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h17M13 1.5 18 6l-5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t1) var(--settle)}
.gd-rel__list a:hover{color:var(--deep)}
.gd-rel__list a:hover::after{transform:translateX(3px)}
.band--tint .gd-rel__list a{color:var(--deep)}
.split__head .gd-rel+.aside-link{margin-top:24px}

/* the guide sheet: sources set smaller, lists inside sections */
.gd-doc .g3-sec>ul+p{margin-top:14px}
.gd-src p,.gd-src li{font-size:.9375rem;line-height:1.6;color:var(--muted)}
.gd-src ul{margin-top:10px}

/* /guides/: a card per guide, the whole card is the link */
.gd-cards{list-style:none;display:grid;gap:clamp(14px,1.5vw,24px)}
.gd-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(24px,1.2rem + 1vw,36px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:border-color var(--t1),box-shadow var(--t1)}
.gd-card:hover{border-color:var(--deep);box-shadow:0 30px 60px -44px rgba(11,79,158,.55)}
:where(.v2) .gd-card__h{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.gd-card__h a{color:var(--ink);text-decoration:none}
.gd-card__h a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gd-card__h a:focus-visible{outline:none}
.gd-card:has(a:focus-visible){outline:3px solid var(--bright);outline-offset:3px}
.gd-card p:not(.gd-card__go){margin-top:12px;font-size:1rem;line-height:1.65;color:var(--text);text-wrap:pretty}
.gd-card__go{margin-top:auto;padding-top:18px;font:600 .9375rem/1.3 var(--body);color:var(--deep)}
.gd-card__go svg{display:inline-block;width:16px;height:10px;margin-left:8px;vertical-align:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t1) var(--settle)}
.gd-card:hover .gd-card__go svg{transform:translateX(3px)}
@media (min-width:768px){
  .gd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* /word-of-mouth/: the said-it line now sits inside the h1 (it carries the query) */
.phero__h>.said-it{display:block;margin:0 0 8px}
.band--tint .lead a{color:var(--deep);font-weight:600}

/* v2: seo-technical (6 Oct 2026) */
/* The home h1's drawn note ("Type your business name") is written by CSS, so the h1's own text is only
   the headline: crawlers and assistants read "I'll build [your business] a website. You only pay if you
   like it." The note looks and sits exactly as before. */
.h1__note-t::before{content:"Type your\A business name";white-space:pre-line}
/* Tap targets of at least 24px (WCAG 2.2, 2.5.8) on standalone text links, without moving anything:
   inline links grow their hit area with vertical padding (the line box does not change); flex items
   take the same padding back as negative margin. */
:where(.v2) .aside-link a,:where(.v2) .g2-facts dd a,:where(.v2) .gd-src li a{padding-block:4px}
.site-foot__row a,.addr--crumb a{padding-block:5px;margin-block:-5px}

/* ── calm first screen (6 Oct 2026): fewer things at once ──────────────────
   Headline, one line, the button and the phone. The build list, dimension
   lines and callouts stay in the markup for the script but are not shown;
   the business types fold away under "See it for your kind of business". */
.opener .h1{font-size:clamp(2.6rem,1.7rem + 3.4vw,4.9rem)}
.opener .h1__note{display:none}
.opener .dim,.opener .callouts{display:none}
.opener .log__h,.opener .log__list{display:none}
.opener .rig{grid-template-columns:auto;grid-template-areas:"stage" "log" "cap";row-gap:0}
.opener .log{display:flex;justify-content:center;width:auto;margin:18px 0 0}
.opener .log__ctl{margin:0}
.opener__more{padding-top:28px}
.picker-wrap{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.picker-wrap>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font:600 .9375rem/1.3 var(--body);color:var(--deep)}
.picker-wrap>summary::-webkit-details-marker{display:none}
.picker-wrap>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t1)}
.picker-wrap[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.picker-wrap>summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.picker-wrap .picker{margin-top:12px}
html:not(.js) .picker-wrap{display:none}

/* prices: bigger builds (6 Oct 2026). Five figures at a glance, four bigger-build cards */
@media (min-width:1024px){.g1-glance{grid-template-columns:repeat(5,minmax(0,1fr))}}
.g1-glance>div:last-child dd{color:var(--deep)}
.g1-bigger-h{margin-top:clamp(40px,2rem + 2vw,64px);margin-bottom:18px}
.g1-cards--4{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.g1-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.g1-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.g1-cards--4 .g1-card__n{font-size:clamp(2rem,1.5rem + 1.6vw,2.75rem)}
.g1-bigger-note{margin-top:24px;max-width:62ch;font-size:1rem;line-height:1.6;color:var(--text)}
/* waste page: rule-change sources (6 Oct 2026) */
.rules__src{margin-top:28px;max-width:70ch;font-size:.9375rem;line-height:1.6;color:var(--haze)}
.rules__src a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* case study: before and after (Stratworth, 8 Oct 2026) */
.g2-cmp__head{max-width:48rem}
.g2-cmp__head .prose,.g2-cmp__head p{max-width:62ch}
.g2-cmp__shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);max-width:640px;margin-top:clamp(32px,1.5rem + 2vw,56px)}
.g2-cmp__shots figure{margin:0;min-width:0}
.g2-cmp__shots img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 12px 32px rgba(10,15,28,.12)}
.g2-cmp__shots figcaption{margin-top:12px;font:600 .6875rem/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.g2-cmp__wrap{margin-top:clamp(32px,1.5rem + 2vw,56px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.g2-cmp__table{width:100%;min-width:0;border-collapse:collapse;font:400 1rem/1.45 var(--body);color:var(--ink)}
.g2-cmp__table th,.g2-cmp__table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.g2-cmp__table thead th{font:600 .6875rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.g2-cmp__table tbody th{font-weight:600;width:30%}
.g2-cmp__table td:last-child{font-weight:600;color:var(--blue)}
.g2-cmp__note{margin-top:18px;max-width:62ch;font-size:var(--fs-small);line-height:1.6;color:var(--ink);opacity:.75}
@media (max-width:560px){.g2-cmp__table{font-size:.875rem}.g2-cmp__table th,.g2-cmp__table td{padding:10px 8px}.g2-cmp__table tbody th{width:34%}}
.g2-cmp__head p{margin-top:20px}
@media (min-width:960px){.g2-cmp{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);column-gap:clamp(40px,5vw,80px);align-items:start}.g2-cmp__head{grid-column:1/-1}.g2-cmp__note{grid-column:2;margin-top:0}.g2-cmp__wrap{grid-row:2;grid-column:2}.g2-cmp__shots{grid-row:2;grid-column:1}}
/* case study: search audit + under the hood (8 Oct 2026) */
.g2-seo .g2-cmp__wrap{margin-top:clamp(28px,1.25rem + 2vw,48px)}
.g2-cmp__table--wide tbody th{width:24%}
.g2-cmp__table--wide td{width:38%}
.g2-deep{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,1rem + 2vw,48px) clamp(24px,3vw,48px);margin-top:clamp(36px,1.5rem + 2vw,64px)}
.g2-deep__g{min-width:0;padding-top:18px;border-top:2px solid var(--ink)}
.g2-deep__h{margin:0 0 12px;font:700 1.125rem/1.25 var(--display);color:var(--ink)}
.g2-deep__l{margin:0;padding:0;list-style:none}
.g2-deep__l li{position:relative;padding:7px 0 7px 18px;font-size:var(--fs-small);line-height:1.55;color:var(--text);border-bottom:1px solid var(--line)}
.g2-deep__l li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:2px;background:var(--blue)}
.g2-cmp__table td{overflow-wrap:anywhere}
@media (max-width:560px){
.g2-cmp__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.g2-cmp__table,.g2-cmp__table tbody,.g2-cmp__table tr,.g2-cmp__table th,.g2-cmp__table td{display:block;width:auto!important}
.g2-cmp__table tr{padding:14px 0;border-bottom:1px solid var(--line)}
.g2-cmp__table th,.g2-cmp__table td{padding:3px 0;border:0}
.g2-cmp__table tbody th{font-size:1rem;margin-bottom:4px}
.g2-cmp__table td::before{content:attr(data-label) ": ";font-weight:600;color:var(--muted)}
}

/* full-width capture in a browser window, under the case hero (8 Oct 2026) */
.g2-desk{grid-column:1/-1;justify-self:center;width:100%;min-width:0;margin:72px auto 0;max-width:1080px}
.g2-desk__win{border-radius:14px;overflow:hidden;background:#fff;border:1px solid #E3E7EE;box-shadow:0 30px 70px rgba(10,15,28,.16)}
.g2-desk__bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:#EEF1F5;border-bottom:1px solid #E3E7EE}
.g2-desk__bar i{flex:none;width:12px;height:12px;border-radius:50%;background:#D5DAE2}
.g2-desk__bar i:nth-child(1){background:#FF5F57}.g2-desk__bar i:nth-child(2){background:#FEBC2E}.g2-desk__bar i:nth-child(3){background:#28C840}
.g2-desk__bar span{margin:0 auto;padding:0 18px;min-width:0;max-width:60%;height:24px;border-radius:12px;background:#fff;font-size:.75rem;line-height:24px;color:#5B5D65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g2-desk img{display:block;width:100%;max-width:100%;height:auto}
.g2-desk .rig__cap{display:block;margin:18px auto 0;max-width:46ch;text-align:center}
@media (max-width:640px){.g2-desk{margin-top:44px}.g2-desk__win{border-radius:10px}.g2-desk__bar{height:28px;gap:6px;padding:0 10px}.g2-desk__bar i{width:8px;height:8px}.g2-desk__bar span{height:18px;line-height:18px;font-size:.625rem;padding:0 10px}}
@media (max-width:479px){.proof__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.proof__tab:nth-child(odd){padding-left:0;border-left:0}.proof__tab:nth-child(n+3){border-top:1px solid var(--line-n)}}

/* v2: conversion pass (15 Oct 2026) */
/* ==========================================================================
   Shared pieces written by _build/shell.py (and copied by hand into the home
   page and /check/): the trust strip under a hero's pill (trust()), the
   tight WhatsApp line (wa_line()), Archie beside every form (.ask__me), the
   folded form fields (.form__more), the done message, the footer's reply
   line, and the folded technical list on a case study. Tokens only.
   ========================================================================== */

/* the trust strip: who builds it, the rating, one sentence from Paul */
.trust{display:grid;gap:10px;margin-top:24px;max-width:34em}
.trust__me{display:flex;align-items:center;gap:12px;font-size:.9375rem;line-height:1.45;color:var(--text)}
.trust__me img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)}
.trust__me b{font-weight:700;color:var(--ink)}
.trust__rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.9375rem;color:var(--text)}
.trust__rate svg{flex:none;width:92px;height:16px;fill:var(--deep)}
.trust__rate b{font-weight:600;color:var(--ink)}
.trust__rate a{font-weight:600;color:var(--deep)}
.trust__q{margin-top:4px;padding-left:16px;border-left:3px solid var(--lift)}
.trust__q p{font-size:1.0625rem;font-style:italic;line-height:1.55;color:var(--ink)}
.trust__q footer{margin-top:6px;font-size:.875rem;color:var(--muted)}
.trust--narrow{display:none}
@media (max-width:959px){.trust--narrow{display:grid}.trust--wide{display:none}}

/* "Or WhatsApp me ->" under a main pill (the second selector beats the older
   .phero__txt>.aside-link{margin-top:22px}, so generated heroes get 16px too) */
.aside-link--tight,.phero__txt>.aside-link--tight{margin-top:16px}

/* the ask: who you deal with, and the line for people already on WhatsApp */
.ask__me{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:.9375rem;line-height:1.5;color:var(--mist)}
.ask__me img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 2px var(--line-n)}
.ask__me b{display:block;font-weight:700;color:#fff}
.ask__also{margin-top:20px;font-size:.9375rem;line-height:1.55;color:var(--mist)}

/* the form: name and question folded away; the done message */
.form__more{margin-top:18px}
.form__more summary{cursor:pointer;font-size:.9375rem;font-weight:600;color:var(--lift)}
.form__more summary:focus-visible{outline-color:var(--lift)}
.form__more[open] summary{margin-bottom:18px}
.form__done p+p{margin-top:12px;font:400 1rem/1.6 var(--body);color:var(--mist)}
.form__done a:not(.pill){color:var(--lift);font-weight:600}
.form__done .pill{margin-top:20px}
.form__done .pill:focus-visible{outline-color:var(--lift)}

/* two notes under one bill sit together */
.bill__note+.bill__note{margin-top:-12px}

/* a link inside a numbered point (home page, word of mouth) */
.points p a{font-weight:600}

/* the footer's reply line, under the email */
.site-foot__note{margin-top:10px;font-size:.875rem;line-height:1.5;color:var(--mist)}

/* a case study's technical list, folded away */
.g2-deep__more summary{cursor:pointer;font-weight:600;color:var(--deep)}
.g2-deep__more[open] summary{margin-bottom:24px}

/* the cookie bar never sits on top of the WhatsApp dock (consent.js sets .ck-on) */
.ck-on .dock{visibility:hidden}

/* 16 Oct 2026: the numbered markers came out of the project notes, so the note is one column */
.note{grid-template-columns:minmax(0,1fr)}

/* 22 Oct 2026: a review's full text under "Read it in full" is a blockquote of its own (the client's words) */
.quote__full{margin:0}

/* 22 Oct 2026: five live sites on the home page (Luke Cross Plastering first). Five across from 1024 px,
   three then two below that, and under 480 px the first across the top, then two and two. */
.proof__tabs--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.proof__tabs--5 .proof__tn{font-size:clamp(1rem,.8rem + .9vw,1.375rem)}
@media (max-width:1023px){
  .proof__tabs--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof__tabs--5 .proof__tab:nth-child(4){padding-left:0;border-left:0}
  .proof__tabs--5 .proof__tab:nth-child(n+4){border-top:1px solid var(--line-n)}
}
@media (max-width:479px){
  .proof__tabs--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof__tabs--5 .proof__tab:first-child{grid-column:1/-1}
  .proof__tabs--5 .proof__tab:nth-child(even){padding-left:0;border-left:0}
  .proof__tabs--5 .proof__tab:nth-child(odd):not(:first-child){padding-left:10px;border-left:1px solid var(--line-n)}
  .proof__tabs--5 .proof__tab:nth-child(n+2){border-top:1px solid var(--line-n)}
}

/* home proof: October on Google strip (night), 2 Nov 2026. Real Search Console figures only. */
.pres{margin:0 0 clamp(28px,3vw,48px);padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line-n2);border-bottom:1px solid var(--line-n)}
.pres__eye{margin:0 0 14px;font:600 .75rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lift)}
.pres__eye span{display:inline-block;margin-left:10px;letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--mist)}
.pres__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pres__list li{min-width:0;padding:16px 18px 18px;border:1px solid var(--line-n);border-radius:14px;background:var(--night-2)}
.pres__list b{display:block;font:700 clamp(1.75rem,1.2rem + 1.6vw,2.5rem)/1 var(--display);letter-spacing:-.02em;color:#fff}
.pres__list span{display:block;margin-top:8px;font:400 .875rem/1.45 var(--body);color:var(--haze)}
.pres__more{display:inline-block;margin-top:14px;font:600 .875rem/1.3 var(--body);color:var(--lift);text-decoration:underline;text-underline-offset:4px}
@media (max-width:960px){.pres__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.pres__list{grid-template-columns:minmax(0,1fr)}.pres__eye span{display:block;margin:4px 0 0}}


/* ── intro video (2 Nov 2026): About hero and the home "Built first" head ── */
.vid{margin:0;width:100%;min-width:0}
.vid__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0A0F1C;box-shadow:0 50px 90px -50px rgba(11,79,158,.5)}
.vid__frame video{display:block;width:100%;height:100%;object-fit:cover;background:#0A0F1C}
.vid__play{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border:0;border-radius:999px;background:linear-gradient(100deg,#0091EA,#0B4F9E);color:#fff;font:700 1rem/1 var(--body);cursor:pointer;box-shadow:0 14px 34px -10px rgba(10,15,28,.7),0 0 0 4px rgba(255,255,255,.18);transition:transform .2s}
.vid__play:hover{transform:translateY(-2px)}
.vid__play:focus-visible{outline:3px solid #6CC1FF;outline-offset:3px}
.vid__play svg{width:22px;height:22px;padding:6px;box-sizing:content-box;border-radius:50%;background:rgba(255,255,255,.18);fill:currentColor}
.vid__play b{font-weight:500;opacity:.8}
.vid.is-playing .vid__play{display:none}
.vid__cap{margin-top:14px;font:600 .9375rem/1.4 var(--body);color:var(--ink)}
.vid__tx{margin-top:6px}
.vid__tx summary{cursor:pointer;font:600 .875rem/1.4 var(--body);color:var(--blue)}
.vid__tx p{margin-top:10px;font:400 .9375rem/1.6 var(--body);color:var(--text)}
.band__head--vid{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:center}
.band__head--vid .lead{max-width:56ch}
.g1-vidwrap{width:100%;max-width:560px;justify-self:center}
.g1-vidwrap .g1-tb{margin-top:18px}
@media (max-width:1023px){
  .band__head--vid{grid-template-columns:minmax(0,1fr)}
  .band__head--vid .vid{max-width:620px}
}
@media (prefers-reduced-motion:reduce){.vid__play{transition:none}}