/* Secondary pages inherit the homepage's palette, type and navigation. */
.interior h1 { font: 500 var(--t-poster)/1.05 var(--display); font-variation-settings: "wdth" 115; letter-spacing: -.03em; text-wrap: balance; }
.interior h2 { font: 500 var(--t-h2)/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.eyebrow, .panel-eyebrow { display: block; font: .8rem/1 var(--mono); letter-spacing: .01em; color: var(--magenta-text); margin-bottom: 1.1rem; }
.page-cta .eyebrow { color: var(--cream-2); }
.panel-eyebrow { color: var(--magenta-on-ink); }
.interior h3 { font-size: var(--t-sub); font-weight: 600; letter-spacing: -.015em; }
.interior p { text-wrap: pretty; }
.page-hero { padding: 2rem var(--pad) 4rem; }
.page-path { display: flex; flex-wrap: wrap; gap: .7rem; font-size: var(--t-note); color: var(--ink-2); margin-bottom: 3rem; }
.page-path a { text-underline-offset: .2em; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); /* 2026-10-05 gate 8: was 1.8fr 1fr. The max-content headline turn stretched track one and squeezed the intro to 168px; minmax(0) lets the turn wrap, 1.4 keeps the intro at 45+ characters from 1024 up */ gap: clamp(2rem,5vw,6rem); align-items: end; }
.hero-intro { max-width: var(--measure); }
.hero-intro p { font-size: var(--t-lead); }
.hero-intro .btn, .hero-intro .link-plain { margin-top: 1.7rem; }
.hero-intro .small-note { font-size: var(--t-note); margin-top: 1rem; color: var(--ink-2); }
.release-board { margin: 0 var(--pad); padding: clamp(2rem,5vw,5rem); background: var(--ink); color: var(--cream); border-radius: var(--radius-panel); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; overflow: hidden; }
.release-source { align-self: center; }
.release-source > p { font: 650 clamp(3.4rem,7vw,8rem)/.98 var(--display); letter-spacing: -.04em; font-variation-settings: "wdth" 115; }
.release-source > span { display: block; margin-top: 2rem; color: var(--cream-2); font-size: var(--t-small); }
.page-section { margin-inline: var(--pad); padding-top: clamp(3.5rem,7vw,7rem); padding-bottom: clamp(4.5rem,8vw,8.5rem); border-bottom: 1px solid var(--rule); }
.editorial p + p { margin-top: 1.3rem; }
.editorial .link-plain { display: inline-block; margin-top: 1.7rem; }
.preparation { background: var(--tint-violet); margin: 0; padding-inline: var(--pad); }
.preparation .section-body > p { margin-top: 1.5rem; max-width: 58ch; color: var(--ink-2); }
.preparation dl { margin: 0; }
.preparation dl > div { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.preparation dt { font-size: var(--t-sub); font-weight: 600; }
.preparation dd { margin: .6rem 0 0; max-width: 54ch; }
.sibling-link { padding: 2.5rem var(--pad); display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.sibling-link a { font-weight: 600; text-underline-offset: .25em; }
.page-cta { background: var(--ink); color: var(--cream); padding: clamp(3rem,6vw,6rem) var(--pad); display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; }
.page-cta h2 { max-width: 18ch; }
.page-cta p { max-width: 45ch; }
.page-cta .btn { margin-top: 1.8rem; }
.page-footer { background: var(--ink); color: var(--cream); padding: 0 var(--pad) 2rem; }
.page-footer .footer { margin-top: 0; }
.page-footer .meta { color: var(--cream-2); }
.page-footer :focus-visible, .page-cta :focus-visible { outline-color: var(--cream); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--magenta); }
.process-guide ol { list-style: none; counter-reset: process; margin: 0; padding: 0; }
.process-guide li { counter-increment: process; position: relative; padding: 0 0 2.4rem 3.3rem; }
.process-guide li::before { content: counter(process, decimal-leading-zero); font: 500 .9rem var(--mono); color: var(--magenta-text); position: absolute; left: 0; top: .25rem; }
.process-guide li + li { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.process-guide li + li::before { top: 1.75rem; }
.process-guide li p { margin-top: .8rem; max-width: 54ch; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
caption { text-align: left; color: var(--ink-2); padding-bottom: 1.8rem; }
th, td { padding: 1.5rem 1.4rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th:first-child { padding-left: 0; width: 22%; }
td { width: 39%; }
thead th { font-size: var(--t-sub); }
thead th:last-child, td:last-child { background: var(--tint-violet); }
.join-pending { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--cream-2); font-size: var(--t-small); }
.interior [id] { scroll-margin-top: 6rem; }
@media (max-width: 1100px) { .page-hero-grid { grid-template-columns: 1fr; gap: 2rem; } } /* gate 8: beside the headline at 1024 the intro ran 38 characters; book and compare stack, the other heroes have their own grids */
@media (max-width: 860px) {
 .page-hero-grid, .page-cta { grid-template-columns: 1fr; gap: 2rem; }
 .page-hero { padding-top: 1rem; padding-bottom: 2.5rem; }
 .page-path { margin-bottom: 2rem; }
 .hero-intro { max-width: 55ch; }
 .release-board { gap: 2rem; }
}
@media (max-width: 580px) {
 .release-board { grid-template-columns: 1fr; }
 .release-source > p { font-size: 3.7rem; }
 .release-source > span { margin-top: 1rem; }
 th, td { padding: 1rem .6rem; font-size: var(--t-body-sm); }
 thead th { font-size: var(--t-body-sm); }
 .page-cta { gap: 1.5rem; }
 .interior .site-nav { gap: .5rem; }
 .interior .nav-right { gap: .5rem; }
 .interior .site-nav .btn { font-size: .72rem; padding-inline: .7rem; }
 .interior .brand-word { font-size: 1rem; }
 .interior .brand-mark { width: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .interior *, .interior *::before, .interior *::after { transition: none !important; animation: none !important; } }
@media (max-width: 580px) {
 .interior h1 { font-size: clamp(2rem, 10vw, 3rem); }
 .interior .site-nav.is-menu-open .learn-panel { position: static; width: 100%; order: 4; display: none; }
 .interior .site-nav.is-menu-open .learn-panel.is-open { display: block; max-height: 55vh; overflow: auto; }
}
/* Base44 content expansion: release timing, fit and responsibility comparisons. */
.release-timeline ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: release; }
.release-timeline li { counter-increment: release; border-top: 1px solid var(--rule-strong); padding-top: 1.2rem; }
.release-timeline li::before { content: counter(release, decimal-leading-zero); display: block; margin-bottom: 1rem; font: .8rem var(--mono); color: var(--magenta-text); }
.release-timeline li p { margin-top: .9rem; max-width: 37ch; }
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; }
.fit-columns > div { padding: 2rem; border-radius: var(--radius-panel); background: var(--tint-violet); }
.fit-columns > div + div { background: var(--cream-2); }
.fit-columns--one { grid-template-columns: minmax(0, 64ch); justify-content: center; }
.fit-columns ul { margin: 1.2rem 0 0; padding-left: 1.15rem; }
.fit-columns li { padding-block: .4rem; max-width: 54ch; }
.approaches-table { min-width: 850px; table-layout: fixed; }
.approaches-table th:first-child, .approaches-table td { width: 20%; }
.approaches-table th, .approaches-table td { padding: 1.25rem 1rem; }
.approaches-table thead th { font-size: var(--t-sub-sm); }
.table-guidance { display: none; color: var(--ink-2); font-size: var(--t-note); margin-bottom: 1rem; }
/* phones: the caption would run as wide as the 850px table and cut mid-word, so it is read by assistive tech only and its sentence is repeated in .table-guidance. The wrap paints a shadow on whichever edge still has columns past it. */
@media (max-width: 860px) {
 .approaches-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
 .table-wrap { background: linear-gradient(to right, var(--cream) 40%, transparent) left / 2.5rem 100% no-repeat, linear-gradient(to left, var(--cream) 40%, transparent) right / 2.5rem 100% no-repeat, linear-gradient(to right, var(--rule-strong), transparent) left / 1.25rem 100% no-repeat, linear-gradient(to left, var(--rule-strong), transparent) right / 1.25rem 100% no-repeat; background-attachment: local, local, scroll, scroll; }
}
@media (max-width: 860px) {
 .release-timeline ol { grid-template-columns: 1fr; gap: 1.5rem; }
 /* 2026-10-04 (Levi on his iPhone): a fit pair stays two columns on a phone, no swipe; tighter inset and small text so both fit at 390px. */
 .fit-columns { gap: .75rem; }
 .fit-columns--one { grid-template-columns: 1fr; }
 .fit-columns ul { margin-top: .9rem; padding-left: 1rem; }
 .fit-columns li { padding-block: .3rem; font-size: var(--t-body-sm); line-height: var(--lh-body); }
 .number-big { font-size: 1.6rem; }
 .release-timeline li p { max-width: 58ch; }
 .fit-columns > div { padding: 1.1rem 1rem; }
}

/* 2026-09-18 Base44 transfer. Each page mixes formats: strip, cloud, flow, rail, chain, phase stack, roles table, status card, accordion, step cards, shelf, panels, checklist, grid. */
/* shared */
.page-section > h2 + div > p + p, .page-section > div > p + p { margin-top: 1.2rem; }
.page-cta--big { grid-template-columns: 1.4fr 1fr; padding-block: clamp(5rem,10vw,10rem); align-items: center; }
.page-cta--big h2 { font-size: var(--t-h2); max-width: none; } /* 2026-10-05 gate 1: the closing line sits under the page h1, as on home (75c32e4). Leading and tracking come from type.css */
.page-cta--big p { font-size: var(--t-body); }
.page-cta .cta-note { margin-top: 1.2rem; font-size: var(--t-note); color: var(--cream-2); }
.page-cta .join-pending { margin-top: 1.6rem; font: .8rem var(--mono); color: var(--cream-2); }
.table-note { margin-top: 1.5rem; color: var(--ink-2); max-width: 70ch; }
.small-note { font-size: var(--t-note); color: var(--ink-2); margin-top: 1.2rem; }
.step-cards { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.step-cards > li { padding: var(--pad-card); border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--rule-strong); }
.step-cards > li:nth-child(2) { background: var(--tint-violet); border-color: transparent; }
.step-cards > li:nth-child(3) { background: var(--ink); color: var(--cream); border-color: transparent; }
.step-cards > li > span { font: .8rem var(--mono); color: var(--magenta-text); }
.step-cards h3 { margin-top: 1.2rem; }
.step-cards p { margin-top: .7rem; font-size: var(--t-body-sm); }
.step-cards > li:nth-child(3) p { color: var(--cream-2); }
.checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; }
.checklist li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--rule-strong); }
.checklist li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem; width: .55rem; height: .95rem; border-right: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); transform: rotate(45deg) translateY(-.2rem); }
.pill-row { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-row li { font-size: var(--t-note); padding: .35rem .8rem; border-radius: 999px; background: var(--tint-violet); }
/* split hero: headline and intro left, dark panel right. Film & TV and What is clipping share it with the clipper and how-it-works shape (2026-09-21). */
.page-hero--split .page-hero-grid { grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.page-hero--split .hero-answer { max-width: 36ch; }
@media (max-width: 860px) { .page-hero--split .page-hero-grid { grid-template-columns: 1fr; } }
/* what is clipping: no diagram (removed 2026-09-21). Four parts as four bubbles, same shell as the
   Film & TV interpretations and the homepage cards (2026-09-21, Levi: "little boxes"). */
/* The four bubbles, the funnel and the closing line run the full section width, under both columns:
   in the right-hand column alone they wrapped at about thirty characters. */
.what .why-frame { max-width: 62ch; margin-inline: auto; text-align: center; }
.parts { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: part; }
.parts > div { position: relative; counter-increment: part; padding: var(--pad-card); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); box-shadow: var(--shadow-object); }
/* Number, title and body all take the treatment the rest of the interior already uses: the
   leading-zero mono counter of .process-guide and .release-timeline, the interior h3 (in type.css,
   so the size tracks the site), and the body size of the Film & TV bubbles. */
.parts > div::before { content: counter(part, decimal-leading-zero); position: absolute; top: 1.5rem; right: 1.5rem; font: 500 .8rem var(--mono); font-variation-settings: normal; color: var(--magenta-text); }
.parts dt { padding-right: 2.4rem; }
.parts dd { margin: .5rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: var(--measure); }
.why-frame { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-strong); font-weight: 500; }
/* the funnel (2026-09-21, back from Base44): one release, many edits, many accounts, many feeds */
.funnel { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-panel); overflow: hidden; }
.funnel li { position: relative; padding: 1.1rem 1rem 1.2rem 1.1rem; }
.funnel li + li { border-left: 1px solid var(--rule); }
.funnel li + li::before { content: "→"; position: absolute; left: -.5rem; top: 1rem; padding: 0 .15rem; font-size: var(--t-note); line-height: 1.3; color: var(--magenta-text); background: var(--surface); }
.funnel b { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-sub-sm); line-height: 1.15; }
.funnel span { display: block; margin-top: .3rem; font-size: var(--t-note); line-height: 1.4; color: var(--ink-2); }
.parts + .funnel + .why-frame { border-top: 0; padding-top: 0; }
@media (max-width: 1880px) { .parts { grid-template-columns: 1fr 1fr; } } /* 2026-10-05 gate 7: four columns only once a card holds 45+ characters (was 1100px; 280px cards at 1440 ran 33) */
@media (max-width: 720px) { .parts { grid-template-columns: 1fr; gap: .9rem; } .parts > div { padding: var(--pad-card-sm); } .funnel { grid-template-columns: 1fr 1fr; } .funnel li + li::before { display: none; } .funnel li:nth-child(n+3) { border-top: 1px solid var(--rule); } .funnel li:nth-child(3) { border-left: 0; } }
/* film & tv: three interpretations of one scene, text only (replaced the pill cloud 2026-09-21).
   2026-10-04, Levi: "too right heavy". Prose sits centred under the centred head, the three bubbles
   run the full width beneath it, as the What is clipping parts do. */
