/* 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}
}

/* Pewterham: the editions block (website 1.1, D5; Task 4.3), for a product sold in editions, on its own page after
   its opening: a card per edition (its cover, who it is for, its price and Buy, what it holds), then a table that
   compares them, a column per edition, then the notes. As Lanre approved it at Task 0 (round 2, 27 October 2026),
   made a component: the three tiers (.ed-card, .std, .ult) take their colors from variables, pewter by default and a
   product's own under its theme class (Yearbinder's three greens, approved for its START HERE on 25 October 2026).
   Every count in it is a data-fact and every price a data-price (the build holds both). */

.editions{--ed-mark:#2E3338;--ed-top:#16191C;--ed-col:rgba(22,25,28,.04);background:var(--paper)}
.editions .head{text-align:center;display:grid;gap:18px;justify-items:center}
.editions .head .h-1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}

/* The cards. The cover sits half above its card, so the row starts lower than the heading's gap. */
.ed-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(110px,12vw,150px);align-items:stretch}
.ed-card{--from:#F1F2F3;--to:#DADFE3;--ink-c:#16191C;--muted-c:#3D444B;--pill:#2E3338;--pill-ink:#fff;--tick:#2E3338;--glow-1:rgba(255,255,255,.55);--glow-2:transparent;
  position:relative;display:flex;flex-direction:column;border-radius:30px;padding:150px 28px 30px;color:var(--ink-c);
  background:radial-gradient(500px 300px at 50% 0%,var(--glow-1),transparent 70%),radial-gradient(400px 260px at 80% 100%,var(--glow-2),transparent 70%),linear-gradient(170deg,var(--from),var(--to))}
