/* SPDX-License-Identifier: LicenseRef-CinemaJ2K-All-Rights-Reserved */
/* SPDX-FileCopyrightText: 2026 CinemaJ2K-CUDA contributors */
/* CinemaQuo site. The palette is the DCP Studio's own default theme (sampled from the screenshots in img/),
   so the page and the product images read as one surface. Each area of a DCP keeps one colour across the page:
   picture, sound and subtitles are the Studio timeline's lanes; package is the Create DCP violet, checks the
   accent of the Studio's default theme, keys the Studio's colour for encryption. */

@font-face { font-family: "Plex Sans"; src: url("../fonts/IBMPlexSans-var-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --ink: #17131f;        /* the Studio's top bar and status bar */
  --panel: #201c29;      /* timeline lanes */
  --raised: #24202d;     /* panels */
  --line: #403a4b;       /* hairlines */
  --band: #221d2e;       /* every other section */
  --card: #2b2737;       /* a block inside a section */
  --well: #36313f;       /* a block inside a block */
  --line-soft: #3a3446;  /* rows inside a block */
  --text: #ece8f3;
  --text-2: #c9c1d4;
  --text-3: #a99fb8;
  --accent: #b08ae6;     /* Create DCP */
  --on-accent: #1a1424;
  --picture: #3a3d63;  --picture-ink: #b9c1f2;
  --sound: #3a4a34;    --sound-ink: #c5dbb0;
  --subs: #4a3f22;     --subs-ink: #ecd9a4;
  --package: #4b315e;  --package-ink: #f1ecf7;
  --package-mid: #a493b6; /* the package lane between fill and ink: a purple that is not the accent */
  --verify: #1d3a4b;   --verify-ink: #b8e0f4;
  --keys: #1f3d35;     --keys-ink: #bfe5d3;
  --measure: 60ch;
  --wrap: 1200px;
  --sans: "Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.37, 0, 0.63, 1); /* one soft in-and-out for every move on the page */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) var(--ink); }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 14.45px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--text); }
/* The product's name always in its own violet (the violet buttons keep it plain, in their own ink). */
.cq { color: var(--accent); }
a, .btn, .spot, .run-again { transition: color 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: #4a3d66; color: var(--text); }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.skip:hover, .skip:focus { color: var(--on-accent); }

/* Header: the Studio's top bar, thin and dark. */
.top { background: var(--ink); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 1em; letter-spacing: 0.01em; }
.brand svg { width: 28px; height: 28px; color: var(--accent); }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 12.75px; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* Buttons: the Create DCP fill, and the outlined secondary of the Studio dialogs. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 4px; font: 500 1em/1 var(--sans); text-decoration: none; border: 1px solid transparent; }
.btn-buy { background: var(--accent); color: var(--on-accent); }
a.btn-buy:hover { background: #c3a4ef; color: var(--on-accent); }
/* A buy button before the store exists: it says so and does not look clickable. */
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { background: var(--well); color: var(--text-2); cursor: default; }
.top .btn { padding: 0 18px; }
/* On narrow screens the links fold behind this button (the script adds it; without script they wrap). */
.menu-btn { display: none; background: none; cursor: pointer; }
.btn-plain { border-color: #757b83; color: var(--text); }
.btn-plain:hover { border-color: var(--text-2); color: var(--text); }
.top .menu-btn { border-color: transparent; }

/* Hero */
.hero { padding: 64px 0 88px; }
.hero h1 { font-size: clamp(37.4px, 6.12vw, 81.6px); line-height: 1; font-weight: 650; letter-spacing: -0.03em; margin: 0 0 28px; max-width: 12em; text-wrap: balance; }
.hero .lede { font-size: clamp(15.3px, 1.61vw, 18.7px); line-height: 1.5; color: var(--text); max-width: 50ch; margin: 0; }
.hero-row { display: grid; grid-template-columns: minmax(0, 600px) auto; justify-content: start; align-items: end; gap: 28px 96px; }
.hero-act .also { max-width: 300px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.also { margin: 20px 0 0; color: var(--text-2); }
/* The window runs the full width of the screen, up to its own captured width. */
.hero .shot { width: min(1600px, calc(100vw - 32px)); margin: 48px 0 0 calc(50% - min(800px, 50vw - 16px)); }
.window { position: relative; display: block; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--raised); }
.full { display: block; position: relative; }
/* The short loop of the same window lies over the still and shows only once it plays (its first frame is the still). */
.full video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s var(--ease); }
.full video.on { opacity: 1; }
figcaption { color: var(--text-3); font-size: 12.75px; margin: 16px auto 0; max-width: var(--measure); text-align: center; }
/* The caption guide: each named area is outlined and the rest of the window dims. */
.area { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--accent); border-radius: 4px; outline: 200vmax solid rgb(11 9 16 / 0.62); opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.window[data-show="files"] [data-area="files"], .window[data-show="name"] [data-area="name"], .window[data-show="picture"] [data-area="picture"],
.window[data-show="timeline"] [data-area="timeline"], .window[data-show="package"] [data-area="package"] { opacity: 1; }
.spot { font: inherit; color: var(--text-2); background: none; border: 0; border-bottom: 1px dashed var(--text-3); padding: 0; cursor: pointer; }
.tap-hint { display: none; }
.spot:hover, .spot[aria-pressed="true"] { color: var(--text); border-bottom: 1px solid var(--accent); }
/* The ISDCF name: each field in the colour of the area it comes from (aspect and resolution from the picture,
   language and layout from the sound and subtitles, standard and type from the package). */
.isdcf { overflow-wrap: anywhere; }
.isdcf span { color: var(--clip-ink); transition: color 0.9s var(--ease); }
.isdcf .package { --clip-ink: var(--package-mid); }
.receipt .isdcf span { color: var(--clip); }
.run-wrap.armed .receipt .isdcf:not(.printed) span { color: transparent; }

/* Sections */
section { padding: 88px 0; scroll-margin-top: 60px; }
.band { background: var(--band); }
h2 { font-size: clamp(30.6px, 4.08vw, 51px); line-height: 1.04; font-weight: 620; letter-spacing: -0.025em; margin: 0 0 16px; max-width: 22ch; text-wrap: balance; }
h3 { font-size: 18.7px; line-height: 1.3; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 16px; max-width: var(--measure); }
.intro { color: var(--text); max-width: 62ch; }

/* The five stages of Create DCP, one under the other; each bar fills as its stage runs. */
.run { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.run li { padding: 16px 20px 16px 44px; background: var(--card); border-radius: 6px; position: relative; }
.run li::before { content: ""; position: absolute; left: 20px; top: 18px; bottom: 18px; width: 5px; border-radius: 2px; background: var(--accent); }
/* Each stage's bar takes the colour of what it works on, as the timeline colours its lanes. */
.run li.s-prepare::before { background: linear-gradient(180deg, var(--sound-ink) 50%, var(--subs-ink) 50%); } /* taste-skill-ignore: two flat halves, sound then subtitles */
.run li.s-picture::before { background: var(--picture-ink); }
.run li.s-documents::before { background: var(--package-mid); }
.run li.s-verify::before { background: var(--verify-ink); }
.run li.optional::before { background: color-mix(in srgb, var(--verify-ink) 62%, var(--card)); }
.run .tc { font: 500 12.75px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-3); margin-right: 8px; }
/* The live run: bars fill stage by stage under the Studio's playhead; without script they stand full. */
.run-wrap { margin-top: 36px; }
.run-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 10px; align-items: start; }
/* The run drawn on the sample project's timeline, lane for lane as the Studio draws it. */
.tl { background: var(--card); border-radius: 8px; padding: 14px 20px 18px; }
.tl-bar { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); font-size: 11.9px; color: var(--text-3); }
.tl-name { color: var(--text); font-weight: 600; font-size: 12.75px; }
.tl-tc { margin-left: auto; font-size: 18.7px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tl-body { --head: 112px; position: relative; display: grid; row-gap: 6px; }
.tl-row { display: grid; grid-template-columns: var(--head) 1fr; }
.tl-head { display: flex; align-items: center; gap: 6px; font-size: 11.9px; color: var(--text-2); }
.tl-lane { position: relative; height: 24px; }
.tl-lane.picture, .tl-lane.sound { height: 40px; }
.tl-ruler { height: 18px; }
.tl-ruler span { position: absolute; bottom: 0; height: 16px; padding-left: 4px; border-left: 1px solid var(--line); font-size: 10.2px; line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums; }
.reel { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--well); color: var(--text-2); font-size: 10.2px; font-weight: 600; padding: 4px 8px; }
.clip { position: absolute; top: 0; bottom: 0; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--clip) 28%, var(--card)); border: 1px solid color-mix(in srgb, var(--clip-ink) 30%, transparent); }
.clip::after { content: ""; position: absolute; inset: 0; background: var(--clip); transform: scaleX(var(--lit, 1)); transform-origin: left; }
.clip b { position: relative; z-index: 1; display: block; padding: 3px 8px; font-size: 10.2px; font-weight: 500; line-height: 1.3; color: var(--clip-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf { position: absolute; z-index: 1; left: 0; top: 19px; width: 100%; height: calc(100% - 22px); }
.wf path { stroke: var(--clip-ink); stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; }
.ev { position: absolute; z-index: 1; top: 5px; bottom: 5px; border-radius: 1px; background: color-mix(in srgb, var(--clip-ink) 55%, transparent); }
.ok { width: 14px; height: 14px; fill: none; stroke: var(--verify-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-sweep { position: absolute; top: 0; bottom: 0; left: var(--head); right: 0; pointer-events: none; z-index: 2; }
.tl-playhead { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 1) * 100%); width: 2px; margin-left: -1px; background: var(--text); opacity: 0; transition: opacity 0.6s var(--ease); }
.tl-playhead::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: var(--text); border-radius: 0 0 3px 3px; }
.run-wrap.running .tl-playhead { opacity: 1; }
.run-wrap.armed .ok { opacity: 0; transform: scale(0.7); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.run-wrap.armed.verified .ok { opacity: 1; transform: none; }

/* "One film, three programs": the run's own timeline, one lane per program, ruled in minutes (4:00 = the lane's width).
   Each bar is as long as that program took; the script plays them at their measured pace, 40 times faster. */
.race { margin: 64px 0 0; }
.race .intro { margin-bottom: 24px; }
.race .tl-body { --head: 132px; row-gap: 8px; }
.race .tl-lane { height: 34px; }
.race .tl-ruler { height: 18px; }
.race .clip b { padding: 8px 10px; font-size: 11.9px; font-variant-numeric: tabular-nums; }
.race .film { --clip: var(--picture); --clip-ink: var(--picture-ink); }
.race .quo { --clip: var(--accent); --clip-ink: var(--on-accent); }
.race .quo .tl-head { color: var(--accent); font-weight: 600; }
.race .other { --clip: color-mix(in srgb, var(--text-3) 45%, var(--card)); --clip-ink: var(--text); }
.race figcaption { margin: 14px 0 0; max-width: 75ch; font-size: 11.9px; color: var(--text-3); text-align: left; }
.race.running .tl-playhead { opacity: 1; }
.race:not(.armed) .clip, .race .clip.done { background: var(--clip); } /* a finished bar is its colour, under its label */
.race.armed .clip b { visibility: hidden; opacity: 0; transform: translateX(-6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s; }
.race.armed .clip.done b { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* The receipt: a paper slip, cut along its lower edge. */
.receipt { max-width: 640px; background: var(--text); color: var(--ink); padding: 22px 26px 34px; border-radius: 6px 6px 0 0; font-size: 12.75px; font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; /* taste-skill-ignore: the torn edge, a mask */
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; } /* taste-skill-ignore: the torn edge, a mask */
.receipt-h { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed #b3abc0; max-width: none; }
.receipt-h strong { font-size: 14.45px; align-self: end; }
.seal { grid-column: 2; grid-row: 1 / 3; width: 84px; height: 84px; margin: -6px -4px -2px 0; transform: rotate(-12deg); }
.seal .burst { fill: #3c8a22; }
.seal .ring { fill: none; stroke: #ece8f3; stroke-width: 1.4; }
.seal .tick { fill: none; stroke: #ece8f3; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.seal text { fill: #ece8f3; font: 600 8.6px var(--sans); letter-spacing: 0.08em; }
.receipt-h span { color: #5b5468; }
.receipt dl { display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; margin: 0; }
.receipt dt { color: #5b5468; font-weight: 500; }
.receipt dd { margin: 0; }
.receipt .name { font-weight: 600; overflow-wrap: anywhere; }
/* The slip is there from the start, blank; each line prints as its stage ends, and the seal lands last. */
.run-wrap.armed .receipt [data-at] { color: transparent; background-color: #dcd6e5; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 0.9s var(--ease), background-color 0.9s var(--ease); }
.run-wrap.armed .receipt [data-at].printed { color: var(--ink); background-color: transparent; }
.run-wrap.armed .seal { opacity: 0; transform: rotate(-24deg) scale(1.3); transition: opacity 0.7s var(--ease) 0.3s, transform 0.9s var(--ease) 0.3s; }
.run-wrap.armed.done .seal { opacity: 1; transform: rotate(-12deg); }
.run-wrap.armed .run li::before { transform: scaleY(0); transform-origin: top; transition: transform var(--step, 0.85s) var(--ease); }
.run-wrap.armed .run li.on::before { transform: scaleY(1); }
.run-wrap.armed .run li strong, .run-wrap.armed .run li span:not(.tc) { transition: color 0.7s var(--ease); }
.run-wrap.armed .run li:not(.on) strong, .run-wrap.armed .run li:not(.on) span:not(.tc) { color: var(--text-3); }
.run-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; color: var(--text-2); font-size: 12.75px; max-width: none; }
.run-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.run-wrap.running .run-dot { background: var(--text); animation: blink 1.4s var(--ease) infinite alternate; }
.run-wrap.done .run-dot { background: var(--verify-ink); }
.run-again { font: inherit; font-size: 12.75px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.run-again:hover { color: var(--text); }
@keyframes blink { to { opacity: 0.35; } }
.run span:not(.tc) { color: var(--text); font-size: 12.75px; line-height: 1.5; display: block; margin-top: 4px; }

/* Features by lane */
.lanes { margin-top: 36px; display: grid; gap: 10px; }
.lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); background: var(--card); border-radius: 8px; overflow: hidden; }
/* The header is drawn as a clip on the Studio's timeline: the area's fill and ink, across the top. */
.lane > h3 { grid-column: 1 / -1; margin: 0; padding: 12px 22px; font-size: 18.7px; background: var(--clip, var(--well)); color: var(--clip-ink, var(--text)); }
.picture { --clip: var(--picture); --clip-ink: var(--picture-ink); }
.sound { --clip: var(--sound); --clip-ink: var(--sound-ink); }
.subs { --clip: var(--subs); --clip-ink: var(--subs-ink); }
.package { --clip: var(--package); --clip-ink: var(--package-ink); }
.verify { --clip: var(--verify); --clip-ink: var(--verify-ink); }
.keys { --clip: var(--keys); --clip-ink: var(--keys-ink); }
.lane ul { margin: 0; padding: 22px 24px; list-style: none; display: grid; gap: 12px; align-content: start; }
.lane li { color: var(--text); line-height: 1.5; padding-left: 14px; position: relative; }
.lane li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; background: var(--clip-ink, var(--text-3)); border-radius: 1px; }
/* Each lane shows the Studio window where that area is set, no larger than its own size. */
.lane-shot { margin: 0; padding: 20px 20px 20px 0; }
/* Every picture ends on the same line, the lane's right edge, whatever its width. */
.lane-shot img { border-radius: 6px; margin-left: auto; }
.lane.wide { grid-template-columns: minmax(0, 1fr); }
.lane.wide ul { grid-template-columns: 1fr 1fr; column-gap: 40px; }
.lane.wide .lane-shot { padding: 0 20px 22px 24px; }
.more { margin-top: 24px; color: var(--text-2); }

/* In detail: one table per area, label and value, the way the requirements page lists its rows. */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; align-items: start; }
.spec-col { display: grid; gap: 24px; }
.spec { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; background: var(--card); border-radius: 0 0 8px 8px; }
.spec caption { text-align: left; font-size: 1em; font-weight: 600; line-height: 1.3; padding: 12px 20px; background: var(--clip, var(--well)); color: var(--clip-ink, var(--text)); border-radius: 8px 8px 0 0; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 13px 20px; border-top: 1px solid var(--line-soft); }
.spec tr:first-child th, .spec tr:first-child td { border-top: 0; }
.spec th { width: 34%; color: var(--text-3); font-weight: 500; font-size: 12.75px; padding-right: 8px; }
.spec td { color: var(--text); padding-left: 0; }
.specs-foot { margin-top: 36px; }

/* Plugin: the way from the sequence to the package, left to right. */
.flow { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.flow li { position: relative; }
.flow li + li::before { content: ""; position: absolute; left: -38px; top: 79px; width: 26px; height: 2px; background: var(--text-3); }
.flow li + li::after { content: ""; position: absolute; left: -19px; top: 75px; width: 8px; height: 8px; border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3); transform: rotate(45deg); }
/* Each step's picture is centred in its box, drawn with the timeline's own coloured clips. */
.flow-art { height: 160px; background: var(--card); border-radius: 8px; padding: 18px 24px; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.flow h3 { font-size: 18.7px; margin-bottom: 6px; }
.flow p { color: var(--text); }
.seq { align-items: stretch; gap: 8px; }
.trk { display: flex; align-items: center; gap: 10px; }
.trk i { font-style: normal; font-size: 12.75px; color: var(--text-3); width: 22px; }
.bar { height: 26px; border-radius: 3px; background: var(--clip); border: 1px solid color-mix(in srgb, var(--clip-ink) 35%, transparent); }
.exp svg { width: 48px; height: 48px; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.flow-note { margin-top: 32px; color: var(--text-2); }

/* Licences: one block per product; the licence forms inside it. */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.product { background: var(--card); border-radius: 8px; padding: 36px; display: flex; flex-direction: column; }
.product h3 { font-size: 25.5px; letter-spacing: -0.015em; margin-bottom: 6px; }
.covers { list-style: none; margin: 4px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.covers li, .chip { background: var(--clip); color: var(--clip-ink); font-size: 12.75px; font-weight: 600; padding: 3px 10px; border-radius: 4px; }
.product > p { color: var(--text); }
.forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 32px; margin: 0 0 28px; }
.form h4 { margin: 0 0 6px; font-size: 1em; font-weight: 600; }
.form p { margin: 0; }
.product .btn { align-self: stretch; margin-top: auto; min-height: 54px; }
.terms-line { color: var(--text-3); font-size: 12.75px; margin-top: 28px; max-width: 72ch; }
.terms-line ul { margin: 8px 0 0; padding-left: 20px; }


/* Legal and requirement pages */
.doc { padding: 64px 0 96px; }
.doc h1 { font-size: clamp(25.5px, 3.4vw, 37.4px); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 12px; }
.doc .updated { color: var(--text-3); font-size: 12.75px; margin-bottom: 40px; }
.doc h2 { font-size: 18.7px; line-height: 1.3; letter-spacing: normal; margin: 44px 0 12px; max-width: none; }
.doc ul { max-width: var(--measure); padding-left: 22px; margin: 0 0 16px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--text); font-weight: 500; }
.req { width: 100%; max-width: 900px; border-collapse: separate; border-spacing: 0; margin: 8px 0 16px; background: var(--card); border-radius: 8px; }
.req th, .req td { text-align: left; vertical-align: top; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.req tr:first-child th, .req tr:first-child td { border-top: 0; }
.req th { width: 30%; color: var(--text); font-weight: 500; }
.req td { color: var(--text); }

/* Contact: the question, and the address set large under it. */
.contact .intro { margin: 0 0 20px; }
.mail { display: inline-block; font-size: 25.5px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* Footer: the name set across the page, the links on one line, the credits under them. */
.foot { background: var(--band); color: var(--text-3); padding: 64px 0 48px; font-size: 12.75px; }
.foot-name { margin: 0 0 32px; max-width: none; font-size: clamp(32px, 8.2vw, 118px); line-height: 0.84; font-weight: 650; letter-spacing: -0.045em; }
.foot-line { font-size: 14.45px; color: var(--text); margin: 0 0 28px; }
.foot-links { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14.45px; }
.foot a { color: var(--text-2); }
.foot-fine p { margin: 0 0 6px; max-width: 90ch; }

@media (max-width: 960px) {
  .top .wrap { flex-wrap: wrap; gap: 0 12px; }
  .menu-btn { order: 1; margin-left: auto; }
  .top-buy { order: 2; }
  .top:not(.js-menu) .top-buy { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 12px; }
  .js-menu .menu-btn { display: inline-flex; }
  .js-menu:not(.open) .nav { display: none; }
  .js-menu.open .nav { flex-direction: column; align-items: flex-start; gap: 2px; }
  .js-menu.open .nav a { padding: 10px 0; }
  .top.js-menu.open { box-shadow: 0 16px 32px rgb(0 0 0 / 0.5); } /* taste-skill-ignore: the open menu is an overlay over the page */
  .hero-row, .run-grid { grid-template-columns: 1fr; }
  .lane, .lane.wide { grid-template-columns: 1fr; }
  .lane-shot, .lane.wide .lane-shot { padding: 0 20px 20px; }
  .lane-shot img { margin-left: 0; }
  .products, .specs, .flow { grid-template-columns: 1fr; }
  .flow li + li::before, .flow li + li::after { display: none; }
  /* The receipt comes right under the timeline, so the run and the slip it prints are on screen together. */
  .run-grid .receipt { order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 13.6px; }
  .top .btn { padding: 0 14px; }
  .hero { padding-top: 44px; }
  .hero .shot { margin-top: 48px; }
  figcaption { text-align: left; }
  .tap-hint { display: inline; }
  .spot { position: relative; }
  .spot::after { content: ""; position: absolute; inset: -8px -2px; } /* a taller target for the thumb, the underline stays on the text */
  section { padding: 64px 0; }
  .hero { padding-bottom: 64px; }
  .lane ul, .lane.wide ul { grid-template-columns: 1fr; }
  .tl { padding: 12px 12px 14px; }
  .tl-body { --head: 76px; }
  .race .tl-body { --head: 84px; }
  .race .clip b { padding: 8px 6px; }
  .tl-head { font-size: 10.2px; }
  .tl-ruler span:nth-child(even), .tl-ruler span:last-child { display: none; }
  .tl-bar span:not(.tl-name):not(.tl-tc) { display: none; }
  .product { padding: 24px; }
  .receipt { padding: 18px 18px 30px; }
  .seal { width: 68px; height: 68px; }
  .receipt dl { grid-template-columns: 1fr; gap: 2px; }
  .receipt dd { margin-bottom: 8px; }
  .req th, .req td { display: block; width: 100%; padding-right: 0; }
  .req th { padding-bottom: 2px; }
  .req td { border-top: 0; padding-top: 0; }
  .spec th { width: 38%; padding-right: 12px; }
}
@media (forced-colors: active) { .run li::before { background: CanvasText; } }
@media (prefers-reduced-motion: reduce) { .area { transition: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }