/* Campaign pages (/for-lawyers, /for-sales, /for-doctors, /for-students).
   Standalone on purpose: these receive paid traffic and loading the 90KB home
   stylesheet to use a tenth of it would cost the thing paid traffic is least
   forgiving about. Tokens are copied from styles.css rather than imported so
   there is one request. If a token changes there, change it here too. */

:root {
  color-scheme: only light;
  /* Storefront palette, sampled from scriben.ai: a neutral grey ground and near-black ink,
     not home's warm paper. Paid traffic lands here and buys there — the two should not look
     like different companies. */
  --paper: #efefef;
  --paper-deep: #e4e3e1;
  --cream: #fbfbfa;
  --ink: #1c1c1c;
  --muted: #6b6a67;
  --line: rgba(28, 28, 28, 0.14);
  --hair: rgba(28, 28, 28, 0.09);
  --brass: #b8833c;
  --brass-deep: #9c6c2c;
  --brass-text: #8a5f24;   /* 4.9:1 on the grey ground — --brass is 2.9:1 and fails */
  --brass-light: #e2c58e;
  --sale: #c8322f;
  /* A page with four identical black sections reads as one long black section. Forest is the
     second dark tone: same weight, different temperature, and it holds brass better than the
     near-black does. Used as a modifier ON .sec-dark so every .sec-dark child rule still applies. */
  --forest: #123a2d;
  --serif: "Playfair Display", "Iowan Old Style", Palatino, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shell: min(1200px, calc(100vw - 96px));
}

/* Playfair Display is the storefront's heading face. Self-hosted latin subset (38KB) rather
   than a Google Fonts link: a page that argues for privacy should not open with a request to
   a third party, and one less connection is one less thing between the ad click and the H1. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/playfair-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { max-width: 100%; }
a { color: inherit; }
:where(h1, h2, h3, h4) { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -.028em; line-height: 1.03; }
p { margin: 0; }
::selection { background: var(--brass-light); }

.shell { width: var(--shell); margin-inline: auto; }
.eyebrow { margin: 0; color: var(--brass-text); font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.lede { color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; }
.rule { height: 1px; margin: 0; border: 0; background: var(--line); }

/* ---- offer bar ----------------------------------------------------------- */
/* The storefront runs a promotional bar above its own header; a page that sells the same
   pen at a discount has to state the discount before anything else, or the visitor reads
   $199 in the hero and leaves before the offer appears. */
