/* Hallmark · shape: night showroom (centred stage, scroll-lit statement, vertical tabs, index rows, bento of checks, table, questions band, close under a slow ring of panels; hub: split stage, the app on a raised panel, a statement about who makes it; text pages: long document) · genre: atmospheric · theme: custom · job: try · idea: "what Final Cut can rebuild floats away from the library, the edit stays put" · vibe: "night edit suite, calm, exact, real screens"
 * paper: oklch(15% 0.014 262) · accent: oklch(64% 0.22 358) · display: Satoshi · body: Satoshi · hero: Library Cleaner, centred stage with icon, head and two actions over a turning globe of real app panels that fade with depth; hub, head on the left and the app window bleeding off the right edge · nav: edge-aligned bar, wordmark and three text links, no button, not sticky · footer: columns, wordmark and one line beside three link groups, legal lines under a hairline · imagery: screenshots 17 (app snapshots cropped by tools/crops.py) · signature: the globe of real Library Cleaner panels turning behind the head, answered by the ring over the close
 * axes: dark/geometric-sans/chromatic-magenta · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a dark centred showroom fits many apps; every picture is a real Library Cleaner panel and every head names its own folders, checks and price */
/* Hallmark · waive 77 · the support and privacy pages are long documents at a 640px measure · the policy and the answers keep the old wording, set as one readable column */
/* Hallmark · waive 78 · text pages are a long document with inline heads at the 2xl size · the privacy policy and the support answers read as one document under one display head */
/* Hallmark · dismissed 25 · the 36ch statement, the 34ch app line, the 24ch about line and the 32ch footer line are single display sentences or captions, not running prose */
/* Hallmark · dismissed 58 · the hub spec list and the five-row price table land at 82 to 91 words a screen, each a list counted whole */
/* Hallmark · dismissed 77 · the hub shows one app on its shelf, so it stops at four sections until the second app exists */
/* Hallmark · two ambient loops by request of the owner: the globe (a turn every 30s) and the ring (a turn every 72s), each with its own pause button, stopped off-screen and under reduced motion; the steps advance every 6s and stop on hover, focus, click and their own button */
@import url("./tokens.css");
@import url("./base.css");

/* Chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-light); color: var(--color-on-light); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

.bar { position: relative; z-index: var(--z-raised); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 80px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--color-ink-2); }
.bar__nav { display: flex; align-items: center; gap: var(--space-lg); }
.bar__nav a { color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; padding-block: var(--space-sm); transition: color var(--dur-short) var(--ease-out); }
.bar__nav a:hover, .bar__nav a[aria-current="page"] { color: var(--color-ink); }
.bar__nav a:active { color: var(--color-ink-2); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-light); border-radius: var(--radius-pill); background: var(--color-light); color: var(--color-on-light); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-light-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: var(--color-paper-2); color: var(--color-ink); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-3); }

.lead { font-size: var(--text-lead); color: var(--color-muted); max-width: 44ch; }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; max-width: 22ch; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
.shot { border-radius: var(--radius-shot); outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; aspect-ratio: 2200 / 1375; }

/* Hero: the stage */
.hero { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; min-height: calc(100svh - 80px); padding-block: var(--space-2xl) var(--space-3xl); }
.hero__in { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: var(--space-lg); }
.hero__icon { width: 112px; height: auto; }
.hero h1 { font-size: var(--text-display); font-weight: 600; line-height: 0.98; letter-spacing: var(--tracking-display); max-width: 20ch; }
.hero .lead { max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); }

.drift { position: absolute; inset: 0; z-index: 1; perspective: 1400px; }
.tile { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; border-radius: var(--radius-tile); outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; transform: translate3d(0, 0, var(--z)) rotate(var(--r, 0deg)); animation: drift var(--d, 24s) var(--ease-in-out) var(--dl, 0s) infinite alternate; }
.near { --z: 0px; opacity: 0.94; }
.mid { --z: -160px; opacity: 0.6; }
.far { --z: -320px; opacity: 0.34; }
.t1 { --x: 3%; --y: 24%; --w: clamp(150px, 13vw, 200px); --r: -4deg; --d: 26s; --dl: -4s; }
.t2 { --x: -5%; --y: 74%; --w: clamp(260px, 24vw, 360px); --r: 3deg; --d: 31s; --dl: -12s; }
.t3 { --x: 23%; --y: 4%; --w: clamp(170px, 15vw, 230px); --d: 34s; --dl: -20s; }
.t4 { --x: 19%; --y: 87%; --w: clamp(240px, 21vw, 320px); --r: -2deg; --d: 28s; --dl: -6s; }
.t5 { --x: 5%; --y: 49%; --w: clamp(100px, 9vw, 130px); --r: 5deg; --d: 36s; --dl: -9s; }
.t6 { --x: 82%; --y: 31%; --w: clamp(170px, 15vw, 220px); --r: 4deg; --d: 27s; --dl: -15s; }
.t7 { --x: 93%; --y: 0%; --w: clamp(56px, 5vw, 76px); --r: -3deg; --d: 30s; --dl: -2s; }
.t8 { --x: 60%; --y: 88%; --w: clamp(150px, 13vw, 190px); --r: 2deg; --d: 33s; --dl: -17s; }
.t9 { --x: 85%; --y: 64%; --w: clamp(160px, 14vw, 210px); --r: -5deg; --d: 29s; --dl: -11s; }
.t10 { --x: 62%; --y: 6%; --w: clamp(140px, 12vw, 180px); --r: 3deg; --d: 35s; --dl: -25s; }
.t11 { --x: 72%; --y: 88%; --w: clamp(120px, 10vw, 160px); --r: -3deg; --d: 25s; --dl: -7s; }
.t12 { --x: 44%; --y: 95%; --w: clamp(150px, 13vw, 200px); --r: 1deg; --d: 38s; --dl: -30s; }
@keyframes drift {
  from { transform: translate3d(0, 22px, var(--z)) rotate(var(--r, 0deg)); }
  to { transform: translate3d(0, -22px, calc(var(--z) + 80px)) rotate(var(--r, 0deg)); }
}
[data-loop]:not(.is-running) .tile { animation-play-state: paused; }
/* The globe: lab.js places every panel on a turning sphere; these are the sizes on it */
.is-globe .tile { left: 50%; top: 50%; width: var(--gw, 150px); animation: none; opacity: 0; transform: translate(-50%, -50%); }
.is-globe .t1 { --gw: 150px; } .is-globe .t2 { --gw: 250px; } .is-globe .t3 { --gw: 190px; } .is-globe .t4 { --gw: 230px; }
.is-globe .t5 { --gw: 120px; } .is-globe .t6 { --gw: 160px; } .is-globe .t7 { --gw: 62px; } .is-globe .t8 { --gw: 150px; }
.is-globe .t9 { --gw: 180px; } .is-globe .t10 { --gw: 160px; } .is-globe .t11 { --gw: 140px; } .is-globe .t12 { --gw: 190px; }
html:not(.js) .tile { animation: none; }

