/* EasingLab site. The same system as the app (Workbench): neutral grey, Inter only, 6px radii, one blue.
   The page reads like the app's own shell: a slim bar, labels in sentence case, the work (screenshots) as the only colour. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
:root {
  --bg: #161618; --bg-2: #1c1c1f; --surface: #222225; --surface-2: #2b2b2f; --line: rgba(255,255,255,.09);
  --fg: #e8e8eb; --fg2: #a3a3ab; --accent: #5b9cf0; --accent-ink: #0c0c0e; --accent-text: #7db0f5;
  --f: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 6px; --max: 1160px;
  color-scheme: dark;
}
:root[data-theme="light"] { --bg: #f5f5f6; --bg-2: #ececee; --surface: #ffffff; --surface-2: #e6e6e9; --line: rgba(0,0,0,.11);
  --fg: #18181b; --fg2: #5a5a63; --accent: #3b6fd8; --accent-ink: #ffffff; --accent-text: #2f5fc4; color-scheme: light; }
/* screenshots of the app follow the theme: each figure carries both */
:root[data-theme="light"] .t-dark, :root:not([data-theme="light"]) .t-light { display: none; }
/* the theme switch: the new theme sweeps in behind the brand's own curve, on its own easing (View Transitions) */
html.theme-switching, html.theme-switching * { transition: none !important; }
html.theme-switching::view-transition-old(root), html.theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* moving between pages (home ↔ every feature ↔ privacy): the bar holds still, the old page fades out quickly and the new one
   settles in on the brand curve (cross-document view transitions; browsers without them just load the page) */
@view-transition { navigation: auto; }
.bar { view-transition-name: bar; }
::view-transition-old(root) { animation: page-out .18s cubic-bezier(0.65, 0, 0.35, 1) both; }
::view-transition-new(root) { animation: page-in .32s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.theme { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--fg); cursor: pointer; padding: 0; }
.theme:hover { background: var(--surface); }
/* the plain switch: a sun on dark (go light), a moon on light (go dark); the mark on the left does the same */
.bar-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
/* the bar's Ask for access shows once the hero's own button has scrolled away: never two on screen */
.bar-cta { order: -1; white-space: nowrap; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s; }
/* it keeps its place in the bar, so nothing else moves: only opacity and transform change (no layout per frame) */
.bar-cta.away { opacity: 0; transform: translateX(10px); visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.mode { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--fg); background: none;
  border: 1px solid var(--line); border-radius: var(--r); }
.mode:hover { background: var(--surface); }
.mode svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme svg { width: 20px; height: 20px; transition: transform .6s cubic-bezier(0.65, 0, 0.35, 1); }
:root[data-theme="light"] .theme svg { transform: scaleX(-1) rotate(180deg); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--f); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.mark { display: inline-block; width: 22px; height: 22px; flex: none; color: var(--fg); }


