/* The "inside the laptop" product page (spec: Inside the Laptop Designs, v10). Archivo only. */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo.woff2") format("woff2");   /* one file shared with the app windows (tools/snapshot.sh points them here) */
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Safari restyles the whole tree on every frame of a custom-property glide (17 of 460 frames over 50 ms vs 4 when it snaps), so there the palette tokens swap at once
   while the pictures (the hero's Home shots, the stage pattern, the phone stills) still crossfade, quickly. Chrome keeps the 900 ms glide. Smooth beats faithful (Q) */
html.safari { --theme-ms: 320ms; }
html.safari:root { transition-duration: 1ms; }

/* Registered so a theme change glides instead of snapping (gradients read these). The page wears one palette at a time:
   inside.js writes every one of these on :root (themes.js applyTheme) and :root glides them all together (--theme-ms). */
@property --page-acc { syntax: "<color>"; inherits: true; initial-value: #FFAF43; }
@property --how-acc { syntax: "<color>"; inherits: true; initial-value: #FFAF43; }
@property --t-from { syntax: "<color>"; inherits: true; initial-value: #2F1500; }
@property --t-to { syntax: "<color>"; inherits: true; initial-value: #230F00; }
@property --t-accent { syntax: "<color>"; inherits: true; initial-value: #FFAF43; }
@property --t-glow { syntax: "<color>"; inherits: true; initial-value: rgba(255, 175, 67, .1); }
@property --t-glow-strong { syntax: "<color>"; inherits: true; initial-value: rgba(255, 175, 67, .22); }
@property --d-accent { syntax: "<color>"; inherits: true; initial-value: #FFAF43; }
@property --d-accent-ink { syntax: "<color>"; inherits: true; initial-value: #231000; }
@property --d-accent-soft { syntax: "<color>"; inherits: true; initial-value: rgba(255, 175, 67, .14); }
@property --d-line-accent { syntax: "<color>"; inherits: true; initial-value: rgba(255, 175, 67, .25); }
@property --d-surface { syntax: "<color>"; inherits: true; initial-value: #150900; }
@property --d-surface-2 { syntax: "<color>"; inherits: true; initial-value: #1E0F04; }
@property --d-text { syntax: "<color>"; inherits: true; initial-value: #F0DFC4; }
@property --d-text-dim { syntax: "<color>"; inherits: true; initial-value: rgba(240, 223, 196, .66); }
@property --d-text-faint { syntax: "<color>"; inherits: true; initial-value: rgba(240, 223, 196, .52); }
@property --d-dots { syntax: "<color>"; inherits: true; initial-value: rgba(240, 223, 196, .09); }
@property --d-select { syntax: "<color>"; inherits: true; initial-value: #5DDC95; }
@property --g-ink { syntax: "<color>"; inherits: true; initial-value: #ecedef; }
@property --g-ink-2 { syntax: "<color>"; inherits: true; initial-value: #c9cbd0; }
@property --g-ink-3 { syntax: "<color>"; inherits: true; initial-value: #9a9ca3; }
@property --g-yellow { syntax: "<color>"; inherits: true; initial-value: #ffaf43; }
@property --g-card { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0); }
@property --g-bar { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, .3); }
@property --g-line { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .1); }
@property --g-shade { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, .7); }
@property --g-on-acc { syntax: "<color>"; inherits: true; initial-value: #101113; }
@property --g-pulse { syntax: "<color>"; inherits: true; initial-value: #FFAF43; }
@property --g-rail-mul { syntax: "<number>"; inherits: true; initial-value: .62; }
@property --g-float-mul { syntax: "<number>"; inherits: true; initial-value: .42; }
@property --g-mul { syntax: "<number>"; inherits: true; initial-value: .62; }
@property --pt-pattern { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .55); }

:root {
  --bg: #101113;
  --bg-2: #16171a;
  --bg-3: #1d1e22;
  --ink: #ecedef;
  --ink-2: #c9cbd0;
  --ink-3: #9a9ca3;
  --yellow: #ffaf43;
  --button: #e9b579;
  --button-ink: #211309;
  --line: rgba(255, 255, 255, .1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --settle: cubic-bezier(.22, 1, .36, 1);
  --side: clamp(16px, 4vw, 64px);
  --gutter: 0px;
  --pad-x: max(var(--side), var(--gutter));
  --page-acc: #FFAF43;
  --how-acc: #FFAF43;
  --cta-gap: clamp(32px, 3vw, 48px);   /* the room above every call-to-action button, much more than body copy has (Q's standing rule: the close's and the title card's Download, the footer's way back) */
  --theme-ms: 1600ms;   /* [holdcolor] (Q, Oct 9: slower, "particularly the fade"; was 900 ms) one palette change: the ground, the pattern, every accent, the app windows (the same 900 ms ease everywhere) */
  color-scheme: dark;
  transition-property: --page-acc, --how-acc, --t-from, --t-to, --t-accent, --t-glow, --t-glow-strong, --d-accent, --d-accent-ink, --d-accent-soft,
    --d-line-accent, --d-surface, --d-surface-2, --d-text, --d-text-dim, --d-text-faint, --d-dots, --d-select,
    --g-ink, --g-ink-2, --g-ink-3, --g-yellow, --g-card, --g-bar, --g-line, --g-shade, --g-on-acc, --g-pulse, --g-mul, --g-rail-mul, --g-float-mul;
  transition-duration: var(--theme-ms);
  transition-timing-function: ease;
}

* { box-sizing: border-box; }
html { background: var(--t-to); scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h, 68px) + 12px); }   /* (a link lands below the sticky header; inside.js measures it) */
html.still { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0; }
a { color: var(--yellow); }
a:hover { color: #ffc472; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 40; padding: 10px 16px; border-radius: 999px; background: var(--button); color: var(--button-ink); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }


/* One ground for the whole screen (.page-ground, z 0, fixed: the app's own --d-ground in the palette of the part that has moved
   in), the app's stage pattern over it (.stage-pattern, z 1), content above both (z 2). Sections paint no grounds of their own,
   so there is never a band or a seam between two parts: the whole screen changes color at once. (.sec::before stays for the
   close's soft glow, in the page's accent.) */
.page-ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% -8%, var(--t-from), var(--t-to) 70%); }
.top, main, .foot { position: relative; }
.top, .foot { z-index: 2; }
main { padding-left: var(--gutter); }
.sec { position: relative; margin-left: calc(-1 * var(--gutter)); padding-inline: var(--pad-x); }
.sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--sec-bg, transparent); mix-blend-mode: lighten; }
.sec > * { position: relative; z-index: 2; }

/* The app's stage pattern (#pt-stagewrap::before, icedcoffee-tracker src/cv-maker.css:54-57): same pitch, dot size and lines,
   fixed behind the page the way the app's stage pattern stays put while its page scrolls. inside.js sets --pt-pattern and
   --pt-pattern-opacity per palette exactly as the app computes them (themes.js patternFor), on two layers that crossfade. */
.stage-pattern { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.stage-pattern > i { position: absolute; inset: 0; opacity: 0; transition: opacity var(--theme-ms) ease, --pt-pattern var(--theme-ms) ease; }
.stage-pattern > i.is-on { opacity: var(--pt-pattern-opacity, .2); }
/* the opacity slider: under a drag the layers glide quickly (the dot wave keeps the same time, inside.js QUICK_MS) */
.stage-pattern.is-quick > i { transition-duration: 160ms; }
.stage-pattern > i[data-pattern="dots"] { background: radial-gradient(circle at 1px 1px, var(--pt-pattern) 1px, transparent 0) 0 0 / 22px 22px; }
.stage-pattern > i[data-pattern="grid"] { background: linear-gradient(var(--pt-pattern) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--pt-pattern) 1px, transparent 1px) 0 0 / 22px 22px; }
.stage-pattern > i[data-pattern="lines"] { background: repeating-linear-gradient(45deg, var(--pt-pattern) 0 1px, transparent 1px 16px); }
.stage-pattern > i[data-pattern="plus"] { background: var(--pt-pattern); -webkit-mask: var(--pt-plus) 0 0 / 22px 22px repeat; mask: var(--pt-plus) 0 0 / 22px 22px repeat; }
:root { --pt-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M10 7h1v8h-1zM7 10h8v1H7z'/%3E%3C/svg%3E"); }
/* the dot wave (../assets/dotwave/): the same pattern lit as a slow surface, drawn over these layers once it draws the same
   pixels (inside.js mounts it after the first paint; the CSS layers stay as the first paint and the fallback) */
.stage-pattern > canvas { position: absolute; inset: 0; }
.wrap { max-width: 1240px; margin: 0 auto; }

/* ---------- shared type and controls ---------- */
.eyebrow { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.body { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.lead { font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.fine { font-size: 14px; color: var(--ink-3); }
.note { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.acc { color: var(--page-acc); }
.acc-yellow { color: var(--yellow); }
h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; font-weight: 800; font-stretch: 110%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px;
  background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 420ms var(--spring), box-shadow 300ms ease;
}
.btn:hover { color: var(--button-ink); transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(233, 181, 121, .55); }
/* [beta] the main buttons are real buttons now (Join the beta opens the shared sheet): none of the browser's own box or font */
button.btn { appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer; font-family: inherit; line-height: inherit; letter-spacing: inherit; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.ghost {
  appearance: none; border: 1px solid rgba(255, 255, 255, .18); background: none; color: var(--ink);
  font-size: 15px; padding: 10px 20px; border-radius: 999px; cursor: pointer; min-height: 44px;
  transition: border-color 300ms ease, background 300ms ease;
}
.ghost:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .04); }
.ghost-sm { min-height: 40px; font-size: 14px; padding: 8px 16px; }

/* ---------- header ----------
   The 3D site's header strip in this page's own colors (the page's palette: --page-acc and the ink grays): letterspaced small
   caps for the links, a thin rule along the bottom edge that fills as the page scrolls (scroll-driven, no script), and the
   frosted band behind it, solid right down to the rule with its fade starting below it. Sticky: at the very top it sits on the
   page; once the page scrolls (.is-stuck) the band fades in. One row always: the links fold into a Sections menu when they
   don't fit beside the logo and the actions (inside.js measures, .is-compact). The current part's link is lit in the
   accent with a short line under it that glides from link to link. The two downloads: "Download on GitHub" (filled) and
   "Mac App Store, Coming soon" (outline; get-app.js turns it into a link when APP_STORE_URL has a value). */
.top {
  --top-x: max(var(--pad-x), calc((100% - 1340px) / 2));
  position: sticky; top: 0; z-index: 25;
  padding: 12px var(--top-x);
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px;
}
.top::before {
  content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--t-to) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent);   /* (solid down to the rule, the fade below it) */
  transition: opacity 420ms ease;
}
.top.is-stuck::before { opacity: 1; }
.top::after {   /* the rule: faint along the whole header, filled in the accent as far as the page has scrolled */
  content: ""; position: absolute; left: var(--top-x); right: var(--top-x); bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(var(--page-acc), var(--page-acc)) left / 0% 100% no-repeat, color-mix(in srgb, var(--page-acc) 24%, transparent);
}
@supports (animation-timeline: scroll()) {
  .top::after { animation: top-rule linear both; animation-timeline: scroll(root); }
  @keyframes top-rule { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
}
.brand { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--page-acc); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand b { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.nav-wrap { position: relative; min-width: 0; }
.nav { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; font-size: 10px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap; }
.nav a { position: relative; z-index: 1; color: var(--ink-3); text-decoration: none; padding: 9px 11px;   /* (Q, Oct 9: "too close together"; was 5px a side: fitNav still folds it into the menu when it does not fit) */  transition: color 300ms ease; }
.nav a:hover { color: var(--ink); }
.nav a.is-current { color: var(--page-acc); }
.nav-ind {
  position: absolute; left: 0; top: 50%; height: 2px; width: 0; translate: 0 10px; border-radius: 1px; pointer-events: none; opacity: 0;
  background: var(--page-acc);
  transition: transform 560ms var(--spring), width 560ms var(--spring), opacity 300ms ease;
}
.nav-ind.is-on { opacity: 1; }
.nav-ind.is-placing { transition: opacity 300ms ease; }   /* (its first spot: it fades in there, it doesn't fly in from the left) */
.nav .nav-extra { display: none; }
.nav-menu-btn {
  appearance: none; display: none; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid color-mix(in srgb, var(--page-acc) 40%, transparent); color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  transition: border-color 300ms ease, background 300ms ease;
}
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { border-color: var(--page-acc); background: color-mix(in srgb, var(--page-acc) 8%, transparent); }
.nav-menu-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.top-actions { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.dl-news { display: none; color: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 8px 4px; transition: color 300ms ease; }
.dl-news:hover { color: var(--page-acc); }
@media (min-width: 1500px) { .dl-news { display: block; } }
/* the two downloads (the 3D header strip's pills, one step larger for the page) */
.dl {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--page-acc) 50%, transparent); background: transparent; color: var(--ink); font: inherit; font-size: 10px; font-weight: 600; letter-spacing: 1.1px; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: transform 420ms var(--spring), box-shadow 300ms ease, border-color 300ms ease, background 300ms ease, color 300ms ease;
}
.dl svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl:hover { color: var(--ink); border-color: var(--page-acc); background: color-mix(in srgb, var(--page-acc) 9%, transparent); transform: translateY(-2px); }
.dl-short { display: none; }
.dl-main { background: var(--button); border-color: var(--button); color: var(--button-ink); font-weight: 700; }
.dl-main:hover { background: var(--button); border-color: var(--button); color: var(--button-ink); box-shadow: 0 12px 30px -10px rgba(233, 181, 121, .55); }
.dl-soon-tag { margin-left: 1px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--page-acc) 45%, transparent); color: var(--page-acc); font-weight: 700; }
.dl .dl-tip {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 3; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--page-acc) 40%, transparent);
  background: color-mix(in srgb, var(--t-to) 94%, #000); color: var(--ink); font-size: 12px; font-weight: 400; letter-spacing: .2px; line-height: 1.35; text-transform: none; white-space: nowrap; text-align: left;
  opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none; transition: opacity 250ms ease, transform 420ms var(--spring), visibility 0s linear 250ms;
}
.dl:hover .dl-tip, .dl:focus-visible .dl-tip, .dl.is-tip .dl-tip { opacity: 1; transform: none; visibility: visible; transition: opacity 250ms ease, transform 420ms var(--spring), visibility 0s; }
/* too narrow for the links: a Sections button beside the actions; the links open under it as a panel */
/* (the panel hangs from the header's right edge, in line with the actions, so it never runs off a phone's screen) */
.top.is-compact .nav-wrap { margin-left: auto; position: static; }
.top.is-compact .nav-menu-btn { display: flex; }
.top.is-compact .nav {
  position: absolute; right: var(--top-x); top: calc(100% + 2px); z-index: 2; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; font-size: 11px;
  min-width: 220px; max-width: calc(100vw - 32px); max-height: calc(100vh - var(--head-h, 68px) - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  transform-origin: 100% 0; transition: opacity 260ms ease, transform 520ms var(--spring), visibility 0s linear 0s;
}
.top.is-compact .nav:not(.is-open) { opacity: 0; transform: translateY(-8px) scale(.94); visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 320ms var(--settle), visibility 0s linear 320ms; }
.top.is-compact .nav a { padding: 12px 14px; border-radius: 10px; }
.top.is-compact .nav a.is-current { background: color-mix(in srgb, var(--page-acc) 14%, transparent); }
.top.is-compact .nav-ind { display: none; }
.top.is-compact .nav .nav-extra { display: block; margin-top: 4px; color: var(--ink-3); }
.dl-soon[data-appstore], .nav .nav-soon { display: none !important; }   /* [appstore-flag] Q, Oct 8: the Mac App Store "coming soon" pill (and its menu line) is hidden for now; delete this one rule to bring it back */
.top.is-compact .nav .nav-extra.nav-soon { display: none; padding: 12px 14px; margin-top: 0; }   /* (phones show it, below) */

/* ---------- hero ---------- */
.hero { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(44px, 5.4vw, 72px); overflow-x: clip; }   /* (sideways only: the window's halo fades out below the hero, never cut at its edge) */
.hero-wrap { max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.pill { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: var(--ink-2); white-space: nowrap; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
/* (the words that led the hero now float over the commercial: film.css .film-card, with the h1 rules; the tour leads here under its small eyebrow) */
.hero-stage { position: relative; width: 100%; max-width: 1140px; margin-top: 0; }
.hero-win {
  --tx: 0deg; --ty: 0deg;
  position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6); background: var(--d-ground);
  transform: perspective(1600px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform 1200ms cubic-bezier(.33, 1, .68, 1);   /* a faint lean, glided slowly */
}
.win-bar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(0, 0, 0, .3); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; flex: none; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { flex: 1; min-width: 0; text-align: center; font-size: 12px; color: var(--ink-3); margin-right: 54px; white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.hero-shots { position: relative; aspect-ratio: 16 / 10; }

/* ---------- the app's halo behind every app window and screenshot ----------
   The app's own glow behind its floating surfaces (icedcoffee-tracker src/espresso/tokens.css:40-52, --d-halo: a 250px glow
   of white at 100%, blended overlay; drawn as src/espresso/kit.css:173-199's .desk-halo): overlay with white doubles the
   ground under it (min(2 x ground, 1)), so the ground lifts in its own hue and the halo wears whatever palette the page wears,
   gliding with it. As in the app it's a backdrop-filter, brightness(2), faded by a mask shaped like the 250px blur (the
   Gaussian ramp on each edge, multiplied). Static: it never follows the mouse. The window covers its middle, so (unlike the
   app's glassy surfaces) nothing is cut out under it, and a window that lifts or leans a little never shows a seam.
   The commercial's window (#film), the hero's window and the six chapter windows (live app frames on wide screens, still screenshots on phones). Words
   beside a window sit above the halo (z-index 1 below), so it lifts only the ground and the pattern, never the copy. */
:root {
  --halo-reach: 375px;   /* a 250px blur is a Gaussian of sigma 125px: it reaches 3 sigma past the surface */
  --halo-ramp: rgb(0 0 0 / .0013) 0, rgb(0 0 0 / .0062) 62.5px, rgb(0 0 0 / .0228) 125px, rgb(0 0 0 / .0668) 187.5px,
    rgb(0 0 0 / .1587) 250px, rgb(0 0 0 / .3085) 312.5px, rgb(0 0 0 / .5) 375px, rgb(0 0 0 / .6915) 437.5px,
    rgb(0 0 0 / .8413) 500px, rgb(0 0 0 / .9332) 562.5px, rgb(0 0 0 / .9772) 625px, rgb(0 0 0 / .9938) 687.5px, #000 750px;
}
.hero-stage, .chapter-demo, .film-stage { z-index: 0; contain: layout; }   /* the halo's stacking context, kept out of every scroll size */
.hero-copy, .picker-wrap, .chapter-copy { position: relative; z-index: 1; }
.hero-stage::before, .chapter-demo::before, .film-stage::before {
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--halo-reach)); pointer-events: none;
  -webkit-backdrop-filter: brightness(2); backdrop-filter: brightness(2);
  -webkit-mask-image: linear-gradient(to right, var(--halo-ramp)), linear-gradient(to left, var(--halo-ramp)), linear-gradient(to bottom, var(--halo-ramp)), linear-gradient(to top, var(--halo-ramp));
  mask-image: linear-gradient(to right, var(--halo-ramp)), linear-gradient(to left, var(--halo-ramp)), linear-gradient(to bottom, var(--halo-ramp)), linear-gradient(to top, var(--halo-ramp));
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-repeat: no-repeat;
}
.hero-shots .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; opacity: 0; z-index: 0; transition: opacity var(--theme-ms) ease; }
.hero-shots .shot.is-under { opacity: 1; z-index: 1; transition: none; }
.hero-shots .shot.is-on { opacity: 1; z-index: 2; }

/* ---------- the picker: colors on the left under the window, the background pattern on the right ----------
   Swatches only (each named for screen readers and in a tooltip). Once the picker scrolls up to the nav, it splits: the
   colors dock on the screen's left edge and the patterns on its right, both turned vertical (inside.js moves the two
   groups into .dock rails and flies every button there, FLIP, on a spring); narrower than the rails fit, one small pill at
   the bottom right that opens both. The picker's own row keeps its height, so nothing below it moves. */
.picker-wrap.is-railed { display: none; }   /* [rails-first] its controls are the side rails (inside.js) */
.picker-wrap { width: 100%; max-width: 1140px; min-height: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.pick-group { display: flex; align-items: center; gap: 8px 12px; min-width: 0; }
.pick-label { font-size: 13px; color: var(--ink-3); white-space: nowrap; transition: opacity 300ms ease; }
/* the pattern's opacity: a small range in the same pill as the pattern buttons, just left of them (vertical on the rail) */
.strength {
  position: relative; flex: none; display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line);
}
.strength input {
  --v: 20%;
  appearance: none; -webkit-appearance: none; display: block; width: 84px; height: 24px; margin: 0; background: none; cursor: pointer;
}
.strength input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink-2) var(--v), rgba(255, 255, 255, .16) var(--v)); }
.strength input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink-2) var(--v), rgba(255, 255, 255, .16) var(--v)); }
.strength input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; border: 0;
  background: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); transition: transform 420ms var(--spring);
}
.strength input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); transition: transform 420ms var(--spring); }
.strength:hover input::-webkit-slider-thumb, .strength input:active::-webkit-slider-thumb { transform: scale(1.14); }
.strength:hover input::-moz-range-thumb, .strength input:active::-moz-range-thumb { transform: scale(1.14); }
.strength input:focus-visible { outline: none; }
.strength:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
.picker { display: flex; flex-wrap: wrap; gap: 2px; }
.swatch {
  appearance: none; border: 0; background: none; padding: 0; width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
}
.swatch .dot {
  width: 18px; height: 18px; border-radius: 50%; background: var(--sw, var(--c)); outline: 2px solid transparent; outline-offset: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); transition: transform 420ms var(--spring), outline-color 300ms ease;
}
.swatch:hover .dot { transform: scale(1.14); }
.swatch.is-current .dot { outline-color: var(--c); }
.swatch:focus-visible { outline-offset: 0; border-radius: 50%; }
.pattern-switch.switch { padding: 3px; gap: 2px; align-self: auto; }
.pattern-switch.switch button { width: 32px; height: 32px; min-height: 0; padding: 0; display: grid; place-items: center; flex: none; }
.pattern-switch button:hover { color: var(--ink); }
.pattern-switch.switch button.is-current { background: var(--ink-solid); color: #101113; }
.pattern-switch svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* [holdcolor] the moon/sun switch: the pattern switch's look */
.mode-switch.switch { padding: 3px; gap: 2px; align-self: auto; }
.mode-switch.switch button { width: 32px; height: 32px; min-height: 0; padding: 0; display: grid; place-items: center; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); cursor: pointer; transition: background-color 300ms ease, color 300ms ease; }
.mode-switch button:hover { color: var(--ink); }
.mode-switch.switch button.is-current { background: var(--ink-solid); color: #101113; }
.mode-switch button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.mode-switch svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* the docked picker: two rails on the screen's edges (vertical), in the gutters beside the page's text */
.dock { position: fixed; z-index: 30; display: none; }
.dock.is-on { display: block; }
.dock-rail { top: 50%; translate: 0 -50%; }
.dock-left { left: 6px; }
.dock-right { right: 6px; }
.dock-rail .pick-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dock-rail .pick-patterns { flex-direction: column; gap: 8px; }
.dock-rail .strength { width: 40px; height: 108px; padding: 0; }
.dock-rail .strength input { position: absolute; left: 50%; top: 50%; width: 84px; translate: -50% -50%; rotate: -90deg; }
.dock-rail .picker, .dock-rail .pattern-switch {
  flex-direction: column; flex-wrap: nowrap; padding: 3px; gap: 2px; border-radius: 999px;
  border: 1px solid var(--line);
}
/* narrower than the rails fit beside the text: one pill at the bottom right; it opens into both groups */
.dock-pill { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.dock-toggle {
  appearance: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--ink); font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
}
.dock-toggle .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--page-acc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.dock-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dock-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); display: flex; flex-direction: column; gap: 12px; padding: 14px;
  width: max-content; max-width: calc(100vw - 32px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  transform-origin: 100% 100%; transition: opacity 260ms ease, transform 520ms var(--spring), visibility 0s linear 0s;
}
.dock-panel[data-open="false"] { opacity: 0; transform: translateY(8px) scale(.92); visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 320ms var(--settle), visibility 0s linear 320ms; }
.dock-panel .pick-group { justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
/* at the close (#download and the footer under it) the docked picker steps aside: each rail slides off its own edge, the pill
   drops below the screen (inside.js .is-away, inert while away), and they spring back in on the way up */
.dock { transition: transform 680ms var(--spring), visibility 0s linear 0s; }
.dock.is-away { visibility: hidden; transition: transform 480ms cubic-bezier(.5, -0.12, .7, .55), visibility 0s linear 480ms; }
.dock-left.is-away { transform: translateX(calc(-100% - 16px)); }
.dock-right.is-away { transform: translateX(calc(100% + 16px)); }
.dock-pill.is-away { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); }