.promo-bar { background: var(--ink); color: #fff; }
.promo-marquee { display: flex; overflow: hidden; padding: 11px 0; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.promo-marquee ul { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; animation: camp-marquee 42s linear infinite; }
.promo-marquee:hover ul { animation-play-state: paused; }
.promo-marquee li { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; letter-spacing: .01em; }
.promo-marquee b { color: var(--brass-light); font-weight: 600; }
.promo-marquee s { color: rgba(255,255,255,.5); text-decoration-thickness: 1px; }
.promo-marquee > ul span { color: rgba(255,255,255,.62); }
.promo-marquee code { padding: 3px 9px; border: 1px dashed rgba(255,255,255,.42); border-radius: 4px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .13em; }
/* the separator between one run and the next */
.promo-marquee i { width: 5px; height: 5px; margin: 0 clamp(26px, 3vw, 46px); border-radius: 50%; background: var(--brass); }

/* Moving text is unreadable for some people, and this one is the offer. Hold still, show it
   once, and centre it. */
@media (prefers-reduced-motion: reduce) {
  .tab-panel, .btn, .btn > span[data-arrow], .camp-head nav a::after, .mosaic img, .flow li, .flow li::before, .ledger > div { transition: none !important; transform: none !important; }
  .js .flow li { opacity: 1; }
  .promo-marquee { justify-content: center; mask-image: none; }
  .promo-marquee ul { animation: none; }
  .promo-marquee ul ~ ul, .promo-marquee li ~ li { display: none; }
  .promo-marquee i { display: none; }
}

/* ---- header ------------------------------------------------------------- */
/* Reduced on purpose. Paid traffic arrives with one intent; a full site nav is
   an invitation to leave before the page has made its case. */
.camp-head { position: sticky; top: 0; z-index: 60; background: rgba(239,239,239,.93); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.camp-head > div { display: flex; align-items: center; gap: 22px; height: 66px; }
.camp-logo { display: grid; justify-items: start; gap: 3px; margin-right: auto; text-decoration: none; }
.camp-logo img { width: 104px; height: auto; }
.camp-logo span { padding-left: 1px; color: var(--brass-text); font-size: 9.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; line-height: 1; }
.camp-head nav { display: flex; gap: 24px; }
.camp-head nav a { color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 12.5px; letter-spacing: .03em; text-decoration: none; opacity: .72; transition: opacity .25s; }
.camp-head nav a { position: relative; }
.camp-head nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--brass-text); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); }
.camp-head nav a:hover { opacity: 1; }
.camp-head nav a:hover::after { transform: scaleX(1); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 13px 32px; border: 1px solid var(--brass); border-radius: 999px; background: var(--brass); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; will-change: transform;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,28,28,.16); }
.btn:active { transform: translateY(0); box-shadow: none; }
/* the arrow leans into the direction of travel rather than just sitting there */
.btn > span[data-arrow] { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover > span[data-arrow] { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(28,28,28,.06); border-color: rgba(28,28,28,.4); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #333; border-color: #333; }
.btn-sm { min-height: 44px; padding: 10px 22px; font-size: 11.5px; letter-spacing: .15em; }
:where(a, button, summary, input, textarea):focus-visible { outline: 3px solid var(--brass-light); outline-offset: 3px; }

/* ---- hero --------------------------------------------------------------- */
.hero { padding: clamp(30px, 3.4vw, 54px) 0 clamp(40px, 4.4vw, 68px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(34px, 4vw, 62px); align-items: start; }
.hero h1 { font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--brass-text); }
.hero .lede { max-width: 46ch; margin-top: 18px; }
/* The offer in the hero. "Get Scriben — $99" makes $99 look like the price; the saving is the
   argument, so both numbers and the code are set out before the button rather than inside it. */
.hero-offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; font-family: var(--serif); }
.hero-offer .offer-now { font-size: clamp(40px, 4.2vw, 58px); }
.hero-offer + .offer-code { margin-top: 10px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding-top: clamp(16px, 1.8vw, 24px); border-top: 1px solid var(--hair); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.hero-meta span { display: block; }
.hero-meta b { display: block; margin-bottom: 3px; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.02em; }
.hero-meta b { color: var(--ink); font-weight: 600; }

/* The hero film. Poster paints first and the film is fetched after load — paid traffic
   should be able to read the headline before it pays for four megabytes of video. */
.hero-film { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: #0c0c0e; box-shadow: 0 26px 66px rgba(23,23,20,.20); }
.hero-film video { display: block; width: 100%; height: auto; aspect-ratio: var(--film-ar, 16 / 9); object-fit: cover; }
/* One photograph per page, opposite the argument it belongs to. Not a card, not a grid. */
.shot { margin: 0; overflow: hidden; border-radius: 4px; background: var(--paper-deep); }
.shot img { display: block; width: 100%; height: auto; }

/* ---- marquees: trust logos and award badges ------------------------------ */
/* Both roll. A static row of six logos reads as a footer; the same row moving reads as
   a wall of people who already bought it, which is the job on a cold ad click. */
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee ul { flex: 0 0 auto; display: flex; align-items: center; margin: 0; list-style: none; animation: camp-marquee 44s linear infinite; }
.marquee:hover ul { animation-play-state: paused; }
@keyframes camp-marquee { to { transform: translateX(-100%); } }

.marquee-logos { margin-top: clamp(32px, 3.4vw, 48px); }
.marquee-logos ul { gap: clamp(48px, 5.4vw, 86px); padding-inline: clamp(24px, 2.7vw, 43px); }
.marquee-logos img { display: block; width: clamp(112px, 10.6vw, 158px); height: auto; opacity: .5; filter: grayscale(1); transition: opacity .4s var(--ease), filter .4s var(--ease); }
.marquee-logos img:hover { opacity: 1; filter: none; }

/* The strip used to carry its own centred eyebrow, which is what held it clear of whatever
   sat above. It has a real section heading now, so the spacing is its own. */
.award-strip { overflow: hidden; margin-top: clamp(34px, 4vw, 56px); }
.marquee-awards ul { gap: clamp(44px, 4.8vw, 76px); padding-inline: clamp(22px, 2.4vw, 38px); }
/* Badges are portrait except TITAN, so they are sized by height or the wide one dwarfs the rest. */
.marquee-awards img { display: block; width: auto; height: clamp(76px, 7.4vw, 108px); opacity: .9; }

.hero-media { display: grid; align-content: start; gap: clamp(22px, 2.4vw, 34px); }
.trust-rail { overflow: hidden; padding-top: clamp(16px, 1.8vw, 24px); border-top: 1px solid var(--hair); }
.trust-rail p { margin: 0 0 14px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.marquee-rail { mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent); }
.marquee-rail ul { gap: clamp(30px, 3vw, 46px); padding-inline: 0 clamp(30px, 3vw, 46px); animation-duration: 36s; }
.marquee-rail img { width: clamp(84px, 7.4vw, 112px); }

/* ---- sections ----------------------------------------------------------- */
.sec { padding-block: clamp(58px, 5.6vw, 96px); }
.sec-dark { background: var(--ink); color: var(--cream); }
.sec-forest { background: var(--forest); }
.sec-dark .lede, .sec-dark .muted { color: rgba(250,248,243,.74); }
.sec-dark .eyebrow { color: var(--brass-light); }
.sec-dark .rule { background: rgba(255,255,255,.16); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(26px, 4vw, 70px); align-items: end; }
.sec-head h2 { font-size: clamp(32px, 3.9vw, 56px); }
.sec-head .lede { max-width: 42ch; }
.muted { color: var(--muted); }

/* ---- editorial two-column, used instead of card grids -------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4.4vw, 74px); align-items: center; }
.stack { display: grid; gap: clamp(20px, 2vw, 30px); }

/* A numbered editorial list. Deliberately hairlines and numerals rather than
   three boxes — the content is a sequence, and a sequence should read as one. */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); color: var(--brass-text); font-family: var(--serif); font-size: 15px; letter-spacing: .04em; }
.steps h3 { font-size: 20px; letter-spacing: -.02em; }
.steps p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.sec-dark .steps li { border-color: rgba(255,255,255,.14); }
.sec-dark .steps p { color: rgba(250,248,243,.6); }

/* ---- hardware strip ----------------------------------------------------- */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.specs div { padding: 26px 22px 0; border-right: 1px solid var(--line); }
.specs div:last-child { border-right: 0; }
.specs b { display: block; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 44px); font-weight: 400; letter-spacing: -.04em; }
.specs small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.sec-dark .specs, .sec-dark .specs div { border-color: rgba(255,255,255,.16); }
.sec-dark .specs small { color: rgba(250,248,243,.58); }

