/* Hallmark · shape: Index (/), Workbench (app pages) · genre: modern-minimal · theme: Ultraviolet (deal 1/3, seed portfolio-apps-built-one-8585·f062409e·2026-11-08·r0) · redesign: full · job: try
 * hero: Index (/), Stage (/updraft, /tagged, /kitted, /airflow; captures bleed off the right edge), Corridor (/timberline) · nav: wordmark and one action · footer: a mast, the wordmark over the links · imagery: screenshots 9 (capture.mjs and puppeteer, sample data), Updraft built sample · signature: the app index set as one lowercase table, and Updraft's pill drawn as live lanes · ultraviolet: lavender by default, night under the device dark setting, one record band
 * axes: light/geometric-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, a portfolio has no argument of its own; led with the reason the apps exist (paid tools got in the way) and kept every page to what the app really does */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 partial · gap: product captures for every section of Tagged and Updraft (only hero and one pair so far) */
/* Hallmark · waive 44c · Stage visual bleeding off the outer edge, 64px from the text · layout.md § 6 lets a Stage visual bleed; the app captures read larger that way */
/* Hallmark · waive 71 · .rows h3 sits beside its text in a two-column row, so the gap below it is the row padding, not a heading gap · the rows read as a table, label left and text right */
/* Hallmark · waive 47b · .notch-state draws Updraft's notch in its three states · drawn from the approved design boards (Hover Notch, Dictating wave); the real notch is a 7px line too small to screenshot well */
/* Hallmark · waive 83 · .show__slide stacks each app's screens in one 16:10 frame and only one is visible at a time · the product screens are the point of the page; the tab slideshow keeps them to a single frame */
/* Hallmark · dropped the screenshot placeholder grids on every app page · 81 names empty slots; each page keeps one product slot that takes the real capture */
/* Hallmark · reworded headings that sat under eyebrows: the plain label is the heading, the old line is the lead · 54 names the eyebrow */
/* Hallmark · reworded "Tools I built because the ones I paid for kept getting in the way." to "tools i built instead of paying" · 58 names a fourteen-word head */
/* Hallmark · waive 81 · the Tagged help center's highlight cards are placeholder slots until real screenshots arrive · the owner asked for placeholders with a caption; each fills in when its image is saved */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- type ---------- */
h1, h2, h3 { text-transform: lowercase; line-height: 1; }
h3 { line-height: 1.15; }
.lead { color: var(--color-ink-2); }
.body-copy { color: var(--color-ink-2); max-width: 60ch; }
.muted { color: var(--color-muted); }
.label { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); text-transform: lowercase; }

/* ---------- skip link ---------- */
.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); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-sm)/1 var(--font-display); text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }

/* ---------- controls, all eight states ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-micro) linear; } }

.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; color: var(--color-ink-2); white-space: nowrap; }
.pill--on { background: var(--color-accent-soft); box-shadow: none; color: var(--color-ink); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.link { color: var(--color-ink); text-decoration-color: var(--color-rule-2); transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
.link:active { color: var(--color-ink-2); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); transition: transform var(--dur-long) var(--ease-out); }
.nav.is-stuck { box-shadow: 0 1px 0 var(--color-rule); }
.nav.is-away { transform: translateY(-100%); transition-timing-function: var(--ease-in); transition-duration: var(--dur-short); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 80px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: lowercase; color: var(--color-ink); text-decoration: none; }
.wordmark:hover { color: var(--color-ink-2); }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.nav__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:not(.btn):hover { color: var(--color-ink); }
.nav__links a[aria-current="page"] { color: var(--color-ink); }
@media (max-width: 40rem) { .nav__in { flex-wrap: wrap; gap: 0; padding-block: var(--space-sm) 0; } .nav__in > nav { width: 100%; overflow-x: auto; scrollbar-width: none; } .nav__links { flex-wrap: nowrap; margin-left: calc(-1 * var(--space-sm)); } .nav__links li { flex: none; } .nav__links .btn { display: none; } }

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap-s); }
.section--tight { padding-top: 0; }
.section--head { padding-bottom: var(--space-2xl); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-2xl); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { justify-self: start; }
@media (max-width: 60rem) { .head { grid-template-columns: minmax(0, 1fr); } }

.band { background: var(--color-paper-2); color: var(--color-ink); }
.band--violet { background: var(--color-band); color: var(--color-band-ink); }
.band--violet .lead { color: var(--color-band-ink); }
.band--violet .btn--primary { background: var(--color-band-fill); color: var(--color-band); }
.band--violet .btn--primary:hover { background: var(--color-band-ink); }
.band--violet .btn:focus-visible { outline-color: var(--color-band-fill); }
.band--violet .pill { color: var(--color-band-ink); box-shadow: inset 0 0 0 1.5px var(--color-band-rule); }

/* ---------- home: index hero ---------- */
.index-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; padding-block: var(--space-xl) var(--space-2xl); }
.index-hero__text { display: grid; gap: var(--space-lg); align-content: start; padding-top: var(--space-md); }
.index-hero h1 { font-size: var(--text-display-s); max-width: 12ch; }
@media (max-width: 60rem) { .index-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

.apps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.apps li { border-bottom: 1px solid var(--color-rule); }
.app-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-sm); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.app-row:hover { background: var(--color-paper-2); }
.app-row:active { background: var(--color-paper-3); }
.app-row__name { font: 500 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: lowercase; }
.app-row__line { grid-column: 1; color: var(--color-ink-2); max-width: 52ch; }
.app-row__meta { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: var(--space-xs); text-align: right; }
@media (max-width: 40rem) { .app-row { grid-template-columns: minmax(0, 1fr); } .app-row__meta { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; } }

