/* Website Builder Studio — design tokens + shell + page components.
   One stylesheet, no build step. Every colour pair below passes WCAG AA on its surface
   (body text 4.5:1, large text/UI 3:1). Accent: deep indigo; CTA: the same indigo filled
   (white on #3730A3 = 8.6:1). Warm surface, near-black ink. Change tokens here only. */
/* Direction A1 "Blueprint" (WEBSITE-BUILDER-VISUAL-AUDIT-2026-09-11): navy accent, ONE blue CTA
   colour used nowhere else, Sora display + Inter body. Ratios from the audit (computed). */
:root{
  --ink:#0B1220;          /* 18.1:1 on the surface */
  --ink-2:#3F4A5C;        /* 8.7:1 */
  --muted:#5B6678;        /* 5.6:1 */
  --surface:#FFFFFF;
  --surface-2:#FAFBFD;    /* section band */
  --surface-3:#F1F4F9;
  --border:#DCE1EA;
  --accent:#1D4ED8;       /* THE CTA colour (blue-700): white text 6.7:1 */
  --accent-hover:#1E40AF;
  --accent-soft:#E8EEF9;  /* chips, tints */
  --accent-ink:#1E3A8A;   /* navy, the brand accent as text: 10.0:1 */
  --signal:#C2410C;       /* one warm highlight per page: 5.1:1 on white */
  --ok:#166534;
  --radius:14px; --radius-sm:9px;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:"Sora","Inter","Segoe UI",system-ui,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--surface)}
img,svg{max-width:100%;height:auto}
a{color:var(--accent-ink);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-0.01em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-0.02em}
h2{font-size:clamp(26px,3.4vw,36px);font-weight:700}
h3{font-size:20px;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{left:12px;z-index:100}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
/* flex:none and nowrap are load-bearing, not tidiness. Adding the second header button widened
   the nav, the brand got squeezed, and "Website Builder Studio" wrapped onto two lines — which
   silently grew the header from 66px to 86px on desktop. A wrapped company name in the top-left
   corner is the first thing a visitor sees on a site that sells websites. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-0.01em;flex:none;white-space:nowrap}
.brand svg{width:32px;height:32px;flex:none}
.nav{display:flex;align-items:center;gap:16px}
.nav-links{display:flex;align-items:center;gap:12px}
.nav-links a{text-decoration:none;color:var(--ink-2);font-weight:500;font-size:14.5px;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--accent-ink)}
.nav-links a[aria-current="page"]{color:var(--accent-ink);border-bottom-color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
/* Both header buttons share one size so the pair reads as deliberate rather than accidental.
   The free check uses .btn-ghost — the outlined button this site already uses everywhere else —
   rather than a new class. A bespoke .btn-check was written first and silently lost its border:
   it sat ABOVE .btn in this file, so .btn's `border:1.5px solid transparent` shorthand came later
   and reset border-color to transparent. Reusing the proven class removes the bug and the
   ordering trap with it. */
.nav-actions .btn{height:44px;min-height:0;padding:0 13px;font-size:16px;white-space:nowrap}

/* THE HAMBURGER. Borderless, and it becomes an X while the menu is open, so the control always
   says what it will do next rather than what it just did. It sits above the overlay. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;z-index:120;flex:none}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;margin:0 auto;transition:transform .28s ease,opacity .18s ease}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* THE BREAKPOINT IS 1120px, AND IT IS TIED TO --max RATHER THAN CHOSEN BY EYE.
   .wrap stops growing at --max:1120px, so the header row has at most 1076px of content width no
   matter how wide the monitor is. A row that does not fit in 1076px does not fit ANYWHERE — which
   is why the first attempt at this header overflowed on a 1280px desktop as readily as on a
   laptop. Matching the breakpoint to --max means the desktop bar only ever renders at a width
   where it is known to fit, and everything below it gets the overlay. */
@media (max-width:1120px){
  /* A FULL-SCREEN OVERLAY, NOT A DROPDOWN. The old menu was absolutely positioned over the hero
     and the page showed through underneath — the menu's own button landed on top of the hero's
     button and it looked broken. inset:0 with 100dvh cannot do that. dvh rather than vh because
     mobile browser chrome changes the viewport height, and vh leaves a gap or overflows. */
  .nav{position:fixed;inset:0;height:100dvh;background:var(--surface);flex-direction:column;
    justify-content:center;align-items:center;gap:0;padding:88px 26px 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);z-index:110;
    transition:opacity .3s ease,transform .3s ease,visibility .3s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:420px}
  .nav-links a{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--ink);
    text-align:center;padding:16px 6px;border-bottom:1px solid var(--border);
    opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
  .nav-links a[aria-current="page"]{color:var(--accent-ink);border-bottom-color:var(--border)}
  .nav.open .nav-links a{opacity:1;transform:none}
  /* Staggered so the eye travels down the list instead of being hit by all of it at once. */
  .nav.open .nav-links a:nth-child(1){transition-delay:.05s}
  .nav.open .nav-links a:nth-child(2){transition-delay:.09s}
  .nav.open .nav-links a:nth-child(3){transition-delay:.13s}
  .nav.open .nav-links a:nth-child(4){transition-delay:.17s}
  .nav.open .nav-links a:nth-child(5){transition-delay:.21s}
  .nav.open .nav-links a:nth-child(6){transition-delay:.25s}
  .nav.open .nav-links a:nth-child(7){transition-delay:.29s}
  /* Both actions full width and thumb sized at the foot of the menu. */
  .nav-actions{flex-direction:column;width:100%;max-width:420px;gap:12px;margin-top:26px}
  .nav-actions .btn{width:100%;height:50px;font-size:16px}
  .nav-toggle{display:flex}
  /* Scroll lock. Without it the page scrolls behind the overlay and the visitor loses their place. */
  body.nav-open{overflow:hidden}
  /* THE LOGO STAYS PUT WHILE THE MENU IS OPEN. The overlay sits at z-index 110 and the header at
     50, so the brand was being painted underneath it — the menu opened and the company name
     disappeared. Lifting the header above the overlay keeps the mark and the close control on one
     line at the top, which is the pattern every polished mobile site uses, and it gives the
     visitor a way home from inside the menu. The brand needs its own lift too: it is a sibling of
     .nav inside the header, so without it the overlay's 110 still wins. */
  body.nav-open .top{z-index:120}
  body.nav-open .brand{position:relative;z-index:120}
}
@media (prefers-reduced-motion:reduce){
  .nav,.nav-links a,.nav-toggle span{transition:none}
}