/* ---------- the problem ---------- */
.problem { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(34px, 4.2vw, 58px); }
.problem .wrap { max-width: 1100px; display: flex; flex-direction: column; gap: 40px; }
.problem-copy { display: flex; flex-direction: column; gap: 18px; }
.problem-end { font-size: 19px; color: var(--ink-2); text-align: center; font-weight: 600; }

/* ---------- guide + how it works ---------- */
.guide { padding-bottom: clamp(52px, 6vw, 90px); color: var(--g-ink); }
/* the one light part (themes.js LIGHT_THEMES, Q Oct 8): the words here read the --g-* tokens, which are the page's own ink on the eight dark
   palettes and dark brown on the light ground (they glide with the ground, like every other token) */
.guide .eyebrow, .how-count { color: var(--g-ink-3); }
.guide .body { color: var(--g-ink-2); }
.guide .acc-yellow { color: var(--g-yellow); }
.guide-copy { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }

/* The page's glass card: the app's card (src/espresso: 18px radius, a hairline border, its surface with the inset top light and
   the soft drop) made translucent, with the pattern and the dot wave blurred behind it. Every palette is dark, so the words
   on it read the same on all eight. Used by the how-it-works steps, the chapters' feature cards and the import formats. */
:root { --glass-line: rgba(255, 255, 255, .1); }
.how-step, .feats li, .formats li {
  border: 1px solid var(--glass-line); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px -28px rgba(0, 0, 0, .7);
}

