/* Pewterham: the marketing site, prototype 2 (Task 0, for Lanre's approval). pewterham.com, /vitaesmith, /foilwright.
   One design system; each product page sets its own theme (.vs, .fw) on <body>. Every section is its own "ad spot":
   one idea, carried by the presentation that suits it. Motion is driven by js/site.js and switched off for people who
   ask their system for reduced motion. Faces: Geist and Fraunces (SIL OFL), self-hosted. */

@font-face{font-family:'Geist';src:url('../assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --white:#fff;--paper:#F4F2ED;--mist:#F7F6F3;--card:#FFFFFF;
  --ink:#16191C;--ink-2:#3D444B;--muted:#646C73;--faint:#9AA1A7;--line:rgba(22,25,28,.09);
  --night:#0B0D10;--night-2:#15191E;--on-night:#F2F3F4;--on-night-2:#A9B0B6;
  --blue:#89CFF0;--blue-hover:#A6DCF5;--blue-deep:#1C6C9C;--blue-glow:rgba(137,207,240,.42);
  --pewter:#8A939A;
  --accent:#1C6C9C;--accent-2:#89CFF0;--deep:#0B0D10;--deep-2:#15191E;--glow:rgba(137,207,240,.18);
  --accent-ink:#1C6C9C; /* the accent for text on a light background: at least 4.5:1 on white, paper and mist */
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --r-lg:32px;--r-md:22px;--r-sm:14px;
  --ease:cubic-bezier(.2,.75,.15,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --bar:56px;
}
/* Nothing pokes past the screen's sides: a glow or a picture sliding in is clipped at its section's edge.
   overflow-x: clip makes no scroll box, so the pinned scenes inside a section still pin. */
main section{overflow-x:clip}
/* The product themes. */
.vs{--accent:#E8951C;--accent-2:#FFD98A;--deep:#120A04;--deep-2:#24150A;--glow:rgba(232,149,28,.20);--accent-ink:#9A5B00}
.fw{--accent:#E2C072;--accent-2:#F4E7C2;--deep:#0D0B08;--deep-2:#1A1610;--glow:rgba(226,192,114,.16);--accent-ink:#7D5C1E}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 60px)}
body{margin:0;background:var(--white);color:var(--ink);font:400 18px/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg,iframe{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,figure,dl,dd{margin:0}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#000;padding:10px 14px;border-radius:10px}.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---- Type ---------------------------------------------------------------------------------------- */
/* Accent text: the darker ink on light sections (4.5:1 or better), the bright accent on dark ones. */
.eyebrow{font:600 15px/1.2 var(--sans);letter-spacing:.02em;color:var(--accent-ink)}
[data-dark] .eyebrow,.on-dark .eyebrow{color:var(--accent)}
.eyebrow.caps{font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.h-hero{font:700 clamp(54px,11vw,168px)/.92 var(--sans);letter-spacing:-.045em}
.h-1{font:700 clamp(44px,7.4vw,112px)/.96 var(--sans);letter-spacing:-.04em}
.h-2{font:700 clamp(36px,5.4vw,80px)/1 var(--sans);letter-spacing:-.035em}
.h-3{font:650 clamp(26px,2.9vw,40px)/1.1 var(--sans);letter-spacing:-.025em}
.h-4{font:650 22px/1.25 var(--sans);letter-spacing:-.015em}
.h-hero,.h-1,.h-2,.h-3,.h-4,.words{text-wrap:balance}
.lead,.copy{text-wrap:pretty}
br.ph{display:none}
.nw{white-space:nowrap}
.lead{font:450 clamp(19px,1.7vw,24px)/1.45 var(--sans);letter-spacing:-.01em;color:var(--ink-2);max-width:760px}
.lead b,.copy b{color:var(--ink);font-weight:600}
.on-dark .lead,.on-dark .copy{color:var(--on-night-2)}
.on-dark .lead b,.on-dark .copy b{color:var(--on-night)}
.copy{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:620px}
.small{font-size:14px;line-height:1.5;color:var(--muted)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.italic{font-style:italic}
.grad{background:linear-gradient(100deg,var(--accent-2),var(--accent) 55%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.accent{color:var(--accent-ink)}
[data-dark] .accent,.on-dark .accent{color:var(--accent)}
sup.fn{font-size:.5em;vertical-align:super;line-height:0;margin-left:2px;color:inherit;opacity:.75}
sup.fn a{text-decoration:none}

/* ---- Layout -------------------------------------------------------------------------------------- */
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.wide{width:min(1440px,calc(100% - 48px));margin-inline:auto}
.narrow{width:min(860px,calc(100% - 48px));margin-inline:auto}
.sec{padding-block:clamp(110px,15vw,210px);position:relative}
.sec.tight{padding-block:clamp(72px,10vw,130px)}
.center{text-align:center}
.center .lead,.center .copy{margin-inline:auto}
.stack-xs>*+*{margin-top:12px}.stack-s>*+*{margin-top:20px}.stack-m>*+*{margin-top:32px}.stack-l>*+*{margin-top:56px}
.on-dark{background:var(--deep);color:var(--on-night)}
.on-mist{background:var(--mist)}
.on-paper{background:var(--paper)}

/* ---- Buttons ------------------------------------------------------------------------------------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 26px;border-radius:999px;border:0;font:600 17px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),background .25s,box-shadow .3s}
.btn:active{transform:scale(.97)}
.btn-buy{background:var(--blue);color:#0A1A24;box-shadow:0 10px 34px var(--blue-glow)}
.btn-buy:hover{background:var(--blue-hover);box-shadow:0 14px 44px var(--blue-glow)}
.btn-big{--h:62px;padding:0 34px;font-size:19px}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-line:hover{background:rgba(127,127,127,.12)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
/* checkout opening soon (website 1.4.1, tools/soon.mjs): a Buy that can't buy yet, an outline in the text's own color */
button.btn.soon[disabled]{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 45%,transparent);cursor:default;transform:none;white-space:normal;text-align:center;line-height:1.2;padding-block:6px}
.link{color:var(--blue-deep);text-decoration:none;font-weight:550}
.link:hover{text-decoration:underline}
.on-dark .link{color:var(--blue)}
.link::after{content:' ›'}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .ctas{justify-content:center}

/* ---- The global header and the product bar -------------------------------------------------------- */
.gh{position:relative;z-index:30;height:52px;border-bottom:1px solid var(--line)}
/* The header's glass is a layer of its own: an element that blurs what is behind it also limits what the elements
   inside it can blur to its own paint, and the Apps panel, inside the header, must blur the page (website 1.1). */
.gh::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);transition:background .35s ease}
.gh .wrap{display:flex;align-items:center;gap:28px;height:100%}
.gh .brand img{height:28px;width:auto}
.gh.dark{border-bottom-color:rgba(255,255,255,.08)}
.gh.dark::before{background:rgba(11,13,16,.78)}
/* A header that follows the section under it (the home page): both lockups are in it, one shown. */
.gh[data-autotheme]{transition:border-color .35s ease}
.gh .brand .on-light{display:none}
.gh[data-autotheme]:not(.dark) .brand .on-dark{display:none}
.gh[data-autotheme]:not(.dark) .brand .on-light{display:block}

.pbar{position:sticky;top:0;z-index:40;height:var(--bar);background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid var(--line);transition:background .3s}
.pbar .wrap{display:flex;align-items:center;gap:18px;height:100%}
.pbar .pname{display:flex;align-items:center;gap:10px;font:650 19px/1 var(--sans);letter-spacing:-.02em;text-decoration:none}
.pbar .pname img{width:28px;height:28px;border-radius:8px}
.pbar nav{display:flex;gap:4px;margin-left:auto;padding:4px;border-radius:999px}
.pbar nav a{font-size:14px;text-decoration:none;color:var(--ink-2);padding:7px 13px;border-radius:999px;transition:background .25s,color .25s}
.pbar nav a:hover{color:var(--ink)}
.pbar nav a.on{background:rgba(22,25,28,.07);color:var(--ink)}
.pbar .btn{--h:38px;padding:0 18px;font-size:14.5px;box-shadow:none}
.pbar[data-autotheme],.pbar[data-autotheme] .pname,.pbar[data-autotheme] nav a{transition:background .35s ease,color .35s ease,border-color .35s ease}
.pbar.dark{background:rgba(14,14,16,.74);border-bottom-color:rgba(255,255,255,.08);color:#fff}
.pbar.dark nav a{color:#C3C8CC}.pbar.dark nav a:hover{color:#fff}
.pbar.dark nav a.on{background:rgba(255,255,255,.12);color:#fff}

/* ---- Hero ---------------------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 700px at 70% 0%,var(--glow),transparent 60%),var(--deep);color:var(--on-night);padding-top:clamp(56px,8vw,96px)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-2)}
.hero .eyebrow img{width:30px;height:30px;border-radius:9px}
.hero h1{margin-top:22px}
.hero .lead{margin-top:26px;color:var(--on-night-2)}
.hero .lead b{color:var(--on-night)}
.hero .ctas{margin-top:36px}
.hero .fine{margin-top:16px;font-size:14px;color:var(--on-night-2)}
.hero .fine a{color:#fff}
/* line-by-line entrance */
/* Each line rises through a mask. The mask reaches .2em below its line, so the serif italic's tails ("y", "p", "g")
   aren't cut, and draws back .16em, so the lines keep round 2's spacing (F-website-v1.1-13). A hidden line drops past
   the mask's foot. */
.lines>span{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.16em}
.lines>span>span{display:block;transform:translateY(calc(105% + .2em));transition:transform 1.1s var(--ease-out)}
.ready .lines>span>span{transform:none}
.lines>span:nth-child(2)>span{transition-delay:.09s}.lines>span:nth-child(3)>span{transition-delay:.18s}
.fade-up{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
.ready .fade-up{opacity:1;transform:none}

/* the price pill */
.pricepill{display:inline-flex;align-items:center;gap:16px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.pricepill b{font-size:18px}.pricepill span{font-size:14px;color:var(--on-night-2)}
.pricepill .btn{--h:44px;padding:0 20px;font-size:16px}

/* ---- Reveal on scroll ------------------------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(42px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv-zoom{opacity:0;transform:scale(1.07);transition:opacity 1.2s var(--ease-out),transform 1.6s var(--ease-out);transition-delay:var(--d,0s)}
.rv-zoom.in{opacity:1;transform:none}
.rv-left{opacity:0;transform:translateX(-60px);transition:opacity 1.1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--d,0s)}
.rv-right{opacity:0;transform:translateX(60px);transition:opacity 1.1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--d,0s)}
.rv-left.in,.rv-right.in{opacity:1;transform:none}

/* ---- No scripts: every block in its finished place (website 1.4) ----------------------------------- */
/* The build sets the "js" class first thing in every page's head (tools/firstpaint.mjs); without it nothing waits for
   a script that will never come: the reveals and the entrance stand shown, and a pinned scene lies flat. */
html:not(.js) .rv,html:not(.js) .rv-zoom,html:not(.js) .rv-left,html:not(.js) .rv-right,html:not(.js) .fade-up{opacity:1;transform:none}
html:not(.js) .lines>span>span{transform:none}
html:not(.js) .scene{height:auto}
html:not(.js) .scene-stick{position:relative;height:auto;padding-block:48px}

/* ---- What's off screen is skipped (website 1.4, D7) ------------------------------------------------- */
/* A page marked <main data-skip> lays out its opening alone: every section after it is skipped (no layout, no paint, no
   lazy picture asked for) until it comes near, holding a rough height until it has been shown once (auto keeps its
   real height after that). js/site.js reads positions only in sections that are near, so it never undoes the skip.
   The home sets its chapters' own heights (story.css). */
main[data-skip]>section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---- Words that light up as you read (scroll-linked; js sets --o on each word) --------------------- */
.words{font:650 clamp(34px,5vw,72px)/1.12 var(--sans);letter-spacing:-.035em}
.words .w{opacity:var(--o,.16);transition:opacity .12s linear}
.words .w.hl{color:var(--accent-ink)}
[data-dark] .words .w.hl,.on-dark .words .w.hl{color:var(--accent-2)}

/* ---- The highlights carousel --------------------------------------------------------------------- */
.hl-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:48px max(24px,calc((100vw - 1180px)/2)) 34px;scroll-padding-inline:max(24px,calc((100vw - 1180px)/2))}
.rail::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:min(82vw,880px);scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;position:relative;background:var(--night);color:#fff;aspect-ratio:16/10.5;box-shadow:0 30px 80px rgba(0,0,0,.12)}
.slide.light{background:var(--mist);color:var(--ink)}
.slide>img,.slide>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .cap{position:relative;z-index:2;padding:30px 34px;font:650 clamp(20px,2vw,28px)/1.2 var(--sans);letter-spacing:-.02em;max-width:560px}
.slide .cap span{display:block;margin-top:6px;font-weight:450;font-size:.72em;letter-spacing:-.005em;opacity:.78}
.slide.shade::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 46%)}
.slide.light.shade::before{background:linear-gradient(180deg,rgba(247,246,243,.96),rgba(247,246,243,0) 46%)}
.slide .fit{object-fit:contain;padding:120px 40px 30px;background:inherit}
.rail-ctl{display:flex;justify-content:center;align-items:center;gap:14px}
.dots{display:flex;gap:8px;padding:12px 16px;border-radius:999px;background:rgba(22,25,28,.06)}
.on-dark .dots{background:rgba(255,255,255,.1)}
.dots i{width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.3;transition:width .35s var(--ease),opacity .35s}
.dots i.on{width:28px;opacity:.9}
.arrow{width:44px;height:44px;border-radius:50%;border:0;background:rgba(22,25,28,.07);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.on-dark .arrow{background:rgba(255,255,255,.12)}
.arrow:hover{background:rgba(22,25,28,.13)}
.arrow svg{width:18px;height:18px}

/* ---- Pinned scenes (scroll-driven; js sets --p 0..1 and .on on the active frame) ------------------ */
.scene{position:relative;height:calc(100vh + var(--n,4) * var(--per,48vh))}
.scene-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center}
.frames{position:relative}
.frames>*{transition:opacity .55s ease,transform .7s var(--ease)}
.frames>*:not(.on){opacity:0}
.frames>.on{opacity:1}
.scene-meter{display:flex;gap:6px}
.scene-meter i{height:3px;flex:1;border-radius:3px;background:currentColor;opacity:.18;transition:opacity .3s}
.scene-meter i.on{opacity:.9}

/* ---- Stats --------------------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:36px 28px}
.stat b{display:block;font:700 clamp(44px,5.6vw,84px)/1 var(--sans);letter-spacing:-.045em}
.stat span{display:block;margin-top:10px;font-size:16px;color:var(--muted);max-width:260px}
.on-dark .stat span{color:var(--on-night-2)}

/* ---- Media frames -------------------------------------------------------------------------------- */
.shot{border-radius:var(--r-md);overflow:hidden;box-shadow:0 40px 100px rgba(10,12,16,.18),0 0 0 1px rgba(10,12,16,.05);background:#fff}
.laptop{position:relative;padding:2.2% 2.2% 0;background:linear-gradient(#24282D,#15181B);border-radius:26px 26px 6px 6px;box-shadow:0 50px 120px rgba(0,0,0,.28)}
.laptop>img,.laptop>video{border-radius:10px 10px 0 0;width:100%}
.laptop::after{content:'';position:absolute;left:-7%;right:-7%;bottom:-18px;height:18px;border-radius:0 0 18px 18px;background:linear-gradient(#CDD2D6,#9EA5AB);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.phone{position:relative;width:min(300px,70vw);aspect-ratio:9/19.5;border-radius:48px;padding:12px;background:linear-gradient(145deg,#2A2E33,#0E1013);box-shadow:0 50px 100px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone>img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:38px}
.paper{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06),0 30px 70px rgba(10,12,16,.22);border-radius:4px;overflow:hidden}

/* ---- Chips and segmented controls ------------------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:0;background:rgba(22,25,28,.06);font:550 15.5px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.chip:hover{background:rgba(22,25,28,.1);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip.static{cursor:default}
.on-dark .chip{background:rgba(255,255,255,.09);color:#D5DADE}
.on-dark .chip:hover{background:rgba(255,255,255,.15);color:#fff}
.on-dark .chip[aria-pressed="true"]{background:#fff;color:#0B0D10}
.seg{display:inline-flex;padding:5px;border-radius:999px;background:rgba(22,25,28,.07);gap:4px}
.on-dark .seg{background:rgba(255,255,255,.1)}
.seg button{white-space:nowrap;border:0;background:transparent;padding:11px 20px;border-radius:999px;font:600 15px/1 var(--sans);cursor:pointer;color:inherit;opacity:.7;transition:background .3s,opacity .3s,color .3s}
.seg button[aria-pressed="true"]{background:#fff;color:#0B0D10;opacity:1;box-shadow:0 4px 14px rgba(0,0,0,.12)}

/* ---- Bento grid ---------------------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--mist);padding:34px;min-height:340px;display:flex;flex-direction:column;gap:14px}
.tile.dark{background:var(--night-2);color:var(--on-night)}
.tile .h-4{max-width:420px}
.tile .small{max-width:420px}
.on-dark .tile{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.on-dark .tile .small{color:var(--on-night-2)}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}

/* ---- The comparison ------------------------------------------------------------------------------ */
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:16px}
.compare th,.compare td{padding:20px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{background:var(--white);font:650 17px/1.25 var(--sans);letter-spacing:-.01em;border-bottom:1px solid var(--line)}
.compare thead th small{display:block;margin-top:4px;font:450 13px/1.3 var(--sans);color:var(--muted)}
.compare th.us,.compare td.us{background:linear-gradient(180deg,rgba(137,207,240,.13),rgba(137,207,240,.13));}
.compare thead th.us{background:#EAF6FC}
.compare tbody th{font-weight:550;color:var(--ink-2);width:24%}
.compare td.us{font-weight:600;color:var(--ink)}
.yes,.no,.meh{display:inline-flex;align-items:flex-start;gap:9px}
.yes::before,.no::before,.meh::before{flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;display:grid;place-items:center;font:700 12px/20px var(--sans);text-align:center}
.yes::before{content:'✓';background:#1F8A5B;color:#fff}
.no::before{content:'✕';background:#E9ECEE;color:#5A6168}
.meh::before{content:'–';background:#F1E6CF;color:#8A6416}
.compare-wrap{overflow-x:auto;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}

/* ---- The try frame ------------------------------------------------------------------------------- */
.try-device{border-radius:24px;overflow:hidden;background:#0B0D10;box-shadow:0 40px 120px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08)}
.try-device .chrome{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:#16191D;color:#8C949B;font-size:13px}
.try-device .chrome i{width:11px;height:11px;border-radius:50%;background:#30353B}
.try-device .chrome span{margin-left:10px}
.try-screen{position:relative;height:min(780px,80vh);background:#F4F2EE}
.try-screen iframe{width:100%;height:100%;border:0}
.try-cover{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:18px;text-align:center;padding:24px;background-size:cover;background-position:center}
.try-cover::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(11,13,16,.55),rgba(11,13,16,.82))}
.try-cover>*{position:relative}
.try-cover p{color:#fff;max-width:440px;font-size:17px}

/* ---- Final call to action ------------------------------------------------------------------------ */
.final{position:relative;overflow:hidden;background:radial-gradient(900px 600px at 50% 110%,var(--glow),transparent 70%),var(--deep);color:var(--on-night)}
.final .price{font:700 clamp(64px,10vw,150px)/.9 var(--sans);letter-spacing:-.05em}
.final .price small{display:block;margin-top:14px;font:500 clamp(18px,1.6vw,22px)/1.3 var(--sans);letter-spacing:0;color:var(--on-night-2)}
.included{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.included div{padding:22px;border-radius:var(--r-md);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.included b{display:block;font-size:17px;color:#fff}
.included span{display:block;margin-top:6px;font-size:14.5px;color:var(--on-night-2);line-height:1.45}
.included [data-fact]{display:inline;margin:0;font:inherit;color:inherit}   /* a count reads on its line, in its title's or words' type (website 1.1, Task 6.3) */
.final .soon-note{margin-top:14px;font-size:15px;color:var(--on-night-2)}
.pay-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:14px;color:var(--on-night-2)}

/* ---- FAQ and footnotes ------------------------------------------------------------------------------ */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:26px 0;font:600 clamp(19px,1.6vw,22px)/1.3 var(--sans);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:300 30px/1 var(--sans);color:var(--muted);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 28px;color:var(--ink-2);max-width:760px}
.notes{font-size:13px;line-height:1.6;color:var(--muted);counter-reset:fn}
.notes li{margin:0 0 10px;padding-left:4px}
.notes a{color:var(--blue-deep)}

/* ---- Phone buy bar, checkout stand-in, prototype notes ------------------------------------------- */
.buybar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;align-items:center;gap:12px;padding:9px 9px 9px 18px;border-radius:999px;background:rgba(18,21,25,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35);transform:translateY(150%);transition:transform .45s var(--ease)}
.buybar.on{transform:none}
.buybar b{font-size:16px}.buybar>div>span{display:block;font-size:12.5px;color:#AEB6BC}
.buybar .btn{--h:44px;margin-left:auto;padding:0 20px;font-size:15.5px}
.proto{display:inline-block;margin-top:14px;padding:7px 12px;border-radius:10px;background:#FFF2D9;color:#6B4600;font:600 12.5px/1.4 var(--sans);box-shadow:inset 0 0 0 1px #F0C978}

/* ---- Responsive ---------------------------------------------------------------------------------- */
@media (max-width:1060px){
  .pbar nav{display:none}
  .pbar .wrap{gap:12px}
  .pbar .btn{margin-left:auto}
  .included{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:17px}
  br.ph{display:inline}
  .wrap,.wide,.narrow{width:calc(100% - 32px)}
  .gh .brand{flex:none}
  .bento{grid-template-columns:1fr}
  .bento>*{grid-column:auto}
  .tile{min-height:0;padding:28px}
  .stats{--cols:2}
  .seg{flex-wrap:wrap;justify-content:center;border-radius:24px}
  .seg button{padding:10px 13px;font-size:14px}
  .compare{min-width:720px;font-size:15px}
  .compare th,.compare td{padding:16px 14px}
  .compare tbody th,.compare thead th:first-child{position:sticky;left:0;z-index:1;background:var(--white);box-shadow:1px 0 0 var(--line)}
  .compare tbody th{width:132px;min-width:132px}
  .compare-wrap::after{content:'Swipe to compare  →';display:block;padding:10px 14px;font-size:13px;color:var(--muted)}
  .rail{padding-inline:16px;scroll-padding-inline:16px;gap:14px}
  .slide{width:86vw;aspect-ratio:4/5}
  .slide .cap{padding:24px}
  .slide .fit{padding:118px 18px 18px}
  .buybar{display:flex}
  body.has-bar{padding-bottom:86px}
  .included{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.rv-zoom,.rv-left,.rv-right,.fade-up{opacity:1!important;transform:none!important}
  .lines>span>span{transform:none!important}
}

/* ---- The thank-you pages (website v1.0, Task 2.4) ------------------------------------------------- */
.ty-hero{padding-block:clamp(84px,11vw,150px) clamp(64px,8vw,110px);text-align:center;background:radial-gradient(120% 90% at 50% 0%,var(--deep-2),var(--deep) 70%)}
.ty-hero .narrow{display:flex;flex-direction:column;align-items:center}
.ty-mark{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--accent-2),var(--accent));box-shadow:0 18px 60px var(--glow),0 0 0 10px rgba(255,255,255,.04);margin-bottom:28px}
.ty-mark svg{width:42px;height:42px}
.ty-hero .lead{margin-top:22px;margin-inline:auto}
.ty-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.ty-step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:28px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(22,25,28,.04),0 18px 44px -28px rgba(22,25,28,.28)}
.ty-n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:700 20px/1 var(--sans);background:var(--deep);color:var(--accent-2)}
.ty-step h2{margin:6px 0 10px}
.ty-step .copy{max-width:none}
.ty-step .copy+.copy{margin-top:10px}
.ty-files{display:grid;gap:10px;margin-top:20px}
.ty-file{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);text-decoration:none;background:var(--mist);transition:border-color .2s,background .2s}
.ty-file:hover{border-color:var(--accent);background:#fff}
.ty-file .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--line)}
.ty-file .ic svg{width:22px;height:22px;color:var(--accent)}
.ty-file b{display:block;font-weight:600;font-size:16px;color:var(--ink)}
.ty-file b + span{color:var(--ink-2)}
.ty-file span{display:block;font-size:14px;color:var(--muted)}
.ty-file [data-size],.ty-file [data-pages]{display:inline;font-size:inherit;color:inherit}
.ty-file .go{font:600 15px/1 var(--sans);color:var(--accent-ink);white-space:nowrap}
.ty-file.main{background:var(--deep);border-color:var(--deep);color:var(--on-night)}
.ty-file.main span{color:var(--on-night-2)}
.ty-file.main b{color:var(--on-night)}
.ty-file.main .ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.ty-file.main .ic svg,.ty-file.main .go{color:var(--accent-2)}
.ty-file.main:hover{background:var(--deep-2)}
/* a paid row before js/files.js gives it this order's link (website 1.2): no "Download" to tap yet; the status line says why */
.ty-file[aria-disabled="true"]{cursor:default}
.ty-file[aria-disabled="true"] .go{visibility:hidden}
.ty-file[aria-disabled="true"]:hover{border-color:var(--line);background:var(--mist)}
.ty-file.main[aria-disabled="true"]:hover{border-color:var(--deep);background:var(--deep)}
.ty-code{display:inline-block;font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:4px 8px;border-radius:8px;background:var(--mist);border:1px solid var(--line)}
.ty-help{margin-top:34px;text-align:center;color:var(--ink-2)}
.ty-help a{color:var(--accent-ink);font-weight:600}
@media (max-width:600px){.ty-step{grid-template-columns:1fr;padding:22px}.ty-n{width:44px;height:44px;font-size:18px}.ty-file{grid-template-columns:40px 1fr}.ty-file .go{grid-column:2;justify-self:start}.ty-file .ic{width:40px;height:40px}}
/* How codes are sent (js/codes.js sets data-codes from the settings; "manual" is the safe default). */
[data-codes="auto"] .when-manual,[data-codes="manual"] .when-auto{display:none}

/* The last line of the questions, and of the home (website v1.0, Task 4.1). */
.faq-close{margin-top:46px;text-align:center}
.faq-close .h-4{font-weight:650}
.faq-close a{color:var(--accent-ink);font-weight:600}
.home-close{padding-top:0}
.home-close .faq-close{margin-top:0}

/* The page for a missing address (website v1.0, Task 4.4). */
.nf{min-height:62vh;display:flex;align-items:center;padding:clamp(64px,10vw,120px) 0}
.nf-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.nf-app{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.nf-app:hover{border-color:var(--accent);transform:translateY(-2px)}
.nf-app img{width:44px;height:44px;border-radius:12px;flex:none}
.nf-app b{display:block;font-weight:600;font-size:17px}
.nf-app span span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.nf-home{margin-top:26px}
@media (max-width:600px){.nf-apps{grid-template-columns:minmax(0,1fr)}}

/* ---- The Apps button and its panel (website 1.1, D3; written into every page by tools/frame.mjs) ------------
   The logo and one Apps button at every width. The button opens one panel under the bar: on a desktop the products in
   group columns, on a phone one column the width of the screen, which scrolls with the page. */
.gh .appsbtn{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 14px 0 12px;border:0;border-radius:999px;background:rgba(22,25,28,.07);color:var(--ink);font:600 15px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;transition:background .25s,color .25s}
.gh .appsbtn:hover{background:rgba(22,25,28,.12)}
.gh .appsbtn:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}
.gh .appsbtn .ab-grid{display:grid;grid-template-columns:repeat(2,5px);gap:3px}
.gh .appsbtn .ab-grid span{width:5px;height:5px;border-radius:1.5px;background:currentColor;opacity:.85}
.gh .appsbtn .chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.gh .appsbtn[aria-expanded="true"] .chev{transform:translateY(2px) rotate(-135deg)}
.gh.dark .appsbtn{background:rgba(255,255,255,.12);color:#fff}
.gh.dark .appsbtn:hover{background:rgba(255,255,255,.2)}
.gh.dark .appsbtn:focus-visible{outline-color:#fff}
.gh:has(.apps-panel:not([hidden])){z-index:80}

.apps-panel{position:absolute;left:0;right:0;top:100%;z-index:70;padding:10px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.apps-panel[hidden]{display:none}
/* The panel is glass (Lanre, 27 October 2026, screenshot 171: "Make it transparent so it look premium and luxury"): the
   page shows through it, blurred, under a milk tint below a light header and smoked pewter below a dark one, with a
   fine light edge. Every word reads at 4.5:1 or better with pure black (milk) or pure white (smoke) behind the glass,
   the worst a page can put there, on a row's hover and the strip too (test/ac/glass.ac.test.mjs); where the browser
   can't blur, the glass is solid. */
.apps-panel .sheet{
  --g-tint:rgba(250,250,248,.78);--g-solid:#FAFAF8;--g-edge:rgba(255,255,255,.66);--g-ring:rgba(8,10,14,.10);--g-shine:rgba(255,255,255,.85);
  --g-ink:#16191C;--g-ink-2:#30363C;--g-muted:#3F454B;--g-num:#474E54;--g-link:#124E74;
  --g-hover:rgba(22,25,28,.06);--g-strip:rgba(22,25,28,.035);--g-line:rgba(22,25,28,.10);--g-pill:rgba(22,25,28,.07)}
.gh.dark .apps-panel .sheet{
  --g-tint:rgba(21,24,27,.80);--g-solid:#15181B;--g-edge:rgba(255,255,255,.14);--g-ring:rgba(0,0,0,.40);--g-shine:rgba(255,255,255,.10);
  --g-ink:#F4F5F6;--g-ink-2:#DDE1E4;--g-muted:#C4C9CE;--g-num:#BCC3C9;--g-link:#9AD3F3;
  --g-hover:rgba(255,255,255,.07);--g-strip:rgba(255,255,255,.04);--g-line:rgba(255,255,255,.10);--g-pill:rgba(255,255,255,.10)}
.apps-panel .sheet{width:min(1180px,100%);margin-inline:auto;background:var(--g-tint);color:var(--g-ink);border:1px solid var(--g-edge);border-radius:26px;-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);box-shadow:0 40px 120px rgba(8,10,14,.30),0 0 0 1px var(--g-ring),inset 0 1px 0 var(--g-shine);overflow:hidden;transform-origin:top center;animation:sheetIn .28s var(--ease-out)}
/* Website 1.2: under a sticky header the panel doesn't move with the page, so a list longer than the screen (ten
   products on an 844 px phone) scrolls inside the sheet; its shadow sits outside its box and stays. */
.apps-panel .sheet{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
@keyframes sheetIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
/* Round 3's four groups in a row (website 1.4, D3); every product, by the shop's six sections, is in the side panel. */
.apps-panel .groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 22px;padding:26px 26px 18px}
.apps-panel .group-col{min-width:0}
.apps-panel .group-col h3{display:flex;align-items:baseline;gap:8px;padding:4px 10px 10px;font:650 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--g-muted)}
.apps-panel .group-col h3 em{font:italic 400 19px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--g-num)}
.apps-panel .prow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border-radius:14px;text-decoration:none;color:var(--g-ink);transition:background .2s}
.apps-panel a.prow:hover,.apps-panel a.prow:focus-visible{background:var(--g-hover)}
.apps-panel a.prow:focus-visible{outline:2px solid var(--g-link);outline-offset:-2px}
.apps-panel .prow[aria-current]{background:var(--g-hover)}
.apps-panel .prow img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px var(--g-line)}
.apps-panel .prow b{display:block;font:650 15.5px/1.2 var(--sans);letter-spacing:-.01em}
.apps-panel .prow small{display:block;margin-top:3px;font:450 13px/1.3 var(--sans);color:var(--g-muted)}
.apps-panel .prow .pr-price{font:600 14px/1 var(--sans);color:var(--g-ink-2);white-space:nowrap}
.apps-panel .prow .pr-price.soon{padding:5px 8px;border-radius:999px;background:var(--g-pill);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-ink-2)}
.apps-panel .strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:16px 36px;border-top:1px solid var(--g-line);background:var(--g-strip);font-size:14px;color:var(--g-muted)}
.apps-panel .strip b{color:var(--g-ink);font-weight:600}
.apps-panel .strip a{color:var(--g-link);font-weight:600;text-decoration:none}
.apps-panel .strip a:hover{text-decoration:underline}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.apps-panel .sheet{background:var(--g-solid)}}
.apps-panel .strip a.showmore{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;background:var(--g-ink);color:var(--g-solid);font:600 14.5px/1 var(--sans);text-decoration:none;transition:transform .25s var(--ease),opacity .25s}
.apps-panel .strip a.showmore:hover{text-decoration:none;opacity:.9}
.apps-panel .strip a.showmore:active{transform:scale(.97)}
.apps-panel .strip a.showmore .sm-n{font-size:18px;line-height:0;transform:translateY(-1px)}

/* Every product: the side panel (website 1.4, D4), written with every page's header. Opened by Show more (and the
   home's "& more") as a dialog by js/site.js; without scripts, as its link's target, "#close" shutting it. */
.everything{display:none;position:fixed;inset:0;z-index:120}
.everything:target,.everything.open{display:block}
html.ev-open{overflow:hidden}
.ev-scrim{position:absolute;inset:0;background:rgba(8,10,14,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:evFade .3s ease}
.ev-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;background:rgba(17,20,23,.88);color:#F2F3F4;-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);box-shadow:-30px 0 90px rgba(0,0,0,.38),inset 1px 0 0 rgba(255,255,255,.09);animation:evIn .42s var(--ease-out);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ev-panel{background:#14171A}}
@keyframes evIn{from{transform:translateX(56px);opacity:0}to{transform:none;opacity:1}}
@keyframes evFade{from{opacity:0}to{opacity:1}}
.ev-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:28px 26px 16px}
.ev-kicker{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#A3ABB1}
.ev-h{margin-top:10px;font:700 32px/1.02 var(--sans);letter-spacing:-.035em}
.ev-x{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;transition:background .2s}
.ev-x:hover{background:rgba(255,255,255,.16)}
.ev-x svg{width:20px;height:20px}
.ev-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 22px}
.ev-list section+section{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.ev-list h3{display:flex;align-items:baseline;gap:10px;margin:0;padding:10px 12px 8px;font:650 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#C9CED2}
.ev-list h3 em{font:italic 400 19px/1 var(--serif);letter-spacing:0;text-transform:none;color:#A3ABB1}
.erow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;color:inherit;text-decoration:none;transition:background .2s}
a.erow:hover,a.erow:focus-visible{background:rgba(255,255,255,.08)}
a.erow:focus-visible{outline:2px solid #9AD3F3;outline-offset:-2px}
.erow[aria-current]{background:rgba(255,255,255,.08)}
.erow img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.erow b{display:block;font:650 16px/1.2 var(--sans);letter-spacing:-.01em}
.erow small{display:block;margin-top:3px;font:450 13.5px/1.3 var(--sans);color:#BCC2C7}
a.erow::after{content:'›';font-size:22px;line-height:1;color:#8E979E;transition:transform .2s}
a.erow:hover::after{transform:translateX(3px)}
.erow em{font:600 10.5px/1 var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#D3D8DC;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.09)}
.erow.soon img{filter:saturate(.8)}
.ev-foot{padding:16px 26px 24px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#BCC2C7}
.ev-foot b{color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){.ev-scrim,.ev-panel{animation:none}}

/* ---- The arrow back to the top (website 1.1; Lanre, 27 October 2026: "Add Up arrow to jump back up as user scroll
   down"). The panel's smoked glass as a round button, written before every page's footer by tools/frame.mjs and
   moved by js/site.js: it shows once the page has scrolled most of a screen, keeps clear of the screen's safe areas,
   rises above the phone's buy bar, parks on the footer's top edge rather than over it, and keeps still when the
   visitor asks for less motion. */
.totop{position:fixed;z-index:50;right:max(clamp(16px,2.4vw,28px),env(safe-area-inset-right,0px));bottom:calc(max(clamp(16px,2.4vw,28px),env(safe-area-inset-bottom,0px)) + var(--lift,0px));
  display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(21,24,27,.80);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);color:#F4F5F6;
  box-shadow:0 14px 40px rgba(8,10,14,.28),inset 0 1px 0 rgba(255,255,255,.10);cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease-out),background .2s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:rgba(36,40,45,.88)}
.totop:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blue-deep),0 14px 40px rgba(8,10,14,.28)}
.totop svg{width:20px;height:20px;transition:transform .25s var(--ease)}
.totop:hover svg{transform:translateY(-2px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.totop{background:#15181B}}
@media (max-width:820px){body.has-bar .totop{bottom:calc(86px + env(safe-area-inset-bottom,0px) + var(--lift,0px))}}
/* on a phone, small and tucked into the corner */
@media (max-width:760px){.totop{width:44px;height:44px;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--lift,0px))}.totop svg{width:18px;height:18px}}

/* ---- The footer in three tiers (website 1.1, §2.14; written into every page by tools/frame.mjs) --------------
   The mark and the help line; the products by need and the house's links; the company. On a faint paper grain, where
   the grey and the link blue are a step darker: 5.5:1 or more at the grain's darkest pixel. */
.pfoot{--muted:#565D64;--blue-deep:#1A5F89;position:relative;overflow:hidden;background-color:#F2F0EB;color:var(--ink-2);border-top:1px solid rgba(22,25,28,.08);isolation:isolate}
.pfoot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pfoot .pf-water{position:absolute;right:-90px;bottom:-110px;width:440px;opacity:.045;pointer-events:none}
.pfoot .wrap{position:relative}
.pf-top{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 40px;padding:64px 0 40px}
.pf-brand img{height:32px;width:auto}
.pf-slogan{margin-top:18px;font:italic 400 clamp(24px,2.4vw,30px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.pf-line{margin-top:10px;max-width:360px;font-size:15px;line-height:1.5;color:var(--muted)}
.pf-help{display:grid;justify-items:end;gap:10px;text-align:right}
.pf-ask{font:600 15px/1.3 var(--sans);color:var(--ink)}
.pf-mail{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font:600 15.5px/1 var(--sans);text-decoration:none;box-shadow:0 10px 26px rgba(22,25,28,.18);transition:background .25s,transform .25s}
.pf-mail:hover{background:#2A3036;transform:translateY(-1px)}
.pf-note{font-size:13.5px;color:var(--muted)}
.pf-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px;padding:38px 0 40px;border-top:1px solid rgba(22,25,28,.1);border-bottom:1px solid rgba(22,25,28,.1)}
.pf-col{min-width:0}
.pf-col h4{display:flex;align-items:baseline;gap:9px;margin:0 0 18px;font:700 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pf-col h4 em{font:italic 400 18px/1 var(--serif);letter-spacing:0;color:var(--pewter)}
.pf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.pf-col a,.pf-col li>span:first-child{display:flex;align-items:center;gap:11px;color:var(--ink-2);font-size:15px;line-height:1.25;text-decoration:none}
.pf-col a:hover{color:var(--ink)}
.pf-col a[aria-current]{color:var(--ink);font-weight:600}
.pf-col img{flex:none;width:24px;height:24px;border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pf-sub{display:grid;justify-items:start;gap:7px;margin:8px 0 0 35px}
.pf-sub small{padding:3px 7px;border-radius:999px;background:rgba(22,25,28,.07);font:650 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-links{display:flex;gap:14px}
.pf-col .pf-sub a{font-size:13.5px;color:var(--muted)}
.pf-col .pf-sub a:hover,.pf-house a:hover{color:var(--ink);text-decoration:underline}
.pf-base{padding:24px 0 36px}
.pf-base p{max-width:860px;font-size:12.5px;line-height:1.6;color:var(--muted)}

@media (max-width:1060px){
  .apps-panel .groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .apps-panel{padding:0}
  .apps-panel .sheet{border-radius:0 0 22px 22px;max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px)}
  .apps-panel .groups{grid-template-columns:minmax(0,1fr);padding:12px 12px 8px;gap:4px}
  .apps-panel .group-col h3{padding:12px 10px 8px}
  .apps-panel .strip{padding:14px 22px 18px}
  .pf-top{flex-direction:column;align-items:flex-start;padding:48px 0 30px}
  .pf-help{justify-items:start;text-align:left}
  .pf-apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;padding:30px 0 32px}
  .pfoot .pf-water{width:300px;right:-80px;bottom:-80px}
}
@media (max-width:360px){
  .pf-apps{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .apps-panel .sheet{animation:none}
  .totop,.totop svg{transition:none}
  .totop,.totop:hover svg{transform:none}
}

/* The small print: the two licences, privacy, and terms. Calm, readable, and nothing hidden. */

.legal-page .gh{position:sticky;top:0}
html:has(body.legal-page){scroll-padding-top:80px}
.lg-head{padding:clamp(56px,8vw,104px) 0 clamp(36px,5vw,56px);background:radial-gradient(900px 420px at 80% -20%,rgba(137,207,240,.16),transparent 65%),var(--mist);border-bottom:1px solid var(--line)}
.lg-head .eyebrow{color:var(--blue-deep)}
.lg-head h1{margin-top:16px;font:700 clamp(40px,6vw,76px)/1 var(--sans);letter-spacing:-.04em}
.lg-head .meta{margin-top:16px;color:var(--muted);font-size:15px}
.lg-head .draft{margin-top:24px;max-width:860px;padding:16px 18px;border-radius:16px;background:#FFF2D9;box-shadow:inset 0 0 0 1px #F0C978;color:#5A3A00;font-size:14.5px;line-height:1.55}

.lg{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(30px,5vw,80px);padding:clamp(40px,6vw,72px) 0 clamp(80px,10vw,120px)}
.lg-toc{position:sticky;top:76px;align-self:start;font-size:14.5px}
.lg-toc p{font:650 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lg-toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:t}
.lg-toc a{display:block;padding:7px 12px;border-radius:10px;text-decoration:none;color:var(--ink-2)}
.lg-toc a:hover{background:rgba(22,25,28,.05);color:var(--ink)}
.lg-toc a.on{background:rgba(137,207,240,.2);color:var(--ink);font-weight:600}
.lg-toc details{display:none}

.lg-body{max-width:740px}
.lg-body h2{margin-top:56px;font:700 clamp(24px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.02em;scroll-margin-top:84px}
.lg-body h2:first-child{margin-top:0}
.lg-body h3{margin-top:28px;font:650 19px/1.3 var(--sans)}
.lg-body p,.lg-body li{color:var(--ink-2);font-size:17px;line-height:1.65}
.lg-body p{margin-top:14px}
.lg-body ul{margin:14px 0 0;padding-left:22px;display:grid;gap:8px}
.lg-body a{color:var(--blue-deep)}
.lg-body table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15.5px}
.lg-body th,.lg-body td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lg-body thead th{font-weight:650;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.lg-body td{color:var(--ink-2)}
.verify{background:#FFF2D9;color:#6B4600;border-radius:6px;padding:1px 6px;font-size:.88em;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* "In short", and the two lists that matter most. */
.inshort{padding:28px 30px;border-radius:var(--r-md);background:var(--night);color:var(--on-night)}
.inshort h2{margin-top:0!important;font-size:15px!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--blue)}
.inshort p,.inshort li{color:#DDE2E6!important;font-size:19px!important;line-height:1.55!important}
.inshort p{margin-top:12px}
.inshort ul{padding-left:20px;margin-top:12px}
.maynot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.maynot>div{padding:26px 26px 28px;border-radius:var(--r-md);background:var(--mist);box-shadow:inset 0 0 0 1px var(--line)}
.maynot h3{margin:0!important;display:flex;align-items:center;gap:10px;font:700 20px/1.2 var(--sans)!important}
.maynot h3::before{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px/28px var(--sans);text-align:center}
.maynot .may h3::before{content:'✓';background:#1F8A5B;color:#fff}
.maynot .not{background:#FBF1EF;box-shadow:inset 0 0 0 1px rgba(168,52,30,.14)}
.maynot .not h3::before{content:'✕';background:#A8341E;color:#fff}
.maynot ul{list-style:none;padding:0!important;margin-top:16px!important;gap:12px!important}
.maynot li{position:relative;padding-left:20px;font-size:16px!important;line-height:1.5!important}
.maynot li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:#1F8A5B}
.maynot .not li::before{background:#A8341E}

/* The licenses page (website 1.1, written by tools/frame.mjs): one column, every product's license a row. */
.lg-one{padding:clamp(36px,5vw,56px) 0 clamp(80px,10vw,120px)}
.lg-body .lic-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lic-list a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-md);background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink)}
.lic-list a:hover,.lic-list a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--blue-deep)}
.lic-list img{flex:none;width:40px;height:40px}
.lic-list a>span:not(.lic-go){flex:1;min-width:0;display:grid;gap:2px}
.lic-list b{font:650 17px/1.3 var(--sans);color:var(--ink)}
.lic-list small{font-size:14.5px;line-height:1.4;color:var(--muted)}
.lic-go{flex:none;font-size:14.5px;font-weight:600;color:var(--blue-deep)}
@media (max-width:520px){.lic-go{display:none}}

@media (max-width:900px){
  .lg{grid-template-columns:minmax(0,1fr);gap:0;padding-top:20px}
  .lg-toc{position:static}
  .lg-toc>p,.lg-toc>ol{display:none}
  .lg-toc details{display:block;border-radius:14px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:34px}
  .lg-toc summary{cursor:pointer;padding:14px 16px;font-weight:600;color:var(--ink)}
  .lg-toc details ol{list-style:none;padding:0 8px 10px;margin:0;display:grid}
  .maynot{grid-template-columns:1fr}
  .inshort{padding:24px 22px}
  .inshort p,.inshort li{font-size:17.5px!important}
}

/* Glassmason's page: the indigo night of its listing photos, the mark's lavender and a glass cyan. Each block below is
   one section, in page order. Website 1.1, Task 6.3 (D9: Tableherald's page, made Glassmason's). The accent for text
   on dark (#8F8CFF, lavender) is 6.6:1 on the night (#0B0F26) and 5.7:1 on its second (#171D3F); the cyan (#7FE3F2)
   12.8:1. On light the ink indigo (#4B3FD6): 7.0:1 on white, 6.3:1 on paper, 6.2:1 on mist. */
.gm{--accent:#8F8CFF;--accent-2:#7FE3F2;--deep:#0B0F26;--deep-2:#171D3F;--glow:rgba(106,92,255,.30);--accent-ink:#4B3FD6}

/* 1. Hero: the warning before any button (AC6.3a), then the builder with a finished site on a phone beside it. */
.gm-hero{padding-bottom:0}
.gm-hero h1{font-size:clamp(50px,7.4vw,112px)}
.gm-hero h1 em,.gm h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.gm-hero .lead{margin-inline:auto}
.gm-warn{display:flex;gap:14px;align-items:flex-start;max-width:720px;margin:28px auto 0;padding:16px 20px;border-radius:18px;text-align:left;
  background:rgba(127,227,242,.08);box-shadow:inset 0 0 0 1px rgba(127,227,242,.34);color:var(--on-night);font:500 16.5px/1.5 var(--sans)}
.gm-warn svg{flex:0 0 22px;margin-top:2px;color:var(--accent-2)}
.gm-warn b{color:#fff}
.gm-warn span span{display:block;margin-top:4px;color:var(--on-night-2);font-weight:450}
.gm-warn i{font-style:italic}
.stage{position:relative;max-width:1080px;margin:clamp(44px,6vw,76px) auto 0;padding:0 clamp(0px,4vw,60px)}
.stage .lap{border-radius:16px 16px 0 0;overflow:hidden;background:#0E1230;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 60px 140px rgba(0,0,0,.6);transform:translateY(40px);opacity:.001;transition:transform 1.3s var(--ease-out) .2s,opacity 1s ease .2s}
.stage .lap .bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:#161B3D}
.stage .lap .bar i{width:10px;height:10px;border-radius:50%;background:#2E3563}
.stage .lap img{display:block;width:100%}
.stage .ph{position:absolute;right:0;bottom:-6%;width:clamp(120px,21%,230px);aspect-ratio:560/1212;border-radius:clamp(18px,2.6vw,30px);overflow:hidden;
  background:#000;box-shadow:0 0 0 clamp(4px,.6vw,7px) #1A1F3F,0 0 0 clamp(5px,.7vw,8px) rgba(255,255,255,.16),0 40px 90px rgba(0,0,0,.65);transform:translateY(80px) rotate(4deg);opacity:.001;transition:transform 1.4s var(--ease-out) .45s,opacity 1s ease .45s}
.stage .ph img{display:block;width:100%;height:100%;object-fit:cover}
.ready .stage .lap{transform:none;opacity:1}
.ready .stage .ph{transform:rotate(3deg);opacity:1}

/* 2. Highlights: six finished websites. */
.slide.site{background:#E9ECF4}

/* 4, 7, 9 and 10: words beside a screen. The screens: the real app in a frame. */
.side{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center}
.side.flip{grid-template-columns:1.1fr .9fr}
.side.flip>:first-child{order:2}
.side>*{min-width:0}
.side .h-1{font-size:clamp(40px,4.6vw,66px)}
.screen{margin:56px auto 0;max-width:1100px;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 60px 140px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.screen .bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:#161B3D}
.screen .bar i{width:10px;height:10px;border-radius:50%;background:#2E3563}
.screen img{width:100%;display:block}
.on-paper .screen,.sec:not(.on-dark) .screen{box-shadow:0 50px 120px rgba(11,15,38,.2),0 0 0 1px rgba(11,15,38,.06)}
.side .screen{margin-top:0}
.screen.tall{max-width:440px}
.screen.tall img{max-height:760px;object-fit:cover;object-position:top}

/* 4. The nine steps, as a numbered row. */
.steps{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none;counter-reset:st}
.steps li{counter-increment:st;display:flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.steps li::before{content:counter(st);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-ink);color:#fff;font:700 12px/1 var(--sans)}

/* 5. Templates, then the industries as chips. 8 and 10 share the chips. */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:40px auto 0;padding:0;list-style:none}
.chips li{padding:9px 16px;border-radius:999px;background:#fff;color:var(--ink);font:600 15px/1.2 var(--sans);box-shadow:0 1px 0 rgba(11,15,38,.06),0 10px 24px rgba(11,15,38,.07)}
.on-dark .chips li{background:rgba(255,255,255,.07);color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* 6. Sections: three of them as a site shows them. */
.gm-sections{background:radial-gradient(900px 700px at 50% 30%,rgba(106,92,255,.16),transparent 70%),var(--deep);color:var(--on-night)}
.row{--g:clamp(12px,1.6vw,20px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:28px var(--g);margin-top:56px}
.row figure{margin:0;flex:0 0 calc((100% - (var(--cols,3) - 1) * var(--g)) / var(--cols,3));min-width:0}
.row img{width:100%;display:block;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.row figcaption{margin-top:12px;font:600 15px/1.3 var(--sans);color:var(--on-night-2);text-align:center}

/* 8. On a phone: the same three sites, each in a phone. */
.phones{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);margin-top:56px}
.phones figure{margin:0;flex:0 1 250px;min-width:0}
.phones .ph{aspect-ratio:560/1212;border-radius:30px;overflow:hidden;background:#000;box-shadow:0 0 0 7px #1A1F3F,0 0 0 8px rgba(11,15,38,.2),0 40px 80px rgba(11,15,38,.25)}
.phones .ph img{display:block;width:100%;height:100%;object-fit:cover}
.phones figcaption{margin-top:20px;font:600 15px/1.3 var(--sans);color:var(--ink-2);text-align:center}

/* 11. Make it, download it, put it online: three steps, then the warning in its own words. */
.gm-online{background:radial-gradient(1000px 700px at 50% 0%,rgba(106,92,255,.24),transparent 70%),radial-gradient(800px 600px at 50% 100%,rgba(127,227,242,.10),transparent 70%),var(--deep);color:var(--on-night)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:56px auto 0;padding:0;list-style:none;counter-reset:tr;text-align:left}
.trio li{counter-increment:tr;position:relative;padding:28px 26px;border-radius:var(--r-lg);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.trio li::before{content:counter(tr);display:block;font:700 44px/1 var(--sans);letter-spacing:-.04em;color:var(--accent-2)}
.trio b{display:block;margin-top:14px;font:700 22px/1.15 var(--sans);letter-spacing:-.02em;color:var(--on-night)}
.trio span{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:var(--on-night-2)}
.gm-online .gm-warn{margin-top:34px}

/* 12. The companion book: what it covers, chapter by chapter. */
.book{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center}
.book>*{min-width:0}
.book .h-1{font-size:clamp(40px,4.6vw,66px)}
.contents{margin:0;padding:clamp(26px,3.4vw,44px);border-radius:var(--r-lg);background:#fff;box-shadow:0 50px 120px rgba(11,15,38,.16),0 0 0 1px rgba(11,15,38,.06)}
.contents .bk{font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.contents .bt{margin-top:10px;font:400 clamp(28px,3vw,38px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.contents .bs{margin-top:6px;font:italic 400 17px/1.3 var(--serif);color:var(--ink-2)}
.contents ol{margin:24px 0 0;padding:0;list-style:none;counter-reset:ch;columns:2;column-gap:28px}
.contents li{counter-increment:ch;break-inside:avoid;display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font:500 15px/1.35 var(--sans);color:var(--ink)}
.contents li::before{content:counter(ch,decimal-leading-zero);font:600 13px/1.6 var(--sans);color:var(--accent-ink)}

/* 13. Privacy. */
.gm-privacy{background:var(--deep);color:var(--on-night)}
.gm-privacy .stats{--cols:3;margin-top:70px;text-align:center}
.gm-privacy .stats .stat span{margin-inline:auto}
.gm-privacy .stat b{font-size:clamp(34px,4.2vw,60px);letter-spacing:-.035em}

@media (max-width:900px){
  .side,.side.flip,.book,.trio{grid-template-columns:1fr}
  .side.flip>:first-child{order:0}
  .contents ol{columns:1}
}
@media (max-width:600px){
  .gm-warn{font-size:15.5px;padding:14px 16px}
  .stage{padding:0}
  .stage .ph{right:-4px;width:30%;border-radius:16px}
  .row{--cols:1}
  .phones{gap:10px}
  .phones .ph{border-radius:18px;box-shadow:0 0 0 4px #1A1F3F,0 0 0 5px rgba(11,15,38,.2),0 24px 50px rgba(11,15,38,.22)}
  .phones figcaption{font-size:13px}
  .gm-privacy .stats{--cols:1}
}