/* ---------- the pill sample (Updraft, built) ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
@media (max-width: 60rem) { .demo { grid-template-columns: minmax(0, 1fr); } }
.steps { margin: var(--space-lg) 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--color-rule); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); counter-increment: step; }
.steps li::before { content: counter(step); font: 300 var(--text-xl)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps b { display: block; font: 500 var(--text-title)/1.1 var(--font-display); text-transform: lowercase; color: var(--color-ink); margin-bottom: var(--space-2xs); }

.sample { display: grid; gap: var(--space-lg); min-height: 520px; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); align-content: center; }
.sample__doc { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.sample__doc p { color: var(--color-ink-2); }
.sample__doc .typed { color: var(--color-ink); min-height: 4.5em; white-space: pre-line; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: var(--space-3xs); vertical-align: text-bottom; background: var(--color-accent); }
.lanes { display: grid; gap: var(--space-sm); }
.lane { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.lane__wave { display: flex; align-items: center; gap: var(--space-2xs); height: 56px; }
.lane__wave i { flex: 1; min-width: 2px; border-radius: var(--space-3xs); background: var(--color-accent-soft); }
.lane__wave i.on { background: var(--color-accent); }
.pillbar { justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 156px; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-notch); box-shadow: inset 0 0 0 1px var(--color-notch-edge), 0 6px 18px color-mix(in oklab, var(--color-notch) 35%, transparent); }
.pillbar__wave { display: flex; align-items: center; gap: var(--space-3xs); height: 22px; }
.pillbar__wave i { width: 3px; border-radius: var(--radius-pill); background: var(--color-notch-ink); }
.notch-live { position: relative; justify-self: center; display: grid; place-items: center; width: 156px; height: 40px; }
.nl-shape { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-notch); box-shadow: inset 0 0 0 1px var(--color-notch-edge), 0 6px 18px color-mix(in oklab, var(--color-notch) 35%, transparent); transition: transform var(--dur-long) var(--ease-out); }
.nl-part { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); color: var(--color-notch-ink); }
.nl-icons { color: var(--color-notch-dim); }
.nl-icons svg { width: 16px; height: 16px; }
.nl-wave { gap: var(--space-3xs); }
.nl-wave i { width: 3px; border-radius: var(--radius-pill); background: var(--color-notch-ink); transform-origin: center; }
.nl-done { font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; }
.notch-live[data-state="idle"] .nl-shape { transform: scale(0.38, 0.18); box-shadow: inset 0 0 0 4px var(--color-notch-dim); }
.notch-live[data-state="hover"] .nl-shape { transform: scale(0.86, 1); }
.notch-live[data-state="done"] .nl-shape { transform: scale(0.62, 1); }
.notch-live[data-state="hover"] .nl-icons, .notch-live[data-state="talk"] .nl-wave, .notch-live[data-state="done"] .nl-done, .notch-live[data-state="meet"] .nl-meet { opacity: 1; visibility: visible; }
.notch-live[data-state="meet"] .nl-shape { transform: scale(0.72, 1); }
.nl-meet, .notch--meet { gap: var(--space-xs); font: 500 var(--text-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-notch-ink); }
.notch--meet { height: 30px; padding: 0 var(--space-sm); }
.nl-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--color-notch-rec); }
.is-live .notch-live[data-state="meet"] .nl-rec { animation: nl-rec 1.2s var(--ease-in-out) infinite alternate; }
@keyframes nl-rec { from { opacity: 1; } to { opacity: 0.35; } }
.is-live .notch-live[data-state="talk"] .nl-wave i { animation: nl-bar 760ms var(--ease-in-out) var(--d, 0ms) infinite alternate; }
@keyframes nl-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1.15); } }
.notches-wrap { position: relative; }
.notch-glider { position: absolute; top: 0; left: 0; z-index: 1; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1.5px var(--color-accent), 0 0 18px color-mix(in oklab, var(--color-accent) 35%, transparent); pointer-events: none; opacity: 0; transition: transform var(--dur-long) var(--ease-out); }
.is-live .notch-glider { opacity: 1; }
.notch-state .label { transition: opacity var(--dur-short) var(--ease-out); }
.is-live .notch-state:not(.is-on) .label { opacity: 0.6; }
.notches { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.notch-state { display: grid; justify-items: center; align-content: center; gap: var(--space-sm); min-height: 104px; padding: var(--space-md) var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper); }
.notch-state .label { text-align: center; }
.notch { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-notch); box-shadow: inset 0 0 0 1px var(--color-notch-edge); }
.notch--idle { width: 56px; height: 7px; }
.notch--hover { gap: var(--space-xs); height: 34px; padding: 0 var(--space-xs); color: var(--color-notch-dim); }
.notch--hover svg { width: 16px; height: 16px; }
.notch--talk { height: 30px; padding: 0 var(--space-sm); }
.notch--talk .pillbar__wave { height: 16px; }

/* ---------- tables of uses ---------- */
.uses { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.uses li { display: grid; gap: var(--space-2xs); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.uses h3 { font-size: var(--text-title); }
.uses p { color: var(--color-ink-2); max-width: 52ch; }
.uses--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 60rem) { .uses, .uses--three { grid-template-columns: minmax(0, 1fr); } }

.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xs) var(--space-2xl); align-items: baseline; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.rows h3 { font-size: var(--text-title); }
.rows p { color: var(--color-ink-2); }
@media (max-width: 40rem) { .rows li { grid-template-columns: minmax(0, 1fr); } }