/* THE PAGE'S ONE SURFACE (Q, Oct 6: a fixed gray clashed with the warm palettes). Every card, panel, rail and pill that was a
   neutral gray (#131417, #16171a, rgba(16,17,19,.9)) is now the ground behind it, blurred and multiplied by a neutral gray, so
   it always takes the hue of whatever palette is on. Multiplying by a neutral gray g is exactly brightness(g), so one
   backdrop-filter does the blur and the multiply in a single layer (a ::before with mix-blend-mode: multiply cannot reach the
   page behind a backdrop-filter element, and a per-theme fill would not follow the pattern and the halo). These rules paint no
   fill; each surface's own rule keeps its border, radius and shadow. Dials, per surface: --mul (lower is darker) and --mul-blur
   (the small pieces set 0px: tiles, pills and rails keep the multiply and skip the blur, so no screen holds more than about ten
   blurred layers). Add .mul to any new card. */
:root { --mul: var(--g-mul); --mul-blur: 16px; }   /* (--g-mul: .62 on the dark palettes, 1 on the light ground, where each glass card is a light fill instead: --g-card) */
.mul, .how-step, .feats li, .formats li, .qa, .table-card, .pb, .switch, .strength, .demo-pause,
.top.is-compact .nav, .dock-rail .picker, .dock-rail .pattern-switch, .dock-toggle, .dock-panel {
  background-color: var(--g-card);   /* (transparent on the dark palettes; a light fill on the light ground. Also: the three buttons here would otherwise wear the browser's button gray) */
  -webkit-backdrop-filter: blur(var(--mul-blur)) brightness(var(--mul)); backdrop-filter: blur(var(--mul-blur)) brightness(var(--mul));
}
.top.is-compact .nav, .dock-panel, .dock-toggle, .demo-pause { --mul: .42; }   /* floating over words and a white page: darker, so light text still reads */
.top, main, .foot { --ink: var(--g-ink); --ink-2: var(--g-ink-2); --ink-3: var(--g-ink-3); --yellow: var(--g-yellow); }
/* [lightink] (Q, Oct 12: "you're not changing the text color for light palette") the words inherit body's color, which body works out from
   :root's dark --ink; re-declaring the color where the tokens change makes every inherited word follow the palette (dark: the same #ecedef) */