/* bar */
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: 52px; }   /* the menu sits in the true centre, whatever the ends hold */
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.brand a { text-decoration: none; padding-block: 4px; } .brand .theme { margin-left: -6px; }   /* the icon, not its hit area, lines up with the page edge */
.brand .beta { margin-left: 3px; }   /* the mark is the theme switch (#theme); the name goes to the top */
.bar nav { display: flex; gap: 2px; }
.bar nav a { padding: 6px 10px; border-radius: var(--r); color: var(--fg2); text-decoration: none; font-size: 13px; }
.bar nav a:hover { color: var(--fg); background: var(--surface); }
.beta { font: 600 10.5px var(--f); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px; padding: 1px 5px; letter-spacing: .02em; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid var(--accent); }
.btn:hover { filter: brightness(1.07); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn.ghost { background: var(--surface-2); color: var(--fg); border-color: var(--line); }
.btn svg { width: 15px; height: 15px; }

/* hero */
.hero { padding-block: 72px 40px; display: grid; gap: 40px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.eyebrow { font: 500 12.5px var(--f); color: var(--fg2); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eyebrow code { white-space: nowrap; font: 12px var(--mono); color: var(--fg2); padding: 2px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
h1 { margin: 0; font-size: clamp(38px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -.04em; font-weight: 580; text-wrap: balance; max-width: 13ch; }
.sub { margin: 18px 0 0; color: var(--fg2); font-size: 17px; line-height: 1.55; max-width: 56ch; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.meta { font: 12.5px var(--mono); color: var(--fg2); }

/* window frame around real screenshots */
.win { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.win-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.win img, .win video { display: block; width: 100%; height: auto; }
.vplay { margin-left: auto; min-height: 24px; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--fg2); font: 500 11.5px var(--f); cursor: pointer; }   /* in the frame's title bar: it never covers the video */
.vplay:hover { color: var(--fg); }

/* the workflow: a real sequence, so it's numbered */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-block: 8px 24px; }
.flow { list-style: none; padding: 0; }
.flow li { background: var(--bg); padding: 16px 16px 18px; display: grid; gap: 4px; align-content: start; }
.flow b { font-size: 14px; font-weight: 600; } .flow span { color: var(--fg2); font-size: 13px; line-height: 1.45; }
/* the steps as keyframes: a track along the top, one dot per step, filling in from faint to the full accent */
.flow small { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 11.5px var(--mono); color: var(--fg2); letter-spacing: .02em; }
.flow small::after { content: ""; flex: 1; height: 1px; margin-right: -16px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) calc(var(--k) * 70%), transparent), color-mix(in srgb, var(--accent) 15%, transparent)); }
.flow small i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--accent) calc(var(--k) * 100%), var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.flow li:last-child small::after { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent); }

/* features */
section.feat { padding-block: 72px; border-top: 1px solid var(--line); }
.feat .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.feat.flip .copy { order: 2; }
.feat.flip .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }   /* the screenshot keeps the wide column */
.label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 13px var(--f); color: var(--accent-text); letter-spacing: .01em; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }   /* the keyframe dot from the steps strip */
h2 { margin: 0; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -.03em; font-weight: 590; text-wrap: balance; }
.copy p { color: var(--fg2); margin: 14px 0 0; max-width: 52ch; text-wrap: pretty; }
.copy .label { color: var(--accent-text); margin: 0 0 12px; }   /* every section label in the accent, like Made for a studio */
.copy ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.copy li { position: relative; padding-left: 26px; font-size: 14px; }   /* not a grid: inline code or links in an item would become cells */
.copy li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }

/* DESIGN.md excerpt: a code window */
.code-win .fname { margin-left: 8px; font: 12px var(--mono); color: var(--fg2); }
.code-win pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: 12.5px/1.65 var(--mono); color: var(--fg); background: var(--bg); }
.code-win .k { color: var(--accent-text); } .code-win .s { color: var(--fg); opacity: .78; } .code-win .cm { color: var(--fg2); } .code-win .h { font-weight: 700; }
.code-win .sw { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--line); }
.code-win .ride { position: relative; display: inline-block; width: 120px; height: 6px; margin-left: 12px; border-radius: 3px; background: var(--surface-2); vertical-align: 1px; }
.code-win .ride i { position: absolute; top: -2px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: ride 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
@keyframes ride { to { left: calc(100% - 10px); } }
@media (prefers-reduced-motion: reduce) { .code-win .ride i { animation: none; left: calc(50% - 5px); } }
.code-win figcaption { padding: 10px 20px 12px; border-top: 1px solid var(--line); color: var(--fg2); font-size: 12.5px; }
.copy p a { color: var(--accent-text); } .copy li a { color: inherit; }

/* small facts grid */
.facts { padding-block: 72px; border-top: 1px solid var(--line); }
.facts h2 { margin-bottom: 28px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.card b { font-size: 14.5px; } .card span { color: var(--fg2); font-size: 13.5px; line-height: 1.5; }

/* download */
.get { padding-block: 88px; border-top: 1px solid var(--line); }
.get .wrap { text-align: center; display: grid; justify-items: center; gap: 16px; }
.get img { width: 96px; height: 96px; }
.get h2 { max-width: 20ch; }
.req a { color: var(--accent-text); }
.req { color: var(--fg2); font-size: 13.5px; max-width: 60ch; }
footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--fg2); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; }
footer a { color: var(--fg2); } footer a:hover { color: var(--fg); }