/* ---- proof -------------------------------------------------------------- */
.awards { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.awards img { height: 52px; width: auto; opacity: .8; }
.awards p { color: var(--muted); font-size: 12.5px; }

/* #problem and #uses are one argument on one ground — the rooms are the answer to the
   sentence above them. Two full section paddings between them read as a break that is not
   there, so the seam closes to about a third of it. */
#problem { padding-bottom: clamp(22px, 2.2vw, 36px); }
#uses { padding-top: clamp(28px, 2.8vw, 44px); }

/* ---- the app deck --------------------------------------------------------- */
/* Ported from home.scriben.ai rather than reinvented. Straight on, no tilt. Phones move
   with the drag one-for-one and settle on the nearest screen when you let go — a threshold
   that fires mid-gesture feels arbitrary, because from the hand's point of view it is.
   Index-driven and wrapping, so there is no first or last. With JavaScript off it falls
   back to a plain wrapped row with every screen visible. */
/* The phones either side sit up to 2.6 widths out, which on a 390px screen is 120px past
   the edge of the document. The section clips them the way the page edge does on home; its
   own block padding keeps the centre phone's shadow intact. */
#app { overflow: hidden; }
.deck { --phone-w: clamp(150px, 12.6vw, 190px); --phone-h: calc(var(--phone-w) * var(--phone-ar, 2.1641)); display: grid; justify-items: center; gap: clamp(18px, 2vw, 30px); width: 100%; margin-top: clamp(30px, 3.4vw, 50px); }
.deck-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.deck-phone { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
/* Without this the browser starts its own image drag on pointerdown and every pointer event
   after the first is cancelled — one pointermove arrives, no pointerup ever does, and the
   deck sits still while you drag it. */
.deck-phone img { display: block; width: var(--phone-w); height: auto; border-radius: 22px; background: #f7f4ef; -webkit-user-drag: none; user-select: none; }
.deck-phone:focus-visible { outline: 3px solid var(--brass-light); outline-offset: 6px; border-radius: 26px; }

.js .deck-stage { display: block; position: relative; height: calc(var(--phone-h) + 34px); touch-action: pan-y; cursor: grab; }
.js .deck-stage.is-dragging { cursor: grabbing; }
.js .deck-phone {
  position: absolute; left: 50%; top: 50%; z-index: var(--z, 0); opacity: var(--op, 0); pointer-events: var(--hit, none);
  transform: translate(-50%, -50%) translateX(calc(var(--x, 0) * var(--phone-w))) scale(var(--s, .8));
  transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
  filter: saturate(calc(.5 + .5 * var(--lit, 0)));
}
/* While a finger is down the phones track it exactly; a transition would lag behind. */
.js .deck-stage.is-dragging .deck-phone { transition: none; }
.js .deck-phone img { border-radius: 24px; box-shadow: 0 0 0 6px #17171a, 0 0 0 7px rgba(255,255,255,.13), 0 24px 50px rgba(0,0,0,.46); }
.js .deck-phone.is-active { cursor: default; }

/* Screens that arrive already drawn inside a device, cut out on transparency. The CSS bezel
   is the wrong tool for these — it would frame the frame — so it comes off and the shadow
   follows the phone's actual silhouette instead of its bounding box. Slightly wider, because
   these carry their own frame and the glass inside it is what the flat renders show edge to
   edge; at equal element widths the content would read smaller. */
.deck--device { --phone-w: clamp(162px, 13.6vw, 205px); }
.deck--device .deck-phone img { border-radius: 0; background: none; }
.js .deck--device .deck-phone img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }

.deck-dots { display: none; }
.js .deck-dots { display: flex; gap: 7px; }
.deck-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.24); transition: background .3s, transform .3s; cursor: pointer; }
.deck-dots i.is-on { background: var(--brass-light); transform: scale(1.35); }

.deck-caption { margin: 0; max-width: 430px; text-align: center; }
.deck-caption b { display: block; margin-bottom: 5px; color: #fff; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.deck-caption span { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.6; }
.deck-hint { margin-top: 2px; color: rgba(250,248,243,.4); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---- the app, standing in a row ------------------------------------------- */
/* The alternative to the deck: every screen visible at once, each under its own name,
   the way a printed spread shows a product. Cut-outs only — these carry their own device,
   so nothing here draws a bezel and the shadow follows the silhouette. */
/* figure is display:contents so every caption shares one grid row and every phone shares the
   next — otherwise a three-line caption pushes its own phone down and the row goes ragged. */
.spread { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: clamp(14px, 1.8vw, 30px); width: min(100%, calc(var(--cols, 5) * 268px)); margin: clamp(32px, 3.6vw, 54px) auto 0; }
.spread figure { display: contents; }
.spread figcaption { align-self: end; padding-bottom: clamp(10px, 1.2vw, 18px); text-align: center; }
.spread figcaption b { display: block; color: #fff; font-family: var(--serif); font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; }
.spread figcaption span { display: block; margin-top: 5px; color: rgba(255, 255, 255, .48); font-size: 12.5px; line-height: 1.55; }
.spread img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .52)); -webkit-user-drag: none; }

/* Five phones will not fit a phone. Below 900px it becomes a snap strip that bleeds to both
   page edges, so the cut-off fifth screen is the thing that says "keep going". */
@media (max-width: 900px) {
  .spread { display: flex; grid-auto-flow: row; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 20px; padding: 0 calc((100vw - var(--shell)) / 2) 6px; margin-inline: calc((100vw - var(--shell)) / -2); }
  .spread::-webkit-scrollbar { display: none; }
  .spread figure { display: grid; grid-template-rows: auto 1fr; gap: 14px; flex: 0 0 min(58vw, 250px); scroll-snap-align: center; }
  .spread figcaption { padding-bottom: 0; }
}

/* ---- the clinical console, on a desk -------------------------------------- */
/* Frames are drawn, not photographed: a picture of a monitor is a second asset to keep in
   step with the screenshot inside it, and it softens on exactly the displays clinicians
   read this on. Graphite rather than black, with a light inner rim, or the bezel vanishes
   into the section behind it. */
.monitor, .laptops figure { margin: 0; }
.monitor .bezel, .laptops .bezel {
  background: #26262a; border-radius: 13px 13px 4px 4px; padding: 10px 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 26px 52px rgba(0, 0, 0, .52);
}
.monitor .bezel img, .laptops .bezel img { display: block; width: 100%; height: auto; border-radius: 4px; background: #fbfbfa; }

.monitor { width: min(100%, 940px); margin: clamp(32px, 3.6vw, 54px) auto 0; }
.monitor .bezel { padding: 13px 13px 26px; border-radius: 16px 16px 5px 5px; position: relative; }
/* the brand slot on the chin */
.monitor .bezel::after { content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); width: 54px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .17); }
.monitor .neck { width: 13%; height: 30px; margin: 0 auto; background: linear-gradient(#2a2a2e, #1b1b1e); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.monitor .foot { width: 27%; height: 10px; margin: 0 auto; border-radius: 0 0 7px 7px; background: #232326; box-shadow: 0 14px 24px rgba(0, 0, 0, .45); }

/* The lid's base is wider than the screen, which is the one line that makes it read as a
   laptop rather than a small monitor. It overhangs, so nothing here may clip its children. */
.laptops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 52px) clamp(24px, 2.6vw, 44px); margin-top: clamp(46px, 5vw, 76px); }
.laptops .bezel { border-radius: 10px 10px 2px 2px; padding: 8px 8px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 18px 34px rgba(0, 0, 0, .46); }
.laptops .lip { width: 109%; height: 11px; margin: 0 auto; border-radius: 0 0 9px 9px; background: linear-gradient(#2c2c30, #1a1a1d); box-shadow: 0 12px 20px rgba(0, 0, 0, .4); position: relative; }
.laptops .lip::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 15%; height: 4px; border-radius: 0 0 4px 4px; background: rgba(0, 0, 0, .5); }

.monitor figcaption, .laptops figcaption { margin-top: clamp(16px, 1.8vw, 24px); }
.monitor figcaption { text-align: center; max-width: 54ch; margin-inline: auto; }
.monitor figcaption b, .laptops figcaption b { display: block; margin-bottom: 6px; color: #fff; font-family: var(--serif); font-size: clamp(16px, 1.35vw, 21px); font-weight: 500; }
.monitor figcaption span, .laptops figcaption span { display: block; color: rgba(255, 255, 255, .5); font-size: 14px; line-height: 1.66; }
.rig-note { margin-top: clamp(34px, 3.8vw, 52px); color: rgba(255, 255, 255, .42); font-size: 13px; line-height: 1.7; text-align: center; }

@media (max-width: 760px) {
  .laptops { grid-template-columns: 1fr; gap: clamp(30px, 7vw, 44px); }
  .monitor .neck { height: 22px; }
}

/* ---- the situations, as a mosaic ----------------------------------------- */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 1.9vw, 30px); margin-top: clamp(30px, 3.4vw, 48px); }
.mosaic figure { display: grid; grid-template-rows: 1fr auto; margin: 0; min-width: 0; }
.mosaic figure { overflow: clip; }
.mosaic img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 8px; transition: transform .7s var(--ease); }
.mosaic figure:hover img { transform: scale(1.035); }
.mosaic figcaption { padding-top: 15px; }
.mosaic h3 { font-size: clamp(17px, 1.45vw, 21px); letter-spacing: -.022em; }
.mosaic p { margin-top: 7px; max-width: 46ch; color: var(--muted); font-size: 14.5px; line-height: 1.58; }