/* SMALL PHONES (320-420px). Everything below is about ONE measured fact: at 320px the header row
   needed 323px and the page scrolled sideways on every one of the 292 pages. A horizontal
   scrollbar is the most obvious "this site is broken on my phone" signal there is, and it is the
   kind of thing a visitor judges a website company on in about one second. */
@media (max-width:420px){
  .wrap{padding:0 16px}
  .top .wrap{gap:10px}
  .brand{font-size:15px;gap:8px}
  .brand svg{width:28px;height:28px}
}
/* Below 360px the full wordmark simply cannot share a 320px line with a 44px tap target — the
   name alone is wider than the space left over. The mark carries the brand on its own here; the
   page title, the hero and the footer all still say the name in full. Showing a clipped or
   overlapping company name would be worse than showing the mark. */
@media (max-width:360px){
  .brand span{display:none}
}
/* Turnstile renders a fixed 300px widget that we do not control. At 320px that is wider than the
   card, and it was dragging the whole PAGE sideways. Containing the overflow to its own box means
   the widget stays usable and the page stops scrolling. */
#grTurnstile{max-width:100%;overflow-x:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;padding:13px 22px;border-radius:var(--radius-sm);border:1.5px solid transparent;text-decoration:none;cursor:pointer;min-height:46px;font-family:var(--sans);line-height:1.2}
.btn-primary{background:var(--accent);color:#fff!important}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:var(--surface);color:var(--accent-ink)!important;border-color:var(--accent)}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-lg{font-size:17px;padding:15px 26px;min-height:52px}

/* hero */
.hero{padding:64px 0 26px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eyebrow{display:inline-block;font-size:14.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);padding:6px 11px;border-radius:999px;margin-bottom:16px}
.lede{font-size:20px;color:var(--ink-2);max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 10px}
.fine{font-size:14px;color:var(--muted);margin:0}
.shot{border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 24px 60px -30px rgba(20,18,31,.35);overflow:hidden;background:var(--surface-2)}
.shot img{display:block;width:100%}
.shot-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--border);display:block}
@media (max-width:860px){.hero{padding:40px 0 24px}.hero-grid{grid-template-columns:1fr;gap:28px}}