.top, main, .foot { color: var(--ink); }
/* (the header and every part of the page wear the same ink and yellow: the eight dark palettes give exactly the old values, the light ground gives dark brown and a deep amber,
   so the parts just above and below the light one stay readable while the ground glides in and out; the one place ink is a fill, the compare's Yes/No switch, uses --ink-solid) */
:root { --ink-solid: #ecedef; }
.top.is-compact .nav, .dock-rail .picker, .dock-rail .pattern-switch, .dock-toggle, .dock-panel, .demo-pause, .switch, .strength { background-color: transparent; }   /* (the floating controls stay dark glass, no light fill) */
/* the floating controls (the docked rails, the Colors pill and its panel) stay dark glass over the light ground, so their light icons still read (--g-rail-mul and --g-float-mul: the old .62 and .42 on the eight palettes, .26 on the light one) */
.dock-rail .picker, .dock-rail .pattern-switch { --mul: var(--g-rail-mul); }
.dock-panel, .dock-toggle { --mul: var(--g-float-mul); }
html[data-tone="light"] .top.is-compact .nav { --ink: #ecedef; --ink-2: #d9dadf; --ink-3: #d9dadf; --mul: .22; }
.formats li, .switch, .strength, .dock-rail .picker, .dock-rail .pattern-switch, .dock-toggle, .demo-pause { --mul-blur: 0px; }

.how { --how-w: min(1440px, calc(100vw - 2 * var(--pad-x))); width: var(--how-w); margin: 64px calc((100% - var(--how-w)) / 2) 0;   /* (wider than the text column when the screen allows: the hub's window is as large as the row lets it be) */
  display: flex; flex-direction: column; gap: 22px; container-type: inline-size; outline: none; }
.how-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.how-head h3 { font-size: 20px; font-weight: 750; }
.how-count { font-size: 14px; }
/* the track runs above the cards (one stop over each card's middle); Mara's resume rides it */
.how-track-wrap { position: relative; padding-top: 52px; }
.how-track { position: absolute; left: calc(50% / var(--how-n, 5)); right: calc(50% / var(--how-n, 5)); top: 19px; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 1px; }
.how-fill { height: 100%; width: var(--fill, 0%); background: var(--how-acc); border-radius: inherit; transition: width 900ms var(--settle); }
.how-token { position: absolute; top: 20px; left: var(--tok, 10%); opacity: var(--tok-o, 0); transform: translate(-50%, -50%); transition: left 900ms var(--spring), opacity 300ms ease; z-index: 2; pointer-events: none; }
.how-token span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--how-acc); color: #101113; font-size: 12px; font-weight: 750; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.how-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--how-n, 5), minmax(0, 1fr)); gap: 16px; }
.how-steps > li { display: flex; min-width: 0; }
/* each step is one card: the icon, STEP n, the title and its line, all inside */
.how-step {
  appearance: none; position: relative; width: 100%; padding: 22px 20px 24px; text-align: left; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0;
  transition: transform 520ms var(--spring), border-color 400ms ease, box-shadow 520ms ease, background-color 400ms ease;
}
.how-step:focus-visible { outline-offset: 4px; border-radius: 18px; }
.how-card {
  position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--g-ink-3);
  transition: background-color 520ms ease, border-color 400ms ease, color 400ms ease, transform 520ms var(--spring);
}
.how-card svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.how-check {
  position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--how-acc); color: var(--g-on-acc); font-size: 14px; font-weight: 900;
  opacity: 0; transform: scale(.4); transition: opacity 300ms ease, transform 480ms var(--spring);
}
.how-text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.how-n { font-size: 12px; font-weight: 750; letter-spacing: 1px; color: var(--g-ink-3); transition: color 400ms ease; }
.how-title { font-size: 17px; font-weight: 750; line-height: 1.25; color: var(--g-ink-2); transition: color 400ms ease; text-wrap: balance; }
.how-desc { font-size: 15px; line-height: 1.45; color: var(--g-ink-3); transition: color 400ms ease; }
.how-step.done { border-color: color-mix(in srgb, var(--how-acc) 42%, transparent); }
.how-step.done .how-card { border-color: color-mix(in srgb, var(--how-acc) 45%, transparent); color: var(--how-acc); }
.how-step.done .how-check { opacity: 1; transform: scale(1); }
.how-step.done .how-n { color: var(--how-acc); }
.how-step.done .how-title { color: var(--g-ink); }
.how-step.done .how-desc { color: var(--g-ink-2); }
.how-step.active {
  transform: translateY(-8px); border-color: var(--how-acc);
  background-color: color-mix(in srgb, var(--how-acc) 12%, var(--g-card));
  box-shadow: 0 0 0 1px var(--how-acc), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 56px -14px color-mix(in srgb, var(--how-acc) 45%, transparent);
}
.how-step.active .how-card { background: color-mix(in srgb, var(--how-acc) 16%, transparent); border-color: var(--how-acc); color: var(--how-acc); transform: scale(1.06); }
.how-step.active .how-n { color: var(--how-acc); }
.how-step.active .how-title { color: var(--g-ink); }
.how-step.active .how-desc { color: var(--g-ink-2); }
@container (max-width: 980px) {
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .how-track, .how-token { display: none; }
  .how-track-wrap { padding-top: 8px; }
}
@container (max-width: 560px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .how-step { padding: 18px 16px 20px; gap: 14px; }
  .how-card { width: 48px; height: 48px; border-radius: 14px; }
  .how-card svg { width: 22px; height: 22px; }
  .how-check { top: 12px; right: 12px; }
  .how-title { font-size: 16px; }
  .how-desc { font-size: 14px; }
}