.loop-toggle { position: absolute; right: var(--gutter); bottom: var(--space-lg); z-index: 3; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.loop-toggle:hover { color: var(--color-ink); }
.loop-toggle:active { transform: translateY(1px); }
.loop-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .loop-toggle { display: none; }

/* Statement, lit word by word while it crosses the screen */
.statement { padding-block: var(--section-gap-s) var(--space-xl); }
.statement__text { font-family: var(--font-display); font-size: var(--text-statement); font-weight: 600; line-height: 1.14; letter-spacing: -0.025em; max-width: 36ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .statement__text { view-timeline: --lit block; }
    .statement__text .w { animation: lit linear both; animation-timeline: --lit; animation-range: cover calc(var(--p) * 1%) cover calc(var(--p) * 1% + 6%); }
    @keyframes lit { from { opacity: 0.24; } to { opacity: 1; } }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
  .is-js-lit .w { opacity: 0.24; transition: opacity var(--dur-short) var(--ease-out); }
  .is-js-lit .w.on { opacity: 1; }
}

/* How it works: vertical tabs beside the real window */
.how { padding-top: var(--section-gap); }
.how h2 { margin-bottom: var(--space-2xl); }
.how__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.how__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.how__steps li { position: relative; counter-increment: step; border-top: 1px solid var(--color-rule); }
.how__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }
.is-tabs li.is-active .how__bar { transform: scaleX(1); }
.is-auto li.is-active .how__bar { animation: step-bar 6s linear both; }
.how__grid:not(.is-running) .how__bar { animation-play-state: paused; }
@keyframes step-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.how__pause { margin-top: var(--space-lg); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.how__pause:hover { color: var(--color-ink); }
.how__pause:active { transform: translateY(1px); }
.how__pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.how__steps li:last-child { border-bottom: 1px solid var(--color-rule); }
.how__step { display: grid; gap: var(--space-xs); width: 100%; padding: var(--space-lg) 0; border: 0; background: none; color: var(--color-muted); text-align: left; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.how__step strong { font-size: var(--text-title); font-weight: 600; color: var(--color-ink-2); letter-spacing: -0.015em; }
.how__step strong::before { content: counter(step) ". "; }
.how__step:hover strong { color: var(--color-ink); }
.how__step:active { transform: translateY(1px); }
.how__step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.is-tabs .how__step[aria-selected="true"] strong { color: var(--color-ink); }
.is-tabs .how__step[aria-selected="true"] span { color: var(--color-ink-2); }
.how__views { display: grid; gap: var(--space-lg); }
.is-tabs .how__views > * { grid-area: 1 / 1; }
.is-tabs .how__view { opacity: 0; visibility: hidden; transition: opacity var(--dur-long) var(--ease-in-out), visibility 0s linear var(--dur-long); }
.is-tabs .how__view.is-on { opacity: 1; visibility: visible; transition: opacity var(--dur-long) var(--ease-in-out), visibility 0s; }
.how__view { margin: 0; }

/* Four folders, set as an index */
.folders { padding-top: var(--section-gap-l); }
.folders__list { list-style: none; margin: 0; padding: 0; }
.folders__list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.folders__list li:last-child { border-bottom: 1px solid var(--color-rule); }
.folders__list h3 { font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.03em; }
.folders__list p { color: var(--color-muted); max-width: 46ch; }
.folders__list .fate { color: var(--color-ink-2); text-align: right; white-space: nowrap; }
.folders__list .danger .fate { color: var(--color-accent); }

/* Checks before cleaning: a bento of real panels */
.checks { padding-top: var(--section-gap); }
.checks h2 { margin-bottom: var(--space-2xl); }
.checks__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.check { grid-column: span 5; display: grid; grid-template-rows: 1fr auto auto; gap: var(--space-sm); min-height: 400px; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.check--wide { grid-column: span 7; }
.check img { align-self: center; justify-self: center; width: min(100%, 380px); border-radius: var(--radius-tile); margin-bottom: var(--space-lg); }
.check--text { grid-template-rows: 1fr auto; }
.check--text h3 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.check h3 { font-size: var(--text-title); }
.check p { color: var(--color-muted); max-width: 46ch; }

/* Price */
.plans { padding-top: var(--section-gap-l); padding-bottom: var(--section-gap); }
.plans table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.plans th, .plans td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; text-align: left; border-bottom: 1px solid var(--color-rule); vertical-align: baseline; }
.plans thead th { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-lg); width: 25%; }
.plans thead th:first-child { width: 50%; }
.plans thead strong { display: block; font-size: var(--text-title); font-weight: 600; color: var(--color-ink); letter-spacing: -0.015em; margin-bottom: var(--space-2xs); }
.plans tbody th { font-weight: 400; color: var(--color-ink-2); }
.plans td { color: var(--color-ink); }
.plans td.no { color: var(--color-muted); }
.plans tfoot td { border: 0; padding-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* Questions, on a raised band */
.faq { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.faq__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
.faq__list details { border-bottom: 1px solid var(--color-rule); }
.faq__list details:first-child { border-top: 1px solid var(--color-rule); }
details summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); font-size: var(--text-lg); font-weight: 600; cursor: pointer; list-style: none; transition: color var(--dur-short) var(--ease-out); }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; flex-shrink: 0; font-size: var(--text-xl); font-weight: 400; color: var(--color-muted); line-height: 1; }
details[open] summary::after { content: "\2212"; }
details summary:hover { color: var(--color-ink-2); }
details summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
details > p { color: var(--color-muted); padding-bottom: var(--space-lg); }
details:not([open]) > :not(summary) { display: none; }
details > p + p { margin-top: calc(-1 * var(--space-sm)); }
.faq__more { grid-column: 2; color: var(--color-muted); }

