/* Figbox, Direction A "Indicator" (owner-approved 18 Oct 2026).
   Violet from the alkaline end of universal indicator, lime from its middle. Lime is the one thing to press.
   Headlines, prices and labels in Martian Mono (like the figures' own labels); reading text in Instrument Sans.
   Both fonts are stored with the site (fonts/, SIL Open Font Licence). */
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#f6f4ff;--card:#ffffff;--ink:#16132b;--text:#3b3852;--muted:#5c5873;--line:#dcd8ec;
  --accent:#4130b8;--accent-ink:#ffffff;--accent-soft:#ebe8ff;--accent-deep:#2e2385;
  --lime:#c4ef3a;--on-lime:#16132b;--band:#130e36;--band-2:#1f1757;--band-text:#d3ccff;--band-line:rgba(255,255,255,.14);--glow:rgba(86,64,214,.55);
  --warn:#8a5a00;--warn-soft:#fff3d6;--danger:#b3261e;
  --ph1:#e3242b;--ph2:#ee5a24;--ph3:#f58a1f;--ph4:#f9b318;--ph5:#f6d81c;--ph6:#c4d82a;--ph7:#6fbf45;--ph8:#2fa64e;--ph9:#1a9b8a;--ph10:#2577b9;--ph11:#344fa6;--ph12:#4a3d96;--ph13:#5b2f8a;--ph14:#4a1f6b;
  --physics:#2577b9;--chemistry:#d1371f;--biology:#24813f;--maths:#5b2f8a;
  --radius:18px;--radius-s:12px;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:max(16px,calc(50% - 580px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0e0b26;--card:#19143d;--ink:#f6f4ff;--text:#d3ccff;--muted:#a9a1dc;--line:#2e2660;--accent:#b3a8ff;--accent-ink:#130e36;--accent-soft:#251d5c;--accent-deep:#d3ccff;--band:#08061a;--band-2:#1a1446;--warn:#e8bb5e;--warn-soft:#2e2408;--danger:#ff8a80;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0e0b26;--card:#19143d;--ink:#f6f4ff;--text:#d3ccff;--muted:#a9a1dc;--line:#2e2660;--accent:#b3a8ff;--accent-ink:#130e36;--accent-soft:#251d5c;--accent-deep:#d3ccff;--band:#08061a;--band-2:#1a1446;--warn:#e8bb5e;--warn-soft:#2e2408;--danger:#ff8a80;color-scheme:dark}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(65,48,184,.15)}
.skip{position:absolute;left:12px;top:-60px;z-index:40;padding:12px 16px;border-radius:12px;background:var(--lime);color:var(--on-lime);font-weight:600;text-decoration:none}.skip:focus{top:12px}
body{margin:0;background:var(--paper);color:var(--text);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:3px}
img{max-width:100%}
h1,h2,h3{color:var(--ink);margin:0 0 .5em;text-wrap:balance}
h1,h2{font-family:var(--mono);font-weight:700;letter-spacing:-.045em;line-height:1.04}
h1{font-size:clamp(34px,5.2vw,68px)}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(27px,3.4vw,44px)}
h3{font:600 19px/1.3 var(--sans);letter-spacing:-.01em}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:14px}.mono{font-family:var(--mono)}
::selection{background:var(--lime);color:var(--on-lime)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dark :focus-visible,.top :focus-visible,.foot :focus-visible{outline-color:var(--lime)}

/* Test-mode note: a slim strip at the foot of every preview page (the build moves it there). */
.testbar{background:var(--band);color:var(--band-text);text-align:center;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-top:1px solid var(--band-line)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--accent)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.btn.lime:hover{background:#d4f75e;border-color:#d4f75e;box-shadow:none}
.btn.ghost,.btn.line{background:transparent;color:var(--accent);border-color:var(--accent)}
.dark .btn.line,.dark .btn.ghost,.cta-inner .btn.line{color:#fff;border-color:rgba(255,255,255,.45)}
.dark .btn.line:hover{border-color:#fff;box-shadow:none}
.btn.small{min-height:40px;padding:0 16px;font-size:14px}
.routes.why{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.routes.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.routes.why{grid-template-columns:1fr}}
.link-btn{justify-self:start;background:none;border:0;padding:6px 0;min-height:44px;color:var(--accent);font:600 15px/1.4 var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- Dark bands (header, hero, closing call) ---------- */
.dark{background:var(--band);color:var(--band-text)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark h1 em,.dark h2 em{color:var(--lime)}
.dark a:not(.btn){color:#fff}
.grid-paper{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0v32' fill='none' stroke='%23ffffff' stroke-opacity='.07'/%3E%3C/svg%3E")}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:12px var(--gutter);background:color-mix(in srgb,var(--band) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--band-line)}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font:700 19px/1 var(--mono);letter-spacing:-.04em;text-decoration:none;min-height:44px}
.mark{width:26px;height:29px;flex:none;display:block}
.top .menu-wide{display:flex;gap:4px;justify-self:center}
.top .menu-wide a{color:var(--band-text);text-decoration:none;font:500 15px/1 var(--sans);padding:12px 14px;border-radius:999px}
.top .menu-wide a:hover{color:#fff;background:rgba(255,255,255,.08)}
.top nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.top-login{padding:12px 14px;border-radius:999px;color:#fff;text-decoration:none;font:500 15px/1 var(--sans)}
.top-login:hover{background:rgba(255,255,255,.08)}
.top-actions .btn{background:var(--lime);border-color:var(--lime);color:var(--on-lime);min-height:42px}
.menu-phone{display:none;justify-self:end;position:relative;background:none;border:0;padding:0;border-radius:0}
.menu-phone summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;font:600 15px/1 var(--sans);cursor:pointer}
.menu-phone summary::-webkit-details-marker{display:none}
.bars,.bars::before,.bars::after{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}.bars::before{top:-5px}.bars::after{top:5px}
.menu-phone[open] .bars{background:transparent}.menu-phone[open] .bars::before{top:0;transform:rotate(45deg)}.menu-phone[open] .bars::after{top:0;transform:rotate(-45deg)}
.menu-phone nav{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 32px));display:grid;gap:2px;padding:10px;background:var(--band-2);border:1px solid var(--band-line);border-radius:18px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.menu-phone nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;color:#fff;text-decoration:none;font-size:17px}
.menu-phone nav a:hover{background:rgba(255,255,255,.08)}
.menu-phone nav .btn{margin-top:8px;background:var(--lime);border-color:var(--lime);color:var(--on-lime);justify-content:center}
@media (max-width:900px){.top{grid-template-columns:1fr auto}.top .menu-wide,.top .top-actions{display:none}.menu-phone{display:block}}

/* ---------- Home: hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start;padding:clamp(36px,6vw,84px) var(--gutter) clamp(44px,6vw,92px);background-image:radial-gradient(720px 480px at 78% 42%,var(--glow),transparent 70%)}
.hero-copy{padding-top:clamp(0px,5vw,72px);position:sticky;top:110px}
.hero h1{font-size:clamp(36px,5.6vw,74px)}
.lede{font-size:clamp(17px,1.5vw,20px);max-width:30em;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.price-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0}
.price-pills li{font:500 12.5px/1 var(--mono);padding:10px 14px;border-radius:999px;background:var(--band-2);color:var(--band-text)}
.price-pills b{color:#fff;font-weight:600}
.hero-figure{position:relative;margin:0}
.plate{background:#fbfbfa;border-radius:22px;padding:12px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 90px -30px rgba(0,0,0,.75)}
.plate .fig-frame{border-radius:14px;box-shadow:none}
.tag{position:absolute;display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--mono);border-radius:999px;padding:11px 15px;pointer-events:none}
.tag-drag{left:-18px;top:16%;background:var(--lime);color:var(--on-lime);box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.tag-drag::before{content:"\2194";font-size:15px}
.frame-note{font-size:14px;color:var(--band-text);margin:16px 4px 0;text-align:center}
.ph{display:grid;grid-template-columns:repeat(14,1fr);height:36px}
.ph span{display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font:600 11px/1 var(--mono);color:#fff}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{position:static;padding-top:0}.tag-drag{left:10px;top:12px}.cta .btn{flex:1 1 200px}}
@media (max-width:560px){.ph span{font-size:11px}.ph{height:30px}}

/* ---------- Sections ---------- */
.band{padding:clamp(56px,7vw,96px) var(--gutter)}
.band.alt{background:var(--card);border-block:1px solid var(--line)}
.section-head{max-width:760px;margin-bottom:32px}
.section-head p{font-size:18px;margin:0}
.section-head.split{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap}
.section-head.split p{max-width:28em}
.page-top{padding-top:clamp(40px,5vw,64px)}
.page-top .section-head h1{font-size:clamp(32px,4.6vw,56px)}

/* Big numbers */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 var(--gutter);border-top:2px solid var(--ink)}
.nums div{padding:24px 24px 40px 0}
.nums b{display:block;font:700 clamp(36px,4.8vw,64px)/1 var(--mono);letter-spacing:-.06em;color:var(--accent)}
.nums p{margin:12px 0 0;max-width:17em}
@media (max-width:760px){.nums{grid-template-columns:1fr}.nums div{padding:18px 0;border-bottom:1px solid var(--line)}}

/* Three ways */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.route{display:flex;flex-direction:column;gap:10px;padding:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.route:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 24px 40px -28px rgba(19,14,54,.5)}
.route h3{margin:0;font:700 21px/1.2 var(--mono);letter-spacing:-.04em}
.route p{margin:0;flex:1;font-size:16px}
.route-kicker{font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.route-go{font-weight:600;color:var(--accent)}
@media (max-width:900px){.routes{grid-template-columns:1fr}}

/* How it works */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.steps .n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--on-lime);font:700 15px var(--mono);margin-bottom:14px}
.steps h3{margin:0 0 6px}.steps p{margin:0;font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Closing call */
.cta-band{padding:0 var(--gutter) clamp(56px,7vw,96px)}
.cta-inner{max-width:none;padding:clamp(36px,5vw,64px);border-radius:28px;background:var(--band);color:var(--band-text);display:grid;grid-template-columns:1fr auto;gap:16px 40px;align-items:center;background-image:radial-gradient(600px 300px at 90% 0%,var(--glow),transparent 70%)}
.cta-inner h2{color:#fff;margin:0}.cta-inner h2 em{font-style:normal;color:var(--lime)}.cta-inner p{margin:10px 0 0}
@media (max-width:760px){.cta-inner{grid-template-columns:1fr}}
.more-link{text-align:center;margin:32px 0 0}

/* ---------- Figure cards (home and library) ---------- */
.filters-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:24px}
.search{position:relative;flex:1 1 280px;max-width:420px}
.search input{width:100%;min-height:50px;padding:0 16px 0 46px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:500 16px var(--sans)}
.search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.search::before{content:"";position:absolute;left:18px;top:50%;width:13px;height:13px;margin-top:-9px;border:2px solid var(--muted);border-radius:50%}
.search::after{content:"";position:absolute;left:31px;top:50%;width:7px;height:2px;margin-top:5px;background:var(--muted);transform:rotate(45deg)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.filters button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font:600 15px var(--sans);cursor:pointer}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button[aria-selected="true"]{background:var(--band);color:#fff;border-color:var(--band)}
.result-count{font:500 13px var(--mono);color:var(--muted);margin:0 0 0 auto}
.no-results{padding:40px;text-align:center;border:1.5px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;content-visibility:auto;contain-intrinsic-size:auto 470px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 26px 44px -30px rgba(19,14,54,.55)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body h3{margin:0;font-size:18px}
.card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 11px/1.4 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.subj{font-weight:600;color:#fff;background:var(--maths);padding:4px 9px;border-radius:999px;letter-spacing:.06em}
.card[data-subject="Physics"] .subj{background:var(--physics)}
.card[data-subject="Chemistry"] .subj{background:var(--chemistry)}
.card[data-subject="Biology"] .subj{background:var(--biology)}
.card-body p{margin:0;font-size:15px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.card-foot .muted{font-size:13px}
.add{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--accent);background:transparent;color:var(--accent);font:600 14px/1 var(--sans);cursor:pointer;white-space:nowrap}
.add:hover{background:var(--accent-soft)}
.add[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
a.add{text-decoration:none;display:inline-flex;align-items:center}
.frame-slot{position:relative;background:#fbfbfa}
.frame-slot.capped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to bottom,transparent,#fbfbfa);pointer-events:none}
.open-full{position:absolute;right:12px;bottom:10px;z-index:2;font:600 13px var(--sans);background:var(--card);color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:8px 12px;text-decoration:none}
.frame-slot:not(.capped) .open-full{position:static;display:inline-block;margin:8px 12px 10px}
.thumb{display:block;position:relative;width:100%;padding:0;border:0;border-bottom:1px solid var(--line);background:#fbfbfa;cursor:pointer}
.thumb img{display:block;width:100%;height:300px;object-fit:cover;object-position:top}
.thumb .play{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;background:var(--band);color:#fff;font:600 14px/1 var(--sans);padding:12px 18px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:background .15s,color .15s}
.thumb:hover .play,.thumb:focus-visible .play{background:var(--lime);color:var(--on-lime)}
.fig-frame{display:block;width:100%;border:0;border-radius:var(--radius);background:#fbfbfa;aspect-ratio:680/780;height:auto}
.card .fig-frame{border-radius:0}
.placeholder{aspect-ratio:680/780;display:grid;place-items:center;color:var(--muted);font:13px var(--mono);background:#fbfbfa}

/* Pack builder basket */
.basket{position:sticky;bottom:14px;z-index:15;padding:0 var(--gutter);margin-top:24px}
.basket-inner{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;background:var(--band);color:var(--band-text);border-radius:22px;padding:14px 14px 14px 24px;box-shadow:0 24px 50px -20px rgba(19,14,54,.7)}
.basket strong{color:#fff}.basket .muted{color:var(--band-text)}
.basket-right{display:flex;align-items:center;gap:14px}
.total{font:700 22px var(--mono);letter-spacing:-.04em;color:#fff}
.basket .btn{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.basket-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;max-width:520px;color:var(--band-text)}.basket-consent a{color:#fff}.basket-consent input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--lime)}

/* ---------- Pricing ---------- */
.price-top{padding:clamp(40px,5vw,72px) var(--gutter) 140px;background-image:radial-gradient(700px 360px at 85% 0%,var(--glow),transparent 70%)}
.price-top h1{margin:0}.price-top p{margin:16px 0 0;font-size:18px;max-width:36em}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:-104px var(--gutter) 0;position:relative}
.plan{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 28px 54px -34px rgba(19,14,54,.55)}
.plan .q{font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.plan h2{font:600 21px/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.price{font:700 40px/1.05 var(--mono);letter-spacing:-.06em;color:var(--ink);margin:2px 0}
.price small{font:500 12.5px/1 var(--mono);letter-spacing:0;color:var(--muted);margin-left:6px}
.price span{display:block;font:500 13px/1.4 var(--mono);letter-spacing:0;color:var(--muted);margin-top:6px}
.plan ul{padding-left:18px;margin:4px 0 12px;font-size:15px;flex:1;display:grid;gap:6px;align-content:start}
.plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.plan-top .q{min-width:0;padding-top:4px}
.bill-toggle{display:inline-flex;flex:none;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper)}
.bill-toggle button{min-height:34px;padding:4px 10px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 12px/1 var(--mono);cursor:pointer}
.bill-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.bill-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.plan [hidden]{display:none!important}
.wl-check{font-size:14px;line-height:1.35}
.batch{display:grid;gap:8px;margin-bottom:14px}.batch #add-figure{justify-self:start}
.batch-list ol{margin:4px 0 0;padding-left:20px;display:grid;gap:4px}
.routes.why{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.routes.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.routes.why{grid-template-columns:1fr}}
.link-btn{background:none;border:0;padding:4px 6px;min-height:32px;color:var(--accent);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.plan-buttons{display:grid;gap:8px}.plan .btn{width:100%}
.plan.featured{background:var(--band-2);border-color:var(--band-2);color:var(--band-text)}
.plan.featured h2,.plan.featured .price{color:#fff}.plan.featured .q{color:var(--lime)}.plan.featured .price small,.plan.featured .price span{color:var(--band-text)}
.plan.featured a:not(.btn){color:#fff}
.plan.featured .btn{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.plan.featured .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
@media (max-width:1040px){.plans{grid-template-columns:1fr 1fr}}@media (max-width:600px){.plans{grid-template-columns:1fr}}
.buy-terms{display:grid;gap:12px;max-width:820px;margin:28px var(--gutter) 0;padding:18px 20px;border-radius:var(--radius-s);background:var(--card);border:1px solid var(--line);font-size:15px}
.buy-terms .check{display:flex;gap:12px;align-items:flex-start}.buy-terms input{margin-top:3px;accent-color:var(--accent);width:20px;height:20px;flex:none}.renewal{margin:0}
.compare{padding:clamp(48px,6vw,80px) var(--gutter) 0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.compare table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-deep);background:var(--accent-soft)}
.compare tbody th{color:var(--ink);font-weight:600}
.compare tbody tr:last-child>*{border-bottom:0}
.compare .yes{color:var(--accent);font-weight:600}
.compare-note{margin:16px 0 0;font-size:15px;color:var(--muted)}

/* ---------- Order form (four-step brief builder) ---------- */
.order{max-width:760px;display:grid;gap:16px}
.order label{display:grid;gap:6px;font-weight:600;font-size:15px;color:var(--ink)}
.order input:not([type=radio]):not([type=checkbox]),.order select,.order textarea,.acct-form input,.acct-form textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--sans)}
.order input:focus,.order select:focus,.order textarea:focus,.acct-form input:focus,.acct-form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.order textarea{resize:vertical}
.order [aria-invalid="true"]{border-color:var(--danger)!important}
.order [hidden]{display:none!important}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.opt{font-weight:400;color:var(--muted)}
fieldset{border:1px solid var(--line);border-radius:var(--radius-s);padding:14px 16px;margin:0;display:grid;gap:8px}
legend{font-weight:600;font-size:15px;color:var(--ink);padding:0 6px}
.order label.tier,.order label.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;color:var(--text)}
.tier input,.check input{margin-top:4px;accent-color:var(--accent);width:20px;height:20px;flex:none}
.tier em{display:block;font-style:normal;color:var(--muted);font-size:14px}
.check .label-text{flex:1;min-width:0}
.form-error{color:var(--danger);margin:0;font-weight:600}
.builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;max-width:1100px}
.order.bb{max-width:none;gap:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 28px 22px}
.bb-steps{list-style:none;margin:0 0 24px;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.bb-steps button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 6px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:600 14px/1 var(--sans);cursor:pointer}
.bb-steps .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper);font:700 12px var(--mono)}
.bb-steps button[aria-current]{border-color:var(--band);color:#fff;background:var(--band)}
.bb-steps button[aria-current] .n{background:var(--lime);color:var(--on-lime)}
.bb-steps button.done{color:var(--ink)}.bb-steps button.done .n{background:var(--accent-soft);color:var(--accent)}
.bb-step{border:0;padding:0;margin:0;display:grid;gap:18px;min-width:0}
.bb-title{font:700 23px/1.2 var(--mono);letter-spacing:-.04em;color:var(--ink);padding:0;margin:0 0 2px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bb-title .opt{font:400 14px var(--sans);letter-spacing:0}
.field{display:grid;gap:8px}.field-label,.desc-field>label{font-weight:600;font-size:15px;color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:8px;border-radius:12px}
.pills.invalid{outline:2px solid var(--danger);outline-offset:4px}
.pill{position:relative;display:inline-flex!important;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:500;font-size:15px;transition:border-color .15s,background .15s}
.pill:hover span{border-color:var(--accent)}
.pill input:checked+span{background:var(--band);border-color:var(--band);color:#fff}
.pill input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.ideas{display:grid;gap:8px}.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:500 14.5px/1.2 var(--sans);cursor:pointer}
.chip:hover,.chip:focus-visible{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.chip[hidden]{display:none}
.axes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end}
.order .axis{font-weight:500;font-size:14px;color:var(--muted)}.order .axis.also{margin-top:4px}
.against{padding-bottom:14px;color:var(--muted);font-size:15px}
.more{background:transparent;border:1.5px dashed var(--line);padding:2px 16px}
.more summary{font-size:15px;min-height:44px}
.more[open]{display:grid;gap:12px;padding-bottom:14px}
.drop{position:relative;display:grid!important;gap:4px;justify-items:center;text-align:center;padding:24px 16px;border:2px dashed var(--line);border-radius:var(--radius-s);background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop.has-files{border-style:solid;border-color:var(--accent)}
.drop.bad{border-color:var(--danger)}
.drop-main{font-weight:600;color:var(--ink)}
.drop-files{font:500 13px var(--mono);color:var(--accent)}.drop.bad .drop-files{color:var(--danger)}
.order .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.order .tiers .tier{display:block;position:relative;border:1.5px solid var(--line);border-radius:var(--radius-s);padding:16px;cursor:pointer;background:var(--paper)}
.order .tiers .tier input{position:absolute;top:16px;right:14px;margin:0}
.order .tiers .tier strong{display:block;font:700 16px var(--mono);letter-spacing:-.03em;color:var(--ink)}
.order .tiers .tier em{display:block;margin-top:6px;font-size:14px}
.order .tiers .tier:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--card)}
.addons{display:grid;gap:8px}
.bb-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.bb-nav .btn.ghost{color:var(--ink);border-color:var(--line)}
.bb-count{margin-left:auto;font:500 12.5px var(--mono);color:var(--muted)}
.order .form-error{margin-top:14px}
.brief{position:sticky;top:96px;background:var(--band);color:var(--band-text);border-radius:22px;padding:22px}
.brief-kicker{margin:0 0 14px;font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--lime)}
.brief dl{margin:0;display:grid;gap:12px}
.brief dt{font-size:12.5px;color:var(--band-text)}
.brief dd{margin:2px 0 0;font-size:15px;font-weight:600;color:#fff;overflow-wrap:anywhere}
.brief dd.empty{font-weight:400;color:var(--band-text);opacity:.8}
.brief-meter{height:6px;border-radius:99px;background:rgba(255,255,255,.12);margin:18px 0 8px;overflow:hidden}
.brief-meter span{display:block;height:100%;width:0;background:var(--lime);border-radius:inherit;transition:width .25s}
.brief-ready{margin:0;font-size:14px;color:var(--band-text)}
.brief-total{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--band-line);display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--band-text)}
.brief-total strong{font:700 24px var(--mono);letter-spacing:-.04em;color:#fff}
.needs{max-width:1100px;display:grid;gap:8px;margin-bottom:28px}.needs h3{margin:0;font-size:19px}.needs>p{margin:0}
details.needs{margin-top:20px;display:block;margin-bottom:0}
details.needs .table-wrap{margin-bottom:14px}
.needs-table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.needs-table th,.needs-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.needs-table tbody tr:last-child>*{border-bottom:0}
.needs-table thead th{font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-deep);background:var(--accent-soft)}
.needs-table tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
.needs-table td:nth-child(3){color:var(--muted)}
.req{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.04em;color:var(--accent-deep);background:var(--accent-soft);padding:6px 8px;border-radius:6px;white-space:nowrap}
.other-box{margin-top:4px;max-width:420px;font-weight:500!important;font-size:14px!important;color:var(--muted)!important}
.improve-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.improve-row .opt{font-size:14px}
.improve-box{display:grid;gap:8px;padding:16px 18px;border:1.5px solid var(--accent);border-radius:var(--radius-s);background:var(--accent-soft)}
.improve-box p{margin:0;color:var(--ink);font-size:15.5px}
.improve-actions{display:flex;gap:8px;flex-wrap:wrap}
.values{display:grid;gap:8px}
.value-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;align-items:center}
.v-remove{width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.v-remove:hover{color:var(--danger);border-color:var(--danger)}
.use-examples{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--radius-s);background:var(--paper)}.use-examples .opt{font-size:14px}
.use-wrap{position:relative;display:block}
.use-wrap>input{padding-right:64px!important}.use-wrap.listed>input{padding-right:84px!important}.use-wrap.tall>textarea{padding-right:64px!important}
.use-one{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-height:32px;padding:0 12px;border:1.5px solid var(--accent);border-radius:999px;background:var(--card);color:var(--accent);font:600 13px/1 var(--sans);cursor:pointer}
.use-wrap.listed .use-one{right:30px}.use-wrap.tall .use-one{top:10px;transform:none}
.use-one:hover{background:var(--accent);color:var(--accent-ink)}
.value-row .use-wrap>input{padding-right:56px!important}.value-row .use-one{right:6px;padding:0 8px}
.welcome{max-width:1100px;margin:0 0 18px;padding:18px 22px;border-radius:var(--radius);background:var(--accent-soft);border:1.5px solid var(--accent)}.welcome strong{color:var(--ink);font-size:18px}.welcome p{margin:4px 0 0}
@media (max-width:860px){.builder{grid-template-columns:1fr}.brief{position:static}.brief dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.order.bb{padding:18px 16px}.order .tiers{grid-template-columns:1fr}.axes{grid-template-columns:1fr}.against{padding:0}.bb-steps button{padding-right:12px;font-size:13px}.row.two{grid-template-columns:1fr}.value-row{grid-template-columns:1fr 1fr 44px}.value-row .v-name{grid-column:1/-1}}

/* ---------- FAQ and documents ---------- */
.faq{max-width:820px;display:grid;gap:12px}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:4px 20px}
summary{cursor:pointer;font-weight:600;color:var(--ink);padding:14px 0;min-height:48px;display:flex;align-items:center;font-size:17px}
details[open] summary{color:var(--accent)}
details p{margin:0 0 16px}
.doc{max-width:780px;margin:0 auto;padding:clamp(40px,5vw,64px) 16px 88px}
.doc h1{font-size:clamp(32px,4vw,46px)}
.doc h2{font-size:clamp(20px,2.2vw,24px);margin-top:1.8em;letter-spacing:-.04em}
.doc table{border-collapse:collapse;width:100%;font-size:15px;margin:14px 0;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--accent-soft);color:var(--ink)}
mark.todo{background:var(--warn-soft);color:var(--warn);padding:0 4px;border-radius:4px;font-weight:600}

/* ---------- Checkout and success ---------- */
.checkout{max-width:560px;margin:56px auto 88px;padding:0 16px}
.co-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 30px 60px -40px rgba(19,14,54,.6)}
.co-card h1{font-size:clamp(28px,4vw,36px)}
.co-lines{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px;font-size:16px}
.co-lines li{display:flex;justify-content:space-between;gap:12px}
.co-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;font:700 20px var(--mono);letter-spacing:-.04em;color:var(--ink)}
.co-badge{display:inline-block;background:var(--warn-soft);color:var(--warn);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border-radius:6px}
.needs-consent{outline:3px solid var(--danger);outline-offset:4px;border-radius:6px}

/* ---------- Account ---------- */
.account{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px}
.account-card{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:22px;scroll-margin-top:100px}
.account-card:target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.account-card h2{margin:0;font-size:clamp(22px,2.4vw,28px)}.account-card p{margin:0}
.account-card h4{margin:6px 0 0;font-size:16px;color:var(--ink)}
.ticks{margin:0;padding-left:20px;display:grid;gap:8px}
@media (max-width:760px){.account{grid-template-columns:1fr}}
.acct-wrap{display:block;max-width:1000px}.acct-wrap h2{margin:38px 0 14px;font-size:clamp(22px,2.4vw,28px)}
.acct-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.acct-head p{margin:0}
.acct-grid{display:grid;gap:18px}.acct-list{margin:0;padding-left:20px;display:grid;gap:12px}
.acct-form{display:grid;gap:10px}.acct-form label{display:grid;gap:6px;font-weight:600;font-size:15px;color:var(--ink)}
.acct-form .btn{justify-self:start}
.acct-code{margin:8px 0 0;padding:14px;background:var(--band);color:var(--band-text);border-radius:var(--radius-s);font:12.5px/1.6 var(--mono);white-space:pre-wrap;word-break:break-all;user-select:all}
.acct-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.steps-mini,.acct-wrap .steps{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;font:600 12px/1 var(--mono)}
.acct-wrap .steps span{padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;color:var(--muted)}
.acct-wrap .steps .past{color:var(--accent);border-color:var(--accent)}
.acct-wrap .steps .now{background:var(--band);border-color:var(--band);color:#fff}
.code-in{font:600 22px/1 var(--mono)!important;letter-spacing:.3em;max-width:220px}.code-actions{display:flex;gap:8px;flex-wrap:wrap}
.sent-note{display:block;padding:12px 14px;border-radius:var(--radius-s);background:var(--accent-soft);color:var(--ink)}
.preview-code{display:block;margin-top:8px;padding:12px 14px;border:1.5px dashed var(--warn);border-radius:var(--radius-s)}
.mono.big{font-size:18px;letter-spacing:.15em}
.delivery{margin:12px 0;padding:18px;border:1.5px solid var(--accent);border-radius:var(--radius);background:var(--card);display:grid;gap:10px}.delivery h3{margin:0;font-size:19px}.delivery p{margin:0}
.delivery-media video{width:100%;max-width:560px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--paper)}
.delivery-live iframe{display:block;width:100%;max-width:720px;height:1180px;border:1px solid var(--line);border-radius:var(--radius-s);background:#fbfbfa}.delivery-live p{margin:6px 0 0}
@media (max-width:560px){.delivery-live iframe{height:1050px}}
.new-figure{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:12px}.new-figure-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.new-figure-head h2{margin:0}.new-figure>p{margin:0}

/* ---------- Footer ---------- */
.foot{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;gap:20px 56px;padding:56px var(--gutter) 40px;background:var(--band);color:var(--band-text)}
.foot .brand{color:#fff}
.foot p{margin:12px 0 0;font-size:14px;max-width:32em;color:var(--band-text)}
.foot nav{display:grid;gap:4px;align-content:start}
.foot nav a{color:#fff;font-size:15px;text-decoration:none;min-height:44px;display:flex;align-items:center}
.foot nav a:hover{color:var(--lime)}
.foot-head{font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--lime);margin-bottom:6px}
.foot .small{grid-column:1/-1;margin:16px 0 0;padding-top:18px;border-top:1px solid var(--band-line)}
.foot .small a{color:#fff}
.foot .muted{color:var(--band-text)}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot-brand,.foot .small{grid-column:1/-1}}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.card:hover,.route:hover,.btn:hover{transform:none}}
.co-card label{display:grid;gap:6px;font-weight:600;font-size:15px;color:var(--ink)}
.co-card input{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--sans)}
.co-card input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* Consent box inside the pricing header, above the cards, so it is seen before any buy button. */
.buy-terms.on-dark{margin:26px 0 0;background:var(--band-2);border-color:var(--band-line);color:var(--band-text);max-width:760px}
.buy-terms.on-dark strong{color:#fff}.buy-terms.on-dark a{color:#fff}.buy-terms.on-dark input{accent-color:var(--lime)}
.buy-terms.on-dark .form-error{color:#ffb4a8}
.consent-msg{font-size:15px}
@media (max-width:600px){
  .compare table{min-width:0;font-size:13px}.compare th,.compare td{padding:10px 6px;overflow-wrap:anywhere}.compare thead th{font-size:11px;letter-spacing:0}
  .thumb img{height:200px}.card-body p,.card-foot .muted{display:none}.card-body{padding:12px 12px 14px}
  #gallery{grid-template-columns:1fr 1fr;gap:12px}#gallery .card{contain-intrinsic-size:auto 330px}#gallery .card-body h3{font-size:15px}
  #gallery .card-meta{font-size:11px}#gallery .card-meta .subj{padding:3px 6px}#gallery .thumb img{height:170px}#gallery .thumb .play{font-size:12px;padding:9px 12px;bottom:10px}
  #gallery .add{width:100%;font-size:13px;padding:0 8px}
}