/* ---------- chapters ---------- */
.chapter {
  min-height: var(--chap-h, 0px);   /* (as tall as the tallest chapter, no longer a whole screen: the page reads as one flow) */
  display: flex; align-items: center; padding-top: clamp(56px, 6.6vw, 104px); padding-bottom: clamp(56px, 6.6vw, 104px);
}
/* the chapters use the width: wider than the page's text sections, with the side padding kept */
.chapter > .wrap { width: 100%; max-width: 1440px; }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: center; gap: clamp(48px, 5.5vw, 96px); }
.chapter.flip .chapter-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.chapter.flip .chapter-copy { order: 2; }
/* [chaphug] (Q, Oct 12: "too much space" around Import) a chapter whose words run longer than its window (Import's format tiles) no longer
   centers the window in empty ground: the window starts with the words and rides along beside them (sticky under the header) to their end */
@media (min-width: 900px) {
  .chapter-grid > .chapter-demo { align-self: start; position: sticky; top: max(96px, calc(50vh - 22vw)); }
}
.chapter-copy { display: flex; flex-direction: column; gap: 20px; }
.chapter-copy > .body { margin-bottom: 4px; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--t-accent); }
.chapter h2 { font-size: clamp(56px, 7vw, 104px); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -2px; color: var(--t-accent); }
/* (marketing + Q, Oct 12) each chapter's big word gets a plain sub-line naming the feature: visible, part of the h2, quiet */
.chapter h2 .h2-sub { display: block; margin-top: 14px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.3; font-weight: 600; font-stretch: 100%; letter-spacing: normal; color: var(--ink-2); text-wrap: balance; }
/* each chapter's features: stacked cards, an icon and a title with its line */
.feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feats li { display: flex; align-items: center; gap: 18px; padding: 16px 20px; min-height: 80px; border-radius: 16px; }
.feat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feat-text b { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.feat-text span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.ic { width: 46px; height: 46px; flex: none; border-radius: 13px; background: color-mix(in srgb, var(--t-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent) 28%, transparent); display: grid; place-items: center; color: var(--t-accent); }
.ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Import's formats: two rows of three, each a file badge in its own color with its own mark */
.formats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.formats li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 16px; border-radius: 16px; text-align: center; font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.fmt {
  position: relative; width: 50px; height: 62px; flex: none; color: var(--f);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 4px;
  border-radius: 8px 18px 8px 8px; background: color-mix(in srgb, var(--f) 13%, transparent); border: 1.5px solid color-mix(in srgb, var(--f) 72%, transparent);
}
.fmt::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 17px; height: 17px; border-radius: 0 16px 0 7px; background: var(--f); opacity: .5; }
.fmt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmt b { font-size: 9.5px; letter-spacing: .6px; font-weight: 800; line-height: 1; }