.mosaic > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
.mosaic > :nth-child(1) img { height: 100%; min-height: clamp(280px, 30vw, 430px); }
.mosaic > :nth-child(1) h3 { font-size: clamp(21px, 2vw, 30px); }
.mosaic > :nth-child(2), .mosaic > :nth-child(3) { grid-column: span 5; }
.mosaic > :nth-child(2) img, .mosaic > :nth-child(3) img { aspect-ratio: 16 / 9; }
.mosaic > :nth-child(4) { grid-column: span 12; }
.mosaic > :nth-child(4) img { aspect-ratio: 32 / 9; }
.mosaic > :nth-child(4) figcaption { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: clamp(20px, 3vw, 54px); align-items: baseline; }
.mosaic > :nth-child(4) p { margin-top: 0; }

/* ---- your own day, as a horizontal flow ----------------------------------
   This is the section that replaced #how, so it has to read as a sequence at a glance:
   four moments left to right on one hairline. gap is 0 deliberately — the li top borders
   are what draw the line, so any column gap would break it into four dashes. */
.flow { display: grid; grid-template-columns: repeat(var(--beats, 4), minmax(0, 1fr)); gap: 0; margin: clamp(32px, 3.6vw, 52px) 0 0; padding: 0; list-style: none; }
.flow li { position: relative; padding: clamp(26px, 2.6vw, 36px) clamp(20px, 2.6vw, 38px) 0 0; border-top: 1px solid var(--line); }
/* The dot marks the moment on the line; the tick under it carries the eye down to the label,
   which is what makes the row read as a timeline rather than four bordered columns. */