/* Close: the panels in an arc over the last call */
.close { position: relative; overflow: clip; padding-block: var(--section-gap-s) var(--section-gap); text-align: center; }
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.ring-crop { position: relative; width: min(100%, 1120px); aspect-ratio: 2 / 1; margin-inline: auto; overflow: hidden; container-type: inline-size; }
.ring-crop::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48%; z-index: 1; background: linear-gradient(to bottom, transparent, var(--color-paper)); pointer-events: none; }
.ring { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1; animation: ring-spin 72s linear infinite; }
.ring__tile { position: absolute; left: 50%; top: 50%; width: calc(var(--rw) * var(--rk, 1)); height: auto; border-radius: var(--radius-tile); outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; transform: translate(-50%, -50%) translate(calc(sin(var(--a) + var(--spin)) * 44cqi), calc(cos(var(--a) + var(--spin)) * -44cqi)) rotate(var(--r)); }
.r1 { --a: 0deg; --rw: 13cqi; --r: -3deg; } .r2 { --a: 30deg; --rw: 15cqi; --r: 5deg; } .r3 { --a: 60deg; --rw: 17cqi; --r: -4deg; }
.r4 { --a: 90deg; --rw: 6cqi; --r: 2deg; } .r5 { --a: 120deg; --rw: 22cqi; --r: -2deg; } .r6 { --a: 150deg; --rw: 14cqi; --r: 6deg; }
.r7 { --a: 180deg; --rw: 13cqi; --r: -5deg; } .r8 { --a: 210deg; --rw: 18cqi; --r: 3deg; } .r9 { --a: 240deg; --rw: 12cqi; --r: -6deg; }
.r10 { --a: 270deg; --rw: 20cqi; --r: 4deg; } .r11 { --a: 300deg; --rw: 15cqi; --r: -3deg; } .r12 { --a: 330deg; --rw: 16cqi; --r: 2deg; }
@keyframes ring-spin { to { --spin: 360deg; } }
[data-loop]:not(.is-running) .ring { animation-play-state: paused; }
html:not(.js) .ring { animation: none; }
.close__in { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-lg); margin-top: calc(-1 * var(--space-3xl)); }
.close h2 { font-size: var(--text-display-s); }
.specs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) var(--space-xl); margin: var(--space-lg) 0 0; }
.specs dt { font-size: var(--text-sm); color: var(--color-muted); }
.specs dd { margin: 0; }

/* Footer */
.foot { border-top: 1px solid var(--color-rule); padding-block: var(--space-2xl) var(--space-xl); }
.foot__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.foot__brand p { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); max-width: 32ch; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.foot__cols h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-md); }
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot__cols a { color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); display: inline-block; padding-block: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.foot__cols a:hover { color: var(--color-ink); text-decoration: underline; }
.foot__legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-2xs); }
.foot__legal p { font-size: var(--text-xs); color: var(--color-muted); max-width: none; }

