/* Turnkey Storefront. One stylesheet for the home page, the four business pages and the thanks page.
   Blue is the brand and it is used in big fields: a light blue page, a cobalt hero, a deep cobalt price list,
   the darkest blue for the bar at the top and the phone bezels. One small reddish-orange signal marks the
   active tab, focus and one tag. One type family, Archivo, in two widths: expanded for headlines and prices,
   normal for everything else. No white, no cream, no cards, no decorative rules. The demos run live in the
   frames; nothing on the page is a picture of a demo. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-var.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-var-italic.woff2") format("woff2")}

:root{
  --field:#dbe4f3;        /* the page */
  --field-2:#c9d6ec;      /* input borders, quiet separators */
  --paper:#f1f4fa;        /* inputs and the phone screen before a demo loads */
  --cobalt:#1f3fb0;       /* hero */
  --cobalt-ray:#2242b3;   /* the hero's starburst: the same blue, barely lighter */
  --cobalt-deep:#152b7e;  /* price list */
  --cobalt-ink:#0c1846;   /* top bar, footer, bezels */
  --ink:#121a33;          /* text on the field */
  --ink-2:#434f70;        /* second text on the field */
  --on-blue:#eef2fb;      /* text on any blue */
  --on-blue-2:rgba(238,242,251,.74);
  --signal:#ef5a2a;       /* the one accent */
  --signal-deep:#c9431a;
  --max:1180px;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wide:118%;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--field);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;color:var(--ink);background:var(--field);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
p{margin:0}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:720;font-stretch:var(--wide);line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:17em}
h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.012em}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:36em;margin-top:18px;line-height:1.45}
.lede a,.note a,.fine a,.by a{color:var(--ink);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
section{padding:96px 0}
@media (max-width:760px){section{padding:64px 0}}

/* Buttons. Square-ish, one radius for every interactive thing. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--signal);color:#17120f;font-weight:650;text-decoration:none;padding:15px 24px;border-radius:8px;font-size:1rem;border:0;cursor:pointer;font-family:inherit;line-height:1.1;white-space:nowrap;transition:transform .15s var(--ease),background .15s}
.btn:hover{background:#ff6a3a}
.btn:active{transform:translateY(1px)}
.btn.quiet{background:transparent;color:var(--on-blue);box-shadow:inset 0 0 0 2px rgba(238,242,251,.55)}
.btn.quiet:hover{background:rgba(238,242,251,.1)}
.btn.ink{background:var(--cobalt-ink);color:var(--on-blue)}
.btn.ink:hover{background:var(--cobalt-deep)}

/* Top bar: the darkest blue, one line, 68px. */
.bar{background:var(--cobalt-ink);color:var(--on-blue)}
.bar nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:12px;font-weight:760;font-stretch:var(--wide);font-size:1.05rem;letter-spacing:-.01em;color:var(--on-blue);text-decoration:none;white-space:nowrap}
.logo svg{width:38px;height:38px;flex:none;margin:-4px -4px -4px -6px}
.bar ul{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0;font-size:.95rem;font-weight:500}
.bar ul a{text-decoration:none;color:var(--on-blue-2)}
.bar ul a:hover{color:var(--on-blue)}
.bar ul .btn{padding:10px 16px;font-size:.92rem}
@media (max-width:1023px){.bar ul li:not(.cta){display:none}}

/* Hero: cobalt. Three rows. Row 1 holds the example names, on the right. Row 2 starts the text on the left and
   the mode note and phone on the right, so the headline sits level with the note. The phone spans rows 2 and 3.
   Row 3 on the left is what is left beside the phone: the small desktop preview sits there, on the phone's baseline. */
.hero{background:var(--cobalt) repeating-conic-gradient(from 0deg at 79% 50%,var(--cobalt) 0 7.5deg,var(--cobalt-ray) 7.5deg 15deg);color:var(--on-blue);padding:44px 0 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;gap:0 48px;align-items:start}
/* Beams: a port of Aceternity UI's background-beams (tools\effects-catalogue.md). build-pages.py writes the SVG into
   the hero: one faint web of curves and fifty beams. Each beam is a short dash (stroke-dasharray on pathLength 1) that
   travels its curve once, fades in and out, and repeats; the durations and delays vary by nth-child so no two beams
   move together. Blues only, nothing brighter than the hero's text, and still under the content. */