.reasons .section-body { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.reasons .section-body > div { max-width: 62ch; margin-inline: auto; }
.interp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.interp li { padding: 1.4rem 1.6rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); box-shadow: var(--shadow-object); }
html .interior .interp h3 { font: 500 var(--t-mono) var(--mono); font-variation-settings: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--magenta-text); }
.interp p { margin-top: .6rem; font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
@media (max-width: 860px) { .interp { grid-template-columns: 1fr; } .interp li { padding: 1.2rem 1.3rem 1.3rem; } }
.reason-cloud { list-style: none; margin: 1.4rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.reason-cloud li { padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--rule-strong); font-size: var(--t-small); background: var(--surface); }
.reason-cloud li:nth-child(3n+1) { background: var(--tint-coral); border-color: transparent; }
.reason-cloud li:nth-child(3n+2) { background: var(--tint-violet); border-color: transparent; }
/* Section frame, 2026-09-22. Levi chose the centred rhythm over a left rail. Every interior section
   opens the same way: the homepage marker pill, the two-line headline, one sub-line, all centred, then
   the content at full width or in one readable column. Replaces the 1fr / 1.25fr grid that kept the
   eyebrow and headline in a left column and left half of most sections empty. */
.section-head { max-width: 56rem; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.section-head .marker { margin-bottom: clamp(1.1rem, 1.8vw, 1.5rem); }
.section-head h2 { max-width: none; }
.section-head .land { margin-inline: auto; } /* the turn is a max-content block, so text-align alone leaves it flush left */
.section-lead { margin: 1.3rem auto 0; max-width: 58ch; font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2); }
.section-head ~ .table-note { text-align: center; margin-inline: auto; }
.section-body > p:first-child { max-width: 62ch; margin-inline: auto; }
.section-body--prose { max-width: 62ch; margin-inline: auto; }
.section-body--panel, .section-head ~ .panel { max-width: 64rem; margin-inline: auto; }
.section-foot { margin-top: 2rem; text-align: center; }
.section-kicker { text-align: center; color: var(--ink-2); }
/* how it works, 2026-09-20 (Levi batch 1, item 4): one left column in the hero, model panel pulled into the first screen. */
body.how-it-works .page-hero { padding-bottom: 2rem; }
body.how-it-works .page-hero-grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
body.how-it-works .hero-intro { max-width: 60ch; }
body.how-it-works .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.7rem; }
body.how-it-works .hero-actions .btn, body.how-it-works .hero-actions .link-plain { margin-top: 0; }
/* phases: full-width tab strip over a two-column panel, 2026-09-18 Base44-modelled rebuild */
.phase-tablist { display: flex; border-bottom: 1px solid var(--rule-strong); margin-top: 1rem; }
.phase-tab { flex: 1; position: relative; display: flex; align-items: baseline; justify-content: center; gap: .6rem; background: none; border: 0; padding: 0 0 1.1rem; cursor: pointer; font-family: var(--sans); }
.phase-tab-num { font: .85rem var(--mono); color: var(--magenta-text); }
.phase-tab-label { font-size: 1rem; font-weight: 600; color: var(--ink-2); transition: color var(--dur-ui) var(--ease-out); }
.phase-tab.is-active .phase-tab-label { color: var(--ink); }
.phase-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); transform: scaleX(0); transition: transform var(--dur-ui) var(--ease-out); }
.phase-tab.is-active::after { transform: scaleX(1); }
.phase-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.phase-panels { margin-top: clamp(2rem,4vw,3rem); }
.phase-panel[hidden] { display: none; }
.phase-panel-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
.phase-intro h3 { font-size: var(--t-sub-lg); font-weight: 500; letter-spacing: -.01em; }
.phase-intro > p { margin-top: 1rem; max-width: 42ch; color: var(--ink-2); }
.phase-chain { margin-top: 1.4rem; font: .8rem var(--mono); color: var(--magenta-text); }
.phase-steps { list-style: none; margin: 0; padding: 0; }
.phase-steps li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.phase-steps li:last-child { border-bottom: 1px solid var(--rule); }
.phase-step-num { font: .8rem var(--mono); color: var(--magenta-text); padding-top: .1rem; }
.phase-steps b { font-weight: 600; grid-column: 2; }
.phase-steps span { font-size: var(--t-small); color: var(--ink-2); grid-column: 2; }
/* phases pinned to scroll, 2026-09-20 (Levi batch 1, item 5). The track is three screens tall; the sticky child holds the heading, tabs and panels. Only html.phase-scroll (set by pages-motion.js when motion is on and the panels fit) pins; otherwise everything stacks. */
html.phase-scroll .phase-track { height: 300vh; }
html.phase-scroll .phase-sticky { position: sticky; top: calc(var(--nav-h) + 1rem); }
html.phase-scroll .phases .section-head { margin-bottom: 1.2rem; }
html.phase-scroll .phase-panels { margin-top: 1.5rem; }
html.phase-scroll .phase-tab.is-active::after { transform: scaleX(var(--phase-progress, 0)); transform-origin: left; transition: none; }
html:not(.phase-scroll) .phase-panel[hidden] { display: block; }
/* 2026-10-04 phone (html.phase-swipe, set by pages-motion.js under 860px): all three panels show in a sideways swipe row, styled by css/phone-fold-pages.css. */
html:not(.phase-scroll):not(.phase-swipe) .phase-panel + .phase-panel { margin-top: clamp(2.5rem,5vw,4rem); padding-top: clamp(2rem,4vw,3rem); border-top: 1px solid var(--rule-strong); }
/* roles: three parallel lists, not a table (2026-09-21: the table wrapped into ragged empty cells on a phone). Amplify's column is tinted. */
.roles-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.roles-cols > div { padding: 1.4rem 1.5rem 1.6rem; border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--rule-strong); }
.roles-cols > .roles-cols--amplify { background: var(--tint-violet); border-color: transparent; }
.roles-cols h3 { font-size: var(--t-sub-sm); padding-bottom: .8rem; border-bottom: 2px solid var(--ink); }
.roles-cols ul { list-style: none; margin: 0; padding: 0; }
.roles-cols li { padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: var(--t-body-sm); }
.roles-cols li:last-child { border-bottom: 0; }
.roles-cols--amplify li { font-weight: 500; }
/* panel: dark-ink status grammar, shared. .status-card is an alias kept for the existing markup. */
.panel, .status-card { border-radius: var(--radius-panel); background: var(--ink); color: var(--cream); padding: var(--pad-card); box-shadow: var(--shadow-float); }
.panel-head, .status-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-on-ink); }
.panel-head span, .status-head span { font: var(--t-mono) var(--mono); color: var(--cream-2); }
.panel-head b, .status-head b { font-size: var(--t-sub-sm); }
.panel dl, .status-card dl { margin: 0; }
.panel dl > div, .status-card dl > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule-on-ink); }
.panel dl > div:last-child, .status-card dl > div:last-child { border-bottom: 0; }
.panel dt, .status-card dt { font: var(--t-mono) var(--mono); color: var(--cream-2); padding-top: .15rem; }
.panel dd, .status-card dd { margin: 0; font-size: var(--t-body-sm); }
.spend { display: block; height: .5rem; border-radius: 999px; background: var(--fill-on-ink); margin-bottom: .5rem; overflow: hidden; }
.spend i { display: block; height: 100%; width: var(--pct); background: var(--grad); border-radius: 999px; transform-origin: left; }
.status-note { margin-top: 1rem; font-size: .8rem; color: var(--ink-2); max-width: 60ch; }
/* film & tv */
/* film & tv, 2026-09-20 (Levi batch 1, item 1): hero is the title alone; the board stacks lead, strip, then the intro copy and button. */
.rights-flow { display: grid; grid-template-columns: 1fr auto 1.15fr; grid-template-rows: 1fr 1fr; gap: 1rem 0; margin-top: 1.5rem; align-items: stretch; }
.flow-in { position: relative; grid-column: 1; padding: 1.2rem 1.6rem 1.2rem 1.4rem; border-radius: var(--radius-panel) 0 0 var(--radius-panel); background: var(--surface); border: 1px solid var(--rule-strong); border-right: 0; }
.flow-in--pre { background: var(--cream-2); }
.flow-in h3 { font-size: var(--t-sub-sm); }
.flow-in ul { margin: .7rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.flow-in li { font-size: var(--t-note); padding: .25rem .6rem; border-radius: 999px; background: var(--tint-violet); }
.flow-in--pre li { background: transparent; border: 1px dashed var(--ink-2); }
.flow-in > span { display: block; margin-top: .9rem; font: var(--t-mono) var(--mono); color: var(--ink-2); }
.flow-gate { grid-column: 2; grid-row: 1 / span 2; width: 9.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.2rem .9rem; background: var(--ink); color: var(--cream); border-radius: var(--radius-clip); z-index: 1; box-shadow: var(--shadow-object); }
.flow-gate b { font-size: var(--t-sub-sm); }
.flow-gate small { font-size: var(--t-note); color: var(--cream-2); margin-top: .5rem; line-height: 1.4; }
.flow-out { grid-column: 3; grid-row: 1 / span 2; padding: 1.4rem 1.5rem 1.4rem 2rem; border-radius: 0 var(--radius-panel) var(--radius-panel) 0; background: var(--tint-violet); border: 1px solid var(--rule-strong); border-left: 0; display: flex; flex-direction: column; justify-content: center; }
.flow-out h3 { font-size: var(--t-sub); }
.flow-out p { margin-top: .6rem; font-size: var(--t-body-sm); color: var(--ink-2); max-width: 32ch; }
.flow-out ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.flow-out li { padding: .55rem 0 .55rem 1.3rem; border-top: 1px solid var(--rule-strong); position: relative; font-size: var(--t-body-sm); }
.flow-out li b { font-weight: 600; }
.flow-out li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--magenta); }
.release-timeline--rail ol { position: relative; gap: 2rem; padding-top: 1.6rem; }
.release-timeline--rail ol::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); }
.release-timeline--rail li { border-top: 0; padding-top: 0; position: relative; }
.release-timeline--rail li::after { content: ""; position: absolute; left: 0; top: -1.6rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--magenta); transform: translateY(-40%); }
.release-timeline--rail li:nth-child(2)::after { background: var(--magenta); }
.release-timeline--rail li::before { margin-bottom: .6rem; }
.release-timeline--rail li p { max-width: 32ch; }
/* music */
/* become a clipper */
.material-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 1.8rem; }
.material-cols > div { padding: 1.4rem; border-radius: var(--radius-panel); border: 1px solid var(--rule-strong); }
.material-cols h3 { font-size: var(--t-sub-sm); }
.material-cols > div > p { margin-top: .6rem; font-size: var(--t-body-sm); color: var(--ink-2); }
.material-cols .reason-cloud { margin: 1rem 0 0; }
.material-cols .reason-cloud li { font-size: var(--t-note); padding: .35rem .7rem; }
.paid dl { margin: 1.4rem 0 0; }
.paid dl > div { padding-block: 1.2rem; border-top: 1px solid var(--rule); }
.paid dt { font-weight: 600; font-size: var(--t-sub); }
.paid dd { margin: .5rem 0 0; color: var(--ink-2); max-width: 54ch; }
/* book */
.booking .book-panel { max-width: 64rem; margin-inline: auto; padding: 1rem; border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--rule-strong); }
.booking .book-fallback { margin-top: .8rem; font-size: var(--t-note); color: var(--ink-2); }
@media (max-width: 860px) {
 .phase-tab { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: .35rem; padding: 0 .25rem .9rem; text-align: center; }
 .phase-tab-label { font-size: var(--t-small); line-height: 1.2; }
 html.phase-scroll .phase-track { height: auto; }
 html.phase-scroll .phase-sticky { position: static; }
 .phase-panel-grid { grid-template-columns: 1fr; gap: 1.5rem; }
 .phase-intro > p { max-width: none; }
 .page-cta--big { grid-template-columns: 1fr; gap: 1.5rem; }
 .step-cards, .material-cols, .roles-cols { grid-template-columns: 1fr; }
 .checklist { grid-template-columns: 1fr; }
 .panel dl > div, .status-card dl > div { grid-template-columns: 1fr; gap: .3rem; }
 .rights-flow { grid-template-columns: 1fr; grid-template-rows: auto; }
 .flow-in, .flow-out { grid-column: 1; grid-row: auto; border: 1px solid var(--rule-strong); border-radius: var(--radius-panel); }
 .flow-gate { grid-column: 1; grid-row: auto; width: auto; }
 .flow-out { padding: 1.4rem; }
 .release-timeline--rail ol::before, .release-timeline--rail li::after { display: none; }
 .release-timeline--rail ol { padding-top: 0; }
 .release-timeline--rail li { border-top: 1px solid var(--rule-strong); padding-top: 1.2rem; }
}
/* 2026-09-18 interior motion. Only under html.pages-motion, which the script sets when reduced motion is off. */
html.pages-motion .m-reveal { opacity: 0; transform: translateY(56px); transition: opacity 700ms var(--ease-out), transform 760ms var(--ease-out); transition-delay: calc(var(--m-i, 0) * 90ms); }
html.pages-motion .m-reveal.is-in { opacity: 1; transform: none; }
html.pages-motion .m-reveal.is-in { transition-delay: calc(var(--m-i, 0) * 90ms); }
/* one set piece per page, drawn once when its section lands */
html.pages-motion .flow-gate { opacity: 0; transform: translateY(-22px) scale(.96); transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out); }
html.pages-motion .flow.is-in .flow-gate { opacity: 1; transform: none; transition-delay: 520ms; }
/* gate 5: phone reveals are 8px, 320ms, no stagger */
@media (max-width: 859px) {
  html.pages-motion .m-reveal { transform: translateY(8px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); transition-delay: 0ms; }
  html.pages-motion .m-reveal.is-in { transform: none; transition-delay: 0ms; }
}
html.pages-motion .flow-out { transition: background-color 500ms var(--ease-out) 900ms; }
html.pages-motion .spend i { transform: scaleX(0); transition: transform 900ms var(--ease-out) 500ms; } /* scale, not width: no layout on every frame */
html.pages-motion .during.is-in .spend i { transform: scaleX(1); }
html.pages-motion .release-timeline--rail ol::before { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out) 200ms; }
html.pages-motion .release-timeline--rail.is-in ol::before { transform: none; }
/* press and hover feedback: instant on the press, soft on hover, never a layout shift */
html.pages-motion .m-press { transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); will-change: transform; }
html.pages-motion .m-press:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
html.pages-motion .m-press.is-pressed { transform: scale(.985); transition-duration: 90ms; box-shadow: none; }
html.pages-motion .btn:active, html.pages-motion .link-plain:active { transform: scale(.97); transition: transform 100ms var(--ease-out); }
/* phase tabs: outgoing panel fades, incoming panel fades and rises, run sequentially by pages-motion.js */
html.pages-motion .phase-panel.is-leaving { opacity: 0; transform: none; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
html.pages-motion .phase-panel.is-entering { opacity: 0; transform: translateY(12px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
html.pages-motion .phase-panel.is-entering.is-in { opacity: 1; transform: none; }
/* reduced motion: the script leaves pages-motion off, so nothing above applies; content is simply present. */
@media (prefers-reduced-motion: reduce) { html.pages-motion .m-reveal { opacity: 1; transform: none; transition: none; } }

/* 2026-09-21, Levi round 2. First screens on the interior pages: the set piece sits beside the headline,
   the hero is short, and nothing important waits below the fold at 1440 by 900. */
.page-hero { padding-bottom: clamp(2rem,4vw,3.5rem); }
.page-path { margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.7rem; }
.hero-actions .btn, .hero-actions .link-plain { margin-top: 0; }
/* how it works: the model panel is the right column of the hero */
body.how-it-works .page-hero-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
body.how-it-works .page-hero { padding-bottom: clamp(3rem,6vw,5rem); border-bottom: 1px solid var(--rule); }
body.how-it-works .hero-intro { max-width: 46ch; }
/* 2026-10-05 gate 2: the 9.5rem override is gone; at 13px "Editors create and distribute" needs the shared 11rem column */
.hero-answer { margin-top: 1.4rem; font-size: clamp(1.15rem,1.6vw,1.5rem); line-height: 1.35; max-width: 30ch; }
@media (max-width: 860px) {
  body.how-it-works .page-hero-grid { grid-template-columns: 1fr; }
  .hero-panel .panel dl > div { grid-template-columns: 1fr; }
}

/* music: five ways to clip a release, surface cards beside the copy (2026-09-21: unnested from the dark board, where they sat black on black). CSS glyphs, no footage. */
.way-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.way { grid-column: span 2; position: relative; padding: var(--pad-card); border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-object); min-height: 10.5rem; display: flex; flex-direction: column; }
.way:nth-child(4), .way:nth-child(5) { grid-column: span 3; }
.way h3 { font-size: var(--t-sub); margin-top: 0; /* titles share one line across a row; bottom-anchoring let a shorter paragraph drop its title */ }
.way p { margin-top: .5rem; font-size: var(--t-body-sm); line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.way-glyph { display: flex; align-items: flex-end; gap: 3px; height: 2.6rem; margin-bottom: 1.2rem; }
.way-glyph b { display: block; border-radius: 3px; background: var(--grad); }
.way--sound .way-glyph b { width: 5px; }
.way--sound .way-glyph b:nth-child(1) { height: 30%; } .way--sound .way-glyph b:nth-child(2) { height: 55%; } .way--sound .way-glyph b:nth-child(3) { height: 100%; } .way--sound .way-glyph b:nth-child(4) { height: 65%; } .way--sound .way-glyph b:nth-child(5) { height: 85%; } .way--sound .way-glyph b:nth-child(6) { height: 40%; } .way--sound .way-glyph b:nth-child(7) { height: 90%; } .way--sound .way-glyph b:nth-child(8) { height: 50%; } .way--sound .way-glyph b:nth-child(9) { height: 25%; }
.way--video .way-glyph { align-items: center; gap: 8px; }
.way--video .way-glyph b:nth-child(1) { width: 3.2rem; height: 1.8rem; border-radius: 4px; background: var(--rule-strong); }
.way--video .way-glyph b:nth-child(2) { width: 1.35rem; height: 2.4rem; border-radius: 4px; }
.way--world .way-glyph { align-items: center; }
.way--world .way-glyph b { width: 1.6rem; height: 1.6rem; border-radius: 4px; background: var(--rule-strong); }
.way--world .way-glyph b:nth-child(2) { background: var(--grad); margin-left: -.5rem; }
.way--world .way-glyph b:nth-child(3) { margin-left: -.5rem; opacity: .7; }
.way--live .way-glyph b { width: 8px; border-radius: 999px 999px 2px 2px; background: var(--rule-strong); }
.way--live .way-glyph b:nth-child(1) { height: 40%; } .way--live .way-glyph b:nth-child(2) { height: 70%; background: var(--grad); } .way--live .way-glyph b:nth-child(3) { height: 100%; background: var(--grad); } .way--live .way-glyph b:nth-child(4) { height: 60%; background: var(--grad); } .way--live .way-glyph b:nth-child(5) { height: 35%; }
.way--catalog .way-glyph { align-items: flex-end; gap: 5px; }
.way--catalog .way-glyph b { width: 1.1rem; border-radius: 3px 3px 0 0; background: var(--rule-strong); }
.way--catalog .way-glyph b:nth-child(1) { height: 55%; opacity: .5; }
.way--catalog .way-glyph b:nth-child(2) { height: 75%; opacity: .75; }
.way--catalog .way-glyph b:nth-child(3) { height: 100%; background: var(--grad); }
body.music .page-hero { padding-top: 1.25rem; padding-bottom: clamp(1.25rem,2.5vw,2rem); }
body.music .page-path { margin-bottom: 1.25rem; }
body.music .page-hero-grid { align-items: center; }
body.music .page-hero-grid { grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,4vw,4.5rem); }
body.music .hero-answer { max-width: 30ch; }
.hero-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.hero-points li { position: relative; padding: .95rem 0 .95rem 1.6rem; border-bottom: 1px solid var(--rule); }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .6rem; height: .6rem; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--magenta) 55%, var(--coral)); }
.hero-points b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem,1.5vw,1.45rem); line-height: 1.2; }
.hero-points span { display: block; margin-top: .25rem; font-size: var(--t-body-sm); line-height: 1.45; color: var(--ink-2); }
body.music .ways { padding-top: clamp(2.5rem,5vw,4.5rem); }
@media (max-width: 860px) { body.music .page-hero-grid { grid-template-columns: 1fr; } }
.page-hero--plain .page-hero-grid { grid-template-columns: 1fr; }
.page-hero--plain .hero-lead { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: clamp(2rem,5vw,6rem); align-items: end; }
.page-hero--plain h1 { grid-row: 1 / span 2; }
.page-hero--plain .hero-answer { margin-top: 0; max-width: 32ch; }
.page-hero--plain { border-bottom: 0; padding-bottom: clamp(2rem,3.5vw,3rem); }
@media (max-width: 860px) { .page-hero--plain .hero-lead { grid-template-columns: 1fr; } .page-hero--plain h1 { grid-row: auto; } .page-hero--plain .hero-answer { margin-top: 1.4rem; } }
.what--lead { padding-top: 0; }
.what--lead .parts { margin-top: 0; }
@media (max-width: 860px) {
  .way-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .way, .way:nth-child(4), .way:nth-child(5) { grid-column: auto; min-height: 0; padding: 1rem; }
}
@media (max-width: 580px) { .way-grid { grid-template-columns: 1fr; } }
/* phones: a max-content turn inside a grid item widens the track past the viewport; let the gradient span the block instead. */
@media (max-width: 860px) { .interior h1 .land, .interior h2 .land { width: auto; } }
/* become a clipper: three join steps as the hero's right column, dark */
.page-hero--clipper .page-hero-grid { grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.page-hero--clipper .hero-answer { max-width: var(--measure); }
.page-hero--clipper .pill-row { margin-top: 1.4rem; }
.join-steps { list-style: none; margin: 0; padding: .4rem 1.6rem; border-radius: var(--radius-panel); background: var(--ink); color: var(--cream); box-shadow: var(--shadow-float); }
.join-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--rule-on-ink); }
.join-steps li:first-child { border-top: 0; }
.join-num { font-size: .8rem; color: var(--magenta-on-ink); padding-top: .35rem; }
.join-steps h2 { font-size: var(--t-sub-lg); line-height: 1.15; }
.join-steps p { margin-top: .4rem; font-size: var(--t-body-sm); line-height: 1.45; color: var(--cream-2); max-width: 36ch; }
@media (max-width: 860px) { .page-hero--clipper .page-hero-grid { grid-template-columns: 1fr; } .join-steps { padding-inline: 1.2rem; } }