.kbd { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- app page hero (Stage) ---------- */
.stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100svh - 80px); padding-block: var(--space-xl) var(--space-2xl); }
.stage__text { display: grid; gap: var(--space-lg); align-content: center; }
.stage h1 { font-size: var(--text-display); max-width: 10ch; }
.stage .slot { min-height: 600px; }
@media (max-width: 60rem) { .stage { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-xl); } .stage .slot { min-height: 0; } }

.corridor { display: grid; justify-items: start; align-content: center; gap: var(--space-2xl) var(--space-xl); min-height: calc(100svh - 80px); padding-block: var(--space-2xl); }
.corridor h1 { font-size: clamp(3.5rem, 13vw + 1rem, 14rem); max-width: 11ch; }
.corridor .lead { max-width: 44ch; }
@media (max-width: 60rem) { .corridor { min-height: 0; padding-block: var(--space-3xl); } }

/* ---------- two text columns ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-3xl); }
.pair > div { display: grid; gap: var(--space-md); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.pair h2 { font-size: var(--text-2xl); }
.pair .lead { color: var(--color-ink); }
@media (max-width: 60rem) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- built list samples ---------- */
.list-sample { display: grid; gap: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.list-sample__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); font: 500 var(--text-xl)/1 var(--font-display); text-transform: lowercase; color: var(--color-ink); }
.ls-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; min-height: 48px; border-top: 1px solid var(--color-rule); color: var(--color-ink); }
.ls-row span:last-child { color: var(--color-muted); font-size: var(--text-sm); }
.box { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.box--done { background: var(--color-accent); box-shadow: none; }
.ring { width: 20px; height: 20px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.ls-row--done { color: var(--color-muted); }
.ls-group { padding: var(--space-md) 0 var(--space-xs); font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; color: var(--color-muted); }

.calc { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.calc__row span:first-child { color: var(--color-ink-2); }
.calc__fig { font: 300 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.calc__fig small { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); margin-left: var(--space-2xs); }
.calc__fig--on { color: var(--color-accent); }

/* ---------- close and footer ---------- */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: center; padding-block: var(--space-3xl); }
.close h2 { font-size: var(--text-section); }
.close .actions { justify-content: flex-end; }
@media (max-width: 60rem) { .close { grid-template-columns: minmax(0, 1fr); } .close .actions { justify-content: flex-start; } }

.footer { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); }
.footer__mast { font: 500 clamp(3rem, 8vw, 7rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); text-transform: lowercase; color: var(--color-ink); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; color: var(--color-ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer p { color: var(--color-muted); align-self: center; }

/* ---------- slots ---------- */
.slot { border-radius: var(--radius-card); }
.slot > .sample, .slot > .list-sample, .slot > .calc { height: 100%; }

/* ---------- additions ---------- */
.uses--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) { .uses--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .uses--four { grid-template-columns: minmax(0, 1fr); } }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.space-top { margin-top: var(--space-md); }
.space-top-xl { margin-top: var(--space-3xl); }
.space-bottom { margin-bottom: var(--space-xl); }
@media (max-width: 40rem) { .sample { padding: var(--space-md); min-height: 0; } .lane { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }

/* ---------- product screenshots ---------- */
.shot { margin: 0; border-radius: var(--radius-card); aspect-ratio: 16 / 10; max-width: 100%; }
.shot--tall { aspect-ratio: 1696 / 1760; }
.shot--phone { aspect-ratio: 390 / 844; }
.shot--wide { aspect-ratio: 16 / 9; }
[data-kind="product"]:has(> img) { background: var(--color-paper-2); }
[data-kind="product"] > img { filter: none; mix-blend-mode: normal; object-position: top left; }
[data-kind="product"]:has(> img)::before { content: none; }
.stage .shot { min-height: 0; align-self: center; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.shots--phone { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
.shots--one { grid-template-columns: minmax(0, 1fr); }
.shots figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin: 0; min-width: 0; }
.shots figcaption { color: var(--color-ink-2); }
@media (max-width: 60rem) { .shots, .shots--phone { grid-template-columns: minmax(0, 1fr); } .shots--phone .shot--phone { max-width: 320px; } }
.stage:has(> .shot) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.stage > .shot { aspect-ratio: 4 / 3; }
@media (max-width: 60rem) { .stage:has(> .shot) { grid-template-columns: minmax(0, 1fr); } .stage > .shot { aspect-ratio: 16 / 10; } }

/* ---------- finish review fixes ---------- */
.band { background: transparent; border-top: 1px solid var(--color-rule); }
.shot, [data-kind="product"]:has(> img) { outline: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent); outline-offset: -1px; box-shadow: var(--shadow-shot); }
.stage > .shot { aspect-ratio: auto; }
.stage > .shot > img { position: static; height: auto; }
.stage .sample { min-height: 0; }
.footer__mast { color: var(--color-accent); }
@media (min-width: 60.01rem) { .index-hero__text { position: sticky; top: var(--space-3xl); } }
@media (min-width: 60.01rem) {
  .stage > .shot { max-width: none; margin-right: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter))); border-radius: var(--radius-card) 0 0 var(--radius-card); }
}
.stage .sample { gap: var(--space-xl); padding-block: var(--space-2xl); }
.stage .lane__wave { height: 96px; }