.hero{position:relative}
.hero>.wrap{position:relative;z-index:1}
.hero .beams{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;fill:none}
.beams path{vector-effect:non-scaling-stroke}
.beams .web{stroke:var(--on-blue);stroke-opacity:.055;stroke-width:.5}
.beams .beam{stroke:var(--on-blue);stroke-opacity:0;stroke-width:1;stroke-linecap:round;stroke-dasharray:.09 1;stroke-dashoffset:1}
@media (prefers-reduced-motion:no-preference){
  .beams .beam{animation:beam 16s linear infinite}
  .beams .beam:nth-child(5n+2){animation-duration:13s;animation-delay:-4s}
  .beams .beam:nth-child(5n+3){animation-duration:21s;animation-delay:-11s}
  .beams .beam:nth-child(5n+4){animation-duration:17s;animation-delay:-2s}
  .beams .beam:nth-child(5n){animation-duration:24s;animation-delay:-15s}
  .beams .beam:nth-child(7n+1){animation-delay:-7s}
  .beams .beam:nth-child(7n+4){animation-delay:-19s}
  .beams .beam:nth-child(3n+1){animation-duration:19s}
  @keyframes beam{0%{stroke-dashoffset:1;stroke-opacity:0}12%{stroke-opacity:.3}60%{stroke-opacity:.3}100%{stroke-dashoffset:-.09;stroke-opacity:0}}
}

.hero .copy{grid-column:1;grid-row:2}
.hero .switch{grid-column:2;grid-row:1}
.hero .frame-col{grid-column:2;grid-row:2/span 2}
.hero .mini{grid-column:1;grid-row:3;align-self:end;margin-top:48px}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.9rem);max-width:11em}
.hero .lede{color:var(--on-blue-2);font-size:1.15rem;max-width:32em;margin-top:14px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* Hosting and upkeep: three short facts in one row under the lede, each with the signal mark. */
.keep{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px;max-width:36em}
.keep li{display:grid;gap:3px;padding-top:10px;position:relative;font-size:.92rem;line-height:1.35}
.keep li::before{content:"";position:absolute;left:0;top:0;width:22px;height:3px;background:var(--signal);border-radius:2px}
.keep b{font-weight:700;font-stretch:var(--wide);letter-spacing:-.01em;font-size:1rem}
.keep span{color:var(--on-blue-2)}
@media (max-width:560px){.keep{grid-template-columns:1fr;gap:12px}}
.crumbs{font-size:.92rem;color:var(--on-blue-2);margin:0 0 22px}
.crumbs ol{list-style:none;display:flex;gap:10px;margin:0;padding:0;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs a{text-decoration:none;color:var(--on-blue)}
@media (max-width:1023px){
  .hero{padding:36px 0 56px}
  .hero .wrap{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .hero .copy{grid-column:1;grid-row:1}
  .hero .switch{grid-column:1;grid-row:2;margin-top:40px}
  .hero .frame-col{grid-column:1;grid-row:3}
  .hero .mini{grid-column:1;grid-row:4;margin-top:40px}
}

/* The demo switch: four names on one line, the active one marked with the signal. */
.switch{display:flex;flex-wrap:wrap;gap:2px 18px;margin:0 0 16px;padding:0;list-style:none}
.switch button{appearance:none;background:none;border:0;padding:8px 0;font:inherit;font-weight:600;font-size:.93rem;color:inherit;opacity:.68;cursor:pointer;border-bottom:3px solid transparent;transition:opacity .15s,border-color .15s}
.switch button:hover{opacity:1}
.switch button[aria-pressed="true"]{opacity:1;border-color:var(--signal)}
.on-field .switch button{color:var(--ink)}

/* A phone with a live site in it. The screen is a 390 by 844 iframe scaled to fit its column by app.js. */
.device{--w:390px;--h:844px;--s:.8;--pad:12px;position:relative;width:calc(var(--w) * var(--s) + var(--pad) * 2);max-width:100%}
.device .bezel{background:var(--cobalt-ink);border-radius:46px;padding:var(--pad);box-shadow:0 30px 60px -30px rgba(12,24,70,.6),inset 0 0 0 1px rgba(238,242,251,.12)}
.device .screen{position:relative;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));border-radius:34px;overflow:hidden;background:var(--paper)}
.device iframe{position:absolute;top:0;left:0;width:var(--w);height:var(--h);border:0;transform:scale(var(--s));transform-origin:0 0;opacity:0;transition:opacity .4s var(--ease)}
.device iframe.is-loaded{opacity:1}
.device .wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2);font-size:.95rem;text-align:center;padding:24px}
.device iframe.is-loaded+.wait{display:none}
.hero .device{justify-self:end}
.hero .frame-col{display:flex;flex-direction:column;align-items:flex-end}
.hero .frame-col .switch{justify-content:flex-end}
.frame-note{font-size:.95rem;color:var(--on-blue-2);margin-top:16px;max-width:26em;text-align:right}
.frame-note a{color:var(--on-blue);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:1023px){.hero .device,.hero .frame-col{justify-self:start;align-items:flex-start}.hero .frame-col .switch{justify-content:flex-start}.frame-note{text-align:left}}
@media (prefers-reduced-motion:no-preference){
  .hero .device{animation:rise .9s var(--ease) both;animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}

/* The admin mode switch above a frame: one line of text that says where the visitor is, then the button.
   app.js sets --dev-w to the phone's width, so in the hero the text wraps inside the phone's width and balances. */
.mode{display:grid;gap:10px;justify-items:start;margin:0 0 16px}
.mode-btn{padding:12px 18px;font-size:.95rem}
.mode-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--signal)}
.mode-note{font-size:.95rem;color:var(--on-blue-2);max-width:28em;line-height:1.4;text-wrap:balance}
.hero .mode{justify-items:end;text-align:right}
.hero .mode-note{width:var(--dev-w,100%);max-width:100%}
.btn.open{display:inline-block;padding:14px 22px}
.note a[data-mode-on]{cursor:pointer}
@media (max-width:1023px){.hero .mode{justify-items:start;text-align:left}}