/* 2026-09-23, Levi review round 3. Fewer words, more pictures, built from pieces the site already has. */
/* what is clipping, why: the Film & TV rail shows how the feed treats one clip, then three step cards say why many clips beat one */
.feed-rail { max-width: 64rem; margin-inline: auto; }
.feed-rail ol { margin-top: 0; }
.feed-rail h3 { font-size: var(--t-sub); }
.feed-rail p { margin-top: .5rem; color: var(--ink-2); }
.why-cards { max-width: 64rem; margin-inline: auto; margin-top: clamp(2.5rem,4vw,3.5rem); }
.why-cards h3 { font-size: var(--t-sub-lg); font-weight: 500; font-family: var(--display); line-height: 1.15; }
.why-cards .reason-cloud { margin: 1rem 0 0; }
.why-cards .reason-cloud li { font-size: var(--t-note); padding: .35rem .75rem; }
.why-foot { max-width: 64rem; margin-inline: auto; margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .6rem 1.4rem; }
.why-foot b { font-weight: 500; }
.why-foot .link-plain { margin-top: 0; }
/* what is clipping, rights: the brief as an object, with what it means for the client beside it */
.rights-brief { max-width: 64rem; margin-inline: auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.rights-brief .panel dl > div { grid-template-columns: 11.5rem 1fr; } /* gate 2: "How it can be used" is 175px at 13px */
.rights-checks { grid-template-columns: 1fr; margin: 0; }
.rights-checks li { font-size: var(--t-sub); font-weight: 500; line-height: 1.3; padding-block: 1rem; }
.rights-checks li::before { top: 1.3rem; }
/* compare, the number: one measured thing on the left, the four it misses on the right */
.number-split { max-width: 64rem; margin-inline: auto; margin-top: 0; }
.number-split > .number-shows { background: var(--surface); border: 1px solid var(--rule-strong); display: flex; flex-direction: column; }
.number-split > .number-misses { background: var(--tint-violet); }
.number-big { margin-top: auto; padding-top: 2rem; font: 500 clamp(2rem,3.4vw,3.2rem)/1.05 var(--display); letter-spacing: -.02em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.number-shows p:last-child { margin-top: .6rem; color: var(--ink-2); }
.number-split .checklist { grid-template-columns: 1fr; margin: 1rem 0 0; padding: 0; }
.number-split .checklist li { max-width: none; padding-block: .75rem; }
.number-split + .section-foot { max-width: 64rem; margin-inline: auto; margin-top: 2rem; }
.number-split + .section-foot .link-plain { margin: 0 0 0 1rem; }
/* compare, the table: Amplify moves to the first column and turns dark; each approach gets a name and a one-line gloss */
.approaches-table { border-collapse: separate; border-spacing: 0; }
.approaches-table thead th:last-child, .approaches-table td:last-child { background: none; }
.approaches-table thead th { vertical-align: bottom; padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); }
.approaches-table .col-name { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-sub-lg); line-height: 1.1; letter-spacing: -.01em; }
.approaches-table .col-sub { display: block; margin-top: .35rem; font-size: var(--t-note); font-weight: 400; color: var(--ink-2); }
.approaches-table .col-other .col-name::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem; border-radius: 50%; vertical-align: .18em; }
.approaches-table .col-house .col-name::before { background: var(--coral); }
.approaches-table .col-free .col-name::before { background: var(--violet); }
.approaches-table .col-paid .col-name::before { background: var(--ink-2); }
.approaches-table .col-el { font-size: var(--t-note); font-weight: 500; color: var(--ink-2); }
.approaches-table tbody th { font-size: var(--t-body-sm); }
.approaches-table .col-amp { background: var(--ink); color: var(--cream); border-bottom-color: var(--rule-on-ink); padding-inline: 1.3rem; }
.approaches-table thead .col-amp { background: var(--grad) top / 100% 6px no-repeat, var(--ink); border-radius: var(--radius-panel) var(--radius-panel) 0 0; border-bottom: 1px solid var(--rule-on-ink); padding-top: 1.6rem; }
.approaches-table thead .col-amp .col-sub { color: var(--cream-2); }
.approaches-table tbody .col-amp { font-weight: 500; }
.approaches-table tbody .col-amp::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .55rem; border-radius: 50%; background: var(--grad); vertical-align: .12em; }
.approaches-table tbody tr:last-child .col-amp { border-radius: 0 0 var(--radius-panel) var(--radius-panel); border-bottom: 0; }
.approaches-table tbody tr:nth-child(even) td:not(.col-amp) { background: var(--surface); }
.approaches-table :focus-visible { outline-color: var(--ink); }
.approaches-table .col-amp :focus-visible { outline-color: var(--cream); }
@media (max-width: 860px) {
  .rights-brief { grid-template-columns: 1fr; }
  .rights-brief .panel dl > div { grid-template-columns: 1fr; }
  .why-cards { margin-top: 2rem; }
  .number-split { grid-template-columns: 1fr; } /* two 170px columns forced the prose to nine lines */
  .number-split + .section-foot .link-plain { display: block; margin: .8rem 0 0; }
}
.why-cards > li:nth-child(3) > span { color: var(--cream-2); }
.number-big { font-variant-numeric: lining-nums; }
.number-split .checklist li::before { content: "×"; top: .6rem; left: 0; width: auto; height: auto; border: 0; transform: none; font-size: 1.3rem; line-height: 1; color: var(--magenta-text); }
/* 2026-09-23, Levi: "these fonts feel off". Three serif sizes and a roman gradient competed in two boxes. Now: one small label per box (the step-card label), one serif statement, sans for the list. */
html .interior .number-split h3 { font: 500 var(--t-note)/1.3 var(--sans); color: var(--magenta-text); letter-spacing: 0; }
.number-split > .number-shows { justify-content: center; }
.number-big { margin-top: 1rem; padding-top: 0; background: none; color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box; font-size: clamp(2rem,3vw,2.8rem); }
.number-shows p:last-child { margin-top: .8rem; font-size: var(--t-body); }
.number-split .checklist { margin-top: .6rem; }
.number-split .checklist li { font-size: var(--t-body); font-weight: 500; }
.number-split .checklist li::before { top: .95rem; font-size: 1.05rem; }
/* what is clipping, why card 2 (Levi 2026-09-23): the review step, as the homepage card 03 split. On-brief clips paid, off-brief not. */
.verdict { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.verdict li { padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface); }
.verdict b { display: block; font-size: var(--t-body-sm); font-weight: 600; }
.verdict span { display: block; margin-top: .15rem; font-size: var(--t-note); color: var(--ink-2); }
.verdict--on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--cream); }
.verdict--on b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--grad); vertical-align: .1em; }
.verdict--on span { color: var(--cream-2); }
.verdict--off b { text-decoration: line-through; text-decoration-color: var(--magenta); }