.band--violet .btn:not(.btn--primary) { color: var(--color-band-ink); box-shadow: inset 0 0 0 1.5px var(--color-band-ink); }
.band--violet .btn:not(.btn--primary):hover { background: var(--color-band-rule); }

/* ---------- home: peek window and the rail ---------- */
.peek { position: relative; display: grid; gap: var(--space-sm); margin: var(--space-xl) 0 0; }
.peek__panel { grid-area: 1 / 1; color: var(--color-ink); aspect-ratio: 16 / 10; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); box-shadow: var(--shadow-shot); outline: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent); outline-offset: -1px; }
.peek__panel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.peek__built { display: grid; align-content: center; gap: var(--space-md); padding: var(--space-lg); }
.peek__type { justify-items: start; background: var(--color-band); color: var(--color-band-ink); outline: 0; }
.peek__type .label { color: var(--color-band-ink); }
.peek__word { font: 300 clamp(2.5rem, 4vw, 3.5rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); text-transform: lowercase; }
.peek__cap { grid-row: 2; }
.peek.is-live .peek__panel { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.peek.is-live .peek__panel.is-on { opacity: 1; transform: none; }
.peek:not(.is-live) .peek__panel:not(:first-child) { display: none; }
.app-row[data-peek] { position: relative; }
@media (max-width: 60rem) { .peek { display: none; } }
@media (prefers-reduced-motion: reduce) { .peek.is-live .peek__panel { transform: none; transition: opacity var(--dur-micro) linear; } }

.section--rail { overflow-x: clip; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(20rem, 44%); gap: var(--gap-columns); margin: 0; padding: var(--space-2xs) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-lg); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); overscroll-behavior-x: contain; scrollbar-color: var(--color-rule-2) transparent; }
.rail > li { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.rail__item { display: grid; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.rail__item .shot { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-paper-2); outline: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent); outline-offset: -1px; }
.rail__item .shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.rail__item:hover .shot { outline: 2px solid var(--color-accent); }
.rail__item:active .shot { outline-color: var(--color-accent-deep); }
.rail__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
.rail__cap { color: var(--color-ink-2); }
.rail__cap b { display: block; font: 500 var(--text-title)/1.1 var(--font-display); text-transform: lowercase; color: var(--color-ink); margin-bottom: var(--space-2xs); }
@media (max-width: 40rem) { .rail { grid-auto-columns: 82%; } }

/* ---------- figures and support ---------- */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.figures li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--space-xs); padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-left: 1px solid var(--color-rule); padding-left: var(--space-lg); }
.figures li:first-child { border-left: 0; padding-left: 0; }
.figures .figure { font: 300 clamp(3.5rem, 6vw, 6rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.figures .figure--on { color: var(--color-accent); }
.figures__unit { font: 500 var(--text-lg)/1 var(--font-display); color: var(--color-muted); text-transform: lowercase; }
.figures p { grid-column: 1 / -1; margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 28ch; }
@media (max-width: 60rem) { .figures { grid-template-columns: minmax(0, 1fr); } .figures li { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-rule); } .figures li:first-child { border-top: 0; } }
.footer__support { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.footer__support .lead { max-width: 52ch; color: var(--color-ink-2); }

/* ---------- home: the apps at work, one app at a time ---------- */
.switch__tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); margin-bottom: var(--space-xl); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.switch__tabs [role=tab] { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.switch__tabs [role=tab]:hover { color: var(--color-ink); background: var(--color-paper-2); }
.switch__tabs [role=tab]:active { background: var(--color-paper-3); }
.switch__tabs [role=tab][aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.switch__panel { display: grid; gap: var(--space-lg); }
html:not(.js) .switch__panel + .switch__panel { margin-top: var(--space-2xl); }
html:not(.js) .switch__tabs { display: none; }
.switch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.pair-shot { display: grid; gap: var(--space-sm); margin: 0; }
.pair-shot .shot { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-paper-2); }
.pair-shot .shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pair-shot figcaption { color: var(--color-ink-2); }
.show { display: grid; gap: var(--space-sm); }
.show__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-shot); }
.show__slide { position: absolute; inset: 0; margin: 0; transition: opacity 1100ms var(--ease-in-out); }
.js .show__slide { opacity: 0; }
html:not(.js) .show__slide:not(.is-on) { display: none; }
.js .show__slide.is-on { opacity: 1; z-index: 1; }
.show__slide > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transform: scale(1); transition: transform 7000ms linear; }
.show__slide.is-on > img { transform: scale(1.035); }
.show__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.show__cap { color: var(--color-ink-2); min-height: 1.5em; }
.show__dots { display: flex; gap: var(--space-3xs); flex: none; }
.show__dot { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.show__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-rule-2); transition: transform var(--dur-short) var(--ease-out); }
.show__dot[aria-current]::before { background: var(--color-accent); transform: scale(1.3); }
.show__dot:hover::before { background: var(--color-muted); }
.show__dot[aria-current]:hover::before { background: var(--color-accent); }
@media (max-width: 40rem) { .show__bar { flex-direction: column; align-items: flex-start; } .show__dot { width: 36px; height: 44px; } }
.switch__more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; }
@media (max-width: 40rem) { .switch__grid { grid-template-columns: minmax(0, 1fr); } .switch__tabs { display: flex; } .switch__tabs [role=tab] { flex: 1 1 auto; padding: 0 var(--space-sm); } }
@media (max-width: 40rem) { .notches { grid-template-columns: minmax(0, 1fr); } .notch-state { grid-template-columns: 120px minmax(0, 1fr); justify-items: start; min-height: 0; } .notch-state .notch { justify-self: center; } .notch-state .label { text-align: left; } }

@media (prefers-reduced-motion: reduce) { .nl-shape, .nl-part { transition: none; } .nl-wave i, .nl-rec { animation: none !important; } .notch-glider { transition: none; } }
@media (max-width: 40rem) { .sample__doc .typed { min-height: 7.5em; } }
@media (prefers-reduced-motion: reduce) { .show__slide { transition: none; } .show__slide > img, .show__slide.is-on > img { transform: none; transition: none; } }
.gate { max-width: min(30rem, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 30px 80px color-mix(in oklab, var(--color-ink) 30%, transparent); }
.gate::backdrop { background: color-mix(in oklab, var(--color-paper-3) 70%, transparent); backdrop-filter: blur(6px); }
.gate__form { display: grid; gap: var(--space-sm); padding: var(--space-xl); }
.gate__lead { color: var(--color-ink-2); }
.gate__label { font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; margin-top: var(--space-xs); }
.gate__input { min-height: 48px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); font: inherit; box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.gate__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gate__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gate__err { color: var(--color-error); }
.gate .actions { margin-top: var(--space-xs); }
.gate h2 { font-size: var(--text-xl); }

/* ---------- motion: page to page, settle on load, reveal on scroll ---------- */
/* Every piece below shows its finished state when the device asks for reduced motion, and with scripting off. */
.nav__links a:not(.btn) { position: relative; }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-xs); height: 2px; border-radius: var(--space-3xs); background: var(--color-accent); view-transition-name: nav-current; }
.nav { view-transition-name: site-nav; }
.app-row__name, .stage h1, .corridor h1 { justify-self: start; }
.app-row[data-peek="updraft"] .app-row__name, h1[data-app="updraft"] { view-transition-name: app-updraft; }
.app-row[data-peek="drift"] .app-row__name, h1[data-app="drift"] { view-transition-name: app-drift; }
.app-row[data-peek="tagged"] .app-row__name, h1[data-app="tagged"] { view-transition-name: app-tagged; }
.app-row[data-peek="kitted"] .app-row__name, h1[data-app="kitted"] { view-transition-name: app-kitted; }
.app-row[data-peek="airflow"] .app-row__name, h1[data-app="airflow"] { view-transition-name: app-airflow; }
.app-row[data-peek="timberline"] .app-row__name, h1[data-app="timberline"] { view-transition-name: app-timberline; }
@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-arrive { from { opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle-side { from { opacity: 0; transform: translateX(28px); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* one page hands over to the next: the nav holds still, the app's name travels from the list to its own page */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-leave var(--dur-short) var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-arrive var(--dur-long) var(--ease-out) both; }
  ::view-transition-group(*) { animation-duration: var(--dur-long); animation-timing-function: var(--ease-out); }
  /* the first screen settles once: the headline holds, the rest arrives in order */
  :is(.index-hero__text, .stage__text, .corridor, .section--head .head) > :not(h1) { animation: settle var(--dur-reveal) var(--ease-out) calc(var(--n, 1) * var(--stagger)) both; }
  :is(.index-hero__text, .stage__text, .corridor) > :nth-child(3) { --n: 2; }
  :is(.index-hero__text, .stage__text, .corridor) > :nth-child(4) { --n: 3; }
  :is(.index-hero__text, .stage__text, .corridor) > :nth-child(5) { --n: 4; }
  :is(.index-hero__text, .stage__text, .corridor) > :nth-child(6) { --n: 5; }
  .stage > .shot, .stage > .sample { animation: settle-side var(--dur-reveal) var(--ease-out) var(--dur-micro) both; }
  .apps > li { animation: settle var(--dur-reveal) var(--ease-out) calc(var(--n, 0) * var(--stagger) + var(--dur-micro)) both; }
  .apps > li:nth-child(2) { --n: 1; } .apps > li:nth-child(3) { --n: 2; } .apps > li:nth-child(4) { --n: 3; } .apps > li:nth-child(5) { --n: 4; } .apps > li:nth-child(6) { --n: 5; }
  /* below the first screen, each block rises into place the first time it is scrolled to (the script marks them) */
  .js-reveal [data-rv] { opacity: 0; transform: translateY(18px); }
  .js-reveal .shots > [data-rv], .js-reveal .switch[data-rv], .js-reveal .sample[data-rv] { transform: translateY(28px) scale(0.985); }
  .js-reveal .footer__mast[data-rv] { transform: translateY(40%); }
  .js-reveal [data-rv].is-seen { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out) calc(var(--rv-i, 0) * var(--stagger)), transform var(--dur-reveal) var(--ease-out) calc(var(--rv-i, 0) * var(--stagger)); }
}
@media print { .js-reveal [data-rv] { opacity: 1; transform: none; } .nav { position: static; } }

/* the tab strip's fill glides to the picked app */
.switch__tabs { position: relative; }
.switch__tabs [role=tab] { position: relative; z-index: 1; }
.switch__tabs::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-accent); clip-path: inset(var(--g-t, 0px) var(--g-r, 100%) var(--g-b, 0px) var(--g-l, 0px) round var(--radius-pill)); opacity: 0; pointer-events: none; }
.switch.is-glide .switch__tabs::before { opacity: 1; transition: clip-path var(--dur-long) var(--ease-out); }
.switch.is-glide .switch__tabs [role=tab][aria-selected="true"] { background: transparent; }
@media (prefers-reduced-motion: reduce) { .switch.is-glide .switch__tabs::before { transition: none; } .nav { transition: none; } }

/* ---------- questions ---------- */
.faq h3 { line-height: 1.15; max-width: 22ch; }
.faq p { max-width: 62ch; }

/* ---------- tagged help center ---------- */
.help-hero { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-2xl); }
.help-hero h1 { font-size: var(--text-display-s); max-width: 14ch; }
.help-hero .label a { color: var(--color-muted); }
.help-search { max-width: 640px; }
.help-search input { width: 100%; min-height: 56px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); font-size: var(--text-lg); transition: box-shadow var(--dur-micro) var(--ease-out); }
.help-search input::placeholder { color: var(--color-muted); }
.help-search input:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink-2); }
.help-search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.help-count { min-height: 1.2em; color: var(--color-muted); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-sm)); }
.help-count:empty { display: none; }
.help-results { max-width: 760px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.help-results li { border-bottom: 1px solid var(--color-rule); }
.help-results a { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-sm); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.help-results a:hover { background: var(--color-paper-2); }
.help-results a:active { background: var(--color-paper-3); }
.help-results__t { font: 500 var(--text-title)/1.15 var(--font-display); letter-spacing: var(--tracking-display); text-transform: lowercase; }
.help-results__x { color: var(--color-ink-2); font-size: var(--text-sm); }

.help-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.help-tile { display: flex; align-items: center; gap: var(--space-sm); min-height: 64px; height: 100%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-md)/1.15 var(--font-display); text-transform: lowercase; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.help-tile svg { flex: none; color: var(--color-accent); }
.help-tile:hover { background: var(--color-paper-3); }
.help-tile:active { transform: translateY(1px); }
.help-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 48rem) { .help-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .help-tiles li:last-child:nth-child(odd) { grid-column: auto; } .help-tile { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 112px; padding: var(--space-md); } }

.help-guide { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.help-guide > li { display: grid; gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-3xl); }
.help-guide__name { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.help-guide__name svg { color: var(--color-accent); margin-top: var(--space-3xs); }
.help-guide__name p { color: var(--color-ink-2); margin-top: var(--space-2xs); max-width: 40ch; }
.help-links { display: grid; gap: var(--space-2xs) var(--space-xl); margin: 0; padding: 0 0 0 calc(24px + var(--space-sm)); list-style: none; }
.help-links a { display: inline-flex; align-items: center; min-height: 40px; }
@media (min-width: 48rem) { .help-guide > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); } .help-links { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; } }

.help-hls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .help-hls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .help-hls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.help-hl { display: grid; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.help-hl__shot { display: grid; place-items: center; }
.help-hl__ph { font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; color: var(--color-muted); }
.help-hl__cap { color: var(--color-ink-2); }
.help-hl:hover .help-hl__shot { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.help-hl:hover .help-hl__cap { color: var(--color-ink); }
.help-hl:active .help-hl__shot { outline-color: var(--color-accent-deep); }

.help-need { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.help-need h2 { font-size: var(--text-2xl); }
@media (min-width: 48rem) { .help-need { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: var(--space-2xl); } }

/* article pages: the section's list on the left on a computer, under the article on a phone */
.help-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-lg) var(--space-3xl); }
.help-back { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; text-decoration: none; color: var(--color-ink-2); }
.help-back:hover { color: var(--color-ink); }
.help-nav { border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.help-nav summary { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-xs) var(--space-md); cursor: pointer; font: 500 var(--text-md)/1.2 var(--font-display); text-transform: lowercase; color: var(--color-ink); list-style: none; }
.help-nav summary::-webkit-details-marker { display: none; }
.help-nav summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); }
.help-nav[open] summary::after { transform: rotate(225deg); }
.help-nav summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-card); }
.help-nav__here { color: var(--color-muted); font-size: var(--text-sm); }
.help-nav .help-side__groups { padding: 0 var(--space-sm) var(--space-md); }
.help-side { display: none; }
.help-side__groups { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-md); }
.help-side__name { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-3xs); padding-inline: var(--space-sm); font: 500 var(--text-sm)/1.2 var(--font-display); text-transform: lowercase; color: var(--color-muted); }
.help-side__name svg { color: var(--color-accent); flex: none; }
.help-side__group.is-here .help-side__name { color: var(--color-ink); }
.help-side__groups ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.help-side__groups a { display: flex; align-items: center; min-height: 32px; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-card); color: var(--color-ink-2); text-decoration: none; line-height: 1.3; font-size: var(--text-sm); transition: background-color var(--dur-micro) var(--ease-out); }
.help-side__groups a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.help-side__groups a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-ink); font-weight: 600; }
.help-body { display: grid; gap: var(--space-md); align-content: start; max-width: 68ch; min-width: 0; }
.help-body h1 { font-size: var(--text-section); max-width: 18ch; margin-bottom: var(--space-xs); }
.help-body h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.help-body h3 { font-size: var(--text-lg); margin-top: var(--space-md); }
.help-body p:not([class]) { color: var(--color-ink-2); }
.help-body strong { color: var(--color-ink); font-weight: 600; }
.help-body code, .help-body kbd { padding: 0 0.3em; border-radius: 4px; background: var(--color-paper-2); font-family: var(--font-outlier); font-size: 0.9em; color: var(--color-ink); }
.help-steps { margin-top: 0; }
.help-steps li { align-items: baseline; }
.help-sublist { margin-top: var(--space-xs); gap: var(--space-2xs); }
.steps .help-sublist li { display: block; padding: 0 0 0 var(--space-lg); border: 0; counter-increment: none; }
.steps .help-sublist li::before { content: ""; position: absolute; left: var(--space-2xs); top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); font: inherit; }
.help-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.help-list li { position: relative; padding-left: var(--space-lg); color: var(--color-ink-2); }
.help-list li::before { content: ""; position: absolute; left: var(--space-2xs); top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.help-body #tips + .help-list { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.help-body #tips + .help-list li { padding-left: var(--space-lg); }
/* callouts: "> **Note:**" and "> **Tip:**" */
.help-callout { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 3px 0 0 var(--color-accent); }
.help-callout p { margin: 0; color: var(--color-ink-2); }
.help-callout--tip { background: var(--color-accent-soft); }
/* platform tabs: CSS-only radios, so they work with no script */
.help-tabs { position: relative; display: flex; flex-wrap: wrap; align-items: end; gap: 0 var(--space-3xs); border-radius: var(--radius-card); }
.help-tabs__radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.help-tabs__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-card) var(--radius-card) 0 0; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; cursor: pointer; box-shadow: inset 0 -2px 0 var(--color-rule); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.help-tabs__tab:hover { color: var(--color-ink); background: var(--color-paper-2); }
.help-tabs__radio:checked + .help-tabs__tab { color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 -2px 0 var(--color-accent); }
.help-tabs__radio:focus-visible + .help-tabs__tab { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.help-tabs__panel { display: none; flex: 1 0 100%; min-width: 0; padding: var(--space-md) var(--space-lg) var(--space-lg); border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card); background: var(--color-paper-2); }
.help-tabs__panel > * + * { margin-top: var(--space-sm); }
.help-tabs__panel .steps { margin-top: 0; border-top: 0; }
.help-tabs__panel .steps li:last-child { border-bottom: 0; }
.help-tabs__for { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.help-tabs__bar { display: flex; flex-wrap: wrap; align-items: end; gap: 0 var(--space-3xs); flex: 1 0 100%; }
.help-tabs:has(.help-tabs__radio--1:checked) .help-tabs__panel--1,
.help-tabs:has(.help-tabs__radio--2:checked) .help-tabs__panel--2,
.help-tabs:has(.help-tabs__radio--3:checked) .help-tabs__panel--3 { display: block; }
@media print { .help-tabs__panel { display: block; } .help-tabs__for { position: static; width: auto; height: auto; margin: 0; clip-path: none; font-weight: 600; } .help-tabs__tab { display: none; } }
/* questions at the end of an article */
.help-faq { display: grid; border-top: 1px solid var(--color-rule); }
.help-faq__item { border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-3xl); }
.help-faq__item summary { display: flex; align-items: center; gap: var(--space-md); min-height: 52px; padding: var(--space-sm) var(--space-2xs); cursor: pointer; list-style: none; font: 500 var(--text-lg)/1.25 var(--font-body); color: var(--color-ink); }
.help-faq__item summary::-webkit-details-marker { display: none; }
.help-faq__item summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; margin-right: var(--space-2xs); border-right: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent); transform: rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); }
.help-faq__item[open] summary::after { transform: rotate(225deg); }
.help-faq__item summary:hover { color: var(--color-accent-deep); }
.help-faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.help-faq__a { display: grid; gap: var(--space-sm); padding: 0 var(--space-2xs) var(--space-md); }
.help-faq__a p { margin: 0; color: var(--color-ink-2); }
.help-related { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.help-related h2 { margin-top: 0; }
.help-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.help-related a { display: inline-flex; align-items: center; min-height: 40px; }
/* previous / next article */
.help-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
.help-pager a { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.help-pager a:hover { background: var(--color-paper-3); }
.help-pager a:active { transform: translateY(1px); }
.help-pager__t { font: 500 var(--text-md)/1.25 var(--font-display); text-transform: lowercase; }
.help-pager__next { text-align: right; }
@media (min-width: 40rem) { .help-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-pager__next { grid-column: 2; } }
.help-more { margin-top: var(--space-lg); color: var(--color-muted); }
@media (min-width: 64rem) {
  .help-article { grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); column-gap: var(--space-3xl); row-gap: var(--space-md); }
  .help-back { grid-column: 1 / -1; }
  .help-nav { display: none; }
  .help-side { display: block; grid-row: 2 / span 2; position: sticky; top: calc(80px + var(--space-md)); align-self: start; max-height: calc(100dvh - 80px - var(--space-xl)); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-xs); scrollbar-width: thin; }
}

/* ---------- resources: guides hub and guide pages ---------- */
.res-hero { display: grid; gap: var(--space-md); padding-block: var(--space-xl) var(--space-xl); }
.res-hero h1 { font-size: var(--text-display-s); max-width: 16ch; }
.res-hero .lead { max-width: 52ch; }
.res-tag { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; color: var(--color-accent); }
.res-tag svg { flex: none; }
.res-card { position: relative; display: grid; align-content: start; gap: var(--space-sm); height: 100%; box-sizing: border-box; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.res-card:hover { background: var(--color-paper-3); }
.res-card:active { transform: translateY(1px); }
.res-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.res-card__t { font: 500 var(--text-title)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.res-card__s { color: var(--color-ink-2); }
.res-card__m { margin-top: auto; padding-top: var(--space-xs); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); }
.res-card--feature { gap: var(--space-md); padding: var(--space-xl); overflow: hidden; background: var(--color-band); box-shadow: none; color: var(--color-band-ink); }
.res-card--feature:hover { background: var(--color-accent-deep); }
.res-card--feature .res-tag, .res-card--feature .res-card__s, .res-card--feature .res-card__m { color: var(--color-band-ink); }
.res-card--feature .res-card__t { font-size: var(--text-section); max-width: 18ch; }
.res-card--feature .res-card__s { max-width: 56ch; font-size: var(--text-lead); }
.res-card--feature::after { content: ""; position: absolute; right: calc(-1 * var(--space-2xl)); bottom: calc(-1 * var(--space-2xl)); width: 280px; height: 280px; border-radius: var(--radius-card); background:
  linear-gradient(var(--color-band-rule), var(--color-band-rule)) 0 0 / calc(50% - 6px) calc(50% - 6px) no-repeat,
  linear-gradient(var(--color-band-rule), var(--color-band-rule)) 100% 0 / calc(50% - 6px) calc(50% - 6px) no-repeat,
  linear-gradient(var(--color-band-rule), var(--color-band-rule)) 0 100% / calc(50% - 6px) calc(50% - 6px) no-repeat,
  linear-gradient(var(--color-band-fill), var(--color-band-fill)) 100% 100% / calc(50% - 6px) calc(50% - 6px) no-repeat;
  opacity: 0.22; transform: rotate(-8deg); pointer-events: none; }
.res-card--feature > * { position: relative; max-width: 100%; }
@media (min-width: 48rem) { .res-card--feature { padding: var(--space-2xl); padding-right: 320px; } }
.res-all { padding-top: var(--space-2xl); }
.res-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-xl); padding: 0; border: 0; }
.res-chip { position: relative; display: inline-flex; }
.res-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.res-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; color: var(--color-ink-2); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.res-chip:hover span { background: var(--color-paper-2); color: var(--color-ink); }
.res-chip input:checked + span { background: var(--color-ink); box-shadow: none; color: var(--color-paper); }
.res-chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); } }
/* the topic chips filter with no script: every card shows until a chip other than "all" is picked */
.res-all:has(input[value="organize"]:checked) .res-grid--all > li:not([data-cat="organize"]),
.res-all:has(input[value="voice"]:checked) .res-grid--all > li:not([data-cat="voice"]),
.res-all:has(input[value="notes"]:checked) .res-grid--all > li:not([data-cat="notes"]),
.res-all:has(input[value="outdoors"]:checked) .res-grid--all > li:not([data-cat="outdoors"]),
.res-all:has(input[value="hvac"]:checked) .res-grid--all > li:not([data-cat="hvac"]),
.res-all:has(input[value="gamedev"]:checked) .res-grid--all > li:not([data-cat="gamedev"]),
.res-all:has(input[value="about"]:checked) .res-grid--all > li:not([data-cat="about"]) { display: none; }

.res-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-3xl); padding-block: var(--space-lg) var(--space-3xl); }
.res-crumb a { color: var(--color-muted); }
.res-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.res-head h1 { font-size: var(--text-section); max-width: 20ch; margin: 0; }
.res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); text-transform: lowercase; }
.res-body { max-width: 70ch; }
.res-body h2 { scroll-margin-top: var(--space-3xl); }
.res-body .lead { font-size: var(--text-lead); }
.res-body p:not([class]) + .help-list { margin-top: calc(-1 * var(--space-xs)); }
.res-toc { display: none; }
.res-toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3xs); border-left: 1px solid var(--color-rule); }
.res-toc a { display: block; padding: var(--space-2xs) var(--space-md); color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); line-height: 1.35; text-transform: lowercase; transition: color var(--dur-micro) var(--ease-out); }
.res-toc a:hover { color: var(--color-ink); }
.res-toc .label { margin-bottom: var(--space-sm); }
@media (min-width: 64rem) {
  .res-article { grid-template-columns: minmax(0, 9fr) minmax(200px, 3fr); }
  .res-crumb { grid-column: 1 / -1; }
  .res-toc { display: block; position: sticky; top: calc(80px + var(--space-md)); align-self: start; }
}
.res-cta { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-band); color: var(--color-band-ink); }
.res-cta .label { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-band-ink); }
.res-body .res-cta h2 { margin: var(--space-xs) 0 var(--space-sm); font-size: var(--text-xl); }
.res-body .res-cta p:not(.label) { color: var(--color-band-ink); }
.res-cta a:not(.btn) { color: var(--color-band-ink); }
.res-cta .btn--primary { background: var(--color-band-fill); color: var(--color-band); }
.res-cta .btn--primary:hover { background: var(--color-band-ink); }
.res-cta .btn:not(.btn--primary) { color: var(--color-band-ink); box-shadow: inset 0 0 0 1.5px var(--color-band-ink); }
.res-cta .btn:not(.btn--primary):hover { background: var(--color-band-rule); }
.res-cta .btn:focus-visible { outline-color: var(--color-band-fill); }

.res-guides { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.res-guides ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.res-guides a { display: inline-flex; align-items: center; min-height: 44px; }