/* answer layer */
.geo-answer{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin:8px 0 28px}
.geo-answer p{margin:0 0 8px}
.geo-answer .lbl{margin-top:0;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 22px;margin:10px 0 0;padding:0;list-style:none}
.facts li{font-size:15px;color:var(--ink-2)}
.facts li b{color:var(--ink);font-weight:600}

/* sections */
section{padding:34px 0}
section.band{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-head{max-width:64ch;margin-bottom:26px}
.sec-head p{color:var(--ink-2);font-size:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.tile h3{margin:10px 0 6px;font-size:18px}
.tile p{margin:0;color:var(--ink-2);font-size:15.5px}
.tile .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-ink);font-weight:700}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;counter-reset:step}
.step{position:relative;padding:22px 22px 22px 22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.step::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;margin-bottom:10px}
.step h2{margin:0 0 6px;font-size:20px;font-weight:600}
.step p{margin:0;color:var(--ink-2)}
.content{max-width:72ch}
.content h2{margin-top:34px}
.content ul{padding-left:20px}
.content li{margin:0 0 8px}
.callout{border-left:4px solid var(--accent);background:var(--accent-soft);padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:18px 0}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;position:relative}
.plan.hi{border-color:var(--accent);box-shadow:0 18px 50px -30px rgba(55,48,163,.5)}
.plan .badge{position:absolute;top:-12px;left:20px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.03em}
.plan h2{margin:4px 0 2px;font-size:22px;font-weight:600}
.plan .sub{color:var(--muted);font-size:14.5px;margin:0 0 12px}
.price{font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-0.02em;line-height:1}
.price small{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:16px 0 20px}
.plan li{padding:6px 0;border-top:1px solid var(--border);font-size:15px;color:var(--ink-2)}
.plan li:first-child{border-top:0}
.plan .btn{margin-top:auto;width:100%}
.plan .terms{font-size:14px;color:var(--muted);margin:10px 0 0;line-height:1.45}

/* faq */
.faq details{border-top:1px solid var(--border);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;font-weight:600;font-size:17.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--accent-ink);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--ink-2)}

/* related */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.related a{display:block;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;text-decoration:none;color:var(--ink);background:var(--surface)}
.related a:hover{border-color:var(--accent)}
.related a span{display:block;color:var(--muted);font-size:14px;margin-top:4px}

/* forms */
.form{max-width:560px}
.field{margin:0 0 14px}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;background:var(--surface);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hp{position:absolute;left:-9999px}

/* breadcrumb + footer */
.crumb{font-size:14px;color:var(--muted);margin:22px 0 6px}
.crumb a{color:var(--muted)}
.crumb span{margin:0 6px}
footer{border-top:1px solid var(--border);background:var(--surface-2);padding:40px 0 30px;margin-top:40px}
/* minmax(0,1fr) rather than a bare 1fr, and the reason is a real bug this caused.
   A bare `1fr` track is minmax(auto,1fr), and that `auto` minimum is the column content's
   MIN-CONTENT width — so a track can refuse to shrink below its longest unbreakable item. The
   footer link "AI website builder" held the column open and pushed the whole page 53px wider
   than a 320px phone, giving every page a horizontal scrollbar. minmax(0,...) lets the track
   actually shrink. Nothing about the layout changes at normal widths. */