.chapter-demo { position: relative; min-width: 0; }
/* wide screens: the chapter windows stand taller than the app's 16:10 (the camera keeps any aspect: appframe.js frame()),
   about as tall as the stacked cards beside them */
@media (min-width: 900px) { .chapter .win-stage { aspect-ratio: var(--demo-ar, 5 / 4); } }
.win {
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  background: var(--d-ground); color: var(--d-text);
  transition: transform 420ms var(--spring), box-shadow 420ms ease, border-color 300ms ease;
}
.win:hover { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .24); }
.win .win-bar { background: rgba(0, 0, 0, .3); }
.win .win-bar span { color: var(--d-text-dim); }

/* the pause control every looping demo carries (WCAG 2.2.2) */
.demo-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  appearance: none; border: 1px solid rgba(255, 255, 255, .18); color: var(--ink-solid);
  display: grid; place-items: center; cursor: pointer; opacity: .6; transition: opacity 200ms ease, transform 300ms var(--spring);
}
.demo-pause:hover, .demo-pause:focus-visible { opacity: 1; }
.demo-pause svg { width: 14px; height: 14px; fill: currentColor; }
html.still .demo-pause { display: none; }

/* ---------- compare ---------- */
.compare { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.compare .wrap { max-width: 1200px; display: flex; flex-direction: column; gap: 32px; }
.compare-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.switch { align-self: center; display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); position: relative; }
.switch button {
  appearance: none; border: 0; font-size: 14px; font-weight: 650; padding: 8px 16px; border-radius: 999px; cursor: pointer; min-height: 40px;
  background: transparent; color: var(--ink-2); transition: background 420ms var(--spring), color 300ms ease; white-space: nowrap;
}
.switch button[aria-pressed="true"] { background: var(--ink-solid); color: #101113; }
.table-card { container-type: inline-size; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; table-layout: fixed; }
.cmp thead td { width: 20%; border-bottom: 1px solid var(--line); }
.cmp thead th { text-align: left; padding: 18px 16px; font-weight: 650; border-bottom: 1px solid var(--line); }
.cmp thead th.us { font-weight: 800; color: var(--button-ink); background: var(--yellow); }
.cmp tbody th { text-align: left; padding: 22px 16px; font-weight: 650; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: top; }
.cmp td { padding: 22px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: top; }
.cmp td.us { background: rgba(255, 175, 67, .08); border-bottom-color: rgba(255, 175, 67, .14); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cell { display: flex; align-items: flex-start; gap: 10px; }
.mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.mark.yes { background: #90D68A; color: #101113; }
.us .mark.yes { background: var(--yellow); }
.mark.paid { background: rgba(255, 255, 255, .1); color: var(--ink); }
.mark.no { background: rgba(255, 255, 255, .06); color: var(--ink-3); }
.cell-note { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
/* (Q, Oct 9: the rows "a little taller", and no orphans: "Lots of orphans on all these lines") the cells' lines balanced */
.cmp th, .cell-note { text-wrap: balance; }
.cell.yes .cell-note { color: var(--ink); }
.us .cell.yes .cell-note { font-weight: 700; }
.cell.no .cell-note { color: var(--ink-3); }
#cmp-body { transition: opacity 220ms ease; }
#cmp-body.swap { opacity: .25; }
/* narrow: each row becomes a card; each company a line with its name */
@container (max-width: 820px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead { display: none; }
  .cmp tbody tr { padding: 16px; border-bottom: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { padding: 0 0 10px; border: 0; font-size: 17px; }
  .cmp td { padding: 8px 10px; border: 0; border-radius: 10px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
  .cmp td::before { content: attr(data-name); font-weight: 650; font-size: 14px; color: var(--ink-2); padding-top: 2px; }
  .cmp td.us { border: 0; }
  .cmp td.us::before { color: var(--yellow); font-weight: 800; }
}
.footnote { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.footnote.center { text-align: center; }

/* ---------- FAQ ---------- */
.faq { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }   /* (no seam above it: the page is one ground) */
.faq-wrap { max-width: 900px; display: flex; flex-direction: column; gap: 36px; }
.faq-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.qa { border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; overflow: hidden; transition: border-color 300ms ease; }
.qa.open { border-color: color-mix(in srgb, var(--page-acc) 50%, transparent); }
.qa h3 { font-size: inherit; }
.qa-btn {
  appearance: none; width: 100%; border: 0; background: none; text-align: left; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; cursor: pointer; min-height: 44px; border-radius: 18px;
}
.qa-q { font-size: 19px; font-weight: 700; line-height: 1.35; }
.qa-plus { font-size: 26px; line-height: 1; color: var(--page-acc); transition: transform 420ms var(--spring); flex: none; }
.qa.open .qa-plus { transform: rotate(45deg); }
.qa-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--settle); }
.qa.open .qa-panel { grid-template-rows: 1fr; }
.qa-panel > div { overflow: hidden; }
.qa-panel p { padding: 0 24px 22px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* [lightall] (Q, Oct 12: "the whole page changes color, including the top bit") the commercial's brown band in light mode (Q, Oct 9) is
   gone: in light mode the page around the film is the light ground like the rest; the film itself is footage and stays as it is */

/* ---------- close ---------- */
.close {
  padding-top: clamp(54px, 6.6vw, 96px); padding-bottom: clamp(40px, 5vw, 72px);   /* (no seam above it) */
  --sec-bg: none;
}
/* [closebanner] the banner: the cup loop on the right, a dark fade under the words on the left. Always dark (it is footage), so it keeps
   the dark page's ink and yellow in light mode too */
.close-wrap { max-width: 1240px; }
.close-banner {
  --ink: #ecedef; --ink-2: #c9cbd0; --ink-3: #9a9ca3; --yellow: #ffaf43; --cb-ground: #0c0602;
  position: relative; isolation: isolate; border-radius: 28px; min-height: clamp(460px, 42vw, 600px);
  display: flex; align-items: center; color: var(--ink);
}
/* the card itself (its ground, the footage, its hairline) is this layer, so it alone can grow out of the icon's box (close-tiles.css)
   while the icon, flying in over it, is never clipped */
.close-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 28px; background: var(--cb-ground);
  outline: 1px solid rgba(255, 175, 67, .16); outline-offset: -1px; }   /* (an outline paints over the footage, a box-shadow would sit under it) */
.close-video { position: absolute; top: 0; right: 0; width: 80%; height: 100%; object-fit: cover; object-position: 46% 62%; display: block; }
.close-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--cb-ground) 0%, var(--cb-ground) 22%, rgba(12, 6, 2, .88) 36%, rgba(12, 6, 2, .3) 58%, rgba(12, 6, 2, 0) 74%),
              linear-gradient(0deg, rgba(12, 6, 2, .6), rgba(12, 6, 2, 0) 34%); }
.close-body { position: relative; z-index: 1; width: min(600px, 100%); padding: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; text-align: left; }
.close-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: calc(var(--cta-gap) - 22px); }   /* (the body's 22 px gap + this = --cta-gap above the button) */
.close h2 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; font-weight: 800; font-stretch: 112%; letter-spacing: -1px; }
.close .lead { font-size: 19px; }
.close-icon { position: relative; width: 84px; height: 84px; }
/* the icon's glow (Q, Oct 7: "softer, multi-level, pulsing slowly, not so flat"): three layers, each its own soft radial falloff,
   breathing on different slow cycles so they drift in and out of phase. A tight warm core (the icon's own shadow, still),
   a mid halo (::after, 4.8 s) and a wide faint bloom (.pulse, 7.2 s). Screen blend, so they light the ground instead of tinting it.
   Opacity and scale only (no box-shadow or blur animation). Reduce Motion: the layers hold still at their middle. */
