/* Stock Shredder product page — light editorial layout (Daniel's 2026-10-23 design).
   Standalone: does not load base/home/product.css. Reuses only the shared font files. */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-variable.woff2') format('woff2-variations'), url('../fonts/archivo-variable.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
/* P1-4 (2026-10-26 audit): self-hosted mono — see tokens.css's matching declaration for why. */
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-400.woff2?v=20261027a') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-500.woff2?v=20261027a') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-600.woff2?v=20261027a') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #F4F1EA;
  --bg-2: #ECE7DC;
  --ink: #141412;
  --ink-2: #4A4741;
  --ink-3: #6E6A62;
  --line: rgba(20, 20, 18, .12);
  --line-2: rgba(20, 20, 18, .28);
  --green: #3D6E39;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  --gutter: clamp(20px, 6.4vw, 92px);
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --nav-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sh-h: 78px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sh-h) + 12px); overflow-x: clip; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; overscroll-behavior-x: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 14px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mono { font: 500 10.5px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; }

/* ---- status badge: the same shared component as base.css's .badge/.badge-beta/.badge-dev
   (home panels, the five in-development pages, the tools grid below), re-declared here because
   this page is standalone and doesn't load base.css. Shape-coded, not just colour-coded: BETA is
   a solid plate, IN DEVELOPMENT is a hairline outline with a hollow square (P1-1, 2026-10-26). ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.badge-beta { background: #8FD687; color: var(--ink); }
.badge-dev { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.badge-icon { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border: 1px solid currentColor; }
.badge-icon--filled { background: currentColor; border: none; }


/* ---- original DEADWORK header: 06 TOOLS · PRE-PRODUCTION PRODUCTION | DEADWORK | POST-PRODUCTION STUDIO · EST. LOS ANGELES
   Same markup and dropdown script (nav-dropdown.js) as the live site, recoloured for the cream page.
   Fixed; hides on scroll down and returns on scroll up (ss-page.js). ---- */
.poster-head { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; padding: 22px var(--gutter) 18px; background: rgba(244, 241, 234, .9); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.poster-head.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.poster-head.is-hidden { transform: translateY(-100%); }
.poster-brand { grid-column: 2; justify-self: center; margin: 0; }
.poster-brand img { height: 22px; width: auto; transform: translateY(-4px); }
.nav-tabs { display: flex; gap: 4px 36px; }
.nav-tabs--pre { grid-column: 1; grid-row: 1; justify-content: flex-end; padding-right: clamp(16px, 3vw, 48px); }
.nav-tabs--post { grid-column: 3; grid-row: 1; justify-content: flex-start; padding-left: clamp(16px, 3vw, 48px); }
.nav-tab-trigger { position: relative; display: inline-flex; align-items: flex-end; min-height: 36px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-tab-trigger::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: -6px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease); }
@media (any-hover: hover) and (any-pointer: fine) { .nav-tab-trigger:hover::after { transform: scaleX(1); } }
.nav-tab-trigger[aria-expanded='true']::after { transform: scaleX(1); }
/* QA-18/S-22: matches studio.css and product-dev-v2.css's identical header geometry — those use
   bottom:27px; this page was still at the old 22px, landing 5.3px below the tab baseline. */