.f-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
.f-grid h2{font-family:var(--display);font-size:15px;margin:0 0 10px}
.f-grid ul{list-style:none;padding:0;margin:0}
.f-grid li{margin:0 0 8px;font-size:15px}
.f-grid a{text-decoration:none;color:var(--ink-2)}
.f-grid a:hover{color:var(--accent-ink)}
.f-note{color:var(--muted);font-size:14px;margin-top:22px;border-top:1px solid var(--border);padding-top:16px}
@media (max-width:860px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Below 380px two columns leave roughly 150px per column, which is narrower than the longest
   link. One column is honest at that width rather than cramped. */
@media (max-width:380px){.f-grid{grid-template-columns:minmax(0,1fr);gap:22px}}
.cta-band{background:var(--accent);color:#fff;border-radius:var(--radius);padding:38px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:#E9E7F8;margin:6px 0 0}
.cta-band .btn-primary{background:#fff;color:var(--accent-ink)!important}
.notfound{padding:80px 0;text-align:center}

/* hub index (auto-built list of a section's pages) */
.index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.index li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.index li a{font-family:var(--display);font-weight:600;font-size:17px;text-decoration:none;color:var(--accent-ink)}
.index li a:hover{text-decoration:underline}
.index li p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.5}

/* sourced facts list (place + industry pages) */
.facts-src{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.facts-src li{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:15.5px}
.facts-src li a{display:block;font-size:14px;color:var(--muted);margin-top:2px}

/* checkout */
.co-trustline{text-align:center;color:var(--ink-2);font-size:15px;margin:0 0 22px}
.co-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start;margin-bottom:28px}
@media (max-width:860px){.co-grid{grid-template-columns:1fr}}
.co-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px}
.co-card h2{font-size:20px;margin:0 0 14px}
.co-card h2+h2{margin-top:22px}
.co-billing{display:flex;align-items:center;gap:14px;margin-bottom:8px;font-weight:600}
.co-billing .muted-label{color:var(--muted);font-weight:500}
.co-billing .save{background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:2px 9px;font-size:14px;margin-left:6px}
.co-switch{position:relative;width:52px;height:30px;border-radius:999px;background:var(--border);border:0;cursor:pointer;padding:0}
.co-switch span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.co-switch.on{background:var(--accent)}
.co-switch.on span{left:25px}
.co-plan{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 10px;cursor:pointer;font-family:var(--sans);color:var(--ink)}
.co-plan:hover{border-color:var(--accent)}
.co-plan.sel{border-color:var(--accent);background:var(--accent-soft)}
.co-plan-main{display:flex;flex-direction:column;gap:3px}
.co-plan-name{font-family:var(--display);font-weight:600;font-size:17px}
.co-plan-name .badge{font-style:normal;background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px;font-size:14px;margin-left:8px;vertical-align:middle}
.co-plan-desc{color:var(--ink-2);font-size:14px}
.co-plan-price{text-align:right;flex:none}
.co-plan-price .rate{display:block;font-family:var(--display);font-weight:700;font-size:18px}
.co-plan-price .per{display:block;color:var(--muted);font-size:14px}
.co-summary{position:sticky;top:84px}
.co-summary .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:15.5px}
.co-summary .row.total{font-weight:700;font-size:17px;border-bottom:0}
.co-summary .muted{color:var(--muted)}
.co-due{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 16px;margin:10px 0 16px;text-align:center}
.co-due .sub{color:var(--ink-2);font-size:14px}
.co-due .big{font-family:var(--display);font-weight:700;font-size:30px;color:var(--accent-ink);margin:4px 0}
.co-cta{width:100%}