.ed-card.std{--from:#4A5259;--to:#2A3035;--ink-c:#fff;--muted-c:#E1E5E8;--pill:#F1F2F3;--pill-ink:#2A3035;--tick:rgba(255,255,255,.16);--glow-1:rgba(255,255,255,.12)}
.ed-card.ult{--from:#1A1E22;--to:#07090B;--ink-c:#fff;--muted-c:#D5DADE;--pill:#E8D3A0;--pill-ink:#1D1606;--tick:rgba(255,255,255,.16);--glow-1:rgba(255,255,255,.14);--glow-2:rgba(232,211,160,.12)}
.ed-card .cover{position:absolute;left:50%;top:-86px;width:150px;aspect-ratio:720/961;margin-left:-75px;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.18),0 28px 60px rgba(0,0,0,.34);transform:rotate(-3deg)}
.ed-card.std .cover{transform:rotate(0deg)}
.ed-card.ult .cover{transform:rotate(3deg)}
.ed-card .cover img{width:100%;height:100%;object-fit:cover}
.ed-card .tag{align-self:center;padding:6px 12px;border-radius:999px;background:var(--pill);color:var(--pill-ink);font:700 11.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ed-card h3{margin-top:16px;text-align:center;font:700 34px/1 var(--sans);letter-spacing:-.035em}
.ed-card .for{margin-top:10px;text-align:center;font-size:16.5px;line-height:1.45;color:var(--muted-c);min-height:3em}
.ed-card .ed-price{margin-top:22px;text-align:center;font:700 52px/1 var(--sans);letter-spacing:-.045em}
.ed-card .ed-price small{display:block;margin-top:8px;font:500 14px/1 var(--sans);letter-spacing:0;color:var(--muted-c)}
.ed-card .btn{margin-top:22px;width:100%}
.ed-card.ult .btn-buy{background:var(--pill);color:var(--pill-ink);box-shadow:0 12px 34px color-mix(in srgb,var(--pill) 25%,transparent)}
.ed-card ul{list-style:none;padding:22px 0 0;margin:24px 0 0;border-top:1px solid color-mix(in srgb,var(--ink-c) 16%,transparent);display:grid;gap:12px}
.ed-card li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.45}
.ed-card li::before{content:'';width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--tick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ed-card li b{font-weight:650}

/* The table: a real <table>, its own box scrolling sideways if it must (the page never does). A "no" is a dash with
   "No" for a screen reader, in the page's grey (4.5:1 or better); a "yes" a tick with "Yes". */
.ed-compare{margin-top:clamp(70px,9vw,110px)}
.ed-compare h3{text-align:center;font:700 clamp(28px,3vw,38px)/1.1 var(--sans);letter-spacing:-.03em}
.ed-compare .tablebox{margin-top:30px;overflow-x:auto;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ed-compare .tablebox:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px}
.ed-compare table{width:100%;min-width:640px;border-collapse:collapse;font-size:15.5px}
.ed-compare th,.ed-compare td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center}
.ed-compare thead th{background:#fff;font:700 15px/1.2 var(--sans);vertical-align:bottom}
.ed-compare thead th small{display:block;margin-top:4px;font:550 13px/1 var(--sans);color:var(--muted)}
.ed-compare thead th.ult{color:var(--ed-top)}
.ed-compare tbody th{text-align:left;font-weight:500;color:var(--ink-2)}
.ed-compare tr.sub th{padding-top:26px;background:#FBFAF8;font:650 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ed-compare td.ck::before{content:'';display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--ed-mark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;vertical-align:middle}
.ed-compare td.nx{color:var(--muted)}
.ed-compare td b{font-weight:650}
.ed-compare tfoot td{padding:18px}
.ed-compare tfoot .btn{--h:42px;padding:0 18px;font-size:15px;box-shadow:none}
.ed-compare .col-ult{background:var(--ed-col)}
.ed-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.ed-notes p{padding:20px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:15px;line-height:1.55;color:var(--ink-2)}
.ed-notes b{color:var(--ink)}

/* Yearbinder's three greens: Lite a pale green with dark ink, Standard a deep green, Ultimate the darkest with a gold
   pill (Lanre's "Approve the three shades (Recommended)", 25 October 2026). */
.yb .editions{--ed-mark:#1F5247;--ed-top:#0D3A30;--ed-col:rgba(13,58,48,.045)}
.yb .ed-card{--from:#E9F6F0;--to:#C4E5D8;--ink-c:#0F2E27;--muted-c:#22433B;--pill:#1F5247;--pill-ink:#fff;--tick:#1F5247}
.yb .ed-card.std{--from:#226653;--to:#123B30;--ink-c:#fff;--muted-c:#D9ECE6;--pill:#ECF8F2;--pill-ink:#123B30;--tick:rgba(255,255,255,.16);--glow-1:rgba(143,211,193,.18)}
.yb .ed-card.ult{--from:#0D3A30;--to:#03100C;--ink-c:#fff;--muted-c:#D6E7E1;--pill:#F2DCA0;--pill-ink:#1D1606;--tick:rgba(255,255,255,.16);--glow-1:rgba(46,160,130,.42);--glow-2:rgba(242,220,160,.12)}

@media (max-width:860px){
  .ed-cards{grid-template-columns:1fr;gap:120px;margin-top:120px;max-width:480px;margin-inline:auto}
  .ed-notes{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ed-card{padding:136px 22px 26px}
  .ed-card h3{font-size:30px}
  .ed-card .ed-price{font-size:46px}
  .ed-compare table{min-width:0;font-size:14px}
  .ed-compare th,.ed-compare td{padding:12px 6px}
  .ed-compare tbody th{width:auto;padding-left:14px;font-size:14px;line-height:1.35}
  .ed-compare thead th{font-size:13.5px}
  .ed-compare thead th small{font-size:12px}
  .ed-compare tr.sub th{padding:18px 14px 10px}
  .ed-compare td.ck::before{width:18px;height:18px;background-size:18px}
  .ed-compare tfoot td{padding:12px 4px}
  .ed-compare tfoot .btn{--h:36px;padding:0 10px;font-size:13px}
}

/* The interview books' page: Vitaesmith's orange (the page takes the .vs tokens: the books are Vitaesmith's, their
   covers its orange), with the editions block in the books' own warm tints. Each block below is one section, in page
   order. Website 1.2, Task 0 (D9: Yearbinder's page, made the books'). Contrast on light: the ink orange (#9A5B00)
   5.4:1 on white; on the cards the ink (#2A1704) 13:1 and its second (#5A3A12) 7.7:1 on the deepest tint (#F6DDB4). */

/* 1. Hero: the three covers, fanned. */
.ib-hero{padding-bottom:clamp(40px,6vw,80px)}
.ib-hero h1{font-size:clamp(40px,6.6vw,100px)}
.ib-hero h1 em,.ib h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.ib-hero .lead{margin-inline:auto}
.ib-hero .fine .link{color:inherit}
.ib-stage{position:relative;height:clamp(240px,36vw,460px);max-width:820px;margin:clamp(44px,6vw,72px) auto 0}
.ib-stage img{position:absolute;bottom:0;left:50%;width:clamp(150px,22vw,280px);aspect-ratio:900/1165;object-fit:cover;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.3),0 40px 90px rgba(0,0,0,.55);opacity:.001;transition:transform 1.3s var(--ease-out),opacity 1s ease}
.ib-stage .c1{transform:translate(-128%,40px) rotate(-9deg);transition-delay:.15s}
.ib-stage .c2{transform:translate(-50%,40px);z-index:1;transition-delay:.3s}
.ib-stage .c3{transform:translate(28%,40px) rotate(9deg);transition-delay:.45s}
.ready .ib-stage img{opacity:1}
.ready .ib-stage .c1{transform:translate(-128%,0) rotate(-7deg)}
.ready .ib-stage .c2{transform:translate(-50%,-14px)}
.ready .ib-stage .c3{transform:translate(28%,0) rotate(7deg)}

/* 2. Inside: real pages, US Letter. */
.slide.pg{width:min(68vw,360px);aspect-ratio:auto;background:#fff;color:var(--ink);box-shadow:0 30px 70px rgba(36,21,10,.16),0 0 0 1px rgba(36,21,10,.06)}
.slide.pg>img{position:relative;inset:auto;height:auto;aspect-ratio:900/1165;object-fit:cover;display:block}
.slide.pg .cap{padding:18px 22px 22px;font-size:19px}
.slide.pg .cap span{font-size:.78em}
.slide.pg .ed{display:inline-block;margin-right:8px;padding:3px 9px;border-radius:999px;background:var(--mist);color:var(--accent-ink);font:700 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;vertical-align:3px}

/* 4. The three books. */
.ib-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,48px);margin-top:clamp(48px,6vw,80px)}
.ib-book{display:flex;flex-direction:column}
.ib-book .cover{aspect-ratio:900/1165;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08),0 34px 70px rgba(36,21,10,.22)}
.ib-book .cover img{display:block;width:100%;height:100%;object-fit:cover}
.ib-book .k{margin-top:24px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.ib-book .h-4{margin-top:8px}
.ib-book .pp{margin-top:6px;font-size:14.5px;color:var(--muted)}
.ib-book p.d{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.ib-book .ch{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ib-book .ch summary{cursor:pointer;font:600 15px/1.3 var(--sans);color:var(--accent-ink)}
.ib-book .ch ol{margin:10px 0 0;padding-left:22px;display:grid;gap:4px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.ib-book .btn{margin-top:auto;align-self:flex-start;--h:44px;padding:0 20px;font-size:15px;color:var(--accent-ink)}
.ib-book .ch+.btn,.ib-book p.d+.btn{margin-top:20px}

/* A heading's second line: its own line, wrapping like any words (a no-wrap phrase pushed the column past a phone). */
.ib-line{display:block}

/* 5. Book III: the shape of an answer. */
.ib-anatomy{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center}
.ib-anatomy>*{min-width:0}
.ib-anatomy .paper{width:min(100%,440px);margin-inline:auto;aspect-ratio:900/1165;border-radius:4px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08),0 40px 90px rgba(36,21,10,.2)}
.ib-anatomy .paper img{display:block;width:100%;height:100%;object-fit:cover}
.ib-parts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ib-parts li{position:relative;padding-left:30px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.ib-parts li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.ib-parts b{color:var(--ink)}
.ib-lines{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ib-lines li{padding:7px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font:550 14px/1.2 var(--sans);color:var(--ink-2)}

/* 6. Two ways to read: the PDF either side of the reading edition. */
.ib-read{display:grid;grid-template-columns:1fr 2.1fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:center;margin-top:clamp(44px,6vw,72px)}
.ib-read>*{min-width:0}
.ib-way h3{color:#fff}
.ib-way p,.ib-way li{margin-top:12px;font-size:16.5px;line-height:1.55;color:var(--on-night-2)}
.ib-way ul{margin:6px 0 0;padding-left:20px}
.ib-way li{margin-top:4px}
.ib-way .small{font-size:14px}
.ib-shot{border-radius:14px;overflow:hidden;background:#1d130a;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px rgba(0,0,0,.6)}
.ib-shot .chrome{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:#2a1b0e;font:500 12px/1 var(--sans);color:rgba(255,255,255,.6)}
.ib-shot .chrome i{width:10px;height:10px;border-radius:50%;background:#4a3420}
.ib-shot .chrome span{margin-left:10px}
.ib-shot img{display:block;width:100%}

/* 8. Choose: the Collection across the top, then each book. The books' warm tints on the editions block. */
.ib .editions{--ed-mark:#9A5B00;--ed-top:#2A1704;--ed-col:rgba(154,91,0,.05)}
.ib .ed-card{--from:#FFF6E8;--to:#F6DDB4;--ink-c:#2A1704;--muted-c:#5A3A12;--pill:#9A5B00;--pill-ink:#fff;--tick:#9A5B00}
.ib .ed-card .cover{aspect-ratio:900/1165}
.ib .ed-card .for{min-height:0}
.ed-card.all{--from:#3A230F;--to:#120A04;--ink-c:#fff;--muted-c:#F1E2CC;--pill:#FFD98A;--pill-ink:#2A1704;--tick:rgba(255,255,255,.16);--glow-1:rgba(232,149,28,.34);--glow-2:rgba(255,217,138,.10);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,60px);margin-top:clamp(44px,6vw,64px);padding:clamp(30px,4vw,54px) clamp(24px,4vw,60px)}
.ed-card.all .fan{position:relative;height:clamp(200px,24vw,300px)}
.ed-card.all .fan img{position:absolute;bottom:0;left:50%;width:44%;aspect-ratio:900/1165;object-fit:cover;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.3),0 30px 70px rgba(0,0,0,.5)}
.ed-card.all .fan img:nth-child(1){transform:translateX(-112%) rotate(-7deg)}
.ed-card.all .fan img:nth-child(2){transform:translateX(-50%) translateY(-10px);z-index:1}
.ed-card.all .fan img:nth-child(3){transform:translateX(12%) rotate(7deg)}
.ed-card.all .body{display:flex;flex-direction:column;align-items:flex-start}
.ed-card.all .tag{align-self:flex-start}
.ed-card.all h3{text-align:left;font-size:clamp(30px,3.4vw,42px)}
.ed-card.all .for,.ed-card.all .ed-price{text-align:left}
.ed-card.all .btn-buy{background:var(--pill);color:var(--pill-ink);width:auto;padding:0 30px}
.ib .ed-cards{margin-top:clamp(130px,13vw,160px)}

@media (max-width:860px){
  .ib-books{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:56px}
  .ib-book .cover{width:min(100%,260px)}
  .ib-anatomy{grid-template-columns:1fr}
  .ib-read{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .ib-shot{order:-1}
  .ed-card.all{grid-template-columns:1fr;text-align:center}
  .ed-card.all .body{align-items:center}
  .ed-card.all .tag{align-self:center}
  .ed-card.all h3,.ed-card.all .for,.ed-card.all .ed-price{text-align:center}
  .ed-card.all .btn-buy{width:100%}
}
@media (max-width:520px){
  .ib-stage .c1{transform:translate(-118%,40px) rotate(-9deg)}
  .ready .ib-stage .c1{transform:translate(-118%,0) rotate(-7deg)}
  .ready .ib-stage .c3{transform:translate(18%,0) rotate(7deg)}
  .ed-card.all .fan{height:190px}
}
@media (prefers-reduced-motion:reduce){
  .ib-stage img{transition:none;opacity:1}
  .ib-stage .c1{transform:translate(-128%,0) rotate(-7deg)}
  .ib-stage .c2{transform:translate(-50%,-14px)}
  .ib-stage .c3{transform:translate(28%,0) rotate(7deg)}
}
@media (prefers-reduced-motion:reduce) and (max-width:520px){
  .ib-stage .c1{transform:translate(-118%,0) rotate(-7deg)}
  .ib-stage .c3{transform:translate(18%,0) rotate(7deg)}
}