.poster-meta-left, .poster-meta-right { position: absolute; bottom: 27px; font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.poster-meta-left { left: var(--gutter); }
.poster-meta-right { right: var(--gutter); }

/* the photo dropdown keeps its original dark panel: the product photography is built for it */
.mega-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; padding: 0 var(--gutter); background: #0a0a09; color: #e6e0d3; box-shadow: 0 24px 48px -16px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms; pointer-events: none; }
.mega-menu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s; }
.mega-menu-group { display: none; flex-direction: column; gap: 18px; padding: 32px 0 36px; }
.mega-menu-group.is-active { display: flex; }
.mega-menu-eyebrow { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-align: center; color: #807d77; }
.mega-menu-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.mega-menu-card { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 220px; text-decoration: none; color: inherit; }
.mega-menu-card-img { position: relative; display: block; height: 280px; overflow: hidden; background: #11110f; }
.mega-menu-card-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: 0; transition: transform 160ms var(--ease), opacity 150ms var(--ease); }
.mega-menu-card-photo.is-loaded { opacity: 1; }
.mega-menu-card-logo { opacity: 0; transition: opacity 150ms var(--ease); }
.mega-menu-card-logo.is-loaded { opacity: 1; }
@media (any-hover: hover) and (any-pointer: fine) { .mega-menu-card:hover .mega-menu-card-photo { transform: scale(1.03); } }
.mega-menu-card-img::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(70%, 280px); height: 58%; background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 72%); }
.mega-menu-card-logo { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); height: clamp(32px, 3.2vw, 56px); width: auto; max-width: calc(100% - 48px); filter: drop-shadow(0 2px 8px rgba(0,0,0,.65)); }
a[href$="sound-driver/"] .mega-menu-card-photo { object-position: 50% 48%; }
a[href$="stock-shredder/"] .mega-menu-card-photo { object-position: 50% 53%; }
a[href$="scene-lock/"] .mega-menu-card-photo { object-position: 50% 54%; }
a[href$="set-control/"] .mega-menu-card-logo { filter: none; height: clamp(36px, 3.6vw, 62px); }
a[href$="sound-driver/"] .mega-menu-card-logo { height: clamp(26px, 2.6vw, 41px); }
a[href$="stock-shredder/"] .mega-menu-card-logo { height: clamp(23px, 2.3vw, 35px); }
a[href$="handoff/"] .mega-menu-card-logo { height: clamp(52px, 5.2vw, 90px); }
.mega-menu-card-caption { display: block; margin-top: 14px; text-align: center; }
.mega-menu-card-name { display: block; font: 400 15px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mega-menu-card[aria-current] .mega-menu-card-name { color: #8fd687; }
.mega-menu-card-desc { display: block; margin-top: 4px; font-size: 13px; color: #94918a; }

/* ---- original DEADWORK footer ---- */
.poster-foot { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; row-gap: 12px; align-items: center; padding: 28px var(--gutter) 32px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.poster-foot p { margin: 0; }
.poster-foot .foot-legal { grid-column: 1 / -1; justify-self: center; text-align: center; }
.poster-foot .foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.poster-foot .foot-legal .sep { margin: 0 .6em; }
.foot-social { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: center; gap: 22px; }
.foot-social a { display: flex; color: var(--ink-3); transition: color 160ms var(--ease); }
@media (any-hover: hover) and (any-pointer: fine) { .foot-social a:hover { color: var(--ink); } }
.foot-email { grid-column: 1; grid-row: 2; text-transform: none; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.foot-note { grid-column: 2; grid-row: 2; text-align: center; }
.foot-copy { grid-column: 3; grid-row: 2; text-align: right; }

/* ---- shared section rhythm ---- */
main > section, .pair > section { padding: 72px var(--gutter); border-top: 1px solid var(--line); text-align: center; }
.pair { border-top: 1px solid var(--line); }
.pair > section.workflow { border-top: 0; }
main > section.hero { border-top: 0; }
main > section > h2.mono { margin-bottom: 18px; }
main > section > h2.section-head, .pair > section > h2.section-head { margin-bottom: 22px; }
.section-head + .section-title { margin-top: -6px; color: var(--ink-2); }
.section-title { font: 560 clamp(28px, 2.6vw, 38px)/1.1 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.section-sub { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
/* Section backgrounds never fade — only their content does. Fading the whole section (including
   its own solid background) briefly blends with whatever lighter section sits above it in the
   page, reading as a flash of the wrong color before the real (e.g. black) background "arrives". */
.will-reveal > * { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.will-reveal.is-in > * { opacity: 1; transform: none; }
.will-reveal > *:nth-child(2) { transition-delay: 60ms; }
.will-reveal > *:nth-child(3) { transition-delay: 120ms; }

/* ---- pills: shared geometry now lives in buttons.css (MEDIUM-2, 2026-10-27 QA) — this page
   just supplies its own ink-on-sand color variant and mono font. ---- */
.pill { font-family: var(--mono); border-color: var(--ink); }
.pill-solid { background: var(--ink); color: var(--bg); }
.pill-outline { background: transparent; color: var(--ink); }
@media (any-hover: hover) and (any-pointer: fine) {
  .pill-solid:hover { background: #000; }
  .pill-outline:hover { background: var(--ink); color: var(--bg); }
  .pill.is-disabled:hover { background: transparent; color: var(--ink-3); }
}
.pill.is-disabled { border-color: var(--line-2); color: var(--ink-3); cursor: default; }

/* ---- hero ---- */
/* The whole Import screenshot fits in the first screen, uncropped: its width is derived from the
   window height left over after the header and the text block (--hero-text), times the
   screenshot's own aspect ratio (2000x1255). */
.hero { --hero-text: clamp(360px, 41vh, 430px); padding-top: calc(var(--sh-h) + clamp(20px, 3.4vh, 40px)) !important; padding-bottom: 64px !important; }
.hero-logo { display: block; margin: 0 !important; height: clamp(44px, 6.6vh, 68px); width: auto; margin: 0 auto; }
.hero h1 { margin-top: 14px; font: 600 clamp(36px, min(3.9vw, 6.4vh), 58px)/1.05 var(--sans); letter-spacing: -.03em; }
/* .hero becomes a flex column at the one-block-per-screen breakpoint (main > section rule further
   down this file) with no align-items set, so it defaults to stretch — invisible on the other
   hero children since they center their own content with text-align, but this chip has a filled
   background, so the stretch would otherwise paint a full-width green bar instead of a chip. */
.hero .badge { margin-top: 16px; align-self: center; }
.hero-lede { margin: 12px auto 0; max-width: none; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) { .hero-lede { white-space: nowrap; } }
.shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot img { width: 100%; border-radius: 8px; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 30px 60px -24px rgba(20,20,18,.45), 0 12px 24px -12px rgba(20,20,18,.3); }
.shot-hero { width: min(calc(100% / 1.13), 1080px, calc((100vh - var(--hero-text)) * 1.62)); width: min(calc(100% / 1.13), 1080px, calc((100svh - var(--hero-text)) * 1.62)); margin: clamp(18px, 3vh, 32px) auto 0; }
.downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 44px; }
.downloads-note { margin-top: 18px; color: var(--ink-3); }

/* ---- MacBook Pro (space black), drawn in CSS around the real screenshot ---- */
.mbp { position: relative; display: block; }
.mbp .mbp-lid { position: relative; display: block; padding: 1.7% 1.7% 2.3%; border-radius: 2.6% / 4%; background: linear-gradient(180deg, #2b2b2d 0%, #1c1c1e 100%); box-shadow: inset 0 0 0 1px #3a3a3d, inset 0 0 0 3px #111113, 0 1px 0 rgba(0,0,0,.08), 0 40px 70px -32px rgba(20,20,18,.55); }
.mbp .mbp-screen { position: relative; display: block; overflow: hidden; border-radius: 0.9% / 1.4%; background: #000; }
.shot.mbp img, .mbp .mbp-screen img { display: block; width: 100%; border-radius: 0; box-shadow: none; }
.mbp .mbp-notch { position: absolute; top: 1.7%; left: 50%; width: 11%; height: 2.6%; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #1c1c1e; }
.mbp .mbp-base { position: relative; display: block; width: 113%; margin-left: -6.5%; height: 0; padding-bottom: 2.6%; border-radius: 0 0 46% 46% / 0 0 100% 100%; background: linear-gradient(180deg, #3a3a3d 0%, #26262a 38%, #141416 100%); box-shadow: 0 18px 30px -16px rgba(20,20,18,.55); }
.mbp .mbp-base::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #4a4a4e; }
.mbp .mbp-lip { position: absolute; top: 0; left: 50%; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #1a1a1c; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }

/* ---- hero brand row: logo + Beta tag ---- */
.hero-brand { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 18px); }
.beta-tag { display: inline-flex; align-items: center; gap: 8px; height: clamp(26px, 3.4vh, 34px); padding: 0 12px; background: #A5D690; color: #141412; font: 500 clamp(11px, 1.4vh, 13px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.beta-sq { width: 9px; height: 9px; background: #141412; }

/* ---- "shredded" in the Stock Shredder lettering ---- */
@font-face { font-family: 'Swamp Witch'; src: url('../fonts/swampwitch.woff2') format('woff2'); font-display: swap; }
.shred-word { font-family: 'Swamp Witch', var(--sans); font-weight: 400; letter-spacing: .01em; font-size: 1.12em; line-height: 1; }

/* ---- Best value tag ---- */
.pricing-card { position: relative; }
.pricing-badge { position: absolute; top: 8px; left: calc(50% + 26px); white-space: nowrap; font: 600 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 4px 7px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---- hero: the shredded strip (flat, centred, framed) ---- */
.strip { position: relative; display: block; width: min(100%, 1120px, calc((100svh - var(--hero-text)) * 2.3)); margin: clamp(22px, 3.4vh, 40px) auto 0; }
.strip-canvas { display: block; width: 100%; height: auto; }
.strip-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 719px) { .strip { width: 100%; } }

/* ---- block tones (TP-7 rhythm): light, darker light, black ---- */
/* --ink-3 (secondary/muted text) is darkened here specifically: #6E6A62 only clears AA (4.5:1)
   against the lighter --bg, and drops to 4.29:1 on this section's darker sand — #625E57 clears
   4.6:1 on #EAE5DA while still reading as the same "quiet" weight. */
.tone-alt { --bg: #EAE5DA; --ink-3: #625E57; background: var(--bg); }
.tone-dark { --bg: #0E0E0D; --bg-2: #1A1A18; --ink: #F1ECE2; --ink-2: #A9A499; --ink-3: #8A867E; --line: rgba(241,236,226,.14); --line-2: rgba(241,236,226,.32); --green: #8FD687; background: var(--bg); color: var(--ink); }
.tone-dark .mono { color: var(--ink-2); }
main > section.tone-dark, main > .pair.tone-alt, main > section.tone-alt { border-top-color: transparent; }
.tone-dark .world-map img { filter: invert(1); opacity: .9; }
.tone-dark .shot img { box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }

/* ---- full-block film moment ---- */
main > section.film { position: relative; padding: 0 !important; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,13,.35) 0%, rgba(14,14,13,0) 30%, rgba(14,14,13,0) 70%, rgba(14,14,13,.55) 100%); pointer-events: none; }
.film-line { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; text-align: center; color: #F1ECE2 !important; letter-spacing: .3em; font-size: 12px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }

/* ---- spec sheet with graphics ---- */
.specs { max-width: 1360px; margin: 8px auto 0; border-top: 1px solid var(--line-2); text-align: left; }
.spec-row { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.spec-k { padding-top: 6px; }
.spec-v { display: grid; gap: 12px; }
.spec-v:has(.spec-plat) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1023px) { .spec-v:has(.spec-plat) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-plat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line-2); font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.spec-plat strong { color: var(--ink); font-weight: 600; font-size: 16px; }
a.spec-plat { text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
a.spec-plat:hover, a.spec-plat:focus-visible { border-color: var(--ink); background: rgba(0, 0, 0, .03); }
.spec-plat-ic { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tiles li { padding: 8px 12px; border: 1px solid var(--line-2); font-size: 14px; color: var(--ink); background: rgba(255,255,255,.35); }
.tiles .tile-more { border-style: dashed; color: var(--ink-3); background: none; }
.tiles-mono li { font: 500 12px/1 var(--mono); letter-spacing: .1em; padding: 10px 12px; }
.tiles-raw li { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500; }
.spec-note { font-size: 13px; color: var(--ink-3); }
.spec-headline { font-size: 16px; font-weight: 600; color: var(--ink); }
.spec-note-mono { font-family: var(--mono); }
.speed { width: 100%; max-width: none; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
.speed th { padding: 0 12px 10px 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); vertical-align: bottom; white-space: nowrap; }
.speed td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line-2); font-size: 18px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.speed td:nth-child(3), .speed td:nth-child(7) { font-weight: 600; color: var(--ink); }
/* one line per edge: the general .spec tr border-top doubled up with the td border (the line is see-through,
   so Safari drew a darker stub under the first column on iPhone). The table's own lines live on the cells. */
.spec .speed tr { border-top: 0; }
.spec .speed thead th { border-top: 1px solid var(--line-2); padding-top: 12px; }
/* the older spec-table phone rule stacks th/td into blocks; this table keeps its rows */
@media (max-width: 719px) { .spec .speed tr { display: table-row; } .spec .speed th, .spec .speed td { display: table-cell; width: auto; } .spec .speed th { letter-spacing: .08em; padding: 0 8px 10px 0; white-space: normal; } .spec .speed td { font-size: 15px; padding: 12px 8px 12px 0; white-space: nowrap; } .spec .speed th:nth-child(-n+5):not(:nth-child(3)), .spec .speed td:nth-child(-n+5):not(:nth-child(3)) { display: none; } }
/* Tablets and small laptop windows (720-1179px): the 8-column speed table is ~800px wide and ran
   off the right edge with the 180px label column beside it (every iPad, audit 2026-11-06). Here
   its label sits above it, like on phones, and the headers may wrap, so every column stays on screen. */
@media (min-width: 720px) and (max-width: 1179px) { .spec-row:has(.speed) { grid-template-columns: 1fr; gap: 12px; } .spec .speed th { letter-spacing: .08em; padding: 0 10px 10px 0; white-space: normal; } .spec .speed td { font-size: 16px; padding: 12px 10px 12px 0; } }
@media (max-width: 719px) { .spec-row { grid-template-columns: 1fr; gap: 12px; } .spec-v:has(.spec-plat) { grid-template-columns: 1fr; } }

/* ---- world map: dots load in ---- */
.world-map svg { display: block; width: 100%; height: auto; }
.world-map svg circle { opacity: 0; transition: opacity 500ms ease; }
.world-map.is-loaded svg circle { opacity: 1; }
.tone-dark .world-map svg { color: #F1ECE2; fill-opacity: .34; }
.world-map-dot { background: #EBE5D8 !important; box-shadow: 0 0 0 4px rgba(235,229,216,.14); }
.remote-cta .pill svg, .downloads .pill svg { flex: none; }

/* ---- explore all DEADWORK tools (TE "explore all components" grid) ---- */
main > section.tools { --bg: #EBE5D8; background: var(--bg); padding: clamp(56px, 9vh, 96px) 0 0 !important; text-align: left; min-height: 0 !important; display: block !important; }
.tools-title { padding: 0 var(--gutter) 22px; color: var(--ink) !important; font-size: 12px; letter-spacing: .12em; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.tools-grid li { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tools-grid li:nth-child(3n) { border-right: 0; }
.tool { position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 1 / 0.82; padding: 28px; text-decoration: none; color: var(--ink); transition: background 200ms var(--ease); }
.tool-mark { display: grid; place-items: center; }
.tool-mark img { width: min(62%, 300px); height: auto; max-height: 120px; object-fit: contain; opacity: .9; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
@media (any-hover: hover) and (any-pointer: fine) {
  .tool:hover { background: rgba(255,255,255,.45); }
  .tool:hover .tool-mark img { transform: scale(1.04); opacity: 1; }
}
.tool-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-meta .mono { color: #625E57; }
.tool-name { font-weight: 600; font-size: 16px; }
/* P1-1 (2026-10-26 audit): "Available now"/"In development" used to be plain colored text here —
   now the same shared .badge component as everywhere else, label beside it unchanged. */
.tool-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* M-1 (2026-10-27 QA): Stock Shredder is the one tile in this grid that's actually buyable
   today, but "Available now" inherited .tool-meta .mono's grey — identical to the category
   label next to it, so the one live product read as the least available thing on the page
   next to five outlined "IN DEVELOPMENT" chips. Daniel already ruled out a badge/chip here;
   this gives it the brand green (same var(--green) as the notify-success and pricing-save
   text elsewhere on this page) so it reads as a positive "ready now" signal without any
   extra chrome. */
.tool-meta .tool-live { color: var(--green); font-weight: 600; }
@media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } .tools-grid li:nth-child(3n) { border-right: 1px solid var(--line-2); } .tools-grid li:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px) { .tools-grid { grid-template-columns: 1fr; } .tools-grid li { border-right: 0 !important; } .tool { aspect-ratio: 1 / 0.6; padding: 22px 20px; } }

/* ---- section headings in the DEADWORK wordmark style (Anton, caps) ---- */
@font-face { font-family: 'Anton'; src: url('../fonts/anton.woff2') format('woff2'); font-display: swap; }
.head-dw { font-family: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .005em !important; line-height: 1 !important; font-size: clamp(40px, 4.2vw, 64px) !important; }
.remote .section-sub { max-width: none !important; }
@media (max-width: 719px) { .br-desk { display: none; } }
.head-dw .shred-word { font-size: 1.1em; text-transform: none; position: relative; top: -.08em; }

/* ---- problem / solution ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; padding-top: 0 !important; padding-bottom: 0 !important; }
.split > div { padding: 56px clamp(20px, 4vw, 64px) 60px; }
.split > div + div { border-left: 1px solid var(--line); }
.split p { margin: 18px auto 0; max-width: 40ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: var(--ink); font-weight: 400; }

/* ---- workflow ---- */
.workflow { padding-bottom: 0 !important; }
.workflow + .split { border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 8px calc(-1 * var(--gutter)) 0; }
.steps li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 20px 16px 36px; }
.steps li + li { border-left: 1px solid var(--line); }
.steps img { height: 40px; width: auto; margin-bottom: 4px; }
.step-t { font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.step-d { font-size: 14px; color: var(--ink-2); }

/* ---- auto-naming line ---- */

/* ---- Stock Shredder Remote: real app screen in a drawn phone frame ---- */
.remote .section-sub { max-width: 52ch; margin-left: auto; margin-right: auto; }
.phone { width: min(300px, 74vw); margin: 44px auto 0; }
.phone-body { position: relative; padding: 11px; border-radius: 48px; background: #0d0d0c; box-shadow: inset 0 0 0 2px #2a2a27, 0 1px 0 rgba(0,0,0,.1), 0 40px 70px -30px rgba(20,20,18,.55), 0 14px 28px -14px rgba(20,20,18,.35); }
.phone-body img { width: 100%; border-radius: 38px; padding-top: 36px; background: #000; }
.phone-body .phone-screen { border-radius: 38px; padding-top: 36px; background: #E7E0D0; overflow: hidden; }
.phone-screen-in { position: relative; container-type: inline-size; }
.phone-video { display: block; width: 100%; height: auto; aspect-ratio: 660 / 1344; }
/* the app's own version label, blanked in the recording and filled here from the latest release */
.phone-ver { position: absolute; top: 2.15%; right: 4.1%; font: 400 2.95cqw/1 -apple-system, system-ui, 'SF Pro Text', 'Helvetica Neue', sans-serif; color: #7E786E; letter-spacing: 0; pointer-events: none; }
.phone-island { position: absolute; top: 22px; left: 50%; width: 31%; height: 24px; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 1; }
.remote-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* ---- spec sheet ---- */
.spec { text-align: left !important; }
.spec h2 { text-align: center; }
.spec table { width: 100%; border-collapse: collapse; font-size: 15px; border-bottom: 1px solid var(--line-2); }
.spec tr { border-top: 1px solid var(--line-2); }
.spec th { width: 30%; padding: 14px 24px 14px 0; text-align: left; vertical-align: top; font-weight: 600; }
.spec td { padding: 14px 0; color: var(--ink); max-width: 70ch; }

/* ---- map + counter ---- */
.world-count { display: grid; justify-items: center; gap: 6px; margin-top: 2px; }
.world-count-num { font: 500 clamp(40px, 4vw, 56px)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.world:not(.is-preview) .world-count:not(.is-live) { display: none; }
.world.is-preview .world-count-num { color: var(--ink-3); opacity: .45; }
.world-map { position: relative; max-width: 1040px; margin: 32px auto 0; }
.world-map-dots { position: absolute; inset: 0; }
.world-map-dot { position: absolute; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }

/* ---- reviews ---- */
.reviews-count { margin-top: 10px; color: var(--ink-2); }
.reviews-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1040px; margin: 28px auto 0; text-align: left; }
.review-card { padding: 22px; border: 1px solid var(--line); background: var(--bg-2); }
.review-card-stars { letter-spacing: .1em; }
.review-card-body { margin-top: 10px; }
.review-card-name { margin-top: 12px; color: var(--ink-3); font-size: 14px; }
.review-form { display: grid; gap: 10px; max-width: 520px; margin: 28px auto 0; text-align: left; }
.review-stars { display: flex; gap: 4px; justify-content: center; }
.review-star { border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px; cursor: pointer; color: var(--line-2); }
.review-star.is-active { color: var(--ink); }
.review-form input, .review-form textarea, .modal input { width: 100%; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 6px; background: #FBF9F5; font: 16px/1.4 var(--sans); color: var(--ink); }
.review-form textarea { min-height: 110px; resize: vertical; }
.review-form .pill { justify-self: center; margin-top: 6px; }
.form-status { font-size: 14px; text-align: center; }
.notify-status-good { color: var(--green); }
.notify-status-bad, .form-status-bad { color: #A3241D; }

/* ---- pricing ---- */
/* Billing selector (2026-10-28): four square options in one hairline-ruled row, same rule
   language as the pricing grid below it. Selected = solid ink. */
.term { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; margin: 26px auto 0; border: 1px solid var(--ink); }
.term-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 58px; padding: 12px 8px; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.term-opt + .term-opt { border-left: 1px solid var(--ink); }
.term-name { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.term-save { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.term-opt[data-term-opt="month"] .term-save { color: var(--ink-3); }
.term-opt.is-active { background: var(--ink); color: var(--bg); }
.term-opt.is-active .term-save { color: #8FD687; }
.term-opt.is-active[data-term-opt="month"] .term-save { color: rgba(244, 241, 234, .6); }
.term-opt:focus-visible { outline-offset: -5px; }
.term-opt.is-active:focus-visible { outline-color: var(--bg); }
@media (any-hover: hover) and (any-pointer: fine) { .term-opt:not(.is-active):hover { background: var(--bg-2); } }
.term-note { max-width: 640px; margin: 12px auto 0; min-height: 1.5em; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.term-note strong { color: var(--ink); font-weight: 600; }
.pricing-bill { font: 600 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pricing-bill .pricing-equiv { display: inline-block; margin-top: 2px; font: 500 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px calc(-1 * var(--gutter)) 0; }
.pricing-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px 8px; }
.pricing-card + .pricing-card { border-left: 1px solid var(--line); }
.pricing-name { font: 600 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
/* A badge inside the plan name sits just right of it, whatever the name's length. */
.pricing-name { position: relative; }
.pricing-name .pricing-badge { top: 50%; left: 100%; margin-left: 8px; transform: translateY(-50%); }
.pricing-price { margin-top: 6px; font: 500 16px/1 var(--sans); color: var(--ink-2); transition: opacity 180ms var(--ease), filter 180ms var(--ease); }
.pricing-price.is-swapping { opacity: 0; filter: blur(2px); }
.pricing-price .num { font: 600 34px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Always rendered (never [hidden]) so switching Monthly/Annual never changes the card's height —
   the line's own height is reserved whether or not it currently has text in it. */
.pricing-save { min-height: calc(10.5px * 1.4); font: 600 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); opacity: 0; transition: opacity 160ms var(--ease); }
.pricing-save.is-visible { opacity: 1; }
.pricing-level { font: 600 13px/1 var(--mono); letter-spacing: .08em; color: var(--line-2); }
.pricing-level .on { color: var(--ink); }
.pricing-clips { margin-top: 6px; font-weight: 600; font-size: 15px; }
.pricing-per-clip { font-size: 13px; color: var(--ink-3); }
.pricing-note { font-size: 13px; color: var(--ink-2); }
.pricing-card .pricing-per-clip + .pill, .pricing-card .pricing-note:last-of-type + .pill { margin-top: auto; }
.pricing-inc { width: 100%; max-width: 200px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
.pricing-inc .mono { color: var(--ink-3); }
.pricing-inc ul { margin-top: 8px; display: grid; gap: 6px; }
.pricing-inc li { position: relative; padding-left: 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pricing-inc li::before { content: '+'; position: absolute; left: 0; top: -1px; font: 500 14px/1.4 var(--mono); color: var(--green); }
/* what Pro and Studio add: two real screens, quiet, under the plan cards */
/* what Pro and Studio add: each real screen sits under the plan card it belongs to */
.upgrade-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px calc(-1 * var(--gutter)) 0; text-align: center; }
.upgrade { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 20px 30px; border-top: 1px solid var(--line); }
.upgrade--kw { grid-column: 3; }
.upgrade--phone { grid-column: 4; border-left: 1px solid var(--line); }
/* The Pro/Studio row lines up under the plan cards, so it goes away with them during checkout and after purchase. */
.pricing-grid[hidden] ~ .upgrade-row { display: none; }
.upgrade .mono { color: var(--ink-3); }
.upgrade h3 { margin-top: 8px; font: 560 18px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.upgrade figcaption > p:last-child { margin: 8px auto 0; max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.upgrade-shot img { display: block; height: auto; border-radius: 6px; box-shadow: 0 14px 28px -16px rgba(20,20,18,.45); }
.upgrade-shot--kw { width: min(100%, 340px); }
.upgrade-shot--kw img { width: 100%; }
.upgrade-shot--phone { padding: 5px; border-radius: 20px; background: #0d0d0c; box-shadow: inset 0 0 0 1px #2a2a27, 0 14px 28px -16px rgba(20,20,18,.45); }
.upgrade-shot--phone img { width: 104px; border-radius: 15px; box-shadow: none; }
.pricing-card > :nth-last-child(2) { margin-bottom: 14px; }
.pricing-card .pill { margin-top: auto; align-self: center; min-height: 40px; padding: 0 26px; }
.pricing-error { margin-top: 12px; color: #A3241D; }
.pricing-terms { max-width: 62ch; margin: 26px auto 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.checkout-panel { max-width: 720px; margin: 28px auto 0; scroll-margin-top: calc(var(--sh-h) + 16px); }
.checkout-panel-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.checkout-status { margin-bottom: 12px; color: var(--ink-2); }
.checkout-status-bad { color: #A3241D; }
/* Stripe's embedded form takes a second or two to load — reserve its height up front so clicking
   "Get started" doesn't collapse the panel down to just the Cancel button while it loads, and
   show a subtle shimmer in the empty frame until checkout.js swaps it for the real Stripe form. */
.checkout-panel-frame { min-height: 560px; }
.checkout-panel-frame.is-loading { background: linear-gradient(100deg, var(--bg-2) 30%, var(--line) 50%, var(--bg-2) 70%); background-size: 240% 100%; animation: checkout-shimmer 1.4s ease-in-out infinite; }
@keyframes checkout-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -40% 0; }
}
/* ---- Branded plan checkout (2026-11-05) ----
   Our own summary + form around Stripe's payment fields. Few parts, lots of room: logo and plan
   on one line, one price, one quiet billing line; plain labels; one solid black Pay button. */
.checkout-panel:has(.bco:not([hidden])) { max-width: 960px; }
.checkout-panel:has(.bco:not([hidden])) .checkout-panel-frame { display: none; }
.bco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--ink); background: var(--bg); text-align: left; }
.bco[hidden] { display: none; }
.bco-summary { display: flex; flex-direction: column; gap: 0; padding: 40px 36px; background: var(--ink); color: #F1ECE2; }
.bco-head { --h: 44px; display: flex; align-items: flex-start; gap: calc(var(--h) * .2); flex-wrap: nowrap; min-width: 0; }
.bco-logo { display: block; height: var(--h); width: auto; max-width: 64%; object-fit: contain; flex: 0 1 auto; }
/* Plan name in Anton at the logo's letter height, tops lined up, a tight gap: one mark. */
.bco-plan { margin: -1px 0 0; flex: 0 0 auto; font: 400 calc(var(--h) * 1.03)/1 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: #F1ECE2; white-space: nowrap; }
.bco-price { margin: 34px 0 0; font: 560 40px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bco-per { margin-left: 4px; font-size: 16px; font-weight: 400; color: #A9A499; }
.bco-bill { margin: 12px 0 0; font-size: 14px; color: #A9A499; }
.bco-form { display: flex; flex-direction: column; padding: 40px 40px 28px; }
.bco-express:empty { display: none; }
.bco-or { display: flex; align-items: center; gap: 14px; margin: 24px 0; font-size: 12px; color: var(--ink-3); }
.bco-or[hidden] { display: none; }
.bco-or::before, .bco-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.bco-label { margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.bco-input { margin-bottom: 20px; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 0; background: #FBF9F4; color: var(--ink); font: 400 16px/1 var(--sans); appearance: none; }
.bco-input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bco-payment { min-height: 200px; }
/* While Stripe's fields load: a quiet shimmer the size of the card form, so the space never sits empty. */
.bco-payment.is-loading { min-height: 260px; background: linear-gradient(100deg, var(--bg-2) 30%, var(--line) 50%, var(--bg-2) 70%); background-size: 240% 100%; animation: checkout-shimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bco-payment.is-loading { animation: none; background: var(--bg-2); } }
.bco-terms { margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.bco-error { margin: 12px 0 0; font-size: 14px; color: #A3241D; }
.bco-error:focus { outline: none; }
.bco-pay { width: 100%; margin-top: 18px; height: 56px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: #F4F1EA; font: 600 13px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background 160ms var(--ease); }
.bco-pay:disabled { background: var(--ink); color: #F4F1EA; opacity: .45; cursor: default; }
@media (any-hover: hover) and (any-pointer: fine) { .bco-pay:not(:disabled):hover { background: #000; } }
.bco-pay[aria-busy="true"] { cursor: progress; }
.bco-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; color: var(--ink-3); }
.bco-foot .mono { color: var(--ink-3); }
.bco-dw { display: block; width: 64px; height: auto; opacity: .55; }
.bco-foot .bco-dw + .mono::before { content: ''; display: inline-block; width: 1px; height: 10px; margin-right: 12px; vertical-align: -1px; background: var(--line-2); }
@media (max-width: 760px) {
  .bco { grid-template-columns: 1fr; }
  .bco-summary { padding: 26px 22px 24px; }
  .bco-head { --h: clamp(24px, 8vw, 34px); gap: 10px; }
  .bco-price { margin-top: 22px; font-size: 34px; }
  .bco-bill { margin-top: 8px; font-size: 13px; }
  .bco-form { padding: 26px 20px 22px; }
}

.checkout-success { display: grid; justify-items: center; gap: 14px; max-width: 560px; margin: 36px auto 0; padding: 44px 36px 36px; border: 1px solid var(--ink); background: var(--bg); text-align: center; }
.checkout-success[hidden] { display: none; }
.checkout-success h3 { font: 600 24px/1.2 var(--sans); }
.ws-logo { display: block; width: min(300px, 78%); height: auto; margin-bottom: 6px; }
.ws-title { margin: 6px 0 0; font: 400 clamp(40px, 5vw, 56px)/1 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif !important; text-transform: uppercase; letter-spacing: .01em; }
.ws-line { max-width: 40ch; margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
.activation-key-box { display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 16px; border: 1px solid var(--line-2); border-radius: 0; background: #FBF9F4; }
.activation-key-box code { font: 600 17px/1.3 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.checkout-success .pill-solid { margin-top: 8px; }
.ws-steps { list-style: none; counter-reset: ws; display: grid; gap: 10px; width: 100%; max-width: 400px; margin: 18px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); text-align: left; font-size: 14.5px; color: var(--ink-2); }
.ws-steps li { counter-increment: ws; position: relative; padding-left: 30px; }
.ws-steps li::before { content: counter(ws, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 500 11px/1.9 var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.ws-steps strong { color: var(--ink); font-weight: 600; }
.ws-sign { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ws-sign span { display: block; margin-top: 10px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .2em; color: var(--ink-2); }
.checkout-success-note { font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) { .checkout-success { padding: 32px 18px 26px; } .activation-key-box { padding-left: 12px; } .activation-key-box code { font-size: 14px; letter-spacing: .02em; } .activation-key-box .pill { padding: 0 16px; } }
.checkout-success-alt { margin-top: -4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- SHRED launch trial (docs/superpowers/specs/2026-10-26-shred-trial-design.md) ----
   Same contained-card look .review-card already uses inside a tone-alt section (border + bg-2),
   shown only when ?code=SHRED (or a known equivalent) resolves — hidden by default in markup. */
.trial-offer { max-width: 560px; margin: 28px auto 0; padding: 28px 30px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); text-align: center; scroll-margin-top: calc(var(--sh-h) + 16px); }
.trial-offer-eyebrow { color: var(--green); }
.trial-offer-title { margin-top: 8px; font: 560 26px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.trial-offer-sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.trial-offer-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.trial-offer-form input { flex: 1 1 240px; min-width: 0; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 6px; background: #FBF9F5; font: 16px/1.4 var(--sans); color: var(--ink); }
/* The auto-renew disclosure (§8.1) - deliberately full-size body text, not small-print grey. */
.trial-offer-disclosure { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.trial-offer-disclosure.trial-offer-reminder { margin-top: 8px; font-size: 12.5px; opacity: .68; }
.trial-offer-status { margin-top: 10px; font-size: 13px; color: var(--ink-3); min-height: 1em; }
.trial-offer-error { margin-top: 12px; color: #A3241D; }
/* "Already started a trial? Email me my plan link" - a quiet second path under the disclosure,
   not competing with the primary "Start free trial" button above it. */
.trial-offer-resend { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.trial-offer-resend-toggle { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.trial-offer-resend-link { text-decoration: underline; text-underline-offset: 2px; color: var(--ink-2); }
.trial-offer-resend-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.trial-offer-resend-form input { flex: 1 1 220px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: #FBF9F5; font: 15px/1.4 var(--sans); color: var(--ink); }
.trial-offer-resend-status { margin-top: 8px; font-size: 13px; color: var(--ink-3); min-height: 1em; }

/* ---- earn ---- */
.earn-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px calc(-1 * var(--gutter)) 0; }
.earn-grid li { display: grid; gap: 6px; padding: 8px 20px; font-size: 14px; color: var(--ink-2); }
.earn-grid li + li { border-left: 1px solid var(--line); }
.earn-amt { font: 600 24px/1.1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.earn .pill { margin-top: 0; }
.earn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 30px; }
.modal .review-form { margin: 6px 0 0; max-width: none; width: 100%; }
.modal .review-stars { justify-content: flex-start; }
.modal .review-form .pill { justify-self: stretch; }
.tone-dark .earn-actions .pill-outline { color: var(--ink); border-color: var(--ink); }
@media (any-hover: hover) and (any-pointer: fine) {
  .tone-dark .pill-solid:hover { background: #fff; border-color: #fff; color: #0E0E0D; }
  .tone-dark .earn-actions .pill-outline:hover { background: var(--ink); color: var(--bg); }
}
.earn-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.modal-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(20,20,18,.45); opacity: 1; transition: opacity 200ms var(--ease); }
.modal-overlay[hidden] { display: none; }
@starting-style { .modal-overlay:not([hidden]) { opacity: 0; } }
.modal { position: relative; display: grid; gap: 10px; width: min(100%, 480px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border-radius: 10px; background: var(--bg); text-align: left; opacity: 1; transform: scale(1); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
@starting-style { .modal-overlay:not([hidden]) .modal { opacity: 0; transform: scale(.97); } }
.modal h3 { font: 600 22px/1.2 var(--sans); }
.modal [data-earn-modal-body] { display: grid; gap: 10px; }
.modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; cursor: pointer; }
.earn-modal-note { font-size: 14px; color: var(--ink-2); }

/* ---- FAQ ---- */
.faq-list { max-width: 780px; margin: 24px auto 0; border-top: 1px solid var(--line); text-align: left; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 10px 0; border: 0; background: none; font-size: 15px; text-align: left; cursor: pointer; }
.faq-plus { position: relative; flex: none; width: 11px; height: 11px; }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--ink); transition: transform 200ms var(--ease); }
.faq-plus::after { transform: rotate(90deg); }
.faq-q[aria-expanded='true'] .faq-plus::after { transform: rotate(0); }
/* grid-template-rows 0fr -> 1fr animates height without ever measuring a real pixel value (so it
   works for answers of any length); the bottom padding lives on the inner wrapper, not .faq-a
   itself, so the collapsed state is genuinely 0 tall instead of leaving a stray gap. */
.faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; padding: 0 32px 0 0; font-size: 15px; color: var(--ink-2); transition: grid-template-rows 220ms var(--ease), opacity 220ms var(--ease); }
.faq-a.is-open { grid-template-rows: 1fr; opacity: 1; }
.faq-a-inner { overflow: hidden; padding-bottom: 16px; min-height: 0; }
.faq-a-inner p + p { margin-top: 10px; }
/* The section itself sits in a vertically-centered flex column at desktop sizes (see the
   one-block-per-screen rule far below) — without this, opening an answer grows the section and
   the whole block (including the still-closed question the person just tapped) recentres and
   visibly jumps. flex-start keeps the top of the list anchored while an answer opens below it. */
.faq { justify-content: flex-start; }
.faq-chat { max-width: 780px; margin: 22px auto 0; font-size: 15px; color: var(--ink-2); text-align: center; }
/* The visible underline stays text-sized; the padding + matching negative margin below (coarse
   pointers only) grows the actual hit area to 44px without shifting surrounding text. */
.faq-chat-link { display: inline-block; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }


/* ---- lightbox ---- */
.lightbox-overlay { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; background: rgba(20,20,18,.88); cursor: zoom-out; }
.lightbox-overlay[hidden] { display: none; }
.lightbox-image { max-height: 92vh; width: auto; border-radius: 6px; }
.lightbox-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: #fff; font-size: 30px; cursor: pointer; }

@media (max-width: 1023px) {
  .pricing-grid, .earn-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; }
  .upgrade-row { grid-template-columns: 1fr 1fr; }
  .upgrade--kw { grid-column: 1; }
  .upgrade--phone { grid-column: 2; }
  .pricing-card:nth-child(3), .earn-grid li:nth-child(3) { border-left: 0; }
}
/* Below 480px two columns get too tight for the card's own padding plus its longest line
   ("Copy-paste keywords") — one column, inside the page's own 20px gutter, so nothing clips. */
@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr; margin: 26px 0 0; }
  .pricing-card { padding: 20px 0; }
  .pricing-card + .pricing-card { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 719px) {
  main > section { padding: 56px 20px; }
  .hero { padding-top: calc(var(--sh-h) + 36px) !important; }
  .hero h1 { font-size: clamp(32px, 9vw, 40px); }
  .shot-hero { width: calc(100% / 1.13); margin-top: 28px; }
  .shot img { border-radius: 6px; }
  .downloads { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 360px; margin: 32px auto 0; }
  .split { grid-template-columns: 1fr; }
  .split > div { padding: 44px 0; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr 1fr; margin: 0 -20px; }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps img { height: 34px; }
  .spec th { display: block; width: auto; padding: 14px 0 2px; }
  .spec td { display: block; padding: 0 0 12px; }
  .spec tr { display: block; }
  .pricing-grid, .earn-grid { margin: 26px -20px 0; }
  .term-opt { min-height: 60px; padding: 12px 4px; }
  .pricing-badge { position: static; display: inline-block; margin-left: 0; }
  .pricing-name .pricing-badge { transform: none; margin-left: 10px; vertical-align: middle; }
  .upgrade-row { grid-template-columns: 1fr; margin: 30px 0 0; }
  .upgrade--kw, .upgrade--phone { grid-column: 1; border-left: 0; padding: 24px 0; }
}
@media (max-width: 1280px) {
  .poster-meta-left, .poster-meta-right { display: none; }
}
@media (max-width: 719px) {
  :root { --sh-h: 110px; }
  .poster-head { grid-template-columns: 1fr; justify-items: center; row-gap: 0; padding: 14px 16px 8px; }
  .poster-brand { grid-column: 1; grid-row: 1; }
  .poster-brand img { height: 20px; transform: none; }
  .nav-tabs { gap: 2px 18px; }
  .nav-tabs--pre, .nav-tabs--post { grid-column: 1; padding: 0; justify-content: center; }
  .nav-tabs--pre { grid-row: 2; margin-top: 4px; } .nav-tabs--post { grid-row: 3; }
  .nav-tab-trigger { min-height: 32px; align-items: center; font-size: 10.5px; }
  .nav-tab-trigger::after { bottom: 2px; }
  /* .poster-head's backdrop-filter makes it the containing block for its position:fixed
     descendants (same effect as transform/filter on an ancestor), so a fixed .mega-menu here
     measures itself against the header's own (short) box instead of the viewport, opening with
     ~0 visible height. position:absolute anchored to the header's own bottom edge (top:100%) sits
     in the right place without relying on fixed positioning at all, sized to fill exactly what's
     left of the screen below the header and scrolling its own content if that's still not enough. */
  .mega-menu { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; height: calc(100vh - var(--sh-h)); height: calc(100dvh - var(--sh-h)); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
  .mega-menu-cards { flex-direction: column; gap: 20px; }
  .mega-menu-card { flex: none; }
  .mega-menu-card-img { height: 180px; }
  .poster-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot-email, .foot-note, .foot-copy { grid-column: 1; grid-row: auto; text-align: center; }
}
/* ---- one block per screen (desktop): every section fills the window, content centred,
   tall media scaled to the window height, and the page settles on each block. ---- */
@media (min-width: 900px) and (min-height: 600px) {
  main > section, main > .pair { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--sh-h) !important; padding-bottom: 15vh !important; }
  main > .pair { padding: 0 !important; padding-top: var(--sh-h) !important; padding-bottom: 12vh !important; }
  main > .pair > section { padding-top: 40px; padding-bottom: 40px; }
  main > .pair > .split { padding-top: 0 !important; padding-bottom: 0 !important; }
  main > .pair > .split > div { padding-top: 40px; padding-bottom: 44px; }
  main > section.hero { --hero-text: clamp(470px, 50vh, 560px); padding-top: calc(var(--sh-h) + clamp(16px, 2.6vh, 32px)) !important; padding-bottom: 24px !important; justify-content: flex-start; }
  .hero .downloads { margin-top: clamp(18px, 2.6vh, 30px); }
  .hero .downloads .pill { min-height: 44px; }
  .hero .downloads-note { margin-top: 12px; }
  /* remote: phone height follows the window height */
  .phone { width: min(300px, calc((100svh - var(--sh-h) - 15vh - 260px) * 0.47)); margin-top: 28px; }
  .remote-cta { margin-top: 24px; }
  .world-map { width: min(100%, 1040px, calc((100svh - var(--sh-h) - 15vh - 230px) * 2.69)); }
  .faq-q { min-height: 40px; padding: 7px 0; }
  main > section > .pill, main > section > .shot { align-self: center; }
  .review-form, .faq-list, .checkout-panel, .checkout-success { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-head, .will-reveal > *, .faq-plus::after { transition: none !important; }
  .will-reveal > * { opacity: 1; transform: none; }
  .checkout-panel-frame.is-loading { background: var(--bg-2); animation: none; }
  .mega-menu, .modal, .pricing-price { transform: none !important; filter: none !important; }
  .tool-mark img, .mega-menu-card-photo { transition: opacity 150ms ease !important; }
  .faq-a { transition: opacity 200ms ease !important; }
}

/* ---- THE INTERFACE: seven feature names above the real app. Pointing at (or focusing, or tapping) a
   name darkens everything but that part of the screen; the name and one line appear under the app.
   Nothing is highlighted at rest. Pressing a stop gently darkens everything but that part of the
   screen (SVG mask, so several areas can light at once); Day / Night cross-fades to the matching light
   recording. The whole app window is always in view, never cropped or scrolled. ---- */
.interface-sub { margin: -8px 0 0; color: var(--ink-2) !important; }
main > section.ix { min-height: 0 !important; padding-top: clamp(48px, 7vh, 72px) !important; padding-bottom: clamp(40px, 6vh, 64px) !important; }
/* title + names + the whole app + its explanation fit one window, so a hover is always seen */
.ix-tour { --ix-w: min(100%, 1120px, calc((78svh - 226px) * 1.5)); width: var(--ix-w); margin: clamp(20px, 3.2vh, 36px) auto 0; text-align: left; }

/* feature names: one row of mono labels, obviously pressable */
.ix-nav { display: flex; justify-content: space-between; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ix-feat { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 10px 2px; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: color 120ms var(--ease); }
.ix-feat span { color: var(--ink-3); transition: color 120ms var(--ease); }
.ix-feat::after { content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 200ms var(--ease); }
.ix-feat[aria-pressed="true"] { color: var(--ink); }
.ix-feat[aria-pressed="true"] span { color: var(--ink); }
.ix-feat[aria-pressed="true"]::after { transform: scaleX(1); }
.ix-feat:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* self-playing tour: the bar under the active name fills over the time that feature is shown */
.ix-nav.is-auto .ix-feat[aria-pressed="true"]::after { transition: none; animation: ix-auto var(--ix-auto, 4800ms) linear both; }
@keyframes ix-auto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Auto tour switch, under the explanation */
.ix-auto-row { display: flex; justify-content: center; margin-top: 6px; }
.ix-auto-btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.ix-auto-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ix-sw { position: relative; width: 30px; height: 16px; border-radius: 8px; border: 1px solid var(--ink-3); background: transparent; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.ix-sw i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); transition: transform 180ms var(--ease), background 160ms var(--ease); }
.ix-auto-btn[aria-checked="true"] .ix-sw { background: var(--ink); border-color: var(--ink); }
.ix-auto-btn[aria-checked="true"] .ix-sw i { transform: translateX(14px); background: #F4F1EA; }
.ix-auto-btn [data-ix-auto-label] { min-width: 3ch; text-align: left; color: var(--ink); }

.ix-stage { position: relative; margin-top: clamp(14px, 2.2vh, 24px); transform-origin: 50% 0; border-radius: 6px; overflow: hidden; isolation: isolate; background: #4C4A46; box-shadow: 0 30px 60px -28px rgba(20,20,18,.35); }
/* magnify: the chosen controls scale up and move to the middle of the frame (transform only, so it stays smooth) */
.ix-zoom { position: relative; }
.ix-zoom .ix-screen { box-shadow: none; }
.ix-stage.is-scrub { opacity: calc(.35 + .65 * var(--p, 1)); transform: translateY(calc((1 - var(--p, 1)) * 32px)) scale(calc(.94 + .06 * var(--p, 1))); }
.ix-screen { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; outline: 1px solid var(--line); outline-offset: -1px; background: #EBE5D8; box-shadow: 0 30px 60px -28px rgba(20,20,18,.35); }
/* Day / Night: the app's own dark-mode recording (same take, frame-aligned) fades in over the day one */
.ix-dark { position: absolute; inset: 0; opacity: 0; background: #000; box-shadow: none; transition: opacity 260ms var(--ease); }
.ix-stage.is-night .ix-dark { opacity: 1; }
/* Share: the Share screen recording fades in over the Review one */
.ix-share { position: absolute; inset: 0; opacity: 0; box-shadow: none; transition: opacity 260ms var(--ease); }
.ix-stage.is-share .ix-share { opacity: 1; }
/* highlight: the rest of the app dims hard, the chosen controls stay at full brightness inside a crisp two-tone frame */
.ix-spot { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease); }
.ix-spot.is-on { opacity: 1; }
.ix-dim { fill: rgba(14, 14, 13, .72); }
/* Day / Night: the point is to see the whole dark interface, so only a light dim around the toggle */
.ix-stage.is-night .ix-dim { fill: rgba(0, 0, 0, .18); }
.ix-ring-out { fill: none; stroke: rgba(14, 14, 13, .55); stroke-width: 4px; vector-effect: non-scaling-stroke; }
.ix-ring { fill: none; stroke: #F4F1EA; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* lift: the chosen controls rise out of the dimmed app, larger and centred. A canvas drawn from the
   playing recording, so it stays live (the trim playhead moves) and sharp (it reads the 4K source) */
.ix-lift { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; border-radius: 12px; opacity: 0; transform-origin: 0 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 0 0 rgba(255, 255, 255, .7) inset,
    0 2px 6px rgba(0, 0, 0, .18), 0 18px 40px -12px rgba(0, 0, 0, .45), 0 50px 110px -30px rgba(0, 0, 0, .6);
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), opacity 260ms var(--ease); }
/* depth: while a feature is lifted, the app behind it eases back, softens and darkens a touch */
.ix-zoom { transform-origin: 50% 50%; transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 500ms var(--ease); }
/* (no shrink, blur or dark frame behind a lifted card: the app stays full size and sharp, just dimmed) */
.ix-lift.is-on { opacity: 1; }
.ix-lift.is-snap { transition: none; }
/* build-in: while it assembles, the pieces are drawn on a canvas and the live app waits underneath */
.ix-build { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
.ix-stage.is-built { background: transparent; box-shadow: none; transition: box-shadow 400ms var(--ease); }
.ix-stage.is-building .ix-build { display: block; }
.ix-stage.is-building .ix-zoom { opacity: 0; }
.ix-stage.is-built:not(.is-building) { box-shadow: 0 30px 60px -28px rgba(20,20,18,.35); }
/* the ghost cursor that uses each lifted feature */
.ix-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 20px; height: 26px; margin: -2px 0 0 -2px; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.ix-cursor svg { display: block; transform-origin: 3px 2px; transition: transform 120ms var(--ease); }
.ix-cursor.is-down svg { transform: scale(.86); }
@media (max-width: 719px) { .ix-cursor { width: 15px; height: 20px; } .ix-cursor svg { width: 15px; height: 20px; } }

/* explanation: one fixed-height cell under the app, so nothing below ever moves */
.ix-explain { display: grid; min-height: 5.4em; margin-top: clamp(14px, 2.2vh, 22px); text-align: center; }
.ix-explain > * { grid-area: 1 / 1; align-self: start; justify-self: center; }
.ix-idle { color: var(--ink-3) !important; padding-top: 6px; transition: opacity 160ms var(--ease); }
.ix-explain.has-feat .ix-idle { opacity: 0; }
/* the explanation rises in quickly when a feature is chosen, so the change is unmistakable */
.ix-panel[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(8px); }
.ix-panel { transition: opacity 180ms var(--ease), transform 220ms var(--ease); }
.ix-panel .ix-h { font-size: clamp(30px, 2.8vw, 40px); }
.ix-p { margin: 6px auto 0; max-width: none; white-space: nowrap; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ink); }

@media (max-width: 1023px) {
  .ix-tour { --ix-w: 100%; }
  .ix-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .ix-feat::after { bottom: 2px; right: 12px; }
}
@media (max-width: 719px) {
  .ix-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-feat { letter-spacing: .12em; gap: 5px; font-size: 10.5px; padding: 12px 0; }
  .ix-explain { min-height: 7.6em; }
}
/* phones play the real app at its smallest window (4:3), so its text is bigger; the Share take stays 3:2, letterboxed */
.ix-tour.is-phone .ix-screen { aspect-ratio: 4 / 3; }
.ix-tour.is-phone .ix-share { object-fit: contain; background: #EBE5D8; }
@media (prefers-reduced-motion: reduce) {
  .ix-spot, .ix-dark, .ix-share, .ix-feat, .ix-feat span, .ix-feat::after, .ix-idle, .ix-panel, .ix-zoom, .ix-lift { transition: none !important; }
  .ix-stage.is-scrub { opacity: 1; transform: none; }
}

/* ---- touch targets: 44px minimum on coarse pointers, without changing how anything looks on a
   mouse-driven desktop (where the smaller sizes are an intentional, denser look) ---- */
@media (pointer: coarse) {
  .ix-feat { min-height: 44px; }
  .pricing-card .pill { min-height: 44px; }
  /* Padding grows the real hit area to 44px; the matching negative margin keeps the link's
     visible position and the paragraph's line height exactly as they were. */
  .faq-chat-link { padding: 14px 4px; margin: -14px -4px; }
  /* Header logo, footer social icons, mailto and Privacy/Terms links all measured well under the
     44px touch-target floor on this page (it doesn't load home.css/studio.css, which already got
     this treatment) — same technique: padding/min-size grows the real hit area without resizing
     or moving the visible mark, and negative margins cancel the effect on surrounding layout. */
  /* QA-17: min-height:44px (inline-flex) here grew the fixed header's own row by ~20-22px on
     touch viewports — see nav-v2.css's matching comment on the same bug for .nav-tab-trigger. An
     absolutely-positioned ::after extends the tappable zone without adding to the row's height. */
  .poster-brand a { position: relative; }
  .poster-brand a::after { content: ''; position: absolute; inset: -12px -4px; }
  .foot-social { gap: 4px; }
  .foot-social a { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .foot-email { display: inline-flex; align-items: center; min-height: 44px; }
  /* QA-16: the 44px floor above was set on the wrapping <p>, not the actual tappable <a> inside
     it — align-items: center on the flex parent keeps the <a> at its own (text-height) size, so
     the extra height around it isn't part of the link. Set it on the link itself too. */
  .foot-email a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-copy a { display: inline-block; padding: 15px 4px; margin: -15px 0; }
}

/* Page audit 2026-11-03: proof line under the hero headline, phone remote as a quiet secondary line */
.hero-proof { max-width: none; margin: 14px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.downloads-remote { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.downloads-remote a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) { .hero-proof { font-size: 15px; margin-top: 10px; padding: 0 8px; } }
.workflow > .section-sub { margin-bottom: 14px; }
@media (min-width: 1000px) { .hero-proof { white-space: nowrap; } }
.reviews-disclosure { margin-top: 6px; font-size: 13px; color: var(--ink-3); }

/* The success heading gets focus from code (for screen readers); no box around it. */
.checkout-success h3:focus { outline: none; }

/* 6 and 12 month terms can't be canceled early: show them in a yellow box so they can't be missed. */
.term-note.is-commitment {
  max-width: 560px;
  margin-inline: auto;
  padding: 12px 16px;
  border: 1px solid #E3B23D;
  border-radius: 10px;
  background: rgba(227, 178, 61, 0.14);
  color: inherit;
}

/* Privacy line under the downloads: plain sentence, not the mono label style. */
.downloads-note.downloads-privacy { margin-top: 8px; font-family: var(--font-body, Archivo, system-ui, sans-serif); text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.5; }
.downloads-privacy a { color: inherit; }
/* explanations: one clean line on desktop; phones wrap */
@media (max-width: 899px) { .ix-p { white-space: normal; max-width: 46ch; } }

/* Daniel 2026-11-05: tabs read as number+word pairs, switch sits closer to the text */
.ix-feat { gap: 6px; letter-spacing: .14em; }
.ix-feat span { letter-spacing: .06em; }
.ix-explain { min-height: 0; }
.ix-p { margin-top: 2px; }
.ix-auto-row { margin-top: 0; }
@media (max-width: 899px) { .ix-feat { gap: 5px; letter-spacing: .12em; } }
.downloads .pill[hidden] { display: none; }

/* ---- features grid (same grid as the Scene Lock / Loadout pages) ---- */
main > section.pp-feats { min-height: 0 !important; }
.pp-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: 12px auto 0; border-top: 1px solid var(--line-2); text-align: left; }
.pp-feat-grid li { padding: 30px clamp(18px, 2.4vw, 34px) 34px; border-bottom: 1px solid var(--line-2); }
.pp-feat-grid li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line-2); }
.pp-feat-n { display: block; font-size: 12px; letter-spacing: .2em; color: var(--ink-3); }
.pp-feat-h { margin-top: 14px; font: 600 clamp(19px, 1.5vw, 22px)/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.pp-feat-grid p { margin-top: 10px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 767px) {
  .pp-feat-grid { grid-template-columns: 1fr; }
  .pp-feat-grid li:not(:nth-child(3n + 1)) { border-left: 0; }
}

/* Same 1,000 clips: speed video, wide on desktop, tall on phones */
main > section.clock { min-height: 0 !important; padding: 0 !important; background: #0b0b0a; border-top-color: transparent; display: flex; justify-content: center; }
.clock-video { display: block; width: 100%; max-width: 1920px; height: auto; background: #0b0b0a; }
.clock-tall { display: none; }
@media (max-width: 700px) { .clock-wide { display: none; } .clock-tall { display: block; max-height: 100svh; width: auto; max-width: 100%; } }