@media (max-width: 1100px) { .bar nav a { padding-inline: 7px; } }
@media (max-width: 1000px) { .bar nav.long { display: none; } }   /* the features page's eight links need the room */
@media (max-width: 900px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .feat .wrap { grid-template-columns: 1fr; gap: 28px; } .feat.flip .copy { order: 0; }
  .flow { grid-template-columns: 1fr 1fr; } .flow li:last-child { grid-column: 1 / -1; }
  .grid { grid-template-columns: 1fr 1fr; }
  .bar nav { display: none; }
}
@media (max-width: 440px) { .bar .beta { display: none; } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .hero { padding-top: 44px; } section.feat, .facts { padding-block: 52px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Scrollbar: a slim pill in the accent on the page colour, with a hairline (WebKit/Blink draw it; Firefox gets the colours) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); box-shadow: inset 1px 0 0 var(--line); }
::-webkit-scrollbar-thumb { min-height: 56px; border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--accent) 62%, transparent); }
::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 62%, transparent) var(--bg); } }

/* ---- Hero: the curve pad. The visitor drags the handles and everything on the pad (and the headline) eases on that curve. */
h1 .w { display: inline-block; }   /* words, for the entrance (site.js) */
.intro .hero h1 { animation: shown 0s 1.5s both; }   /* failsafe: visible after 1.5 s even if site.js never runs */
@keyframes shown { from { visibility: hidden; } to { visibility: visible; } }
.pad { width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.55); }
.pad-main { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 14px; }
.pad-ed { width: 196px; height: 196px; display: block; touch-action: none; user-select: none; -webkit-user-select: none; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.pad-ed .h { cursor: grab; outline: none; } .pad-ed .h:active { cursor: grabbing; }
.pad-ed .h circle.ring { fill: transparent; stroke: transparent; stroke-width: 2; }
.pad-ed .h:focus-visible circle.ring, .pad-ed .h:hover circle.ring { stroke: var(--accent); }
.lanes { display: grid; gap: 8px; align-content: space-between; }
.lane { display: grid; gap: 4px; }
.lane small { font: 11px var(--mono); color: var(--fg2); }
.lane .track { position: relative; height: 30px; border-radius: 6px; background: var(--bg); }
.lane .track > i { position: absolute; display: block; }
.l-move i { top: 9px; left: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.l-scale .track, .l-turn .track { display: grid; place-items: center; }
.l-scale i, .l-turn i { position: static !important; width: 16px; height: 16px; border-radius: 3px; background: var(--fg); }
.l-turn i { width: 20px; height: 4px; border-radius: 2px; background: var(--accent); }
.l-stag .track { display: flex; align-items: flex-end; gap: 4px; padding: 4px 8px; }
.l-stag i { position: static !important; flex: 1; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; }
.pad-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { font: 500 12px var(--f); color: var(--fg2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.chip:hover { color: var(--fg); } .chip[aria-pressed="true"] { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pad-code { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pad-code code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); color: var(--fg); }
.pad-code button { font: 500 11.5px var(--f); color: var(--fg2); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 3px 9px; cursor: pointer; min-height: 26px; }
.pad-code button:hover { color: var(--fg); }
.pad-hint { margin: 0; font-size: 12.5px; color: var(--fg2); }
.tour { padding-block: 0 24px; }

/* ---- Section reveals: one per topic, all on the brand curve (site.js adds .rv to <html>, .in to a section once on screen).
   Without JS or with reduced motion nothing is hidden. */
:root { --ease: cubic-bezier(0.65, 0, 0.35, 1); --pop: cubic-bezier(0.34, 1.56, 0.64, 1); }
.rv .feat .copy > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv .feat.in .copy > * { opacity: 1; transform: none; }
.rv .feat.in .copy > :nth-child(2) { transition-delay: .08s; } .rv .feat.in .copy > :nth-child(3) { transition-delay: .16s; }
.rv .feat.in .copy > :nth-child(4) { transition-delay: .24s; } .rv .feat.in .copy > :nth-child(n+5) { transition-delay: .32s; }
.rv .feat figure { opacity: 0; } .rv .feat.in figure { opacity: 1; }
/* sections without a reveal of their own (Skills, DESIGN.md): the window rises */
.rv .feat:not([data-reveal]).in figure { animation: rise .9s var(--ease) .1s both; }
/* Research and Effects reveal with a cover laid OVER the window that moves away (transform, or a mask on the cover):
   the video itself is never clipped or masked, so nothing changes under it when the reveal ends (no flash) */
.rv .feat[data-reveal="scan"] figure::before, .rv .feat[data-reveal="dots"] figure::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--bg); }
.rv .feat.in figure.done::before, .rv .feat[data-reveal="scan"].in figure.done::after { display: none; }
/* Research: the window is captured top to bottom, a light bar on the edge, like a screenshot being taken */
.rv .feat[data-reveal="scan"] figure::before { transform-origin: bottom; }
.rv .feat[data-reveal="scan"].in figure::before { animation: uncover 1.1s var(--ease) both; }
@keyframes uncover { to { transform: scaleY(0); } }
.rv .feat[data-reveal="scan"] figure::after { content: ""; position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--accent) 0 2px, color-mix(in srgb, var(--accent) 20%, transparent) 2px, transparent 36px); }
.rv .feat[data-reveal="scan"].in figure::after { animation: scanbar 1.1s var(--ease) both; }   /* its top edge rides the cover's */
@keyframes scanbar { 0% { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
/* Effects: the window resolves through a halftone, holes in the cover growing until it's gone */
@property --dot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.rv .feat[data-reveal="dots"] figure::before {
  -webkit-mask: radial-gradient(circle, transparent var(--dot), #000 calc(var(--dot) + .5px)) 0 0 / 18px 18px;
          mask: radial-gradient(circle, transparent var(--dot), #000 calc(var(--dot) + .5px)) 0 0 / 18px 18px; }
.rv .feat[data-reveal="dots"].in figure::before { animation: halftone 1.2s var(--ease) both; }
@keyframes halftone { from { --dot: 0px; } to { --dot: 14px; } }
/* Foundations: the client's palette lands chip by chip, with a little overshoot */
.swatches { display: flex; gap: 6px; margin-top: 18px; }
.swatches i { width: 30px; height: 30px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.rv .feat .swatches i { transform: scale(0); transition: transform .55s var(--pop); }
.rv .feat.in .swatches i { transform: none; transition-delay: calc(.35s + var(--i) * 70ms); }
.rv .feat[data-reveal="swatches"].in figure { animation: rise .9s var(--ease) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.98); } }
/* Layouts: guides draw across the window, then step aside for the page */
.rv .feat[data-reveal="guides"].in figure { animation: rise .9s var(--ease) both; }
.rv .feat[data-reveal="guides"] figure::before, .rv .feat[data-reveal="guides"] figure::after { content: ""; position: absolute; z-index: 1; pointer-events: none;
  background: var(--accent); opacity: 0; }
.rv .feat[data-reveal="guides"] figure::before { left: 33.33%; top: 0; width: 1px; height: 100%; transform-origin: top; }
.rv .feat[data-reveal="guides"] figure::after { top: 50%; left: 0; height: 1px; width: 100%; transform-origin: left; }
.rv .feat[data-reveal="guides"].in figure::before, .rv .feat[data-reveal="guides"].in figure::after { animation: guide 1.6s var(--ease) .2s both; }
@keyframes guide { 0% { opacity: .9; transform: scale(0); } 55% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* Hand off: once the window is in, the destinations settle one after another (a short rise and a fade) */
.copy .dests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding: 0; list-style: none; }
.copy .dests li { font: 500 12px var(--f); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.copy .dests li::before { content: none; }
.rv .feat[data-reveal="handoff"] .dests li { opacity: 0; }
.rv .feat[data-reveal="handoff"].in .dests li { animation: settle .6s var(--ease) both; animation-delay: calc(.45s + var(--i) * 55ms); }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }   /* no blur: an animated filter can leave chips stuck blurred (Safari) */
.rv .feat[data-reveal="handoff"].in figure { animation: rise .8s var(--ease) both; }

/* ---- Home: the way to everything else */
.more { padding-block: 56px; border-top: 1px solid var(--line); }
.more .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.more p { margin: 6px 0 0; color: var(--fg2); max-width: 60ch; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* features page */
.page-head { padding-block: 64px 24px; }
.page-head h1 { max-width: 18ch; }
.page-head .sub { max-width: 62ch; text-wrap: pretty; }
.page-head .flow { margin-top: 32px; }
.flow b a { text-decoration: none; } .flow b a:hover { color: var(--accent-text); }

@media (max-width: 900px) { .pad { width: 100%; max-width: 480px; } .grid.three { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pad-main { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; } .pad-ed { width: 150px; height: 150px; align-self: center; } .pad { padding: 12px; }
  .pad-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .chip { text-align: center; }
  .pad-code { flex-wrap: wrap; } .pad-code code { flex-basis: 100%; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* print: whatever hasn't revealed yet prints anyway */
@media print { .rv .feat figure::before, .rv .feat figure::after { display: none !important; }
  .rv .feat *, .intro .hero h1 { opacity: 1 !important; transform: none !important; visibility: visible !important; animation: none !important; -webkit-mask: none !important; mask: none !important; } }

/* ---- Home: the grey third beat of the headline */
h1 .quiet { color: var(--fg2); }
/* Keep the parts: this page taken apart, one card per part */
.parts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.part { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.part small { font: 11px var(--mono); color: var(--fg2); }
.part code, .part pre { font: 11.5px/1.6 var(--mono); color: var(--fg2); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-motion, .p-palette { grid-column: span 3; } .p-type, .p-corner, .p-tokens { grid-column: span 2; }
.parts figcaption { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; color: var(--fg2); }
.p-motion svg { width: 100%; height: 64px; color: var(--fg); }
.part .ride { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--surface-2); }
.part .ride i { position: absolute; top: -2px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: ride 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips i { width: 30px; height: 30px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px var(--line); }
.p-type b { font: 600 46px/1 var(--f); letter-spacing: -.04em; }
.corner { display: block; width: 64px; height: 46px; border: 2px solid var(--accent); border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .part .ride i { animation: none; left: calc(50% - 5px); } }
@media (max-width: 560px) { .parts { grid-template-columns: 1fr 1fr; } .p-motion, .p-palette, .p-tokens { grid-column: 1 / -1; } .p-type, .p-corner { grid-column: span 1; } }
/* its reveal: the parts land one by one, the palette pops */
.rv .feat[data-reveal="parts"] .part { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rv .feat[data-reveal="parts"].in .part { opacity: 1; transform: none; }
.rv .feat[data-reveal="parts"].in .part:nth-child(2) { transition-delay: .07s; } .rv .feat[data-reveal="parts"].in .part:nth-child(3) { transition-delay: .14s; }
.rv .feat[data-reveal="parts"].in .part:nth-child(4) { transition-delay: .21s; } .rv .feat[data-reveal="parts"].in .part:nth-child(5) { transition-delay: .28s; }
.rv .feat[data-reveal="parts"] .chips i { transform: scale(0); transition: transform .5s var(--pop); }
.rv .feat[data-reveal="parts"].in .chips i { transform: none; transition-delay: calc(.35s + var(--i) * 60ms); }

/* ---- FAQ: native <details>, opening smoothly where the browser can animate to auto height */
.faq { padding-block: 72px; border-top: 1px solid var(--line); }
.faq h2 { margin-bottom: 24px; }
.qs { max-width: 780px; border-top: 1px solid var(--line); }
.qs details { border-bottom: 1px solid var(--line); }
.qs summary { list-style: none; cursor: pointer; position: relative; padding: 16px 36px 16px 0; font-weight: 600; font-size: 15.5px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary:hover { color: var(--accent-text); }
.qs summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--fg2); border-bottom: 1.6px solid var(--fg2);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease); }
.qs details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.qs p { margin: 0 0 18px; color: var(--fg2); max-width: 66ch; }
:root { interpolate-size: allow-keywords; }
.qs details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.qs details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .qs details::details-content { transition: none; } }
.facts .all { margin: 24px 0 0; }