/* Gate 9 (2026-10-04). Under 860px the comparison table folds into one card per approach. Same markup: the table is a grid, rows and sections are display:contents, and each cell is ordered by its column then its row. Each cell repeats its row label from data-label. ARIA roles in the markup keep the table semantics that display changes remove. Row headers and the corner header stay in the accessibility tree, visually hidden. The scroll hint is dropped because nothing scrolls. */
@media (max-width: 860px) {
 .table-wrap { overflow: visible; background: none; }
 .table-wrap .approaches-table { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; width: 100%; table-layout: auto; }
 .table-wrap .approaches-table thead, .table-wrap .approaches-table tbody, .table-wrap .approaches-table tr { display: contents; }
 .table-wrap .approaches-table thead tr:first-child th:nth-child(1), .table-wrap .approaches-table tbody th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
 .table-wrap .approaches-table thead th:nth-child(2) { --c: 0; }
 .table-wrap .approaches-table thead th:nth-child(3) { --c: 1; }
 .table-wrap .approaches-table thead th:nth-child(4) { --c: 2; }
 .table-wrap .approaches-table thead th:nth-child(5) { --c: 3; }
 .table-wrap .approaches-table td:nth-child(2) { --c: 0; }
 .table-wrap .approaches-table td:nth-child(3) { --c: 1; }
 .table-wrap .approaches-table td:nth-child(4) { --c: 2; }
 .table-wrap .approaches-table td:nth-child(5) { --c: 3; }
 .table-wrap .approaches-table tbody tr:nth-child(1) { --r: 1; }
 .table-wrap .approaches-table tbody tr:nth-child(2) { --r: 2; }
 .table-wrap .approaches-table tbody tr:nth-child(3) { --r: 3; }
 .table-wrap .approaches-table tbody tr:nth-child(4) { --r: 4; }
 .table-wrap .approaches-table tbody tr:nth-child(5) { --r: 5; }
 .table-wrap .approaches-table tbody tr:nth-child(6) { --r: 6; }
 .table-wrap .approaches-table tbody tr:nth-child(7) { --r: 7; }
 .table-wrap .approaches-table tbody tr:nth-child(8) { --r: 8; }
 .table-wrap .approaches-table tbody tr:nth-child(9) { --r: 9; }
 .table-wrap .approaches-table thead th:nth-child(n+2) { display: block; order: calc(var(--c) * 20); margin-top: 1.5rem; padding: 1.4rem 1.25rem 1rem; width: auto; background: var(--surface); border: 1px solid var(--rule-strong); border-bottom: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
 .table-wrap .approaches-table thead th.col-amp { margin-top: 0; background: var(--grad) top / 100% 6px no-repeat, var(--ink); border-color: var(--ink); }
 .table-wrap .approaches-table tbody td { display: block; order: calc(var(--c) * 20 + var(--r)); width: auto; padding: .85rem 1.25rem; background: var(--surface); border: 1px solid var(--rule-strong); border-width: 0 1px; border-bottom: 1px solid var(--rule); }
 .table-wrap .approaches-table tbody td.col-amp { background: var(--ink); border-color: var(--ink); border-bottom-color: var(--rule-on-ink); padding-inline: 1.25rem; }
 .table-wrap .approaches-table tbody td.col-amp::before { display: block; width: auto; height: auto; margin: 0 0 .2rem; border-radius: 0; background: none; vertical-align: baseline; color: var(--cream-2); }
 .table-wrap .approaches-table tbody td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: var(--t-note); font-weight: 500; color: var(--ink-2); }
 .table-wrap .approaches-table tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
 .table-wrap .approaches-table tbody tr:last-child td.col-amp { border-bottom-color: var(--ink); }
}