.close-icon img { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 20px; display: block;
  box-shadow: 0 0 14px rgba(255, 205, 120, .38), 0 0 38px rgba(255, 175, 67, .24), 0 10px 30px rgba(0, 0, 0, .35); }
.close-icon::after { content: ""; position: absolute; z-index: 0; inset: -58%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 196, 104, .48), rgba(255, 175, 67, .24) 38%, rgba(255, 150, 50, .07) 68%, rgba(255, 150, 50, 0));
  animation: icon-halo 4.8s ease-in-out infinite alternate; }
.pulse { position: absolute; z-index: 0; inset: -150%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 175, 67, .24), rgba(255, 140, 40, .10) 45%, rgba(255, 120, 30, .02) 72%, rgba(255, 120, 30, 0));
  animation: icon-bloom 7.2s ease-in-out -2.4s infinite alternate; }
@keyframes icon-halo { from { opacity: .62; transform: scale(.93); } to { opacity: 1; transform: scale(1.07); } }
@keyframes icon-bloom { from { opacity: .45; transform: scale(.88); } to { opacity: .95; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .close-icon::after, .pulse { animation: none; opacity: .8; } }
.close-fine { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* phones: the footage on top, the words under it */
@media (max-width: 760px) {
  .close-banner { flex-direction: column; align-items: stretch; min-height: 0; border-radius: 22px; }
  .close-media { position: relative; inset: auto; height: 58vw; }
  .close-video { width: 100%; }
  .close-media::after { background: linear-gradient(0deg, var(--cb-ground), rgba(12, 6, 2, 0) 55%); }
  .close-body { margin-top: -64px; padding: 0 24px 32px; }
  .close { padding-bottom: 16px; }
  /* [lightink] here the words sit under the footage, on the page's own ground: in light mode the footage fades into the light ground and
     the words take the page's dark ink (wide windows keep the words on the footage, light on dark) */
  html[data-tone="light"] .close-banner { --ink: var(--g-ink); --ink-2: var(--g-ink-2); --ink-3: var(--g-ink-3); --yellow: var(--g-yellow); --cb-ground: var(--t-to); }
  html[data-tone="light"] .close-media { background: transparent; outline-color: transparent; }
}
.free { font-size: 17px; font-weight: 700; }

/* ---------- footer: the way back to the full site ---------- */
.foot {
  max-width: calc(1440px + 2 * var(--pad-x)); margin: 0 auto; padding: max(var(--cta-gap), clamp(44px, 4.8vw, 72px)) var(--pad-x) 32px;
  display: flex; flex-direction: column; gap: 28px; font-size: 14px; color: var(--ink-3);
}
.foot a { color: inherit; text-underline-offset: 3px; }
.foot-top, .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #F0DFC4; text-decoration: none; }
.foot-brand:hover { color: #F0DFC4; }
html[data-tone="light"] .foot-brand, html[data-tone="light"] .foot-brand:hover { color: var(--ink); }
html[data-tone="light"] .foot-brand img { content: url(../assets/navigation/wordmark-light.svg); }
html[data-tone="light"] .foot { color: var(--ink-2); }   /* (the dark page's dim gray is too faint on the light ground) */
.foot-brand svg { width: 24px; height: 24px; flex: none; }
.foot-brand img { display: block; width: 94px; height: 14px; }
.foot-back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 22px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); color: var(--yellow) !important; font-size: 16px; font-weight: 650; text-decoration: none;
  transition: border-color 300ms ease, background-color 300ms ease, transform 420ms var(--spring);
}
.foot-back:hover { border-color: var(--yellow); background-color: rgba(255, 175, 67, .08); transform: translateY(-2px); }
/* "Try the Full Experience" and its peek: a small window of the 3D film over the button while it is hovered or focused (pointers that
   hover only; a touch goes straight to the film). It rises and grows out of the button; the video plays only while it shows (inside.js) */
.foot-try { position: relative; display: inline-flex; }
.foot-peek {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: min(400px, 80vw); aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; z-index: 5;
  background: #0c0602 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 175, 67, .3), 0 30px 70px -20px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(10px) scale(.92); transform-origin: 85% 100%; pointer-events: none; visibility: hidden;
  transition: opacity 220ms ease, transform 420ms var(--spring), visibility 0s 420ms;
}
.foot-peek video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.foot-peek-cap { position: absolute; left: 12px; bottom: 10px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #f0dfc4; background: rgba(12, 6, 2, .72); }
@media (hover: hover) {
  .foot-try:hover .foot-peek, .foot-try:has(.foot-back:focus-visible) .foot-peek { opacity: 1; transform: none; visibility: visible; transition: opacity 220ms ease, transform 420ms var(--spring), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .foot-peek { transform: none; transition: opacity 150ms ease, visibility 0s 150ms; } }
.foot-back svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms var(--spring); }
.foot-back:hover svg { transform: translateX(3px); }   /* (the arrow points on now) */
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 12px; letter-spacing: .2px; }   /* (Q, Oct 9: "font should be way smaller") */
.foot-links a { padding: 12px 0; text-decoration: none; transition: color 300ms ease; }
.foot-links a:hover { color: var(--ink); }
.foot-legal { display: flex; align-items: center; gap: 14px; font-size: 12px; }
/* [sitefoot] the social row, beside Back to the full site (the same icons and order as the film's footer line) */
.foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot-social { display: flex; align-items: center; gap: 4px; }
.foot-social a { display: grid; place-items: center; width: 40px; height: 40px; color: inherit; opacity: .8; transition: color 300ms ease, opacity 300ms ease, transform 200ms ease; }
.foot-social a:hover { color: var(--yellow); opacity: 1; transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 0 24px; } }
.qtools { width: 72px; height: 16px; background: var(--ink-3); -webkit-mask: url("img/qtools.svg") center / contain no-repeat; mask: url("img/qtools.svg") center / contain no-repeat; }
.credit { flex: 1 1 320px; text-align: right; }