/* compliance grader */
.grader-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:0 18px 50px rgba(11,18,32,.06)}
.grader-row{display:flex;gap:10px;flex-wrap:wrap}
.grader-row input{flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:16px;padding:13px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--ink);background:var(--surface)}
.grader-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.grader-row .btn{flex:0 0 auto}
@media (max-width:640px){.grader-row .btn{width:100%}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* STICKY CONVERSION BAR — the same pattern the sister marketing site proved (sticky-bar
   research + WCAG fixes): appears after a real scroll, dismissible for a week, never covers the
   footer, 44px close target, safe-area inset, hidden where the viewport is too short to spare
   the room, and no transition for anyone who asked for reduced motion. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(30,58,138,.96);color:#fff;font-size:14.5px;display:none;align-items:center;justify-content:center;gap:14px;padding:10px 52px 10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));min-height:56px;box-shadow:0 -4px 18px rgba(11,18,32,.22);transform:translateY(110%);transition:transform .3s ease}
.sticky-cta.show{display:flex;transform:translateY(0)}
/* A LIGHT BUTTON, AS ITS OWN CLASS ON PURPOSE. The sticky bar first reused .btn-primary,
   whose color is set with !important, so a white-on-navy bar rendered white text on a white
   button: an invisible label. Adding another !important would have won the argument and left
   the next person the same trap, so the button stops borrowing .btn-primary instead. */
.btn-light{background:#fff;color:var(--accent-ink);border-color:#fff}
.btn-light:hover{background:#EAF0FC;color:var(--accent-ink)}
.sticky-cta .btn{padding:9px 18px;min-height:44px;font-size:16px}
.sticky-close{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:24px;line-height:1;width:44px;height:44px;cursor:pointer;border-radius:8px}
.sticky-close:hover{background:rgba(255,255,255,.14)}
.has-sticky{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
html.has-sticky{scroll-padding-bottom:80px}
@media (max-height:500px){.sticky-cta.show{display:none}}
@media (max-width:520px){.sticky-cta{font-size:14px;gap:10px;padding-right:48px}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* TIGHTER VERTICAL RHYTHM (David, 2026-09-12: "everything has to be tight ... first thing
   people see is our own website to decide if they want a website from us"). The gap between a
   page lede and its first content section measured 96px, which read as an empty screen on the
   pricing page before the plans appeared. Hero bottom 40->26 and section 52->34 halve it.
   The FIRST section after the lede is pulled tighter still: that is the one join a visitor
   judges, and on pricing it is the join before the prices. */
main > div.wrap:first-of-type + section{padding-top:14px}


/* HOW-TO STEPS. Numbered on purpose: the numbering is the signal, both to a reader scanning for
   "is this hard?" and to an answer engine deciding whether this page IS the step-by-step answer.
   counter-reset/counter-increment rather than the browser's own numbers, so the marker can be
   styled as a brand element without losing the semantics of an <ol>. */
.steps-list{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:18px}
@media (min-width:760px){.steps-list{grid-template-columns:1fr 1fr;gap:20px 34px}}
.steps-list li{counter-increment:step;position:relative;padding-left:52px}
.steps-list li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;
  border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;
  font-size:17px;display:flex;align-items:center;justify-content:center}
.steps-list h3{font-size:18px;margin:4px 0 6px}
.steps-list p{color:var(--ink-2);font-size:15.5px;margin:0}

/* CONTACT CONFIRMATION (U414, David 2026-10-30): the card that replaces the form once a message is sent — the same
   pattern as the sister sites (a check, a heading, the reply promise, where to go next). Sizes meet the readable-type
   standard (nothing below 14px). */
.form-done{max-width:640px;margin:8px auto 28px;text-align:center;background:var(--surface);border:1.5px solid var(--accent);
  border-radius:var(--radius);padding:36px 28px;box-shadow:0 18px 50px rgba(11,18,32,.08);outline:none}
.form-done-check{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:32px;font-weight:700;line-height:64px}
.form-done h2{font-size:clamp(24px,3vw,30px);margin:0 0 10px;color:var(--accent-ink)}
.form-done p{margin:0 auto 8px;max-width:480px;color:var(--ink)}
.form-done .form-done-next{color:var(--muted);font-size:16px;margin-top:12px}

/* U409 BIGGER WORDS (David 2026-10-26 "bigger words"; the standard: body 17px, nothing below 14px, line height 1.5+, controls 44px).
   Two pages carry a card line with its size written inline (style="font-size:13px"); it is raised here so no page's words or markup
   change. Size only: colors and layout unchanged. */
[style*="font-size:11px"],[style*="font-size:11.5px"],[style*="font-size:12px"],[style*="font-size:12.5px"]{font-size:14px!important}
[style*="font-size:13px"],[style*="font-size:13.5px"],[style*="font-size: 13px"],[style*="font-size: 12px"]{font-size:15px!important}
/* the Monthly / Annual label buttons beside the billing switch: 44px tall targets (the switch keeps its shape; these are its labelled equivalents) */
.bt-lbl{min-height:44px}