/* ==========================================================================
THE CASE STUDIES - one stylesheet for the six case studies. Rebuilt
2026-09-29; Scheduler joined on 2026-10-01, Recurring Service on
2026-10-06.
THE REFERENCE IS lakshyakumawat.com's project pages (the owner's pick, via
wallofportfolios.in), measured off the live page: a white page, Satoshi,
one centred 900px column, a small grey label over a 36px sentence-case
headline, 20px slate body copy, and one calm bordered panel per block -
a stat card, a was/became split, a dark insight callout, a 2x2 of decision
cards, a tinted "where it landed" panel, a light "deep dive" panel. The
serif (Newsreader here) is the reference's too: numbers, callouts, the
split's headings, the deep dive.
EVERY PRODUCT SCREEN IS ON THE PAGE (the owner's rule, 2026-09-29): the
same content as the full case study, told in this format. The phones are
stills that play their clip under a resting mouse (case.js).
THE HOMEPAGE IS ALLOWED IN ON PURPOSE, AND ONLY HERE: the dock and the
VEZIGN wordmark (dock.css), one sticker naming the project over the title,
the Mac window that frames the product (the homepage's work cards), and
the portrait contact card. The
owner turned down the first pass, which carried the homepage's whole
language (grid paper, pinned notes, doodles, tilts, pastel rows) onto these
pages: "it looks very same". Do not bring those back here.
A PAGE IS CONTENT ONLY. The project is one attribute - data-case on
- which sets the accent tokens. Every colour is a token with a light
and a dark value; theme.js's switch is in the dock on every page but the
homepage.
========================================================================== */
:root{
--bg:#fff;
--ink:#0b0b0c; /* H1, H2, card titles */
--text:#373c42; /* body - the reference's own slate */
--muted:#5b6169; /* card copy, captions */
--faint:#6b7178; /* the grey eyebrow, card numerals - the reference's #c1c6cc,
darkened to 4.9:1 so the 15px phone eyebrow is AA */
--line:#e5e7ea;
--line-2:#eef0f2;
--card:#fff;
--panel:#f7f8f9;
--focus:#2563eb;
--was:#b42318; --was-bg:#fdf5f4;
--did:#15803d; --did-bg:#f3f8f4;
--land-bg:#f3f8f4;
--warn:#b54708;
--callout:#0e1116;
--callout-ink:#f5f6f7;
--callout-2:rgba(245,246,247,.74);
--callout-line:rgba(255,255,255,.12);
--win:#fff;
--win-url:#ecebe7;
--win-url-ink:#5b6169;
--shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -12px rgba(16,24,40,.16);
--shadow-win:0 24px 48px -20px rgba(10,20,40,.45),0 8px 16px -10px rgba(10,20,40,.3);
/* The project. --acc is the text-safe accent (headline words, numbers,
labels, the outlined pill); --acc-fill the button; --acc-hi the accent
on the dark callout; --acc-soft the deep-dive panel. Neutral here, set
per page below. */
--acc:#1d4ed8;--acc-fill:#1d4ed8;--on-acc:#fff;--acc-hi:#7fb2ff;--acc-soft:#eef4fd;--acc-tag:#eaf1fd;
--sans:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
--display:'Inter Tight','Satoshi',system-ui,sans-serif;
--serif:'Newsreader',Georgia,'Times New Roman',serif;
--hand:'Caveat','Segoe Print','Bradley Hand',cursive;
--fs-h1:clamp(31px,3.4vw,48px);
--fs-h2:clamp(25px,2.5vw,36px);
--fs-label:clamp(15px,1.5vw,21px);
--fs-body:clamp(17px,1.4vw,20px);
--col:900px;
--wide:1020px;
--gut:clamp(18px,3vw,40px);
--sec-y:clamp(60px,7vw,100px);
--ease:cubic-bezier(.2,.8,.2,1);
--consent-font:var(--sans);
/* nav.css paints contact.js's "Email copied." from these, and theme.js
reads --nav-bg into . */
--nav-bg:#fff;--nav-ink:#0b0b0c;--nav-accent:#d4f34a;--nav-edge:rgba(0,0,0,.14);--nav-sans:var(--sans);
--mark-ink:var(--ink);
}
html[data-case="vola"]{--acc:#8f5400;--acc-fill:#8f5400;--on-acc:#fff;--acc-hi:#ffc451;--acc-soft:#fff8eb;--acc-tag:#fff0d4}
html[data-case="gpay"]{--acc:#1a5fd0;--acc-fill:#1a5fd0;--on-acc:#fff;--acc-hi:#74b1ff;--acc-soft:#eef4fe;--acc-tag:#e3edfd}
html[data-case="marketplace"]{--acc:#17753a;--acc-fill:#17753a;--on-acc:#fff;--acc-hi:#6fe09a;--acc-soft:#eff8f2;--acc-tag:#e1f3e7}
html[data-case="aiwb"]{--acc:#5b3bc4;--acc-fill:#5b3bc4;--on-acc:#fff;--acc-hi:#bba6ff;--acc-soft:#f4f1fd;--acc-tag:#ebe5fc}
/* Scheduler's own purple, pulled toward the pink end of its icon so it reads
apart from AIWB's indigo (hue 278 against 254): 6.5:1 on white. */
html[data-case="scheduler"]{--acc:#8a2fc0;--acc-fill:#8a2fc0;--on-acc:#fff;--acc-hi:#d6a4ff;--acc-soft:#faf3fd;--acc-tag:#f3e6fb}
/* Recurring Service: the teal of Swivl's own buttons in the product,
deepened to 5.4:1 on white so it can carry text; GPay's blue and
Marketplace's green sit either side of it. */
html[data-case="recurring"]{--acc:#0e7490;--acc-fill:#0e7490;--on-acc:#fff;--acc-hi:#67e8f9;--acc-soft:#eef8fa;--acc-tag:#e3f4f8}
html.dark{
--bg:#0e0f11;
--ink:#f4f5f6;
--text:#c4c9cf;
--muted:#a2a8b0;
--faint:#8a9098;
--line:rgba(255,255,255,.12);
--line-2:rgba(255,255,255,.07);
--card:#15171a;
--panel:#15171a;
--focus:#8cb8ff;
--was:#ff9b8f; --was-bg:#1d1413;
--did:#7fd89c; --did-bg:#121b15;
--land-bg:#121b15;
--warn:#ffb070;
--callout:#060708;
--win:#1d1f22;--win-url:#2b2e33;--win-url-ink:#a2a8b0;
--shadow:0 12px 32px -12px rgba(0,0,0,.7);
--shadow-win:0 24px 48px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07);
--nav-bg:#0e0f11;--nav-ink:#f4f5f6;--nav-edge:rgba(255,255,255,.16);
}
html.dark[data-case="vola"]{--acc:#ffc451;--acc-fill:#f5a524;--on-acc:#1c1406;--acc-soft:#1c1812;--acc-tag:#2a2215}
html.dark[data-case="gpay"]{--acc:#8cbcff;--acc-fill:#4c8ef5;--on-acc:#06122a;--acc-soft:#121a26;--acc-tag:#172234}
html.dark[data-case="marketplace"]{--acc:#7fd89c;--acc-fill:#46c177;--on-acc:#062012;--acc-soft:#111c15;--acc-tag:#16271c}
html.dark[data-case="aiwb"]{--acc:#c3b2ff;--acc-fill:#9d85f5;--on-acc:#150b33;--acc-soft:#18152a;--acc-tag:#221d3a}
html.dark[data-case="scheduler"]{--acc:#dcabff;--acc-fill:#b878f0;--on-acc:#1a0b26;--acc-soft:#1a1420;--acc-tag:#26182f}
html.dark[data-case="recurring"]{--acc:#67d6ea;--acc-fill:#22a3bd;--on-acc:#03181d;--acc-soft:#0f1a1d;--acc-tag:#12272c}
/* ============================================================
BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* The contact card pays the dock's room itself (.foot). */
body.docked{padding-bottom:0}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:700}
::selection{background:var(--acc-tag);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
main{display:block}
.cs-col{width:min(100% - 2 * var(--gut),var(--col));margin-inline:auto}
.cs-wide{width:min(100% - 2 * var(--gut),var(--wide));margin-inline:auto}
/* ============================================================
THE HOMEPAGE'S STICKER - one per page, naming the project.
============================================================ */
.stk{
--c:#dcebfb;--d:#1f8ae0;
position:relative;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 26px;border-radius:10px;
background:var(--c);color:#151515;font:700 14.5px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;
transform:rotate(-4deg);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 14px -8px rgba(0,0,0,.35);
}
.stk-ic{position:absolute;left:-13px;top:-13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--d);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 3px 8px rgba(0,0,0,.22)}
.stk-ic svg{width:14px;height:14px}
.stk::after{content:'';position:absolute;right:-5px;top:-5px;width:13px;height:13px;border-radius:0 0 0 11px;background:linear-gradient(225deg,transparent 50%,#12312e 50%)}
.stk--yellow{--c:#faf6c8;--d:#c9a000}
.stk--sky{--c:#dcebfb;--d:#1f8ae0}
.stk--green{--c:#eefbe3;--d:#4f9d1c}
.stk--lilac{--c:#ece8fb;--d:#7b5ce0}
.stk--orange{--c:#ffe9d6;--d:#e56b17}
.stk--pink{--c:#fbe6f6;--d:#d94fc4}
.stk--teal{--c:#dcf3f6;--d:#0e8fa6}
/* ============================================================
BUTTONS - the reference's two pills: outlined, and filled.
============================================================ */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:44px;padding:0 20px;border-radius:999px;
border:1.5px solid var(--acc);color:var(--ink);background:var(--bg);text-decoration:none;font:500 16px/1 var(--sans);transition:background .2s}
.pill:hover{background:var(--acc-tag)}
.pill svg{width:15px;height:15px;margin-left:8px;transition:transform .2s var(--ease)}
.pill:hover svg{transform:translate(2px,-2px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 24px;border-radius:999px;border:0;
background:var(--acc-fill);color:var(--on-acc);text-decoration:none;font:700 15.5px/1 var(--sans);box-shadow:0 8px 18px -10px rgba(0,0,0,.4);transition:transform .2s var(--ease),filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
/* ============================================================
THE MAC WINDOW - the homepage's work card chrome, framing the product.
============================================================ */
.win{position:relative;background:var(--win);border-radius:14px;padding:0 10px 10px;box-shadow:var(--shadow-win);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:6px;padding:10px 4px}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57;flex:none}
.win-bar i:nth-child(2){background:#febc2e}
.win-bar i:nth-child(3){background:#28c840}
.win-url{margin-left:10px;flex:0 1 300px;min-width:0;font:500 11.5px/1 var(--sans);color:var(--win-url-ink);background:var(--win-url);border-radius:6px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-media{position:relative;display:block;border-radius:7px;overflow:hidden;background:#0b0b0b}
.win-media img{width:100%;height:auto}
/* A framed visual that is not the product's own window (a photo, a sheet). */
.cs-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
/* ============================================================
HERO
============================================================ */
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:clamp(72px,5.8vw,90px)}
.cs-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;font:500 clamp(16px,1.4vw,20px)/1 var(--sans);color:var(--text);text-decoration:none}
.cs-back svg{width:20px;height:20px;color:var(--acc);transition:transform .2s var(--ease)}
.cs-back:hover{color:var(--ink)}
.cs-back:hover svg{transform:translateX(-3px)}
.cs-hero{text-align:center}
/* Sticker and eyebrow share a line from 761px, so the product can rise
into the first fold. */
.cs-kicker{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:clamp(26px,2.8vw,40px)}
.cs-eyebrow{font:700 clamp(15px,1.4vw,20px)/1.3 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--faint)}
.cs-h1{max-width:21em;margin:clamp(16px,1.8vw,24px) auto 0;font:800 var(--fs-h1)/1.2 var(--display);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.cs-lede{max-width:48em;margin:clamp(16px,1.6vw,22px) auto 0;font-size:var(--fs-body);line-height:1.5;color:var(--text);text-wrap:pretty}
.cs-lede b{color:var(--ink)}
/* The hero shows the product itself, straight on the page - never a
marketing cover, and no plate behind it (the owner's call, 2026-09-29).
Three phones for the two apps, the shelf in its browser for Marketplace,
four template boards for AIWB. The film is the next fold.
Sized to be READ, not to fit the fold (the owner, same day: "the user can
see it properly"): a phone is ~300px wide on a laptop, the width at which
the app's own 12-14px type stays legible. It starts in the first fold and
the reader scrolls into the rest. */
.cs-lead{margin:clamp(24px,2.8vw,38px) auto 0}
.cs-lead-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3.6vw,52px);max-width:1000px;margin:0 auto}
.cs-lead-phones .cs-dev{max-width:300px}
.cs-lead-phones p{max-width:17em;margin:18px auto 0;font-size:clamp(14px,1.1vw,16px);line-height:1.45;color:var(--text);text-wrap:balance}
.cs-lead-phones p b{display:block;margin-bottom:4px;font:700 clamp(15px,1.3vw,18px)/1.25 var(--sans);color:var(--ink)}
.cs-lead .win{max-width:100%;margin:0 auto}
.cs-lead-crop{aspect-ratio:16/10}
.cs-lead-crop img{height:100%;object-fit:cover;object-position:top}
.cs-lead-boards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,22px);margin:0 auto}
/* A board keeps the #2B2B2B ground it was exported on, in both themes. */
.cs-lead-board{aspect-ratio:5/8;overflow:hidden;border-radius:10px;background:#2b2b2b;box-shadow:var(--shadow)}
.cs-lead-board img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-lead-boards figcaption{margin-top:10px;font:500 14px/1.3 var(--sans);color:var(--text)}
.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(40px,4.6vw,60px) auto 0;padding-bottom:clamp(36px,4vw,52px);border-bottom:1px solid var(--line)}
.cs-meta dt{font:700 clamp(17px,1.6vw,22px)/1.25 var(--sans);color:var(--text)}
.cs-meta dd{margin-top:8px;font-size:clamp(15.5px,1.25vw,18px);line-height:1.45;color:var(--text);text-wrap:balance}
/* ============================================================
SECTIONS - label, headline, intro, a block, a hairline.
============================================================ */
.cs-sec{padding-top:var(--sec-y)}
.cs-sec>.cs-col{padding-bottom:var(--sec-y);border-bottom:1px solid var(--line)}
.cs-sec.plain>.cs-col{border-bottom:0;padding-bottom:0}
.cs-head{text-align:center}
.cs-label{font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.cs-h2{margin-top:12px;font:700 var(--fs-h2)/1.2 var(--sans);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.cs-h2 .hl{color:var(--acc)}
.cs-intro{max-width:44em;margin:18px auto 0;font-size:var(--fs-body);line-height:1.5;color:var(--text);text-wrap:pretty}
.cs-intro b{color:var(--ink)}
.cs-prose{margin-top:24px;display:grid;gap:18px;text-align:center}
.cs-prose p{font-size:var(--fs-body);line-height:1.5;color:var(--text);text-wrap:pretty}
.cs-prose b{color:var(--ink)}
.cs-foot{margin-top:28px;text-align:center;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--text);text-wrap:balance}
.cs-foot a{color:var(--ink);font-weight:500;text-decoration-color:var(--acc);text-decoration-thickness:1.5px;text-underline-offset:4px}
.cs-foot b{color:var(--ink)}
/* A sub-head inside a section, for a group of screens. */
.cs-sub{margin:clamp(40px,4.4vw,56px) 0 0;text-align:left}
.cs-sub h3{font:700 clamp(18px,1.6vw,21px)/1.3 var(--sans);color:var(--ink)}
.cs-sub p{margin-top:6px;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--muted);max-width:46em}
/* A small caps label inside a card or table. */
.k{display:block;font:700 11.5px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* ---------- THE STAT CARD (impact / by the numbers) ---------- */
.cs-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin-top:clamp(26px,3vw,34px);border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow);text-align:left;overflow:hidden}
.cs-stats li{padding:26px 22px 28px}
.cs-stats li+li{border-left:1px solid var(--line-2)}
.cs-stats strong{display:block;font:500 clamp(34px,3.2vw,44px)/1 var(--serif);letter-spacing:-.01em;color:var(--acc);white-space:nowrap}
.cs-stats strong small{font-size:.5em;margin-left:3px;letter-spacing:0}
.cs-stats b{display:block;margin-top:14px;font:700 15px/1.3 var(--sans);color:var(--ink)}
.cs-stats span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
/* ---------- THE 30-SECOND VERSION: a ruled table ---------- */
.cs-table{margin-top:clamp(26px,3vw,34px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.cs-table li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 28px;padding:20px 4px}
.cs-table li+li{border-top:1px solid var(--line-2)}
.cs-table .k{padding-top:4px}
.cs-table p{font-size:clamp(16px,1.2vw,17.5px);line-height:1.55;color:var(--text)}
.cs-table p b{color:var(--ink)}
/* ---------- WAS / BECAME ---------- */
.cs-split{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,3.2vw,40px);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-align:left}
.cs-split>div{padding:clamp(24px,3vw,34px)}
.cs-was{background:var(--was-bg)}
.cs-now{background:var(--did-bg);border-left:1px solid var(--line-2)}
.cs-was .k{color:var(--was)}
.cs-now .k{color:var(--did)}
.cs-split h3{margin:14px 0 12px;font:500 clamp(22px,2vw,26px)/1.2 var(--serif);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.cs-split p{font-size:15px;line-height:1.6;color:var(--muted)}
.cs-split .so{margin-top:18px;font:italic 400 16.5px/1.4 var(--serif);color:var(--was)}
.cs-now .so{color:var(--did)}
.cs-split-go{position:absolute;left:50%;top:50%;z-index:1;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.cs-split-go svg{width:16px;height:16px}
/* ---------- A QUOTE (persona, brief) - the reference's testimonial card ---------- */
.cs-quote{display:flex;align-items:center;gap:20px;margin-top:clamp(28px,3.2vw,40px);padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-align:left}
.cs-quote img{width:72px;height:72px;flex:none;border-radius:50%;object-fit:cover}
.cs-quote p{font:italic 400 clamp(18px,1.6vw,21px)/1.45 var(--serif);color:var(--ink);text-wrap:pretty}
.cs-quote cite{display:block;margin-top:10px;font:400 14px/1.4 var(--sans);font-style:normal;color:var(--muted)}
.cs-quote cite b{color:var(--ink)}
/* ---------- THE INSIGHT: one dark callout ---------- */
.cs-callout{margin-top:clamp(28px,3.2vw,40px);padding:clamp(26px,3.6vw,40px) clamp(24px,3.8vw,44px);border-radius:14px;text-align:left;
background:var(--callout);color:var(--callout-ink);box-shadow:inset 4px 0 0 var(--acc-hi),0 0 0 1px var(--callout-line)}
.cs-callout .k{color:var(--acc-hi)}
.cs-callout .big{margin-top:16px;font:500 clamp(22px,2.3vw,30px)/1.3 var(--serif);letter-spacing:-.005em;color:var(--callout-ink);text-wrap:pretty}
.cs-callout .big em{font-style:normal;color:var(--acc-hi)}
.cs-callout .sub{margin-top:18px;font-size:15.5px;line-height:1.62;color:var(--callout-2)}
.cs-callout .sub b{color:var(--callout-ink)}
.cs-rule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;margin-top:26px;padding-top:24px;border-top:1px solid var(--callout-line)}
.cs-rule p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--callout-ink)}
/* ---------- FIGURES: a framed visual, a tag, a title, a line ---------- */
.cs-fig{margin-top:clamp(28px,3.2vw,40px);text-align:left}
.cs-cap{margin-top:14px}
.cs-cap .tt{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.cs-cap .tag{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--acc-tag);padding:6px 8px;border-radius:5px}
.cs-cap .tt b{font:700 15.5px/1.3 var(--sans);color:var(--ink)}
.cs-cap p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cs-cap p b{color:var(--text)}
/* The film sits in the window, capped by the screen so the player's bar
clears the dock on a short laptop. */
.cs-film{max-width:min(100%,calc((100svh - var(--dock-top) - 140px) * 1.7778));margin-inline:auto}
.cs-film .film{border-radius:7px}
/* THE SCREENS - every one the product has, on a quiet panel, each with
its name and one line. A grid on a wide screen; below 900px a strip the
next phone peeks into (case.js makes it a tab stop once it scrolls). */
.cs-phones{margin-top:18px;padding:clamp(22px,3vw,34px) clamp(14px,2.4vw,28px);border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cs-phones ul{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(22px,2.6vw,30px) clamp(12px,1.8vw,22px)}
.cs-phones li{text-align:center}
.cs-dev{position:relative;width:100%;max-width:250px;margin:0 auto;aspect-ratio:600/1238;border-radius:16.5% / 8%;overflow:hidden;background:#0b0b0b;box-shadow:0 14px 26px -16px rgba(0,0,0,.5)}
.cs-dev img,.cs-dev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-dev video{opacity:0;transition:opacity .3s;pointer-events:none}
.cs-dev.is-live video{opacity:1}
.cs-phones li b{display:block;margin-top:14px;font:700 14.5px/1.3 var(--sans);color:var(--ink)}
.cs-phones li span{display:block;margin:4px auto 0;max-width:250px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.cs-swipe{display:none}
.for-mouse{display:none}
@media (hover:hover) and (pointer:fine){.for-mouse{display:inline}}
/* Wide product pages (Marketplace) and sheets (AIWB). */
.cs-shot{position:relative;aspect-ratio:var(--ar,16/10);overflow:hidden;background:#fff}
.cs-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cs-parts li{font:500 12.5px/1 var(--sans);color:var(--muted);border:1px solid var(--line);padding:7px 9px;border-radius:999px}
.cs-parts li i{font-style:normal;color:var(--acc);font-weight:700;margin-right:5px}
/* The template boards (AIWB): all ten, in page order, as a masonry of
framed sheets. */
.cs-boards{columns:3 240px;column-gap:16px;margin-top:18px}
.cs-boards figure{break-inside:avoid;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#2b2b2b}
.cs-boards img{width:100%;height:auto}
.cs-boards figcaption{padding:10px 12px;font:700 13.5px/1.3 var(--sans);color:#f4f5f6;background:#1e1e1e}
/* ---------- THE ARTBOARD (AIWB): the ten boards on a Figma-like canvas ----------
The old page's canvas, kept: drag to pan, pinch or Ctrl+scroll to zoom,
double-click a board to fit it, the chips jump to one, full screen on the
corner button. assets/js/aiwb.js (modules 2 and 3) is the whole behaviour,
unchanged; only the skin is this page's. Without the script it is a
sideways row of the ten overview images. The canvas is Figma's own
#1E1E1E in both themes: the boards were exported on #2B2B2B. */
.boards{
--bv-h:min(76vh,760px);
--cv:#1e1e1e;--cv-ink:rgba(255,255,255,.66);--cv-tool:#2c2c2c;--cv-line:rgba(255,255,255,.12);
margin-top:18px;text-align:left;
}
.boards-bar{display:none;margin-bottom:14px}
.boards.is-live .boards-bar{display:flex;align-items:center;gap:12px;min-width:0}
.switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.switch button{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:500 14px/1 var(--sans);color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.switch button:hover{color:var(--ink)}
.switch button[aria-current="true"]{background:var(--acc-fill);color:var(--on-acc)}
.boards-chips{max-width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.boards-chips::-webkit-scrollbar{display:none}
.boards-chips button{flex:none;white-space:nowrap}
.boards-stage{position:relative}
.boards-view{overflow-x:auto;padding-bottom:14px;-webkit-overflow-scrolling:touch}
.boards-world{display:flex;gap:20px;width:max-content}
.board{margin:0;flex:none}
.board img{display:block;height:min(56vh,480px);width:auto;border-radius:8px}
.board figcaption{margin-top:10px;font:700 13px/1.3 var(--sans);color:var(--muted)}
.boards-tools,.boards-hint{display:none}
.boards.is-live .boards-stage{height:var(--bv-h);overflow:hidden;border-radius:16px;background:var(--cv);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.boards.is-live .boards-view{position:absolute;inset:0;overflow:hidden;padding:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.boards.is-live .boards-view:focus-visible{outline:3px solid var(--acc-hi);outline-offset:-4px}
.boards.is-live .boards-view.is-dragging{cursor:grabbing}
.boards.is-live .boards-world{position:absolute;left:0;top:0;display:block;width:auto;transform-origin:0 0}
.boards.is-live .board{position:absolute}
.boards.is-live .board img,.board .strip{width:100%;height:100%;border-radius:0;pointer-events:none;-webkit-user-drag:none;user-select:none}
.boards.is-live .board figcaption{position:absolute;left:0;bottom:100%;margin:0;padding:0 0 7px;transform-origin:0 100%;transform:scale(calc(1 / var(--s,1)));
white-space:nowrap;font:600 12px/1.2 var(--sans);color:var(--cv-ink);pointer-events:none;max-width:calc(100% * var(--s,1));overflow:hidden;text-overflow:ellipsis}
.board .strip{position:absolute;left:0;height:auto;opacity:0;transition:opacity .25s var(--ease)}
.board .strip.on{opacity:1}
.board .strip[data-k="1"]{z-index:1}
.board .strip[data-k="2"]{z-index:2}
.boards.is-live .boards-tools{position:absolute;right:12px;bottom:12px;z-index:5;display:flex;align-items:center;gap:2px;padding:4px;background:var(--cv-tool);border:1px solid var(--cv-line);border-radius:12px;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.boards-tools button{min-width:36px;height:36px;padding:0 10px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#f5f5f5;cursor:pointer;font:600 13px/1 var(--sans)}
.boards-tools button:hover{background:rgba(255,255,255,.08)}
.boards-tools button:focus-visible{outline:2px solid var(--acc-hi);outline-offset:1px}
.boards-tools svg{width:14px;height:14px}
.boards-tools [data-full] .i-close,.boards.is-full [data-full] .i-open{display:none}
.boards.is-full [data-full] .i-close{display:inline}
.boards-pct{min-width:48px;text-align:center;font:600 12px/1 ui-monospace,'SF Mono',Menlo,monospace;color:var(--cv-ink)}
.boards.is-live .boards-hint{display:block;position:absolute;left:12px;bottom:12px;z-index:5;margin:0;max-width:calc(100% - 260px);padding:9px 12px;border-radius:10px;background:rgba(44,44,44,.92);border:1px solid var(--cv-line);font:500 12px/1.4 var(--sans);color:var(--cv-ink);transition:opacity .4s var(--ease)}
.boards-hint.is-gone{opacity:0;pointer-events:none}
.h-touch{display:none}
@media (hover:none),(pointer:coarse){.h-fine{display:none}.h-touch{display:inline}}
.boards.is-full{position:fixed;inset:0;z-index:400;margin:0;display:flex;flex-direction:column;background:var(--cv);padding:max(12px,env(safe-area-inset-top)) 12px 0}
.boards.is-full .boards-chips{background:var(--cv-tool);border-color:var(--cv-line)}
.boards.is-full .boards-chips button{color:rgba(255,255,255,.72)}
.boards.is-full .boards-chips button:hover{color:#fff}
.boards.is-full .boards-chips button[aria-current="true"]{color:var(--on-acc)}
.boards.is-full .boards-stage{flex:1;height:auto;border-radius:12px 12px 0 0;box-shadow:none}
.boards.is-full .boards-view{touch-action:none}
html.boards-lock,html.boards-lock body{overflow:hidden}
@media (max-width:700px){
.boards{--bv-h:min(70vh,600px)}
.boards.is-live .boards-hint{max-width:none;right:12px;bottom:64px}
}
/* ---------- THE SLIDER (AIWB): the three component sheets, as before ----------
One sideways track sized by HEIGHT so 14px labels stay labels, snapping on
1px markers between component groups (never the figures, which are wider
than the window and would switch snapping off). Tabs jump to a sheet,
arrows step between stops; aiwb.js module 2, unchanged. Without the script
it is a plain native scroller. */
.kit{--kit-in:0px;--kit-gap:clamp(14px,1.6vw,22px);--kit-h:min(62vh,40vw,560px);margin-top:18px;text-align:left}
.kit-bar{display:none;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.kit.is-live .kit-bar{display:flex}
.kit-arrows{display:flex;gap:8px;flex:none}
.kit-arrow{width:44px;height:44px;padding:0;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);transition:border-color .2s,opacity .2s}
.kit-arrow:hover:not(:disabled){border-color:var(--acc)}
.kit-arrow:disabled{opacity:.35;cursor:default}
.kit-arrow svg{width:15px;height:15px}
.kit-track{display:flex;gap:var(--kit-gap);overflow-x:auto;overflow-y:hidden;padding:2px 2px 26px;scroll-padding-inline:0;scroll-snap-type:x mandatory;
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;border-radius:12px}
.kit-track:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.kit-track::after{content:'';flex:0 0 var(--kit-tail,1px)}
.kit-sheet{position:relative;flex:none;margin:0}
.kit-sheet::before,.kit-stop{content:'';position:absolute;top:0;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
.kit-stop--m{scroll-snap-align:none}
.kit-sheet img{display:block;height:var(--kit-h);width:auto;max-width:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 26px -20px rgba(16,24,40,.35)}
@media (max-width:1080px){
.kit{--kit-h:min(56vh,480px)}
.kit-track{scroll-snap-type:x proximity}
.kit-stop--m{scroll-snap-align:start}
}
@media (max-width:560px){
.kit-bar{flex-wrap:wrap}
.kit-tabs{flex:1 1 auto}
.kit-tabs button{flex:1;padding:0 10px}
.kit{--kit-h:min(46vh,360px)}
}
@media (pointer:coarse){
.switch button{min-height:44px}
.boards-tools button{min-width:44px;height:44px}
}
/* The three component sheets are wide: each scrolls sideways at a legible
height rather than shrinking to nothing. */
.cs-sheet{overflow-x:auto;background:#fff;scrollbar-width:thin}
.cs-sheet img{height:clamp(220px,34vw,360px);width:auto;max-width:none}
/* The install snippet (Marketplace) and the ten picks (AIWB). */
.cs-install{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,36px);align-items:center;margin-top:clamp(40px,4.4vw,56px);text-align:left}
.cs-moves{display:grid;gap:18px}
.cs-moves li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px}
.cs-moves .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);font:500 17px/1 var(--serif)}
.cs-moves b{display:block;font:700 17px/1.3 var(--sans);color:var(--ink);padding-top:6px}
.cs-moves p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--muted)}
.cs-code{border-radius:12px;background:#0e1116;color:#e6e8eb;overflow:hidden;box-shadow:0 0 0 1px var(--callout-line),var(--shadow)}
.cs-code .win-bar{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.cs-code .win-url{background:rgba(255,255,255,.08);color:#a2a8b0}
.cs-code pre{margin:0;padding:18px 18px 22px;font:500 13px/1.7 ui-monospace,'SF Mono',Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:break-word}
/* Each source line is one .ln: the script tag really is one line, so it
soft-wraps with a hanging indent at any width instead of clipping. */
.cs-code .ln{display:block;padding-left:2ch;text-indent:-2ch}
.cs-code .a,.cs-code .t,.cs-code .nw{white-space:nowrap} /* never data- | key, never defer> | */
.cs-code .c{color:#8b929a}.cs-code .t{color:#8cbcff}.cs-code .a{color:#d4f34a}.cs-code .s{color:#ffc88a}
.cs-recipe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:6px 22px 10px;background:var(--card)}
.cs-recipe li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-2);font:500 15px/1.2 var(--sans);color:var(--ink)}
.cs-recipe li i{font:500 15px/1 var(--serif);font-style:normal;color:var(--acc)}
/* ---------- THE FIRST LOOK: the product, straight after the facts ----------
The owner's rule (2026-09-29): product images inside the first three
folds, a few screens first and the rest progressively down the page. */
.cs-look{margin-top:clamp(40px,4.6vw,60px)}
.cs-look .cs-cap{margin-top:14px;text-align:left}
.cs-look .win{max-width:100%}
.cs-look .cs-cap-line{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted);text-align:left}
/* ---------- FEATURE ROWS: a screen beside its full description ---------- */
.cs-feats{display:grid;gap:clamp(28px,4.4vw,64px);margin-top:18px;text-align:left}
.cs-feat{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(22px,3.4vw,48px);align-items:center}
.cs-feat:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.cs-feat:nth-child(even) .cs-feat-media{order:2}
/* The phone stands on the page, no plate behind it (the owner's call,
2026-09-29): the device has its own silhouette and shadow. */
.cs-feat-media .cs-dev{max-width:320px}
.cs-feat .n{font:500 15px/1 var(--serif);color:var(--acc)}
.cs-feat h3{margin:10px 0 10px;font:700 clamp(20px,1.8vw,24px)/1.25 var(--sans);color:var(--ink);text-wrap:balance}
.cs-feat p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;color:var(--text)}
.cs-feat p b{color:var(--ink)}
.cq{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font:700 11.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
/* ---------- SCREENS WITH A FULL CAPTION ---------- */
.cs-phones.long li{text-align:left}
.cs-phones.long .cs-dev{margin:0 auto}
.cs-phones.long li .no{display:block;margin-top:16px;font:500 13px/1 var(--serif);color:var(--acc)}
.cs-phones.long li b{margin-top:6px}
.cs-phones.long li span{margin:6px 0 0;max-width:none;font-size:14px;line-height:1.55}
.cs-phones.long li .cq{margin-top:10px;padding-top:10px;font-size:10.5px}
/* ---------- THE BENCHMARK (Google Pay): five apps, seven capabilities ---------- */
.cs-bench{margin-top:clamp(26px,3vw,34px);border:1px solid var(--line);border-radius:14px;background:var(--card);overflow-x:auto;text-align:left}
.cs-bench table{width:100%;min-width:680px;border-collapse:collapse;font-size:14.5px}
.cs-bench caption{padding:14px 18px;text-align:left;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.cs-bench th,.cs-bench td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.cs-bench tr:last-child th,.cs-bench tr:last-child td{border-bottom:0}
.cs-bench thead th{font:700 12.5px/1.25 var(--sans);color:var(--ink);text-align:center}
.cs-bench thead th:first-child{text-align:left}
.cs-bench thead img{width:28px;height:28px;margin:0 auto 6px;object-fit:contain;border-radius:7px;background:#fff}
.cs-bench tbody th{font:500 14.5px/1.3 var(--sans);color:var(--ink)}
.cs-bench td{text-align:center}
.lv{display:inline-block;min-width:62px;padding:5px 8px;border-radius:999px;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.lv.full{color:var(--did);background:var(--did-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--did) 30%,transparent)}
.lv.part{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--card))}
.lv.none{color:var(--muted);background:var(--panel)}
.cs-bench-hint{display:none;margin-top:10px;font:500 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
/* ---------- ROUTES (Google Pay): the one taken, the one not ---------- */
.cs-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(26px,3vw,34px);text-align:left}
.cs-route{border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;background:var(--card)}
.cs-route.taken{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:inset 0 3px 0 var(--acc)}
.cs-route-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;color:var(--muted);background:var(--panel)}
.taken .badge{color:var(--on-acc);background:var(--acc-fill)}
.cs-route h3{margin:12px 0 8px;font:700 18px/1.3 var(--sans);color:var(--ink)}
.cs-route>p{font-size:15px;line-height:1.58;color:var(--muted)}
.cs-route ul{margin-top:14px;display:grid;gap:8px}
.cs-route li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14.5px;line-height:1.5;color:var(--text)}
.cs-route li svg{width:16px;height:16px;margin-top:3px}
.cs-route li.pro svg{color:var(--did)}
.cs-route li.con svg{color:var(--was)}
.cs-route .cq{color:var(--muted)}
.taken .cq{color:var(--acc)}
.cs-note{margin-top:16px;padding:18px 20px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:left;font-size:15px;line-height:1.6;color:var(--text)}
.cs-note b{color:var(--ink)}
/* ---------- USER FLOWS (Google Pay): the steps as a chain ---------- */
.cs-flows{display:grid;gap:16px;margin-top:clamp(26px,3vw,34px);text-align:left}
.cs-flow{border:1px solid var(--line);border-radius:14px;padding:20px 22px 22px;background:var(--card)}
.cs-flow h3{margin:8px 0 6px;font:700 17px/1.3 var(--sans);color:var(--ink)}
.cs-flow>p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.cs-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-top:14px}
.cs-chain li{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;font:500 13.5px/1.25 var(--sans);color:var(--ink)}
.cs-chain li:not(:last-child)::after{content:'';width:14px;height:1.5px;background:var(--faint);margin-left:2px}
.cs-chain span{padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.cs-chain .key span{border-color:var(--acc);color:var(--acc);background:var(--acc-tag);font-weight:700}
.cs-chain .or{color:var(--muted);font-size:12.5px}
/* A short chain (Scheduler's go-live) stacks on a phone, so no connector is
left hanging at the end of a wrapped line. */
@media (max-width:560px){
.cs-chain--stack{flex-direction:column;align-items:flex-start;gap:0}
.cs-chain--stack li:not(:last-child)::after{flex-basis:100%;width:auto;height:14px;margin:4px 0 0;background:linear-gradient(var(--faint),var(--faint)) 16px 0 / 1.5px 100% no-repeat}
}
/* ---------- THE CALLS: a 2x2 of decision cards ---------- */
.cs-calls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(26px,3vw,34px);text-align:left}
.cs-call{border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;background:var(--card)}
.cs-call-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cs-call-top .n{font:400 22px/1 var(--serif);color:var(--faint)}
.cs-call h3{margin:10px 0 16px;font:700 17px/1.35 var(--sans);color:var(--ink);text-wrap:balance}
.cs-call dl{display:grid;gap:12px}
.cs-call dt{font:700 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--warn)}
.cs-call dt.did{color:var(--did)}
.cs-call dd{margin-top:5px;font-size:14.5px;line-height:1.58;color:var(--muted)}
/* ---------- PROOF: the study cards ---------- */
.cs-studies{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;margin-top:clamp(26px,3vw,34px);text-align:left}
.cs-studies li{border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px;background:var(--card)}
.cs-studies .n{font:500 15px/1 var(--serif);color:var(--acc)}
.cs-studies h3{margin:10px 0 8px;font:700 17px/1.3 var(--sans);color:var(--ink)}
.cs-studies p{font-size:14.5px;line-height:1.58;color:var(--muted)}
/* The wireframes (Google Pay), three sheets side by side. */
.cs-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cs-trio img{width:100%;aspect-ratio:1009/1600;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
/* ---------- WEB VS MOBILE WEB (Scheduler): one row per difference ----------
A real table on a wide screen; under 600px each row stacks, and every cell
names its column (data-k) so nothing scrolls sideways. */
.cs-vs{width:100%;margin-top:clamp(26px,3vw,34px);border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left;overflow:hidden}
.cs-vs th,.cs-vs td{padding:14px 18px;vertical-align:top;border-top:1px solid var(--line-2);font-size:clamp(14.5px,1.15vw,16px);line-height:1.5}
.cs-vs thead th{border-top:0;font:700 11.5px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.cs-vs tbody th{width:24%;font-weight:700;color:var(--ink)}
.cs-vs td{color:var(--text)}
@media (max-width:600px){
.cs-vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-vs,.cs-vs tbody,.cs-vs tr,.cs-vs th,.cs-vs td{display:block;width:auto}
.cs-vs tr+tr{border-top:1px solid var(--line-2)}
.cs-vs th,.cs-vs td{border-top:0;padding:3px 16px}
.cs-vs tbody th{width:auto;padding-top:16px}
.cs-vs td:last-child{padding-bottom:16px}
.cs-vs td::before{content:attr(data-k);display:block;margin-top:8px;font:700 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
}
/* ---------- A SLOT WAITING ON ARTWORK (Scheduler, 2026-10-01) ----------
The owner supplies these screens later. Each box says what goes there, the
file to save it as and its size, so the swap is mechanical. Only a slot
whose render is genuinely coming gets one (CLAUDE.md): verify-case.js holds
each page to its PENDING count, and every other page to zero. */
.cs-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:var(--ar,16/10);padding:clamp(16px,3vw,32px);text-align:center;
border:2px dashed color-mix(in srgb,var(--acc) 40%,var(--line));border-radius:7px;background:var(--acc-soft);color:var(--ink)}
.cs-ph svg{width:30px;height:30px;flex:none;color:var(--acc)}
.cs-ph b{font:700 clamp(15px,1.5vw,20px)/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.cs-ph span{max-width:34em;font-size:clamp(13px,1.1vw,15px);line-height:1.45;color:var(--muted);text-wrap:balance}
.cs-ph code{max-width:100%;font:500 12px/1.4 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere}
/* A phone screen's slot: the .cs-dev silhouette, dashed. */
.cs-ph--phone{--ar:600/1238;max-width:250px;margin:0 auto;border-radius:16.5% / 8%;padding:18px 14px;gap:7px}
.cs-ph--phone b{font-size:14.5px}
.cs-ph--phone span{font-size:12.5px}
.cs-ph--phone code{font-size:11px;padding:3px 6px}
/* ---------- THE PHONE FRAME (Scheduler, 2026-10-01) ----------
The owner's ask: a thin black stroke, and inside it the screen on its own
radius. Screens are 720x1600 (build-scheduler.js). The bezel is padding,
so its % is of .cs-phone's width (the containing block), and each radius
is set per axis so the corners come out round: a 2.8% bezel, a screen
radius of 11.5% of the screen's own width, the frame's = screen's + bezel. */
.cs-phone{width:100%;max-width:280px;margin:0 auto}
.cs-phone-bz{display:block;padding:2.8%;border-radius:13.66% / 6.34%;background:#0b0b0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 16px 30px -16px rgba(0,0,0,.5)}
html.dark .cs-phone-bz{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 16px 30px -16px rgba(0,0,0,.8)}
.cs-phone-sc{position:relative;display:block;aspect-ratio:var(--sar,720/1600);border-radius:11.5% / 5.18%;overflow:hidden;background:#fff}
.cs-phone-sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A web window and its phone, side by side (Scheduler's hero and states).
In the hero the phone column is 290px, so it stays a 280px phone. */
.cs-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:clamp(20px,3vw,36px);align-items:center}
.cs-lead .cs-duo--lead{grid-template-columns:minmax(0,1fr) minmax(0,290px)}
/* A booking window on its own (Scheduler's flow) is held to 760px, the width
at which its 2x export reads at about its own size; the figure narrows
with it, so the caption keeps the window's left edge. */
.cs-fig.cs-modal{max-width:760px;margin-inline:auto}
.cs-frame--white{background:#fff}
@media (max-width:760px){
.cs-duo{grid-template-columns:1fr;gap:22px}
.cs-duo .cs-phone{max-width:230px}
/* The hero stays a pair on a phone, small like VOLA's three hero phones:
stacked, it pushed the film out of the second fold. */
.cs-lead .cs-duo--lead{grid-template-columns:minmax(0,1fr) minmax(0,31%);gap:12px}
.cs-duo--lead .cs-phone{max-width:none}
}
/* ============================================================
RECURRING SERVICE (2026-10-06)
============================================================ */
/* ---------- MORE THAN ONE CANVAS ----------
Every group of screens that tells one idea (the card's four states, the
six statuses, the four pop-ups, the four lists, the three platforms, the
two phone runs) is its own Figma-like canvas: boards.js, one per
[data-boards]. The owner, 2026-10-06: "keep it a bit big, scrollable or
draggable like Figma, so it's the best experience to present". A little
taller than AIWB's, and the full-screen button is the presenting mode. */
.boards--tall{--bv-h:min(80vh,820px)}
/* Every screen on these canvases is a bare frame, as in Figma - phones
included, since most are full-length scroll captures (up to 10,701 rows)
that no device frame could hold. A hairline that stays one screen pixel
at any zoom marks the edge of the white ones. No radius: the frame is a
level-0 image with zoom strips laid over it, and a radius on one would
not clip the others. */
.boards.is-live .board--shot{box-shadow:0 0 0 calc(1px / var(--s,1)) rgba(255,255,255,.14)}
.board--shot img{background:#fff}
/* ---------- A WINDOW THAT SCROLLS (Recurring Service, 2026-10-06) ----------
A screen far taller than the window (step 3, the job: 2880x4266 at 2x) is
read by scrolling inside its Mac window, as on the real screen, rather
than standing 1,300px tall on the page. It is a tab stop with a name, so
the keyboard can scroll it too; at its ends the scroll hands on to the
page. */
.win-media.cs-scroll{max-height:min(72vh,680px);overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent;background:#fff}
.win-media.cs-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.cs-scroll-hint{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:500 12.5px/1 var(--sans);color:var(--muted)}
.cs-scroll-hint svg{width:14px;height:14px;transform:rotate(90deg);color:var(--acc)}
/* A slot still waiting on its screen: the dashed box, at the board's size.
Without the script it stands in the sideways row at the row's height. */
.board--ph .cs-ph{max-width:none;height:min(56vh,480px);width:auto;border-radius:10px}
.boards.is-live .board--ph{container-type:size}
.boards.is-live .board--ph .cs-ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;overflow:hidden;
padding:6cqmin;gap:2cqmin;border-width:calc(2px / var(--s,1));border-radius:calc(10px / var(--s,1))}
.boards.is-live .board--ph .cs-ph svg{width:min(calc(30px / var(--s,1)),10cqmin);height:auto}
.boards.is-live .board--ph .cs-ph b{font-size:min(calc(16px / var(--s,1)),6cqi)}
.boards.is-live .board--ph .cs-ph span{font-size:min(calc(13px / var(--s,1)),4.6cqi)}
.boards.is-live .board--ph .cs-ph code{font-size:min(calc(11.5px / var(--s,1)),3.8cqi);padding:.3em .6em;border-width:calc(1px / var(--s,1))}
.boards.is-live .board--ph .cs-ph--phone{border-radius:16.5% / 8%}
/* ---------- THE PATH: boxes in order, with arrows between ----------
How it works: before the yes, and after it. A row on a wide screen, a
column under 760px. */
.cs-path{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:26px;margin-top:16px;counter-reset:p}
.cs-path li{position:relative;padding:14px 14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left}
.cs-path li:not(:last-child)::after{content:'';position:absolute;right:-20px;top:50%;width:14px;height:14px;margin-top:-7px;
background:var(--faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cs-path b{display:block;font:700 15px/1.3 var(--sans);color:var(--ink)}
.cs-path span{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.cs-path .key{border-color:var(--acc);background:var(--acc-soft);box-shadow:inset 0 3px 0 var(--acc)}
.cs-path-loop{display:flex;align-items:center;gap:8px;margin-top:14px;font:500 13.5px/1.4 var(--sans);color:var(--muted)}
.cs-path-loop svg{width:16px;height:16px;flex:none;color:var(--acc)}
/* The three answers a customer can give. */
.cs-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.cs-answers li{padding:12px 14px;border-radius:10px;border:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--muted);text-align:left}
.cs-answers b{display:block;font:700 14.5px/1.3 var(--sans);color:var(--ink);margin-bottom:3px}
.cs-answers .yes{border-color:var(--did);background:var(--did-bg)}
.cs-answers .yes b{color:var(--did)}
@media (max-width:760px){
.cs-path{grid-template-columns:1fr;gap:22px}
.cs-path li:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-19px;margin:0;transform:rotate(90deg)}
.cs-answers{grid-template-columns:1fr}
}
/* ---------- TWO SMALL CHARTS: the weeks, and the tickets ----------
Single series each, so no legend: the title says what is plotted. The one
bar the story is about carries the accent, the rest are grey (dataviz
"emphasis"); every value is written beside its mark, so nothing hides in
a tooltip. Bars are 18px, square at the baseline and 4px round at the
data end; gridlines are 1px hairlines. */
.cs-chart{margin-top:clamp(26px,3vw,34px);padding:20px clamp(16px,2.4vw,26px) 22px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left}
.cs-chart h3{font:700 15.5px/1.3 var(--sans);color:var(--ink)}
.cs-chart>p{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cs-chart-src{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--faint)}
.cs-gantt,.cs-bars{--mark:#c4c8cd;margin-top:18px}
html.dark .cs-gantt,html.dark .cs-bars{--mark:#4a4f56}
/* The timeline: 30 Mar to 24 Jun 2026 is 86 days; each bar is placed by
--a (start day) and --b (end day) on that scale. */
.cs-gantt,.cs-gantt ol{position:relative;display:grid;gap:10px}
.cs-gantt-axis,.cs-gantt li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:14px;align-items:center}
.cs-gantt-axis{font:500 12px/1 var(--sans);color:var(--faint)}
.cs-gantt-ticks{position:relative;height:14px;border-bottom:1px solid var(--line)}
.cs-gantt-ticks span{position:absolute;left:calc(var(--a) / 86 * 100%);transform:translateX(-50%);white-space:nowrap}
.cs-gantt-ticks span:first-child{transform:none}
.cs-gantt-ticks span:last-child{transform:translateX(-100%)}
.cs-gantt li>span{font:500 14px/1.3 var(--sans);color:var(--text)}
.cs-gantt li.key>span{font-weight:700;color:var(--ink)}
.cs-gantt-track{position:relative;height:30px;background:linear-gradient(var(--line-2),var(--line-2)) 0 50% / 100% 1px no-repeat}
.cs-gantt-bar{position:absolute;top:6px;height:18px;left:calc(var(--a) / 86 * 100%);width:calc((var(--b) - var(--a)) / 86 * 100%);border-radius:0 4px 4px 0;background:var(--mark)}
.cs-gantt-dot{position:absolute;top:50%;left:calc(var(--a) / 86 * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;transform:rotate(45deg);border-radius:2px;background:var(--mark);box-shadow:0 0 0 2px var(--card)}
.cs-gantt .key .cs-gantt-dot{background:var(--acc-fill)}
.cs-gantt-val{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--b, var(--a)) / 86 * 100% + 12px);white-space:nowrap;font:500 12.5px/1 var(--sans);color:var(--muted)}
.cs-gantt .key .cs-gantt-val{color:var(--ink);font-weight:700}
.cs-gantt .far .cs-gantt-val{left:auto;right:calc(100% - var(--a) / 86 * 100% + 10px)}
/* The tickets: one row per team, the longest bar the full track. */
.cs-bars{display:grid;gap:10px}
.cs-bars li{display:grid;grid-template-columns:minmax(80px,120px) minmax(0,1fr);gap:14px;align-items:center}
.cs-bars li>span{font:500 14px/1.3 var(--sans);color:var(--text)}
.cs-bars-track{display:flex;align-items:center;gap:10px;min-width:0}
.cs-bars-track i{display:block;height:18px;width:calc(var(--v) / 38 * (100% - 40px));min-width:4px;border-radius:0 4px 4px 0;background:var(--mark)}
.cs-bars-track b{font:700 13.5px/1 var(--sans);color:var(--ink)}
.cs-bars .key i{background:var(--acc-fill)}
@media (max-width:560px){
.cs-gantt-axis,.cs-gantt li{grid-template-columns:1fr;gap:6px}
.cs-gantt-axis>span:first-child,.cs-gantt-ticks .alt{display:none}
.cs-gantt li{gap:4px}
}
/* ---------- WHERE IT LANDED ---------- */
.cs-landed{margin-top:clamp(26px,3vw,34px);padding:8px clamp(20px,3vw,32px);border-radius:16px;background:var(--land-bg);text-align:left}
.cs-landed li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;padding:18px 0}
.cs-landed li+li{border-top:1px solid var(--line)}
.cs-landed .ck{width:22px;height:22px;margin-top:2px;color:var(--did)}
.cs-landed .num{display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:6px;border:1.5px solid var(--did);color:var(--did);font:500 14px/1 var(--serif)}
.cs-landed p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;color:var(--text)}
.cs-landed p b{color:var(--ink)}
/* ---------- WHAT IT TAUGHT ME ---------- */
.cs-learn{margin-top:clamp(26px,3vw,34px);display:grid;gap:22px;text-align:left}
.cs-learn p{font-size:var(--fs-body);line-height:1.55;color:var(--text);text-wrap:pretty}
.cs-learn b{color:var(--ink)}
/* ---------- UP NEXT: the homepage's work window ---------- */
.cs-next-card{display:block;max-width:760px;margin:clamp(24px,2.6vw,32px) auto 0;text-decoration:none;color:var(--ink);background:var(--win);border-radius:16px;padding:0 10px 16px;box-shadow:var(--shadow-win);transition:transform .35s var(--ease)}
.cs-next-card:hover,.cs-next-card:focus-visible{transform:translateY(-4px)}
.cs-next-media{position:relative;display:block;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#0b0b0b}
.cs-next-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-next-foot{display:flex;align-items:center;gap:14px;padding:16px 6px 0;text-align:left}
.cs-next-foot>span:first-child{flex:1;min-width:0}
.cs-next-foot b{display:block;font:700 clamp(18px,1.6vw,22px)/1.25 var(--sans);color:var(--ink)}
.cs-next-foot em{display:block;margin-top:4px;font-style:normal;font-size:14.5px;line-height:1.45;color:var(--muted)}
.cs-next-foot .go{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--acc-fill);color:var(--on-acc);transition:transform .3s var(--ease)}
.cs-next-foot .go svg{width:18px;height:18px}
.cs-next-card:hover .go{transform:translateX(3px)}
/* ============================================================
THE CONTACT CARD - the homepage's portrait card, without its yellow
band, marquee or stickers.
============================================================ */
.cs-contact{padding:var(--sec-y) clamp(12px,2vw,30px) 0}
.cta-card{position:relative;max-width:1240px;margin:0 auto;border-radius:24px;overflow:hidden;min-height:min(70vh,620px);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.6vw,36px)}
.cta-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cta-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,10,.66),rgba(10,20,10,.2) 45%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,0) 45%)}
.cta-card>*:not(img){position:relative;z-index:1}
.cta-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.socials{display:flex;gap:8px}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.socials a:hover{background:rgba(255,255,255,.32)}
.socials svg{width:18px;height:18px}
.cta-q{text-align:right;font:500 clamp(15px,1.3vw,18px)/1.35 var(--sans);text-shadow:0 1px 14px rgba(0,0,0,.4)}
.cta-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.cta-bottom h2{font:900 clamp(34px,min(4.4vw,8.6vh),76px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.012em;word-spacing:.06em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.cta-bottom h2 span{display:block}
.cta-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 22px;border-radius:999px;background:#fff;color:#151515;text-decoration:none;font:700 15.5px/1 var(--sans);box-shadow:0 10px 22px -12px rgba(0,0,0,.5);white-space:nowrap}
.cta-btn svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.cta-btn:hover svg{transform:translateX(3px)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;max-width:1240px;margin:0 auto;padding:22px 8px calc(var(--dock-top) + 18px);font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.foot .wordmark{font:800 clamp(17px,1.5vw,21px)/1 var(--display);letter-spacing:-.02em;text-transform:none;text-decoration:none;color:var(--ink);white-space:nowrap}
.foot .wordmark sup{font-size:.55em;vertical-align:.7em;margin-left:1px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:var(--text)}
.foot nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* ============================================================
ENTRANCES - a quiet rise, guarded by html.js; the inline failsafe in
each page's drops html.js if case.js never reports in.
============================================================ */
html.js .rise{opacity:0;transform:translateY(18px)}
html.js .rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
/* ============================================================
NARROW
============================================================ */
@media (max-width:980px){
.cs-stats{--n:2 !important}
.cs-stats li:nth-child(odd){border-left:0}
.cs-stats li:nth-child(n+3){border-top:1px solid var(--line-2)}
.cs-install{grid-template-columns:1fr}
.cs-studies{--n:2}
}
@media (max-width:900px){
.cs-phones{padding:22px 0}
.cs-phones ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;padding:0 20px;scroll-padding-inline:20px;overscroll-behavior-x:contain}
.cs-phones ul::-webkit-scrollbar{display:none}
.cs-phones ul:focus-visible{outline-offset:-3px}
.cs-phones li{flex:0 0 min(50vw,190px);scroll-snap-align:center}
.cs-swipe{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font:500 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-swipe svg{width:14px;height:14px}
}
@media (max-width:760px){
.cs-top{padding-top:62px}
.pill{padding:0 14px;font-size:14px;white-space:nowrap}
.cs-back{font-size:15px;gap:8px}
.cs-meta{grid-template-columns:1fr;gap:22px}
.cs-lead-phones{gap:10px}
.cs-lead-phones p{margin-top:12px;font-size:12.5px;line-height:1.4}
.cs-lead-phones p b{margin-bottom:2px;font-size:14px}
.cs-kicker{flex-direction:column;gap:18px}
.cs-lead-phones .cs-dev{max-width:none}
.cs-lead-crop{aspect-ratio:4/3}
.cs-lead-boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-lead-board{aspect-ratio:4/3}
.win{border-radius:11px;padding:0 7px 7px}
.win-bar{padding:8px 2px}
.win-bar i{width:8px;height:8px}
.win-url{font-size:10.5px;padding:5px 8px;margin-left:6px}
.cs-stats{--n:1 !important}
.cs-stats li{border-left:0 !important}
.cs-stats li+li{border-top:1px solid var(--line-2)}
.cs-table li{grid-template-columns:1fr;gap:6px;padding:18px 2px}
.cs-split{grid-template-columns:1fr}
.cs-now{border-left:0;border-top:1px solid var(--line-2)}
/* Stacked, the arrow is its own zero-height row between the halves. */
.cs-split-go{position:relative;left:auto;top:auto;margin:-18px auto;transform:rotate(90deg)}
.cs-quote{align-items:flex-start;padding:20px}
.cs-quote img{width:56px;height:56px}
.cs-rule{grid-template-columns:1fr}
.cs-recipe{grid-template-columns:1fr}
.cs-calls{grid-template-columns:1fr}
.cs-studies{--n:1 !important}
.cs-feat,.cs-feat:nth-child(even){grid-template-columns:1fr}
.cs-feat-media .cs-dev{max-width:220px}
.cs-feat:nth-child(even) .cs-feat-media{order:0}
.cs-routes{grid-template-columns:1fr}
.cs-bench-hint{display:block}
.cs-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cs-boards{columns:2 140px;column-gap:10px}
.cs-boards figure{margin-bottom:10px}
.cs-next-foot em{display:none}
.cta-card{min-height:560px}
.cta-card>img{object-position:44% 30%}
.cta-card::after{background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.05) 60%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%)}
.cta-q{display:none}
.cta-bottom{flex-direction:column;align-items:flex-start}
.cta-bottom h2{font-size:clamp(32px,10vw,44px)}
.foot{flex-direction:column;align-items:flex-start}
/* Five links: three and two, never four and a lone FAQs. */
.foot nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}
}
.pn-s{display:none}
@media (max-width:400px){.pn{display:none}.pn-s{display:inline}}
@media (pointer:coarse){
.foot nav{gap:0 22px}
.foot nav a{display:inline-block;padding:16px 8px;margin:0 -8px}
.foot .wordmark{display:inline-block;padding:14px 10px;margin:-14px -10px}
}
/* ============================================================
THE NINE-PART CASE STUDY (the owner, 2026-10-07)
Every case study, in one order: title, a short description, the film,
ONE core screen, then the problem, ideation, the solution, the effort
and the business outcome - nothing else. The screens live inside those
folds: prototype loops (build-loops.js, loops.js) show the product
moving, and one canvas per page holds every screen there is.
============================================================ */
/* The facts under the description: one quiet row, not a band. */
.cs-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;margin:clamp(22px,2.2vw,30px) auto 0;padding:0;list-style:none}
.cs-facts li{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:16em;font-size:clamp(14.5px,1.1vw,16px);line-height:1.35;color:var(--text);text-wrap:balance}
.cs-facts .k{color:var(--muted)}
/* A fold's number rides in front of its label: 01 to 06 after the film. */
.cs-label .n{margin-right:.7em;color:var(--acc);font-variant-numeric:tabular-nums}
/* ---------- THE LOOPS ----------
A prototype loop is a muted looping video in the same frames as a still:
the Mac window for the web, the black-stroke phone for the app. Its first
frame is its poster, so nothing jumps when it starts or wraps. */
.cs-loop{position:relative}
.win-media.cs-loop{aspect-ratio:var(--ar,16/10);background:#fff}
.cs-loop video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.cs-phone-sc.cs-loop video{position:absolute;inset:0}
.cs-loop-btn{position:absolute;right:8px;bottom:8px;z-index:3;width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.cs-loop-btn::before{content:'';position:absolute;inset:6px;border-radius:50%;background:rgba(17,17,17,.66);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 4px 12px rgba(0,0,0,.25)}
.cs-loop-btn svg{position:relative;width:12px;height:12px}
.cs-loop-btn .i-play{display:none}
.cs-loop-btn:focus-visible{outline:3px solid var(--focus);outline-offset:-2px}
html:not(.js) .cs-loop-btn{display:none}
@media (hover:hover) and (pointer:fine){
.cs-loop-btn{opacity:0;transition:opacity .2s var(--ease)}
.cs-loop:hover .cs-loop-btn,.cs-loop-btn:focus-visible{opacity:1}
}
/* ONE AT A TIME (loops.js): the loop that plays shows its progress along
the bottom and a small pause button; every other loop rests on its first
frame under a soft scrim with a centred Play - the owner's "play button
inside the screens for the other screens". */
.cs-loop::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(12,12,14,.28);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.cs-loop.is-live.is-paused::after{opacity:1}
.cs-loop:not(.is-playing) .cs-loop-btn{display:none}
/* Small frosted glass, not a heavy disc (the owner, 2026-10-08: "just keep a
small play button with light opacity background ... clean & cool"). 44px
is the touch target, so it is the same size on every screen. */
.cs-loop-play{position:absolute;left:50%;top:50%;z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;
background:rgba(12,12,14,.3);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);color:#fff;cursor:pointer;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 6px 18px -6px rgba(0,0,0,.35);transition:transform .2s var(--ease),opacity .25s var(--ease),background .2s}
.cs-loop-play svg{width:18px;height:18px;margin-left:2px}
@media (hover:hover){.cs-loop-play:hover{transform:scale(1.08);background:rgba(12,12,14,.44)}}
.cs-loop-play:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cs-loop.is-playing .cs-loop-play{opacity:0;pointer-events:none;transform:scale(.85)}
.cs-loop-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(0,0,0,.08);opacity:0;transition:opacity .25s var(--ease)}
.cs-loop-bar i{display:block;height:100%;background:var(--acc-fill);transform-origin:0 50%;transform:scaleX(0)}
.cs-loop.is-playing .cs-loop-bar{opacity:1}
.cs-phone-sc.cs-loop .cs-loop-bar{bottom:0;left:6%;right:6%;border-radius:3px}
/* Phones in pairs (or threes): side by side, each with its caption. */
.cs-proto-phones{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(20px,4vw,56px);max-width:var(--pw,720px);margin:clamp(30px,3.4vw,44px) auto 0;text-align:left}
/* One phone loop beside the list it demonstrates (VOLA, Google Pay). */
.cs-proto-side{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(28px,3.2vw,40px);text-align:left}
.cs-proto-side>figure{margin:0}
.cs-proto-side .cs-table{margin-top:0}
.cs-proto-side .cs-install{grid-template-columns:1fr;margin-top:0}
/* The web loop beside one phone loop (Scheduler): window, then phone. */
.cs-proto-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:clamp(20px,3.4vw,44px);align-items:start;margin-top:clamp(28px,3.2vw,40px);text-align:left}
.cs-proto-duo>figure{margin:0}
.cs-proto-duo .cs-phone{max-width:270px}
.cs-proto-phones figure{margin:0}
.cs-proto-phones .cs-phone{max-width:300px}
.cs-proto-phones .cs-cap{max-width:300px;margin-inline:auto}
/* A narrow panel (the AIWB builder) in a Mac window beside a phone. */
.cs-panel.win{max-width:300px;margin:0 auto}
/* ---------- ONE CANVAS, EVERY SCREEN ----------
Group titles over each block, as Figma names its sections; the chips
jump to a group (data-chips="groups"). */
.board-gt{display:none}
.boards.is-live .board-gt{display:block;position:absolute;width:0;height:0;pointer-events:none}
.boards.is-live .board-gt span{position:absolute;left:0;bottom:0;padding-bottom:30px;transform-origin:0 100%;transform:scale(calc(1 / var(--s,1)));
white-space:nowrap;font:700 14px/1 var(--sans);letter-spacing:.01em;color:#fff}
.boards.is-far .board figcaption{visibility:hidden}
.boards--every{--bv-h:min(84vh,860px)}
@media (max-width:760px){
.cs-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;text-align:center}
.cs-proto-phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 4px;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain}
.cs-proto-phones::-webkit-scrollbar{display:none}
.cs-proto-phones figure{flex:0 0 min(68vw,260px);scroll-snap-align:center}
.boards--every{--bv-h:min(74vh,620px)}
.cs-proto-duo,.cs-proto-side{grid-template-columns:1fr}
.cs-proto-side>figure{max-width:280px;margin:0 auto}
.cs-proto-duo .cs-phone{max-width:260px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
html.js .rise{opacity:1;transform:none}
}
@media print{
.dock,.site-mark,.cs-top,.cs-contact,.cs-next-card,.cs-swipe,.cs-bench-hint{display:none!important}
html.js .rise{opacity:1;transform:none}
}
/* ============================================================
DEPTH (the owner, 2026-10-13, after a design team turned the portfolio
down for showing "the final output, not the thinking"). The nine parts
stay; inside them each case study now shows how it got there: a
30-second summary, the evidence for the problem, the calls that were
made with the option each one killed, before/after sliders, the flow,
annotated screens, how it was checked, and what I would do again.
Nothing here is decoration: every block carries a decision or a fact.
============================================================ */
/* ---------- THE 30-SECOND VERSION, in the hero ----------
Problem / what I did / result: the three lines a reviewer scans first. */
.cs-tldr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(26px,2.8vw,36px) auto 0;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow);text-align:left;overflow:hidden}
.cs-tldr li{padding:20px 22px 22px}
.cs-tldr li+li{border-left:1px solid var(--line-2)}
.cs-tldr p{margin-top:8px;font-size:clamp(15px,1.15vw,16.5px);line-height:1.55;color:var(--text);text-wrap:pretty}
.cs-tldr p b{color:var(--ink)}
@media (max-width:760px){
.cs-tldr{grid-template-columns:1fr}
.cs-tldr li+li{border-left:0;border-top:1px solid var(--line-2)}
}
/* ---------- HOW I KNEW: the evidence for the problem ----------
One row per source: what it was, and what it showed. */
.cs-evidence{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:14px;margin-top:clamp(26px,3vw,34px);text-align:left}
.cs-evidence li{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cs-evidence .src{display:inline-flex;align-items:center;gap:7px;font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.cs-evidence .src svg{width:15px;height:15px;flex:none}
.cs-evidence b{font:700 16px/1.35 var(--sans);color:var(--ink);text-wrap:balance}
.cs-evidence p{font-size:14.5px;line-height:1.58;color:var(--muted);text-wrap:pretty}
@media (max-width:860px){.cs-evidence{grid-template-columns:1fr}}
/* ---------- A DECISION: the question, the option killed, the one kept,
why, and what it cost ----------
The killed card is struck through in --was, the kept one ticked in
--did; the slider (below) shows both when there is a picture of each. */
.cs-decisions{display:grid;gap:clamp(28px,3.4vw,44px);margin-top:clamp(28px,3.2vw,40px);text-align:left;counter-reset:dec}
.cs-decide{padding:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.cs-decide-q{display:flex;gap:14px;align-items:baseline}
.cs-decide-q .n{flex:none;font:500 clamp(22px,2vw,28px)/1 var(--serif);color:var(--acc)}
.cs-decide-q h3{font:700 clamp(18px,1.7vw,22px)/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.cs-opts{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:12px;margin-top:18px}
.cs-opt{position:relative;padding:16px 16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.cs-opt .st{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.cs-opt .st svg{width:14px;height:14px}
.cs-opt.killed .st{color:var(--was)}
.cs-opt.kept{border-color:var(--did);background:var(--did-bg)}
.cs-opt.kept .st{color:var(--did)}
.cs-opt b{display:block;margin-top:10px;font:700 15.5px/1.35 var(--sans);color:var(--ink);text-wrap:balance}
.cs-opt.killed b{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--was) 55%,transparent);text-decoration-thickness:1.5px}
.cs-opt p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.cs-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.cs-why p{font-size:15px;line-height:1.6;color:var(--text);text-wrap:pretty}
.cs-why p b{display:block;margin-bottom:4px;font:700 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cs-decide .cs-compare-fig,.cs-decide .cs-fig{margin-top:20px}
@media (max-width:760px){
.cs-opts,.cs-why{grid-template-columns:1fr}
}
/* ---------- BEFORE / AFTER: a slider over two pictures ----------
The after picture is the base; the before sits on top, cut at --pos.
Drag anywhere on it (a pointer drag, so a phone still scrolls the page
upright - touch-action:pan-y), or use the arrow keys on the hidden
range input, which is the real control and carries the label. With no
script it is the two pictures side by side, each labelled. */
.cs-compare-fig{margin-top:clamp(26px,3vw,36px);text-align:left}
.cs-compare{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-compare>.cs-cmp-pane{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--cmp-bg,#fff)}
.cs-compare img{display:block;width:100%;height:auto}
.cs-cmp-tag{position:absolute;top:10px;z-index:3;padding:6px 9px;border-radius:7px;font:700 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;background:rgba(11,11,12,.78);color:#fff;pointer-events:none}
.cs-cmp-pane.before .cs-cmp-tag{left:10px;background:var(--was)}
.cs-cmp-pane.after .cs-cmp-tag{right:10px;background:var(--did)}
html.dark .cs-cmp-pane.before .cs-cmp-tag{color:#1d1413}
html.dark .cs-cmp-pane.after .cs-cmp-tag{color:#0c1a10}
.cs-cmp-range,.cs-cmp-line,.cs-cmp-hint{display:none}
html.js .cs-compare.is-live{display:block;aspect-ratio:var(--ar,16/10);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--cmp-bg,#fff);
cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow)}
html.js .cs-compare.is-live>.cs-cmp-pane{position:absolute;inset:0;border:0;border-radius:0}
html.js .cs-compare.is-live>.cs-cmp-pane img{width:100%;height:100%;object-fit:cover;object-position:var(--op,top)}
/* The pictures never take the pointer: pressed, an ![]()
starts the browser's
own image drag (a ghost copy follows the cursor), which cancels the pointer
after one move and froze the split. */
html.js .cs-compare.is-live{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.js .cs-compare.is-live img{pointer-events:none;-webkit-user-drag:none}
html.js .cs-compare.is-live>.cs-cmp-pane.before{z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
html.js .cs-compare.is-live .cs-cmp-line{display:block;position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:4;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
html.js .cs-compare.is-live .cs-cmp-line i{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;color:#111;
display:grid;place-items:center;box-shadow:0 6px 16px -4px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.08)}
html.js .cs-compare.is-live .cs-cmp-line svg{width:22px;height:22px}
html.js .cs-compare.is-live .cs-cmp-range{display:block;position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
html.js .cs-compare.is-live:focus-within .cs-cmp-line i{box-shadow:0 0 0 3px var(--focus),0 6px 16px -4px rgba(0,0,0,.4)}
html.js .cs-compare.is-live .cs-cmp-hint{display:block;position:absolute;left:50%;bottom:12px;z-index:4;transform:translateX(-50%);padding:6px 10px;border-radius:999px;font:600 12px/1 var(--sans);color:#fff;background:rgba(11,11,12,.7);pointer-events:none;transition:opacity .3s}
html.js .cs-compare.is-live.touched .cs-cmp-hint{opacity:0}
@media (max-width:560px){html.js .cs-compare.is-live{aspect-ratio:var(--ar-m,var(--ar,16/10))}}
/* ---------- ANNOTATED SCREEN: numbered pins on the picture, the notes
beside it (under it on a phone). Each pin and its note share a number. */
.cs-annot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start;margin-top:clamp(28px,3.2vw,40px);text-align:left}
.cs-annot.phone{grid-template-columns:minmax(0,300px) minmax(0,1fr);justify-content:center}
.cs-annot-pic{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.cs-annot.phone .cs-annot-pic{border-radius:22px;border:6px solid #0b0b0c}
.cs-annot-pic img{display:block;width:100%;height:auto}
.cs-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:grid;place-items:center;
font:700 13px/1 var(--sans);color:var(--on-acc);background:var(--acc-fill);box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.3)}
.cs-annot ol{display:grid;gap:14px;counter-reset:an}
.cs-annot li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px}
.cs-annot li::before{counter-increment:an;content:counter(an);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--sans);color:var(--on-acc);background:var(--acc-fill)}
.cs-annot li p{font-size:15px;line-height:1.55;color:var(--muted)}
.cs-annot li b{display:block;font:700 15.5px/1.35 var(--sans);color:var(--ink);margin-bottom:3px}
@media (max-width:860px){.cs-annot,.cs-annot.phone{grid-template-columns:1fr}.cs-annot.phone .cs-annot-pic{max-width:300px;margin-inline:auto}}
/* ---------- HOW IT WAS CHECKED: method, what it found, what changed ----------
A real table on a wide screen; stacked, labelled rows under 760px. */
.cs-checks{width:100%;margin-top:clamp(26px,3vw,34px);border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left;overflow:hidden}
.cs-checks th,.cs-checks td{padding:15px 18px;vertical-align:top;font-size:15px;line-height:1.55;color:var(--text)}
.cs-checks thead th{font:700 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:var(--panel);border-bottom:1px solid var(--line)}
.cs-checks tbody tr+tr td,.cs-checks tbody tr+tr th{border-top:1px solid var(--line-2)}
.cs-checks tbody th{font:700 15px/1.4 var(--sans);color:var(--ink);width:26%}
.cs-checks td b{color:var(--ink)}
.cs-checks .chg{color:var(--did);font-weight:600}
@media (max-width:760px){
.cs-checks thead{display:none}
.cs-checks tr{display:block;padding:14px 16px}
.cs-checks tbody tr+tr{border-top:1px solid var(--line-2)}
.cs-checks th,.cs-checks td{display:block;width:auto;padding:4px 0;border:0!important}
.cs-checks tbody th{width:auto;font-size:16px}
.cs-checks td::before{content:attr(data-k);display:block;font:700 10.5px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:6px}
}
/* ---------- WHAT I WOULD DO AGAIN, AND DIFFERENTLY ---------- */
.cs-reflect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,3vw,34px);text-align:left}
.cs-reflect>div{padding:20px 22px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cs-reflect>div.again{background:var(--did-bg);border-color:transparent}
.cs-reflect>div.diff{background:var(--acc-soft);border-color:transparent}
.cs-reflect ul{display:grid;gap:10px;margin-top:12px}
.cs-reflect li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;color:var(--text)}
.cs-reflect li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.cs-reflect li b{color:var(--ink)}
@media (max-width:760px){.cs-reflect{grid-template-columns:1fr}}
/* A sub-head that opens a block inside a fold (Research, The calls, ...):
the same label style as a fold's, smaller, centred. */
.cs-kick{margin:clamp(44px,5vw,64px) 0 0;text-align:center}
.cs-kick .k{color:var(--acc)}
.cs-kick h3{margin-top:8px;font:700 clamp(20px,1.9vw,26px)/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.cs-kick p{max-width:40em;margin:10px auto 0;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;color:var(--muted);text-wrap:pretty}
/* ---------- THE LEDGER: a contract, visit by visit, before the feature ----------
Each visit a small card with the two things the office made by hand. */
.cs-ledger{margin-top:clamp(26px,3vw,34px);padding:clamp(18px,2.4vw,24px);border:1px solid var(--line);border-radius:16px;background:var(--panel);text-align:left}
.cs-ledger figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:14px}
.cs-ledger figcaption span:last-child{font-size:14.5px;color:var(--muted)}
.cs-ledger ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cs-ledger li{display:flex;flex-direction:column;gap:5px;padding:9px 9px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line-2)}
.cs-ledger li b{font:700 12.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.cs-ledger li span{font:600 11px/1 var(--sans);padding:5px 6px;border-radius:5px;border:1px dashed color-mix(in srgb,var(--was) 55%,transparent);color:var(--was);background:var(--was-bg);text-align:center}
@media (max-width:760px){.cs-ledger ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:380px){.cs-ledger ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A pair shown side by side, not as a slider (different heights). */
.cs-compare.static{align-items:start}
.cs-compare.static>.cs-cmp-pane{box-shadow:var(--shadow)}
@media (max-width:560px){.cs-compare.static{gap:8px}.cs-compare.static .cs-cmp-tag{font-size:9.5px;padding:5px 6px;top:6px}}
/* Tags never sit on the screen's own type: above each picture in a
side-by-side pair, in the bottom corners on a slider. */
.cs-compare.static>.cs-cmp-pane{border:0;background:none;box-shadow:none;overflow:visible;border-radius:0}
.cs-compare.static .cs-cmp-tag{position:static;display:inline-block;margin:0 0 10px}
.cs-compare.static img{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:#fff}
html.js .cs-compare.is-live .cs-cmp-tag{top:auto;bottom:12px}
html.js .cs-compare.is-live .cs-cmp-hint{bottom:auto;top:12px}
/* A slider is as wide as its picture wants to be read (--cmp-w). */
.cs-compare-fig .cs-compare{max-width:var(--cmp-w,100%);margin-inline:auto}
.cs-compare-fig .cs-cap{max-width:var(--cmp-w,100%);margin-inline:auto}
/* The 30-second version sits right under the film (the film keeps the first fold). */
.cs-look .cs-tldr{max-width:var(--col)}
@media (max-width:760px){
.cs-tldr{margin-top:20px}
.cs-tldr li{padding:12px 14px 13px}
.cs-tldr p{margin-top:4px;font-size:14.5px;line-height:1.48}
}
/* Several phone sliders side by side (Google Pay's first iteration vs final). */
.cs-compare-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(26px,3vw,34px)}
.cs-compare-row .cs-compare-fig{margin-top:0}
.cs-compare-row .cs-cap p{font-size:14px}
@media (max-width:860px){.cs-compare-row{grid-template-columns:minmax(0,340px);justify-content:center}}
/* ---------- BEFORE AND AFTER, SAID PLAINLY (2026-10-13) ----------
The owner, on the first sliders: "this is not clear". Every pair now says
which side is which twice: a tag on the picture and a legend under it, in
the same two colours. A small change is a stacked static crop with the
change ringed, never a slider (a slider over a one-line change shows
nothing moving). */
.cs-ba-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;max-width:var(--cmp-w,100%);margin:16px auto 0;text-align:left}
.cs-ba-legend p{margin:0;padding-left:12px;border-left:3px solid var(--was);font-size:14.5px;line-height:1.5;color:var(--text)}
.cs-ba-legend p.a{border-left-color:var(--did)}
.cs-ba-legend b{display:block;margin-bottom:2px;font:700 11.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--was)}
.cs-ba-legend p.a b{color:var(--did)}
.cs-ba-legend .note{grid-column:1/-1;padding:0;border:0;font-size:13px;color:var(--muted)}
@media (max-width:560px){.cs-ba-legend{grid-template-columns:1fr}}
.cs-ba-legend.one{grid-template-columns:1fr}
.cs-compare.static .cs-cmp-tag{display:inline-block}
.cs-compare.static.stack{grid-template-columns:minmax(0,1fr);gap:14px}
.cs-compare-row.two{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
@media (max-width:860px){.cs-compare-row.two{grid-template-columns:minmax(0,340px)}}