/* The small desktop preview under the hero text. The screen is a link; the button under it says so in words. */
.mini{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.mini .mini-screen{--s:.4;display:block;min-width:0;width:100%;margin:0;text-decoration:none;color:inherit;border-radius:14px;transition:transform .25s var(--ease)}
.mini-screen .screen{display:block;box-shadow:0 0 0 1px rgba(238,242,251,.22),0 24px 48px -28px rgba(12,24,70,.7)}
.mini-screen iframe{pointer-events:none}
.mini-screen:hover{transform:translateY(-3px)}
.mini-screen:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
.mini-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.mini-row .btn{padding:11px 18px;font-size:.93rem}
.mini-note{font-size:.92rem;color:var(--on-blue-2);max-width:26em;line-height:1.4}
@media (prefers-reduced-motion:reduce){.mini-screen{transition:none}.mini-screen:hover{transform:none}}

/* The desktop section: the darkest blue, the frame on it, the open button under it. */
.desk-sec{background:var(--cobalt-ink);color:var(--on-blue)}
.desk-sec .lede,.desk-sec .by{color:var(--on-blue-2)}
.desk-sec .by a,.desk-sec .lede a{color:var(--on-blue)}
.desk-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:end;margin-top:32px}
.desk-bar .switch{grid-column:1/-1;margin:0}
.desk-bar .mode{margin:0}
.desk-bar .btn.open{grid-column:2;justify-self:end}
.desk-sec .mode-btn{background:transparent;color:var(--on-blue);box-shadow:inset 0 0 0 2px rgba(238,242,251,.55)}
.desk-sec .mode-btn:hover{background:rgba(238,242,251,.1)}
.desk-sec .mode-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--signal)}
.desk-sec .desk{margin-top:20px}
.desk-sec .desk .screen{box-shadow:0 0 0 1px rgba(238,242,251,.18),0 30px 60px -36px rgba(0,0,0,.6)}
.desk-sec .by{margin-top:32px}
@media (max-width:760px){.desk-bar{grid-template-columns:1fr}.desk-bar .btn.open{grid-column:1;justify-self:start}}

/* Built with AI: a statement, then four facts in one row, no cards. */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 40px;margin-top:44px}
.facts h3{position:relative;padding-top:14px}
.facts h3::before{content:"";position:absolute;left:0;top:0;width:28px;height:4px;background:var(--signal);border-radius:2px}
.facts p{color:var(--ink-2);margin-top:10px;max-width:22em}
@media (max-width:1023px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts{grid-template-columns:1fr;gap:28px}}

