/* PicPrep website. One stylesheet for every page.
   Tokens: the app's own (the app's web/shared/theme.css) and Select's state colours, so the site and the app read as one
   product. Dark only, like the app. Type: Archivo, self-hosted (OFL, assets/fonts/Archivo-OFL.txt). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: oklch(0.17 0.006 70);
  --surface: oklch(0.215 0.006 70);
  --surface-2: oklch(0.25 0.006 70);
  --sunken: oklch(0.13 0.005 70);
  --rebate: oklch(0.11 0.004 70);
  --line: oklch(1 0 0 / 10%);
  --line-strong: oklch(1 0 0 / 18%);
  --fg: oklch(0.96 0.005 85);
  --mut: oklch(0.72 0.010 80);
  --accent: oklch(0.80 0.142 72);
  --accent-ink: oklch(0.22 0.045 72);
  --st-sel: oklch(0.78 0.125 155);   /* in the post */
  --st-may: oklch(0.88 0.17 95);     /* maybe */
  --st-rej: oklch(0.68 0.190 18);    /* cut */
  --assist: oklch(0.74 0.135 255);
  --assist-soft: oklch(0.74 0.135 255 / 16%);
  --under: rgb(0 0 0 / 0.5);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --measure: 68ch;
  color-scheme: dark;
  scrollbar-color: var(--line-strong) var(--bg);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Archivo", system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip; caret-color: var(--accent);
}
::selection { background: var(--accent); color: var(--accent-ink); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { font-size: .9em; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; overflow-wrap: anywhere; }
pre { background: var(--sunken); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; overflow-x: auto; font-size: 14px; line-height: 1.5; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
kbd { font: inherit; font-weight: 650; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skiplink { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 4px; }
.skiplink:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* header */
.top { display: flex; align-items: center; gap: 22px; padding: 18px 0; font-size: 15px; }
.top .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; margin-right: auto; letter-spacing: -0.01em; text-decoration: none; }
.top .brand img { display: block; width: 20px; height: 24px; transform: translateY(-1px); }   /* the mark sits on the name's capitals */
.top nav { display: flex; gap: 22px; }
.top nav a { text-decoration: none; color: var(--mut); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--fg); }
.top .menu { display: none; position: relative; }
.top .menu summary { list-style: none; cursor: pointer; padding: 12px; margin: -6px; color: var(--mut); }
.top .menu summary::-webkit-details-marker { display: none; }
.top .menu svg { width: 20px; height: 20px; display: block; }
.top .menu nav { position: absolute; right: 0; top: 40px; z-index: 30; flex-direction: column; gap: 4px; min-width: 200px; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }
.top .menu nav a { padding: 12px 10px; border-radius: 4px; }
@media (max-width: 799px) { .top > nav { display: none; } .top .menu { display: block; } }

/* buttons and the trial form */
.btn, .form button { display: inline-block; font: inherit; font-size: 16px; font-weight: 650; padding: 12px 18px; border-radius: 4px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; transition: transform 140ms var(--ease-out); }
.btn.small { font-size: 15px; padding: 8px 14px; }
.btn.quiet { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .btn:hover, .form button:hover { filter: brightness(1.06); } }
.btn:active, .form button:active { transform: scale(0.97); }
.form button.quiet { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.form label { flex: 1 1 100%; font-size: 14px; color: var(--mut); }
.form input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 4px; border: 1px solid oklch(1 0 0 / 38%); background: var(--surface); color: var(--fg); }
.form input::placeholder { color: var(--mut); }
@media (max-width: 480px) { .form button { flex: 1 1 100%; } }
.price { margin: 12px 0 0; font-size: 15px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* type */
h1, h2, h3, h4 { text-wrap: balance; }
.display { font-size: clamp(2.6rem, 8.5vw, 5.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; margin: 0 0 24px; max-width: 12ch; }
.title { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin: 0 0 18px; max-width: 18ch; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--mut); max-width: 44ch; margin: 0 0 28px; }
.mut { color: var(--mut); }

/* hero */
.hero { min-height: min(82svh, 760px); display: grid; align-content: center; padding: 24px 0 56px; }
.cue { margin-top: 44px; display: flex; gap: 10px; align-items: center; color: var(--mut); font-size: 15px; }
.cue svg { width: 18px; height: 18px; }

/* the hero: a marked contact sheet, the post it makes, and the trial, all in the first view (works without JS) */
.hero2 { display: grid; gap: 0 48px; padding: 16px 0 72px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "post" "pitch" "sheet" "legend"; }
.hero2 h1 { grid-area: h; margin-bottom: 20px; }
.hero2 .sheet { grid-area: sheet; }
.hero2 .legend { grid-area: legend; margin: 10px 0 0; font-size: 14px; color: var(--mut); }
.hero2 .post { grid-area: post; margin: 4px 0 28px; }
.hero2 .pitch { grid-area: pitch; margin-bottom: 36px; }
@media (min-width: 960px) {
  .hero2 { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h h" "sheet sheet" "legend legend" "post pitch"; align-items: end; padding-top: 24px; }
  .hero2 h1 { max-width: none; margin-bottom: 28px; }
  .hero2 .sheet { margin-right: calc(50% - 50vw); }
  .hero2 .post { margin: 36px 0 0; }
  .hero2 .pitch { margin: 0 0 4px; }
}
.sheet { list-style: none; margin: 0; padding: 12px 12px 6px; background: var(--rebate); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 960px) { .sheet { grid-template-columns: repeat(6, minmax(150px, 186px)); padding: 14px 14px 8px; gap: 12px; } }
.sheet .fr { position: relative; aspect-ratio: 3 / 2; }
.sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sheet svg { position: absolute; inset: -9% -7%; width: 114%; height: 118%; overflow: visible; pointer-events: none; }
.sheet path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.sheet .u { stroke: var(--under); stroke-width: 5.4; }
.sheet .k { stroke-width: 3.4; filter: url(#wax); }
.sheet .in .k { stroke: var(--st-sel); } .sheet .may .k { stroke: var(--st-may); } .sheet .cut .k { stroke: var(--st-rej); }
.sheet .no { display: block; padding-top: 4px; font-size: 12px; letter-spacing: .08em; color: var(--mut); font-variant-numeric: tabular-nums; }
/* the one orchestrated moment: the marks draw once, in the order a person makes them */
@media (prefers-reduced-motion: no-preference) {
  /* a hand draws at a steady speed: each stroke's time follows its length; the draw waits for the photos */
  .sheet path { animation: draw calc(var(--t) * 0.5ms) cubic-bezier(0.33, 0, 0.2, 1) both; animation-delay: calc(var(--d) * 0.5ms + 150ms); }   /* one time scale for both: about 1.4 s in all, strokes in order */
  .js .sheet:not(.ready) path { animation-play-state: paused; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
.car { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -16px; padding-bottom: 4px; }
@media (min-width: 960px) { .car { overflow: visible; margin: 0; } }
.car .sl { flex: none; width: 150px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sunken); scroll-snap-align: start; display: grid; }
@media (min-width: 1200px) { .car .sl { width: 160px; } }
.car .sl img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.car .stack { grid-template-rows: 1fr 1fr; gap: 3px; }
.car .pano img { width: 200%; max-width: none; object-fit: cover; }
.car .pano.r img { margin-left: -100%; }
.world .count { margin: 8px 0 0; font-size: 13px; color: var(--mut); }

/* the tour film */
.film-band { padding: 8px 0 72px; }
.film-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.mat.film { max-width: 1100px; }
.mat.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
video::cue { font-family: "Archivo", system-ui, sans-serif; background: rgb(0 0 0 / .75); }

/* page head (inner pages) */
.pagehead { padding: 56px 0 40px; }

/* sections */
.band { padding: 72px 0; border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 14px; max-width: 22ch; }
.band h3 { font-size: 1.25rem; margin: 0 0 8px; }
.band p { max-width: var(--measure); }
.cols { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 860px) { .cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
.dots-list { margin: 0; padding-left: 1.1em; color: var(--mut); }
.dots-list li { margin: 0 0 6px; }
.dots-list.assist li::marker { color: var(--assist); }
.names { max-width: 60ch; }

/* a stage on the features page: words and a readable crop of the real app on a thin black mat */
.stage-row { display: grid; gap: 24px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .stage-row { grid-template-columns: 5fr 7fr; gap: 56px; } .stage-row.flip > :first-child { order: 2; } }
.stage-row h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 12px; }
.stage-row p { margin: 0 0 12px; max-width: 46ch; }
.mat { margin: 0; background: #000; padding: 5px; border-radius: 3px; box-shadow: 0 24px 50px -24px rgb(0 0 0 / .7); }
.mat img { display: block; width: 100%; height: auto; }
.mat figcaption { padding: 2px 4px 0; font-size: 13px; color: var(--mut); }
.mat figcaption a { display: inline-block; padding: 8px 0 6px; }

/* pricing */
.plans { display: grid; gap: 0; margin: 8px 0 32px; border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } .plans > * + * { border-left: 1px solid var(--line); } }
.plan { padding: 28px 0 28px; }
@media (min-width: 760px) { .plan { padding: 28px 32px 28px 0; } .plan + .plan { padding-left: 32px; } }
.plan h2 { font-size: 1.15rem; margin: 0 0 6px; }
.plan .amount { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 6px 0 8px; }
.plan .amount small { font-size: 1rem; font-weight: 500; color: var(--mut); letter-spacing: 0; }
.plan p { color: var(--mut); margin: 0 0 18px; }

/* the assistant page's setup list */
.setup details { border-top: 1px solid var(--line); padding: 4px 0; }
.setup details:last-child { border-bottom: 1px solid var(--line); }
.setup summary { cursor: pointer; padding: 12px 0; font-weight: 650; }
.setup summary::marker { color: var(--mut); }
.setup .doc { padding: 0 0 16px; max-width: 80ch; }
.setup .doc h3, .setup .doc h4, .setup .doc h5 { display: none; }
.setup .doc p { margin: 8px 0; }

/* prose: legal, compliance, security, changelog */
.prose { max-width: 76ch; padding-top: 40px; padding-bottom: 72px; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 20px; }
.prose h2 { font-size: 1.45rem; margin: 40px 0 10px; letter-spacing: -0.01em; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.prose h4 { font-size: 1rem; margin: 20px 0 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }
.prose th { color: var(--mut); font-weight: 600; }
.prose blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 1px solid var(--line-strong); color: var(--mut); }
.prose li { margin: 4px 0; }

/* end CTA and footer */
.end { padding: 88px 0 72px; border-top: 1px solid var(--line); }
.end h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 0 0 18px; }
footer.site { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 14px; color: var(--mut); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 16px; }
footer.site nav a { color: var(--fg); text-decoration: none; padding: 11px 0; }
footer.site nav a:hover { text-decoration: underline; }
footer.site p { margin: 6px 0; max-width: 80ch; }

/* the story without JavaScript: the same chapters as text beside real screenshots */
.story-static { display: grid; gap: 40px; padding-top: 40px; padding-bottom: 72px; }
.story-static figure { margin: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .story-static figure { grid-template-columns: 1fr 2fr; align-items: center; gap: 40px; } }
.story-static h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 8px; letter-spacing: -0.02em; }
.story-static p { margin: 0; color: var(--mut); max-width: 40ch; }
.js .story-static { display: none; }
html:not(.js) .story { height: auto !important; }
html:not(.js) .stage { display: none; }

/* ---------- the scroll story ---------- */
.story { position: relative; height: 1150svh; view-timeline-name: --story; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scene { position: absolute; inset: 0; }
.view { position: absolute; overflow: hidden; }
.view.fade { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
.world, .back, .stripg { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.rebate { position: absolute; background: var(--rebate); border: 1px solid var(--line); }
.fno { position: absolute; font-size: 12px; letter-spacing: 0.08em; color: var(--mut); font-variant-numeric: tabular-nums; }
.piece { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; background: var(--sunken); }
.piece > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.piece > img.flat { filter: saturate(.35) contrast(.78) brightness(1.1); }   /* the unedited "before" */
.piece.pano { background: url(../img/bay-panorama-1600.webp) no-repeat; background-size: auto 100%; }
.marks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.marks path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.marks .ul { stroke: var(--under); stroke-width: 5.4; }
.marks .ink { stroke-width: 3.4; filter: url(#wax); }
.marks .circle .ink { stroke: var(--st-sel); } .marks .q .ink { stroke: var(--st-may); } .marks .cross .ink { stroke: var(--st-rej); }
.wm { position: absolute; right: 10px; bottom: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #fff; opacity: 0; text-shadow: 0 1px 2px rgb(0 0 0 / .35); transform-origin: 100% 100%; white-space: nowrap; }
.wm span { font-weight: 400; opacity: .8; }
.baline { position: absolute; left: 0; top: 0; width: 2px; height: 225px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .25); opacity: 0; pointer-events: none; }
.baline i { position: absolute; top: 50%; left: -11px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.bahit { position: absolute; left: 0; top: 0; width: 180px; height: 225px; touch-action: pan-y; cursor: ew-resize; outline-offset: 4px; }
.tag { position: absolute; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 2px 5px; background: rgb(0 0 0 / .62); border-radius: 2px; opacity: 0; pointer-events: none; }
/* the assistant's marks on the slides it composed */
.aout { position: absolute; left: 0; top: 0; border: 2px solid var(--assist); border-radius: 2px; opacity: 0; pointer-events: none; transform-origin: 0 0; }
.reason { position: absolute; left: 0; top: 0; width: 180px; font-size: 12px; line-height: 1.35; color: var(--assist); opacity: 0; }
.reason b { font-weight: 700; }
.pill { position: absolute; left: 0; top: 0; display: flex; gap: 4px; opacity: 0; }
.pill span { font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 9px; border: 1px solid var(--line-strong); color: var(--fg); background: var(--surface); transform-origin: 50% 50%; }
.pill span.on { background: var(--assist); border-color: var(--assist); color: oklch(0.2 0.04 255); }
/* the EXIF card: hinged on the cover's right edge, two faces */
.card { position: absolute; left: 0; top: 0; width: 180px; height: 225px; transform-origin: 0 50%; transform-style: preserve-3d; opacity: 0; }
.card .face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card .backface { transform: rotateY(180deg); }
.card .backface img, .card .sharp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .blur { position: absolute; inset: -14px; background: url(../img/village-street-480.webp) center / cover; filter: blur(9px) brightness(.5); opacity: 0; }
.card .txt { position: absolute; left: 14px; right: 14px; bottom: 16px; color: #fff; }
.card .cam { font-size: 15px; font-weight: 700; min-height: 1.3em; white-space: nowrap; }
.card .cam i { display: inline-block; width: 1px; height: 1em; background: #fff; vertical-align: -2px; margin-left: 1px; }
.card .lens { font-size: 10px; transition: none; opacity: .75; margin: 2px 0 12px; min-height: 1.2em; }
.card .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.card .nums div { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; }
.card .nums small { display: block; font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: 3px; }
.label { position: absolute; left: 0; top: 0; font-size: 12px; letter-spacing: 0.04em; color: var(--mut); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; }
.label b { color: var(--fg); font-weight: 650; }
.world .count { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13px; letter-spacing: 0.06em; color: var(--mut); opacity: 0; }
.world .count b { color: var(--fg); }
/* the phone: one element is the bezel and the dark room around the screen */
.screen { position: absolute; left: 0; top: 0; border-radius: 22px; opacity: 0; pointer-events: none; transform-origin: 50% 50%;
  box-shadow: 0 0 0 7px #070707, 0 0 0 8.5px oklch(1 0 0 / 22%), 0 30px 60px -20px rgb(0 0 0 / .7); }
.pui { position: absolute; left: 0; top: 0; opacity: 0; color: #f4f4f2; font-size: 10px; white-space: nowrap; pointer-events: none; }
.pui .av { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; margin-right: 6px; background: url(../img/fishing-boats-480.webp) center / cover; }
.pui b { font-weight: 700; }
.pui svg { width: 13px; height: 13px; margin-right: 10px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.pui .heart { transform-origin: 50% 60%; }
.dots { display: flex; gap: 3px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / .35); }
.dots i.on { background: #fff; }
.feedbg { position: absolute; left: 0; top: 0; background: #0b0b0b; opacity: 0; }

/* PicPrep's own Assistant button and panel (web/app/index.html #assistBtn, the Questions inbox) */
.chat { position: absolute; z-index: 3; opacity: 0; pointer-events: none; font-size: 13px; line-height: 1.4; }
.chat .hint { color: var(--mut); font-size: 13px; margin: 0 0 10px; opacity: 0; }
.chat .hint q { color: var(--fg); }
.chat .win { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 24px 48px -16px rgb(0 0 0 / .6); overflow: hidden; }
.chat .bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--sunken); }
.chat .bar b { font-weight: 700; font-size: 12px; }
.chat .bar span { color: var(--mut); font-size: 12px; white-space: nowrap; }
.chat .pillbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--assist); background: var(--assist-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; opacity: 0; transform-origin: 100% 50%; }
.chat .pillbtn::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--assist); }
.chat .ring { position: absolute; inset: -5px; border-radius: 999px; box-shadow: 0 0 0 5px var(--assist-soft); opacity: 0; }
.chat .pw { position: relative; margin-left: auto; }
.chat .panel { padding: 4px 12px 12px; opacity: 0; }
.chat h3 { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--assist); margin: 10px 0 8px; }
.chat .qcard { border: 1px solid var(--line-strong); border-radius: 6px; padding: 10px; background: var(--bg); }
.chat .who { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mut); margin-bottom: 2px; }
.chat .q { font-weight: 650; margin-bottom: 8px; }
.chat .opt { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.chat .opt i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.chat .opt.on i { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px); }
.chat .addnote { color: var(--mut); text-decoration: underline; text-underline-offset: 2px; font-size: 12px; margin: 6px 0 0; }
.chat .note { margin-top: 6px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 6px 8px; min-height: 2.5em; background: var(--sunken); color: var(--fg); font-size: 12px; }
.chat .note:empty::before { content: 'A note (optional)'; color: var(--mut); }
.chat .note i { display: inline-block; width: 1px; height: 1em; background: var(--fg); vertical-align: -2px; margin-left: 1px; }
.chat .row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.chat .row span { font-size: 12px; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--line-strong); }
.chat .row .send { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
.chat .answered { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-top: 8px; opacity: 0; }
.chat .answered small { display: block; font: 12px "Archivo", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--fg); margin-top: 3px; }
.chat .gone { display: none; }

/* captions: one per chapter */
.captions { position: absolute; z-index: 2; pointer-events: none; }
.cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
.cap.live { pointer-events: auto; }
.cap h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 12px; text-wrap: balance; }
.cap p { margin: 0 0 14px; color: var(--mut); max-width: 36ch; font-size: clamp(0.98rem, 1.5vw, 1.1rem); }
.cap p.small { font-size: 0.86rem; max-width: 44ch; }
.cap kbd { font: inherit; font-weight: 650; color: var(--fg); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.rail { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); z-index: 4; }
.rail i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* reduced motion: finished stills instead of a pinned scrub */
.stills { display: none; }
.rm .story { height: auto; }
.rm .stage { display: none; }
.rm .stills { display: grid; gap: 56px; padding-top: 24px; padding-bottom: 72px; }
.still { display: grid; gap: 20px; margin: 0; }
@media (min-width: 860px) { .still { grid-template-columns: 1fr 2fr; align-items: center; } }
.still .host { position: relative; height: min(64vh, 520px); overflow: hidden; }
.still .host .chat { position: absolute; right: 12px; bottom: 12px; width: min(320px, calc(100% - 24px)); opacity: 1; }
.still h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 10px; }
.still p { margin: 0 0 10px; color: var(--mut); max-width: 40ch; }

.folder { position: absolute; left: 0; top: 0; width: 236px; padding: 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; opacity: 0; }
.folder b { display: block; font-size: 13px; }
.folder small { display: block; font-size: 11px; color: var(--mut); margin: 2px 0 10px; }
.folder .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.folder .grid i { aspect-ratio: 4 / 5; background: center / cover var(--sunken); border-radius: 2px; }
.skip { position: absolute; right: 16px; top: 12px; background: var(--bg); padding: 12px 10px; border-radius: 3px; z-index: 5; font-size: 13px; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }


/* the CE marking is black by rule; it sits on a white tile on this dark page */
.prose img[src="ce-mark.svg"] { background: #fff; padding: 10px 12px; border-radius: 2px; height: 60px; width: auto; }

/* small page details (kept here, not inline) */
.plan strong { color: var(--fg); }
.stack-gap { margin-top: 32px; }
.after-cols { margin-top: 32px; }
.form.wide { max-width: none; }
.form.wide input { flex-basis: 100%; }
.setup .after { margin-top: 20px; }

/* the Download page: the visitor's system first (download.js), every system listed beneath */
.btn.big { font-size: 18px; padding: 16px 24px; }
.dl-first { margin: 0; }
.dl-h { font-size: 1.15rem; margin: 36px 0 0; }
.dl { list-style: none; margin: 12px 0 0; padding: 0; max-width: 640px; border-top: 1px solid var(--line-strong); }
.dl li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dl li[hidden] { display: none; }
.dl a { font-weight: 650; }
.dl .note { color: var(--mut); font-size: 15px; }
.dl .size { margin-left: auto; color: var(--mut); font-size: 15px; font-variant-numeric: tabular-nums; }
.steps { margin: 0 0 14px; padding-left: 1.3em; color: var(--mut); max-width: var(--measure); }
.steps li { margin: 0 0 6px; }
.steps li::marker { color: var(--fg); font-weight: 650; }
@media (min-width: 1000px) { .cols.three { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.cols.three p { font-size: 15px; }
.cta { margin: 0; }

/* a draft build's marker (build.mjs --draft) */
.preview-mark { margin: 0; padding: 6px 16px; font-size: 13px; text-align: center; color: var(--mut); border-bottom: 1px solid var(--line); }

/* prices wait, in place, until prices.js knows the visitor's country (about 0.3 s at most); if that script never
   runs they show anyway */
.js [data-price] { visibility: hidden; animation: price-in 0s 1.5s forwards; }
.js.prices-ready [data-price] { visibility: visible; animation: none; }
@keyframes price-in { to { visibility: visible; } }

/* the Download page right after a purchase (bought.js), and the sandbox's note */
.bought { margin: 0 0 72px; padding: clamp(22px, 4.5vw, 36px); border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); max-width: 720px; }
.bought:focus { outline: none; }
.bought h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 18px; }
.bought p { margin: 0 0 14px; max-width: none; }
.bought .keyrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 26px; }
.bought .keyrow code { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; font-size: 1.05rem; line-height: 1.4; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--sunken); color: var(--fg); overflow-wrap: anywhere; user-select: all; }
.bought .keyrow .btn { flex: none; min-width: 96px; text-align: center; }
.bought .keyrow .btn.done { color: var(--st-sel); box-shadow: inset 0 0 0 1px var(--st-sel); }
.bought .steps { margin: 0 0 22px; }
.bought .steps li { margin: 0 0 12px; padding-left: 4px; line-height: 1.5; }
.bought .steps li:last-child { margin-bottom: 0; }
.bought > :last-child { margin-bottom: 0; }
.bought .test-note { margin: -8px 0 16px; }
.test-note { margin: 10px 0 0; font-size: 14px; color: var(--st-may); }