.flow li::before { content: ""; position: absolute; left: 0; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-text); }
.flow li::after { content: ""; position: absolute; left: 3px; top: 5px; width: 1px; height: clamp(12px, 1.3vw, 18px); background: var(--line); }
.flow .when { color: var(--brass-text); font-family: var(--serif); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.flow .when + p { margin-top: 10px; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.6; }
.flow-close { margin-top: clamp(20px, 2.2vw, 28px); max-width: 54ch; font-family: var(--serif); font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.36; }

/* The beats arrive left to right, which is the direction the section is arguing in. Gated on
   .js like every other reveal, so with scripting off they are simply all there. */
.js .flow li { opacity: 0; transform: translateY(12px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.js .flow.in li { opacity: 1; transform: none; }
.js .flow.in li:nth-child(2) { transition-delay: .1s; }
.js .flow.in li:nth-child(3) { transition-delay: .2s; }
.js .flow.in li:nth-child(4) { transition-delay: .3s; }
.flow li::before { transition: transform .3s var(--ease), background .3s var(--ease); }
.flow li:hover::before { transform: scale(1.55); }
.sec-dark .flow li { border-top-color: rgba(255,255,255,.16); }
.sec-dark .flow li::before { background: var(--brass-light); }
.sec-dark .flow li::after { background: rgba(255,255,255,.16); }
.sec-dark .flow .when { color: var(--brass-light); }
.sec-dark .flow .when + p { color: rgba(250,248,243,.78); }

/* ---- what happens to the data, as a ledger -------------------------------
   Hairline rows rather than cards: this section is read by someone checking, not browsing,
   and a grid of boxes makes ten short facts look like ten marketing claims. */
.ledger { margin: clamp(32px, 3.6vw, 52px) 0 0; border-top: 1px solid var(--line); }
.ledger > div { transition: background .28s var(--ease); display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 54px); padding: clamp(17px, 1.8vw, 23px) 0; border-bottom: 1px solid var(--line); }
.ledger > div:hover { background: rgba(28,28,28,.028); }
.ledger dt { transition: color .28s var(--ease); font-family: var(--serif); font-size: clamp(15px, 1.3vw, 18px); letter-spacing: -.018em; }
.ledger dd { margin: 0; max-width: 62ch; color: var(--muted); font-size: 14.5px; line-height: 1.62; }
.ledger dd b { color: var(--ink); font-weight: 500; }
.ledger > div:hover dt { color: var(--brass-text); }
.ledger-foot { margin-top: clamp(20px, 2.2vw, 28px); max-width: 62ch; color: var(--muted); font-size: 13.5px; line-height: 1.66; }

/* ---- three things to check, one section ----------------------------------
   No JavaScript anywhere in this: the radios carry the state, so it works with scripting off
   and a keyboard moves between the tabs with arrow keys the way a radio group always has. */
.tabs { margin-top: clamp(30px, 3.4vw, 46px); }
.tabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tabs-row { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs-row label { position: relative; padding: 13px 20px 15px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--serif); font-size: clamp(14px, 1.25vw, 17px); letter-spacing: -.015em;
  cursor: pointer; white-space: nowrap; transition: color .26s var(--ease), border-color .26s var(--ease); }
.tabs-row label:hover { color: var(--ink); }
.tab-panel { display: none; padding-top: clamp(26px, 3vw, 40px); }
.tab-panel > :first-child { margin-top: 0; }
.tabs > input:nth-of-type(1):checked ~ .tabs-row label:nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .tabs-row label:nth-child(2),
.tabs > input:nth-of-type(3):checked ~ .tabs-row label:nth-child(3) { color: var(--ink); border-bottom-color: var(--brass); }
.tabs > input:nth-of-type(1):checked ~ .tabs-panels > .tab-panel:nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .tabs-panels > .tab-panel:nth-child(2),
.tabs > input:nth-of-type(3):checked ~ .tabs-panels > .tab-panel:nth-child(3) { display: block; animation: tab-in .4s var(--ease) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* the ring has to live on the label, because the input it belongs to is not the visible thing */
.tabs > input:nth-of-type(1):focus-visible ~ .tabs-row label:nth-child(1),
.tabs > input:nth-of-type(2):focus-visible ~ .tabs-row label:nth-child(2),
.tabs > input:nth-of-type(3):focus-visible ~ .tabs-row label:nth-child(3) { outline: 2px solid var(--brass-text); outline-offset: 3px; border-radius: 4px; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brass-text); font-family: var(--sans); font-size: 20px; font-weight: 300; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; max-width: 68ch; color: var(--muted); font-size: 15px; }

/* ---- purchase ----------------------------------------------------------- */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.buy h2 { font-size: clamp(34px, 4.4vw, 62px); }
.price { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; font-family: var(--serif); }
.price b { font-size: clamp(38px, 4vw, 54px); font-weight: 400; letter-spacing: -.04em; }
.price span { color: rgba(250,248,243,.62); font-size: 16px; }
.included { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; color: rgba(250,248,243,.72); font-size: 14.5px; }
.included li { display: flex; gap: 10px; }
.included li::before { content: "—"; color: var(--brass-light); }
.assure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(250,248,243,.6); font-size: 12.5px; }

/* ---- why not the thing already in your pocket ---------------------------- */
/* The storefront makes this argument in a baked-text image, which cannot be read on a phone
   and cannot be read at all by a screen reader. Same argument, set as type. Columns divided
   by rules rather than boxed as cards — three feature cards in a row is the look this page
   was written to avoid. */
.versus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(34px, 4vw, 56px); }
.versus > div { padding: 0 clamp(18px, 2.2vw, 34px); border-left: 1px solid rgba(255,255,255,.16); }
.versus > div:first-child { padding-left: 0; border-left: 0; }
.versus > div:last-child { padding-right: 0; }
.versus h3 { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.025em; }
.versus h3 + p { margin-top: 12px; color: rgba(250,248,243,.62); font-size: 15px; }
.versus ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.versus li { display: flex; gap: 10px; color: rgba(250,248,243,.72); }
.versus li::before { content: "\00d7"; color: rgba(250,248,243,.4); }
.versus .is-us { border-left-color: var(--brass); }
.versus .is-us h3 { color: var(--brass-light); }
.versus .is-us li::before { content: "\2014"; color: var(--brass-light); }

/* Three device screens in a row, captioned — the layout the iOS walkthrough uses. */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px); margin-top: clamp(30px, 3.4vw, 48px); }
.screens figure { margin: 0; }
.screens img { display: block; width: 100%; height: auto; border-radius: clamp(18px, 2vw, 28px); background: #fff; box-shadow: 0 0 0 7px #17171a, 0 22px 48px rgba(23,23,20,.26); }
.screens figcaption { margin-top: 13px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-align: center; }

/* ---- the object itself --------------------------------------------------- */
/* People buy a $199 physical thing with their eyes. Four pages of type and hairlines never
   showed them the pen. These are the storefront's own photographs, so the object on the ad
   page is the object in the gallery they land in. */
.pen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: clamp(30px, 3.4vw, 48px) 0 clamp(34px, 4vw, 54px); }
.pen-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: #fdfdfd; }
.pen-grid .wide { grid-column: 1 / -1; }
.pen-grid img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.pen-grid .plain img { aspect-ratio: 1 / 1; object-fit: contain; padding: 2% 13% 6%; background: transparent; }
.pen-grid .wide img { aspect-ratio: 1240 / 860; max-height: 62vh; }
.pen-grid figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 30px 18px 15px; background: linear-gradient(transparent, rgba(253,253,253,.94) 48%); color: var(--ink); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }

.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-bottom: clamp(34px, 4vw, 54px); }
.strip figure { margin: 0; }
.strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.strip figcaption { margin-top: 11px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* A quiet full-bleed photograph between the argument and the price. */
.band { display: grid; align-items: center; min-height: clamp(260px, 30vw, 430px); background: #efe6d4 url(assets/pen/lean.webp) center / cover no-repeat; }
.band p { margin-left: auto; max-width: 22ch; font-family: var(--serif); font-size: clamp(23px, 2.8vw, 40px); font-weight: 600; letter-spacing: -.028em; line-height: 1.12; color: #1c1c1c; text-align: right; }

/* ---- assurances, the storefront's own four ------------------------------- */
.assure-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: clamp(26px, 3vw, 40px) 0; border-block: 1px solid var(--line); text-align: center; }
.assure-row div { font-family: var(--serif); font-size: clamp(13px, 1.15vw, 15.5px); font-weight: 600; letter-spacing: .01em; }
.assure-row small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* ---- the offer ----------------------------------------------------------- */
/* $199 struck through against $99 is the whole argument of a discount campaign, so it is
   set as type, not as a badge. The code is shown as well as pre-applied by the link: the
   visitor who opens a new tab or comes back tomorrow still has it. */
.offer { display: grid; gap: 6px; margin-top: 26px; }
.offer-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; font-family: var(--serif); }
.cur { font-family: var(--sans); font-weight: 500; font-size: .48em; letter-spacing: 0; vertical-align: .52em; margin-right: .05em; }
.offer-now { font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.offer-was { color: var(--muted); font-size: clamp(20px, 1.9vw, 26px); font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.offer-save { padding: 5px 11px; border-radius: 4px; background: var(--sale); color: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.offer-code { color: var(--muted); font-size: 14px; }
.offer-code b { color: inherit; font-weight: 400; }
.offer-code code { padding: 2px 8px; border: 1px dashed var(--line); border-radius: 4px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.sec-dark .offer-was, .sec-dark .offer-code { color: rgba(250,248,243,.62); }
.sec-dark .offer-code code { border-color: rgba(255,255,255,.34); color: var(--brass-light); }
.pay { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.sec-dark .pay { color: rgba(250,248,243,.55); }

/* ---- consent note ------------------------------------------------------- */
.note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; max-width: 74ch; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
.note i { color: var(--brass-text); font-style: normal; }

/* ---- footer ------------------------------------------------------------- */
.camp-foot { padding: clamp(40px, 4vw, 60px) 0; border-top: 1px solid var(--line); }
.camp-foot > div { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 34px; }
.camp-foot img { width: 112px; height: auto; }
.camp-foot h3 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.camp-foot a { display: block; margin-top: 9px; color: var(--ink); font-size: 14px; text-decoration: none; }
.camp-foot a:hover { color: var(--brass-text); }
.camp-foot .fine { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12px; }

/* ---- sticky mobile buy bar ---------------------------------------------- */
/* Hidden until the hero CTA has actually left the screen, so it never competes
   with the primary action while that action is still visible. */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(250,248,243,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(23,23,20,.09); transform: translateY(110%); transition: transform .4s var(--ease); }
.buybar.is-up { transform: none; }
.buybar div { margin-right: auto; line-height: 1.25; }
.buybar small { display: block; color: var(--muted); font-size: 11.5px; }
.buybar b { font-family: var(--serif); font-size: 17px; font-weight: 500; }

/* ---- reveal ------------------------------------------------------------- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  :root { --shell: min(760px, calc(100vw - 44px)); }
  /* 14px on a 9px margin is a 22px tap target and the guidance is 44. Padding, not font-size,
     so the footer reads exactly as before and only the hit area grows. */
  .camp-foot a { margin-top: 0; padding: 11px 0; }
  .camp-foot h3 { margin-bottom: 2px; }
  /* the three smallest labels on the page, raised where the screen is smallest */
  .trust-rail p { font-size: 11.5px; }
  .assure-row small { font-size: 12.5px; }
  .promo-marquee li { font-size: 12.5px; }
  .ledger > div { grid-template-columns: 1fr; gap: 7px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(24px, 3vw, 34px); }
  .hero-grid, .split, .buy { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .mosaic > :nth-child(1) { grid-column: span 12; grid-row: auto; }
  .mosaic > :nth-child(1) img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .mosaic > :nth-child(2), .mosaic > :nth-child(3) { grid-column: span 6; }
  .mosaic > :nth-child(4) img { aspect-ratio: 21 / 9; }
  .versus { grid-template-columns: 1fr; gap: 30px; }
  .versus > div { padding: 0 0 0 20px; border-left: 1px solid rgba(255,255,255,.16); }
  .versus > div:first-child { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.16); }
  .pen-grid { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; gap: 20px; }
  .mosaic > :nth-child(n) { grid-column: span 12; }
  .mosaic > :nth-child(2) img, .mosaic > :nth-child(3) img, .mosaic > :nth-child(4) img { aspect-ratio: 16 / 10; }
  .mosaic > :nth-child(4) figcaption { grid-template-columns: 1fr; gap: 7px; }
  .screens { grid-template-columns: 1fr; gap: 28px; max-width: 300px; margin-inline: auto; }
  .specs { grid-template-columns: 1fr 1fr; }
  .assure-row { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .band { min-height: 300px; }
  .band p { margin-left: 0; text-align: left; max-width: 16ch; }
  .specs div:nth-child(2) { border-right: 0; }
  .specs div:nth-child(-n+2) { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .camp-foot > div { grid-template-columns: 1fr 1fr; }
  .camp-head nav { display: none; }
  .buybar { display: flex; }
}
@media (max-width: 560px) {
  :root { --shell: calc(100vw - 32px); }
  /* Six photographs and four laptops stacked vertically were 5,300px of a phone between them.
     Same bleed-to-both-edges snap strip .spread already uses: you swipe instead of scroll, and
     nothing is dropped. */
  .pen-grid, .strip, .laptops { display: flex; grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px;
    padding: 0 calc((100vw - var(--shell)) / 2) 6px; margin-inline: calc((100vw - var(--shell)) / -2); }
  .pen-grid > figure, .strip > figure, .laptops > figure { flex: 0 0 min(76vw, 300px); scroll-snap-align: center; }
  .pen-grid::-webkit-scrollbar, .strip::-webkit-scrollbar, .laptops::-webkit-scrollbar { display: none; }
  /* the tab row bleeds to both edges and swipes, rather than wrapping to three rows */
  .tabs-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 calc((100vw - var(--shell)) / 2); margin-inline: calc((100vw - var(--shell)) / -2); }
  .tabs-row label { padding: 12px 14px 14px; }
  .flow { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .flow li { padding-right: 0; }
  .hero { padding-top: 26px; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 42px); letter-spacing: -.03em; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-film { margin-top: 26px; }
  .specs { grid-template-columns: 1fr; }
  .promo-marquee { padding: 9px 0; }
  .promo-marquee li { font-size: 12px; }
  .specs div { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0 18px; }
  .camp-foot > div { grid-template-columns: 1fr; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .hero { padding-block: 22px 34px; }
  .hero h1 { font-size: clamp(34px, 3.8vw, 52px); }
  .hero .lede { margin-top: 14px; font-size: 16.5px; }
  .hero-offer { margin-top: 16px; }
  .hero-offer .offer-now { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  /* Killing the animation alone would freeze the strip and clip whatever sits off-screen,
     so the duplicate tracks go and the real one wraps. */
  .marquee { justify-content: center; mask-image: none; }
  .marquee ul + ul { display: none; }
  .marquee ul { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; max-width: var(--shell); row-gap: 26px; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- traceability (doctors) --------------------------------------------- */
/* The signature interaction: a drafted clinical sentence, the transcript turn it
   was built from, and where in the recording that was said. One line traces to
   nothing and says so — that is the honest half of the idea, so it is not hidden. */
.trace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(28px, 3vw, 44px); }
.trace-pane { border-top: 1px solid var(--line); padding-top: 16px; }
.trace-pane > h3 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.trace-note { margin-top: 16px; display: grid; gap: 4px; }
.trace-note button { display: block; width: 100%; padding: 9px 12px; border: 0; border-left: 2px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 15.5px; line-height: 1.5; text-align: left; cursor: pointer; transition: background .25s, border-color .25s; }
.trace-note button:hover { background: rgba(23,23,20,.045); }
.trace-note button[aria-pressed="true"] { background: rgba(184,131,60,.13); border-left-color: var(--brass); }
.trace-note button[data-source="none"] { text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: var(--brass); }
.trace-note small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.trace-tape { margin-top: 16px; max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.trace-tape p { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 9px 10px; color: var(--muted); font-size: 14.5px; line-height: 1.5; transition: background .25s, color .25s; }
.trace-tape p b { color: var(--brass-text); font-family: var(--serif); font-weight: 400; }
.trace-tape p.lit { background: rgba(184,131,60,.13); color: var(--ink); }
.trace-stamp { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.trace-stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }

/* Coding: the observations are evidence, the level is a published rule applied to
   them. Presenting it as a table rather than a card makes that relationship legible. */
.mdm { width: 100%; margin-top: clamp(24px, 3vw, 38px); border-collapse: collapse; font-size: 15px; }
.mdm th { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: left; }
.mdm td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.mdm td:first-child { font-weight: 600; }
.mdm td em { display: block; margin-top: 5px; color: var(--muted); font-style: normal; font-size: 13.5px; }
.mdm .lvl { color: var(--brass-text); font-family: var(--serif); font-size: 17px; }
.mdm tfoot td { border-bottom: 0; padding-top: 20px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }

@media (max-width: 1000px) {
  .trace { grid-template-columns: 1fr; }
  .trace-tape { max-height: 260px; }
  .mdm td, .mdm th { padding-right: 8px; }
  .mdm td em { font-size: 13px; }
}