/* The six parts: a list on the left that drives a phone on the right. */
.parts{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start;margin-top:40px}
.parts>div{min-width:0}
.hero .wrap>div{min-width:0}
.parts .device{justify-self:end;position:sticky;top:24px}
.partlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.partlist button{appearance:none;width:100%;text-align:left;background:transparent;border:0;border-radius:12px;padding:16px 18px;font:inherit;color:var(--ink);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;transition:background .15s}
.partlist button:hover{background:rgba(31,63,176,.08)}
.partlist button[aria-pressed="true"]{background:var(--cobalt-ink);color:var(--on-blue)}
.partlist b{font-weight:700;font-stretch:var(--wide);font-size:1.12rem;letter-spacing:-.012em}
.partlist .names{font-size:.9rem;color:var(--ink-2);grid-column:1/-1}
.partlist button[aria-pressed="true"] .names{color:var(--on-blue-2)}
.partlist .go{font-size:.9rem;font-weight:600;color:var(--signal);grid-row:1;grid-column:2;opacity:0}
.partlist button[aria-pressed="true"] .go{opacity:1}
.parts .frame-note{color:var(--ink-2);text-align:left}
.parts .frame-note a{color:var(--ink)}
@media (max-width:1023px){
  .parts{grid-template-columns:1fr;gap:28px}
  .parts .device{justify-self:start;position:static}
  .partlist{display:flex;overflow-x:auto;max-width:100%;gap:8px;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .partlist li{scroll-snap-align:start;flex:none}
  .partlist button{padding:12px 16px;grid-template-columns:auto}
  .partlist .names,.partlist .go{display:none}
  .partlist b{font-size:1rem;white-space:nowrap}
}

/* Who it is for: a headline and four groups as text, two across. */
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;margin-top:40px;max-width:980px}
.groups h3{margin-bottom:8px}
.groups p{color:var(--ink-2);max-width:34em}
.note{margin-top:40px;color:var(--ink-2);max-width:40em}
@media (max-width:760px){.groups{grid-template-columns:1fr;gap:28px}}

/* The desktop frame: a 1280 by 800 iframe scaled to the page width. */
.desk{--w:1280px;--h:800px;--s:.9;margin-top:40px;width:100%}
.desk .screen{position:relative;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));max-width:100%;border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--field-2),0 30px 60px -36px rgba(12,24,70,.5)}
.desk iframe{position:absolute;top:0;left:0;width:var(--w);height:var(--h);border:0;transform:scale(var(--s));transform-origin:0 0;opacity:0;transition:opacity .4s var(--ease)}
.desk iframe.is-loaded{opacity:1}
.desk .wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2)}
.desk iframe.is-loaded+.wait{display:none}
.desk-note{margin-top:16px;color:var(--ink-2);font-size:.95rem}
.desk-note a{color:var(--ink);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.by{margin-top:28px;color:var(--ink-2);max-width:44em}

/* How it works: the real days down the left, what happens on the right. */
.days{display:grid;gap:36px;margin-top:40px;max-width:900px}
.days>div{display:grid;grid-template-columns:7.5rem 1fr;gap:20px;align-items:baseline}
.days .day{font-weight:760;font-stretch:var(--wide);font-size:1.6rem;letter-spacing:-.02em;color:var(--cobalt)}
.days p{color:var(--ink-2);margin-top:8px;max-width:38em}
@media (max-width:760px){.days>div{grid-template-columns:1fr;gap:4px}}

/* Pricing: deep cobalt, three rows, the price is the loudest thing. */
.pricing{background:var(--cobalt-deep);color:var(--on-blue)}
.pricing .lede{color:var(--on-blue-2)}
.pricing .lede a{color:var(--on-blue)}
.tiers{margin-top:48px;display:grid;gap:0}
.tier{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,4fr);gap:16px 40px;padding:36px 0;border-top:1px solid rgba(238,242,251,.18);align-items:start}
.tier:last-child{border-bottom:1px solid rgba(238,242,251,.18)}
.tier h3{font-size:1.6rem;letter-spacing:-.02em;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.tier .pick{font-size:.78rem;font-weight:650;font-stretch:100%;letter-spacing:0;background:var(--signal);color:#17120f;padding:4px 9px;border-radius:6px;white-space:nowrap}
.tier .buy{display:grid;gap:16px;justify-items:end}
.tier .buy .btn{white-space:normal;text-align:center}
.tier .what{color:var(--on-blue);max-width:34em;line-height:1.5}
.tier .price{font-weight:780;font-stretch:var(--wide);font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.03em;line-height:1;text-align:right;white-space:nowrap}
.tier .price small{display:block;font-size:.95rem;font-weight:500;font-stretch:100%;letter-spacing:0;color:var(--on-blue-2);margin-bottom:6px}
.tier .price a{text-decoration:none}
.after{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;max-width:900px;color:var(--on-blue-2);font-size:.98rem}
.after b{color:var(--on-blue);font-weight:650}
.after a{color:var(--on-blue);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:760px){
  .tier{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .tier .buy{justify-items:start}
  .tier .price{text-align:left}
  .after{grid-template-columns:1fr}
}

/* Questions: open on click. */
.faq{margin-top:32px;max-width:820px}
.faq details{border-top:1px solid var(--field-2)}
.faq details:last-child{border-bottom:1px solid var(--field-2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;font-weight:650;font-size:1.12rem;position:relative;letter-spacing:-.008em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.7rem;font-weight:400;color:var(--cobalt);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 22px 0;color:var(--ink-2);max-width:40em}

/* Contact: the form on the left, what happens next on the right. */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:40px;align-items:start}
form.pad{display:grid;gap:18px}
.pad .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pad label{display:grid;gap:8px;font-weight:600;font-size:.95rem}
.pad input,.pad select,.pad textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:2px solid var(--field-2);border-radius:8px;padding:12px 14px;width:100%;transition:border-color .15s}
.pad textarea{resize:vertical;min-height:120px}
.pad input:focus,.pad select:focus,.pad textarea:focus{outline:0;border-color:var(--cobalt)}
.pad .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pad .btn{justify-self:start;margin-top:4px}
.pad .or{color:var(--ink-2);font-size:.95rem}
.pad .or a{color:var(--ink);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.aside h3{margin-bottom:10px}
.aside p{color:var(--ink-2);max-width:32em}
.deposit{margin-top:36px;padding-top:28px;border-top:1px solid var(--field-2)}
.deposit .btn{margin-top:18px}
@media (max-width:1023px){.contact-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:560px){.pad .row{grid-template-columns:1fr}}

/* Footer. */
footer{background:var(--cobalt-ink);color:var(--on-blue-2);padding:40px 0 48px;font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start}
footer span{max-width:36em}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0}
footer a{color:var(--on-blue);text-decoration:none}
footer a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}

/* Admin list on the business pages. */
.admin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;margin-top:8px;align-items:start}
.admin ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:1.1rem}
.admin li{padding-left:22px;position:relative}
.admin li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:3px;background:var(--signal);border-radius:2px}
@media (max-width:1023px){.admin{grid-template-columns:1fr}}