/* Hub */
.hub-hero { padding-block: var(--space-3xl) 0; }
.hub-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hub-hero__in { display: grid; justify-items: start; gap: var(--space-lg); }
.hub-hero h1 { font-size: var(--text-display-s); font-weight: 600; line-height: 1; letter-spacing: -0.03em; max-width: 12ch; }
.hub-hero .lead { max-width: 30ch; }
.hub-hero .actions { justify-content: flex-start; }
.hub-window { margin: 0; width: calc(100% + var(--gutter)); max-width: none; }
.apps { padding-top: var(--section-gap-s); }
.app { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.app__name { display: flex; align-items: center; gap: var(--space-md); }
.app__name img { width: 72px; height: auto; flex-shrink: 0; }
.app__name h3 { font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.03em; }
.app__text { display: grid; gap: var(--space-lg); justify-items: start; }
.app__text > p { color: var(--color-muted); font-size: var(--text-lead); max-width: 34ch; }
.app dl { display: grid; gap: var(--space-sm); margin: 0; width: 100%; }
.app dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.app dt { color: var(--color-muted); font-size: var(--text-sm); }
.app dd { margin: 0; }
.app__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.about { padding-block: var(--section-gap) var(--section-gap-s); }
.about__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.about__in p { font-family: var(--font-display); font-size: var(--text-statement); font-weight: 600; line-height: 1.14; letter-spacing: -0.025em; max-width: 24ch; }
.about__contact { display: grid; gap: var(--space-xs); justify-items: start; color: var(--color-muted); }
.about__contact a { color: var(--color-ink); font-size: var(--text-lg); }

/* Text pages: support, privacy, not found */
.doc { padding-block: var(--space-xl) var(--section-gap-s); }
.doc__in { max-width: 640px; }
.doc h1 { font-size: var(--text-display-s); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.doc .updated { color: var(--color-muted); margin-top: var(--space-md); }
.doc h2 { font-size: var(--text-2xl); letter-spacing: -0.02em; margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.doc p, .doc li { color: var(--color-ink-2); line-height: 1.65; }
.doc p + p { margin-top: var(--space-md); }
.doc a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.doc a:hover { text-decoration-thickness: 2px; }
.doc a[download] { white-space: nowrap; }
.doc ol, .doc ul { padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.summary { margin-top: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); display: grid; gap: var(--space-sm); }
.summary strong { font-weight: 600; font-size: var(--text-lg); }
.summary ul { margin: 0; }
.doc details:first-of-type { border-top: 1px solid var(--color-rule); }
.doc details { border-bottom: 1px solid var(--color-rule); }
.not-found { min-height: 60svh; display: grid; align-content: center; gap: var(--space-lg); padding-block: var(--section-gap-s); }
.not-found h1 { font-size: var(--text-display); font-weight: 600; line-height: 0.98; letter-spacing: var(--tracking-display); }
.not-found p { color: var(--color-muted); }
.not-found a { color: var(--color-ink); }

/* Smaller screens */
@media (max-width: 75rem) {
  .t2, .t4, .t12 { display: none; }
}
@media (max-width: 60rem) {
  .hero { min-height: auto; display: flex; flex-direction: column; padding-block: var(--space-2xl) var(--space-3xl); }
  .drift { position: relative; inset: auto; order: 2; width: 100%; height: 230px; margin-top: var(--space-xl); perspective: none; }
  .drift .tile { animation: none; transform: rotate(var(--r, 0deg)); opacity: 1; }
  .drift .mid, .drift .far { display: none; }
  .t1 { --x: 2%; --y: 6%; --w: 32%; }
  .t6 { --x: 33%; --y: 0%; --w: 38%; --r: 2deg; }
  .t11 { --x: 69%; --y: 40%; --w: 29%; }
  .how__left, .how__steps, .how__views { display: contents; }
  .how__pause { display: none; }
  .how__grid { gap: 0; }
  .how__steps li:nth-child(1) { order: 1; } .how__steps li:nth-child(2) { order: 3; } .how__steps li:nth-child(3) { order: 5; }
  .how__view:nth-child(1) { order: 2; } .how__view:nth-child(2) { order: 4; } .how__view:nth-child(3) { order: 6; }
  .how__view { margin-bottom: var(--space-lg); }
  .is-tabs .how__view { opacity: 1; visibility: visible; }
  .is-tabs .how__views > * { grid-area: auto; }
  .loop-toggle { display: none; }
  .how__grid, .faq__in, .foot__top, .app, .about__in, .hub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hub-window { width: 100%; }
  .faq__more { grid-column: 1; }
  .folders__list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .folders__list .fate { text-align: left; }
  .check, .check--wide { grid-column: span 12; min-height: 0; }
  .app { padding: var(--space-xl); }
}
@media (max-width: 40rem) {
  .bar__nav { gap: var(--space-md); }
  .bar__nav .hide-s { display: none; }
  .ring-crop { --rk: 1.5; }
  .close__in { margin-top: calc(-1 * var(--space-lg)); }
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plans th, .plans td { padding-right: var(--space-sm); }
  .plans thead th:first-child { width: 40%; }
  .plans thead strong { font-size: var(--text-lg); }
  .app { padding: var(--space-lg); }
  .app dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .ring, .how__bar { animation: none; }
  .loop-toggle { display: none; }
  .btn, .how__step, .bar__nav a, .foot__cols a, details summary, .loop-toggle { transition: color var(--dur-short) linear, background-color var(--dur-short) linear; }
  .btn:active, .how__step:active, .loop-toggle:active { transform: none; }
}