/* ---------- phone ---------- */
@media (max-width: 899px) {
  .chapter { min-height: 0; }
  .chapter-grid, .chapter.flip .chapter-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .chapter.flip .chapter-copy { order: 0; }
  .credit { text-align: left; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .body { font-size: 17px; }
  .lead { font-size: 18px; }
  .top { gap: 8px; }
  .qa-btn { padding: 18px; }
  .qa-panel p { padding: 0 18px 18px; }
  .qa-q { font-size: 17px; }
}

/* the header on phones: the Mac App Store pill moves into the Sections menu (as a note), the GitHub pill says just Download,
   and the narrowest screens keep the logo without its name, so the row never wraps */
@media (max-width: 640px) {
  .top .dl-soon { display: none; }
  .top.is-compact .nav .nav-extra.nav-soon { display: block; }
  .top .dl-on { display: none; }
  .top .dl { padding: 0 13px 0 11px; }
  .nav-menu-btn { padding: 0; width: 36px; justify-content: center; }
  /* (Q, Oct 12: the full label pushed the pill over the menu button on phones) the short label; the full one stays for screen readers */
  .top .dl-main .dl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top .dl-main .dl-short { display: inline; }
  .nav-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 379px) { .brand b { display: none; } }

/* ---------- Reduce Motion: still frames ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .win:hover, .btn:hover { transform: none; }
  /* a palette change is still a fade, never a jump: a quick one (these selectors outrank the line above) */
  :root { --theme-ms: 220ms; }
  :root, .stage-pattern > i, .hero-shots .shot, .win-stage .still { transition-duration: var(--theme-ms) !important; }
}

/* ---------- added: demo hosts, the glass at the close ---------- */
.pb-wrap { position: relative; }
.how-head { align-items: center; }

/* ---------- phones: still crops of each window's key moment (img/phone/), 4:5, legible at this width ---------- */
@media (max-width: 899px) {
  .hero-win .hero-shots, .win .win-stage { aspect-ratio: 4 / 5; }
  .win-stage .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2; opacity: 0; transition: opacity var(--theme-ms) ease; }
  .win-stage .still.is-new { z-index: 3; }
  .win-stage .still.is-ready { opacity: 1; }
  .win-stage::after { content: none; }
  .win-stage::before { display: none; }
  .win:hover { transform: none; }
}

/* ---------- inside the 3D film (now-2's inside view; html.in-film, added by inside-view.js) ----------
   The film's own HUD stays over the page: its header strip along the top, its chapter bar along the bottom (the bar's 05
   Dive Inside cell opens into this page's parts). So the page's own sticky header and its footer step out (the close, "Your turn.
   Even the field.", stays), and the page keeps clear of both: inside-view.js measures the strip's lower edge and the bar's upper
   edge and writes them as --film-top and --film-bottom (px). Links and the bar's cells land below the strip; the docked
   picker rails take the strip's lower edge as their line (inside.js); the Colors pill rides above the bar. The standalone page
   (opened directly) has none of this. */
html.in-film { scroll-padding-top: calc(var(--film-top, 0px) + 8px); }
html.in-film .top, html.in-film .foot { display: none; }
html.in-film main { padding-top: var(--film-top, 0px); }
html.in-film body { padding-bottom: var(--film-bottom, 0px); }
html.in-film .dock-pill { bottom: calc(16px + var(--film-bottom, 0px)); }
html.in-film .dock-panel { max-height: calc(100vh - var(--film-top, 0px) - var(--film-bottom, 0px) - 80px); }

/* [peekcard] the floating invitation to the 3D film (index.html #peek-card, inside.js) */
.peek-card { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 300px; border-radius: 18px; overflow: hidden; background: #140900;
  box-shadow: 0 0 0 1px rgba(255, 175, 67, .3), 0 24px 60px -16px rgba(0, 0, 0, .8); color: #f0dfc4;
  opacity: 0; transform: translateY(18px) scale(.96); transition: opacity 300ms ease, transform 520ms var(--spring); pointer-events: none; }
.peek-card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.peek-card[hidden] { display: none; }
.pc-open { display: block; color: inherit; text-decoration: none; }
.pc-media { display: block; aspect-ratio: 16 / 10; background: #0c0602 url("../assets/experience/film-preview-poster.jpg") center / cover; }
.pc-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; font-size: 15px; font-weight: 750; color: #ffaf43; }
.pc-title svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--spring); }
.pc-open:hover .pc-title svg { transform: translate(2px, -2px); }
.pc-open:focus-visible { outline: 2px solid #ffaf43; outline-offset: -2px; }
.pc-foot { display: flex; align-items: center; gap: 12px; padding: 0 14px 12px; }
.pc-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(240, 223, 196, .14); overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: 100%; background: #ffaf43; transform-origin: left; transform: scaleX(var(--pc-left, 1)); }
.pc-x { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12px; color: rgba(240, 223, 196, .7); cursor: pointer; }
.pc-x:hover { color: #f0dfc4; }
.pc-x:focus-visible { outline: 2px solid #ffaf43; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 759px) { .peek-card { display: none !important; } }
html.in-film .peek-card { display: none !important; }