/* Back to the top. Bottom left, small, shown once the visitor is past the hero. */
.totop{position:fixed;left:18px;bottom:18px;z-index:20;width:46px;height:46px;border-radius:50%;background:var(--cobalt-ink);color:var(--on-blue);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(12,24,70,.7),inset 0 0 0 1px rgba(238,242,251,.18);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease),background .15s}
.totop svg{width:20px;height:20px}
.totop:hover{background:var(--cobalt-deep)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* Thanks page. */
.thanks{min-height:100dvh;display:grid;place-items:center;padding:40px 24px;background:var(--cobalt);color:var(--on-blue)}
.thanks div{max-width:34em;display:grid;gap:18px}
.thanks h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.thanks p{color:var(--on-blue-2);font-size:1.15rem}
.thanks .btn{justify-self:start}

/* Cloudflare Turnstile bot check in the contact form */
.pad .cf-turnstile{margin:4px 0 14px}
.pad .bot-note{margin:0 0 12px;font-size:.95rem}

/* The top bar's button keeps the dark text every .btn has: the bar's link colour must not win (contrast, WCAG AA). */
.bar ul a.btn,.bar ul a.btn:hover{color:#17120f}

/* The consent line under the contact form, the terms link by the deposit, the legal links in the footer. */
.pad .agree{margin:0 0 4px;color:var(--ink-2);font-size:.92rem;max-width:36em}
.pad .agree a,.aside .deposit a.terms{color:var(--ink);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
footer .legal-line{flex-basis:100%;margin:6px 0 0;font-size:.9rem;color:var(--on-blue-2)}
footer .legal-line a{margin-right:6px;color:var(--on-blue)}

/* Legal pages: one column of text on the field. */
.legal{padding:72px 0 96px}
.legal .wrap{max-width:46em}
.legal h1{font-size:clamp(2.2rem,4.5vw,3.4rem)}
.legal .when{color:var(--ink-2);margin-top:14px}
.legal h2{font-size:1.45rem;margin-top:44px;max-width:none}
.legal p,.legal li{max-width:none;line-height:1.55}
.legal p{margin:14px 0 0}
.legal ul{margin:12px 0 0;padding-left:22px}
.legal li{margin-top:8px}
.legal a{color:var(--ink);font-weight:600;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}

/* The security strip (security phase 6): the hosting strip's shape, four up on the field, a short orange rule over
   each fact. Between How it works and the prices. No cards. */
.secure .lede{max-width:40em}
.shield{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px}
.shield li{display:grid;gap:5px;padding-top:12px;position:relative;line-height:1.4}
.shield li::before{content:"";position:absolute;left:0;top:0;width:26px;height:3px;background:var(--signal);border-radius:2px}
.shield b{font-weight:700;font-stretch:var(--wide);letter-spacing:-.01em;font-size:1.08rem;color:var(--ink)}
.shield span{color:var(--ink-2);font-size:.96rem}
@media (max-width:900px){.shield{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.shield{grid-template-columns:1fr;gap:16px}}