/* Layout: a thin proposal bar on top; below it the proposed site renders full-bleed, one view at a time.
   White pages with black chapters. Dark blocks remap the same tokens, so every component is written once.
   Single committed look: this is a design proposal, it shows one design. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --fill: #f4f5f7;
  --line: #e2e4e8;
  --fg: #0c0d10;
  --fg-2: #4b5159;
  --muted: #7a8087;
  --accent: #15803d;
  --grad: linear-gradient(92deg, #22c55e, #06b6d4);                       /* per product; TapLock: green to cyan */
  --desk: linear-gradient(160deg, #052e16 0%, #065f46 45%, #0e7490 100%); /* the composed desktop behind panels */
  --dark: #050507;
  --dark-2: #111214;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gx: max(clamp(20px, 4vw + 8px, 48px), env(safe-area-inset-left, 0px));   /* the side gutter grows with the screen */
  --gxr: max(clamp(20px, 4vw + 8px, 48px), env(safe-area-inset-right, 0px));
  --w: 1244px;   /* 1148px of content once the 48px gutters are taken */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --navbg: rgba(255,255,255,.82);
  --gutter: max(var(--gx), calc((100% - var(--w)) / 2 + var(--gx)));   /* galleries bleed to the viewport edge */
  --s1: 24px; --s2: 48px; --s3: 72px; --s4: 120px;                     /* one spacing scale for the whole page */
}
.dark {
  --bg: var(--dark);
  --fill: var(--dark-2);
  --line: #26292e;
  --fg: #f5f5f7;
  --fg-2: #a6acb4;
  --muted: #80868e;
  --accent: var(--accent-d, #4ade80);                                     /* each page lifts its own colours for black sections */
  --grad: var(--grad-d, linear-gradient(92deg, #4ade80, #22d3ee));
  --navbg: rgba(5,5,7,.8);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; }   /* no double-tap zoom, so quick taps on paddles and pills stay taps; pinch zoom still works */
body { margin: 0; background: var(--bg); color: var(--fg-2); font-family: var(--body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html.page-dark, body.page-dark { background: var(--dark); }   /* a dark product's page: the nav and the overscroll sit on black, not white */
body > section, body > footer { background-color: var(--bg); }   /* each section paints its own ground: <body>'s colour is left to the browser's bars (site.js) */
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--fg); text-wrap: balance; letter-spacing: -.025em; }
p { margin: 0; }
sup { font-size: .6em; line-height: 0; color: var(--muted); }
section { background: var(--bg); color: var(--fg-2); }
.fill { background: var(--fill); }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: var(--gx); padding-right: var(--gxr); }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead b { color: var(--fg); font-weight: 500; }

/* ---------- site nav / footer ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--navbg); transition: background .4s var(--ease), border-color .4s var(--ease); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
@supports (-webkit-touch-callout: none) {   /* iOS only: Safari there tints its bars from the nav, and skips an element with a backdrop-filter, so the blur moves to a layer it does not look at */
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; }
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 52px; }
.brand { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.brand span { color: var(--muted); }
.brand a { color: inherit; }
.brand a:hover { text-decoration: none; color: var(--accent); }
.brand { white-space: nowrap; }
.brand i, .brand b { font-style: normal; font-weight: inherit; }
/* Tools: a menu under the nav link; hover opens it on a desktop, a tap anywhere */
.nav-dd { position: relative; }
.dd-top { border: 0; background: none; padding: 0; font: inherit; color: var(--fg-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.dd-top:hover, .dd-top.on, .nav-dd.open .dd-top { color: var(--fg); }
.dd-top.on { font-weight: 500; }
.dd-top .chev { width: 6px; height: 6px; margin: -3px 0 0 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; transition: transform .3s var(--ease); }
.nav-dd.open .chev { transform: translate(-1px, 3px) rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 14px); right: -14px; z-index: 30; width: 300px; display: grid; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px rgba(12,13,16,.14); opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity .25s var(--ease), translate .25s var(--ease); }
.dd-menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }   /* the gap under the link still counts as hovering */
.nav-dd.open .dd-menu { opacity: 1; translate: 0 0; pointer-events: auto; }
.dd-menu a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 9px; color: var(--fg); }
.dd-menu a:hover { background: var(--fill); text-decoration: none; }
.dd-menu b { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.dd-menu span { font-size: 13px; color: var(--muted); }
.dd-menu .dd-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; padding-top: 12px; font-size: 13px; color: var(--accent); }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--fg-2); }
.nav-links a:hover { color: var(--fg); text-decoration: none; }
.foot { border-top: 1px solid var(--line); }
.footnotes { margin: 0; padding: 22px 0 0 1.4em; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 72em; }
.footnotes li + li { margin-top: 4px; }
.foot-in { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 22px 36px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.foot-in a { color: var(--muted); }
.legal { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 72em; }   /* site-level: trademarks; from _data/site.yml, not per product */
.footnotes a, .legal a { color: var(--muted); text-decoration: underline; }
.socials { display: flex; align-items: center; gap: 16px; }
.socials a { color: var(--muted); display: block; line-height: 0; }
.socials a:hover { color: var(--fg); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.nav-in { position: relative; }
.nav-links > a:last-child { padding-left: 22px; border-left: 1px solid var(--line); }   /* GitHub sits apart from the products */
.nav-prod { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.02em; color: var(--fg); opacity: 0; transform: translate(-50%, -50%) translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.nav-prod.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }   /* the hero's name has scrolled under the nav */
.nav-prod img, .nav-prod svg { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }
.nav-prod:hover { text-decoration: none; }

/* ---------- tool page ---------- */
.tool-cta { display: flex; align-items: center; gap: 24px; }
.tool-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; align-items: center; }
.tool-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; font-size: 16px; }
.tool-facts b { color: var(--fg); font-weight: 600; }
.tool-shots { display: grid; grid-template-columns: var(--cols); gap: 24px; align-items: start; margin-top: var(--s3); }
.tool-shots img { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(12,13,16,.12); }
.tool-shots:has(> img:only-child) { max-width: 760px; margin-inline: auto; }   /* one shot: a picture in the column, not the page's width */
@media (max-width: 860px) { .tool-row, .tool-shots { grid-template-columns: 1fr; } }
.cards.two.wide { max-width: 1120px; }   /* a long clone line fits without scrolling */
.tool-page .term .p { color: var(--accent-d); }
.tool-page .card .ic { font-size: 15px; background: var(--grad); color: #fff; }
.tool-page .get .card { padding-inline: 16px; }
.tool-page .get .term.sm pre { padding-inline: 12px; font-size: 12px; }   /* the longest command fits on one line */
.tool-page .tile-media img { border-radius: 10px; box-shadow: 0 16px 40px rgba(12,13,16,.14); }
.tool-page .chapter .term pre { font-size: 13px; }
.tool-docs { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--s1); font-size: 15px; font-weight: 500; }

/* ---------- coming soon (Wristdeck: brand dark, accent #5AB8FF) ---------- */
.soon { --grad: linear-gradient(92deg, #3b82f6, #a855f7 70%); --accent: #5AB8FF; padding-block: var(--s4); background: radial-gradient(60% 70% at 80% 40%, rgba(90,184,255,.16), transparent 70%), var(--bg); color: var(--fg-2); }
.soon-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }   /* text, and the app icon beside it */
.soon-icon svg { display: block; width: min(240px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: visible; }   /* the mark alone, no icon tile */
/* the blue key walks round the mark, pressed in turn: bottom-left, top-left, top-right, bottom-right */
.soon-icon .k { fill: #5C6B80; transform-box: fill-box; transform-origin: center; animation: wd-key 8s var(--ease) infinite; }
.soon-icon .k2 { animation-delay: 0s; } .soon-icon .k0 { animation-delay: 2s; } .soon-icon .k1 { animation-delay: 4s; } .soon-icon .k3 { animation-delay: 6s; }
@keyframes wd-key { 0% { fill: #5C6B80; transform: scale(1); } 3% { fill: #5AB8FF; transform: scale(.82); } 8% { fill: #5AB8FF; transform: scale(1); } 22% { fill: #5AB8FF; } 27%, 100% { fill: #5C6B80; transform: scale(1); } }
/* deck cards: the keys press in a row as the card arrives, and again on hover; the card lifts */
.card.deck.rv { transition: opacity .9s var(--ease), transform .9s var(--ease), translate .35s var(--ease), border-color .35s var(--ease); }
.card.deck.in:hover { translate: 0 -4px; border-color: rgba(90,184,255,.45); }
.keys4 i { transform-origin: center; }
.card.deck.in .keys4 i { animation: deck-key .5s var(--ease) both; }
.card.deck.in:hover .keys4 i { animation-name: deck-key-hover; }
.keys4 i:nth-child(2) { animation-delay: .12s; } .keys4 i:nth-child(3) { animation-delay: .24s; } .keys4 i:nth-child(4) { animation-delay: .36s; }
@keyframes deck-key { 0% { transform: scale(1); } 40% { transform: scale(.78); } 100% { transform: scale(1); } }
@keyframes deck-key-hover { 0% { transform: scale(1); } 40% { transform: scale(.78); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .soon-icon .k { animation: none; } .soon-icon .k2 { fill: #5AB8FF; } .card.deck .keys4 i { animation: none !important; } }
.soon .prod svg.wd-mark { width: 44px; height: 44px; border-radius: 0; }
.wd-word { font-family: Nunito, ui-rounded, -apple-system, system-ui, sans-serif; font-weight: 900; letter-spacing: -.02em; }   /* the brand wordmark: lowercase, Nunito Black */
.soon .prod .wd-word { font-size: 32px; }
.soon .pill { white-space: nowrap; }
@media (max-width: 640px) { .soon .prod { flex-wrap: wrap; row-gap: 12px; } .soon .prod .pill { margin-left: 0; } }   /* the Coming soon tag drops under the name rather than off the screen */
.soon .pill { margin-left: 14px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #5AB8FF; border: 1px solid rgba(90,184,255,.4); border-radius: 999px; padding: 6px 10px; }
.soon .trust { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.soon-mark svg { width: 100%; max-width: 360px; aspect-ratio: 1; display: block; margin: 0 auto; }
.soon-decks, .soon-band { background: var(--bg); color: var(--fg-2); }
.soon-decks { padding-top: 0; }
.soon-band h2, .soon-decks h2 { color: var(--fg); }
.soon-band .label .dot { background: #5AB8FF; }
.soon-inside { --grad: linear-gradient(92deg, #3b82f6, #a855f7 70%); --accent: #3b82f6; background: var(--bg); color: var(--fg-2); }   /* light tokens: the page's only light chapter */
.soon-inside .stat .num { font-size: clamp(44px, 5vw, 80px); white-space: nowrap; }   /* AES-256 is the widest; keep it on one line */
@media (min-width: 861px) { .soon-inside .stats { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(64px, 9vw, 140px); max-width: none; } }   /* columns as wide as their content, so the gaps between them match */
.chapter.soon-inside::before { background: radial-gradient(60% 50% at 50% 0%, rgba(59,130,246,.12), transparent 70%); }
.devices { position: relative; max-width: 1100px; margin: 0 auto; padding-bottom: 4%; }
.soon-devices { padding-top: var(--s3); overflow-x: clip; }   /* room between the hero and the devices; phone and watch hang past the edges */
.devices .mac { width: 100%; margin: 0 auto; transform-origin: 50% 100%; }   /* as wide as TapLock's */
.devices .dev-phone { transform-origin: 0 100%; }
.devices .dev-watch { transform-origin: 100% 100%; }
.devices .dev-phone { position: absolute; left: -7%; bottom: 0; width: 19%; filter: drop-shadow(0 24px 48px rgba(0,0,0,.6)); }
.devices .dev-watch { position: absolute; right: -8%; bottom: 2%; width: 23%; filter: drop-shadow(0 24px 48px rgba(0,0,0,.6)); }
@media (max-width: 860px) { .devices .dev-phone { left: 0; } .devices .dev-watch { right: 0; } }   /* no room past the edges on a narrow screen */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: var(--s3); align-items: end; }
.shots figure { margin: 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.shots img { display: block; width: min(230px, 100%); }
.shots.phone img { width: min(240px, 100%); }
.shots figcaption { font-size: 15px; max-width: 18em; }
.shots figcaption b { color: var(--fg); font-weight: 600; }
.soon-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.soon-row h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -.035em; margin-top: 12px; }
.soon-row .lead { margin-top: 16px; }
.soon-row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
img.window { display: block; width: 100%; }   /* the window brings its own corners and shadow */
.trays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: var(--s3); align-items: end; }   /* captions on one line */
.trays figure { margin: 0; display: grid; gap: 16px; justify-items: center; }
.trays img { width: min(360px, 100%); }
.trays .stack { align-self: end; }
.gal-wrap.trays { display: block; }   /* the three windows scroll, on every screen */
.gal-wrap.trays .gal { align-items: end; }
.gal-wrap.trays .gal > figure { flex: 0 0 auto; width: min(360px, 78vw); }
.trays figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); }
img.phones { display: block; width: 100%; max-width: 860px; margin: var(--s3) auto 0; }
@media (max-width: 860px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soon-in, .soon-row, .soon-row.flip, .trays { grid-template-columns: 1fr; } .soon-icon { display: none; } .soon-row.flip > div { order: -1; } }   /* one column: the text before its window, every time */
.soon-decks .sec-head h2 { color: var(--fg); }
.soon-decks .label .dot { background: #5AB8FF; }
.soon-band .fine { text-align: left; margin-top: 0; }
/* coming soon: two soft colour fields drift behind the cards; transform only, so it stays cheap */
.soon-get { position: relative; overflow: hidden; background: var(--bg); color: var(--fg-2); }
.sec.soon-get { padding-block: calc(var(--s4) * 1.5); }   /* the last word gets more room than a section */
.soon-get::before, .soon-get::after { content: ""; position: absolute; width: min(52%, 620px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; }   /* sized and placed to fade out before the section edges */
.soon-get::before { left: 4%; top: 14%; background: radial-gradient(closest-side, rgba(90,184,255,.32), transparent); animation: wd-drift-a 16s ease-in-out infinite alternate; }
.soon-get::after { right: 4%; bottom: 6%; background: radial-gradient(closest-side, rgba(191,140,255,.30), transparent); animation: wd-drift-b 19s ease-in-out infinite alternate; }
@keyframes wd-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(22%, 6%) scale(1.06); } }
@keyframes wd-drift-b { from { transform: translate(0, 0) scale(1.04); } to { transform: translate(-22%, -6%) scale(.96); } }
.soon-get > .wrap { position: relative; z-index: 1; }
.soon-get h2 { color: var(--fg); }
.soon-get h2 .grad {   /* blue, purple, blue, purple: two turns across twice the width, slid by one width, so the loop has no seam */
  background-image: linear-gradient(90deg, #3b82f6, #a855f7, #3b82f6, #a855f7, #3b82f6); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-loop 3s linear infinite; }
@keyframes grad-loop { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .soon-get h2 .grad { animation: none; } }
.soon-get .label .dot { background: #5AB8FF; }
.cards.get .card { background: rgba(14,17,26,.72); border-color: rgba(255,255,255,.08); }
.cards.get .ic { background: #0B0F16; border: 1px solid rgba(255,255,255,.1); color: #fff; }
.cards.get .ic.plat svg { fill: currentColor; }
.cards.get .ic .i-apple { width: 22px; height: 27px; }
.cards.get .ic .i-win { width: 22px; height: 22px; }
.cards.get .soon-btn { background: transparent; color: #5AB8FF; border: 1px solid rgba(90,184,255,.45); cursor: default; }
.cards.get .soon-btn:hover { opacity: 1; }
.cards.get .req { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.soon-get .fine { margin-top: var(--s2); }
@media (prefers-reduced-motion: reduce) { .soon-get::before, .soon-get::after { animation: none; } }   /* no top padding above it, so its margin would escape the section */
.card.deck { background: var(--fill); align-items: flex-start; text-align: left; }
.cards.decks { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* four decks, one row */
@media (max-width: 960px) { .cards.decks { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }

.card.deck .sub { font-size: 15px; }
.keys4 { display: grid; grid-template-columns: repeat(2, 26px); gap: 6px; padding: 10px; border-radius: 16px; background: #0B0F16; border: 1px solid #2A3442; margin-bottom: 8px; }
.keys4 i { width: 26px; height: 26px; border-radius: 8px; display: block; }
.soon-decks .fine { text-align: left; }

/* phones: the products fold into an Apps menu beside Tools (GitHub is in the footer); the open product's name sits in the middle,
   and the path stays */
.nav-apps { display: none; }
.dd-menu.apps a { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.dd-menu.apps img { grid-row: span 2; width: 28px; height: 28px; border-radius: 7px; }
.dd-menu.apps b { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.dd-menu.apps b { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dd-menu.apps .plats { font-size: 13px; }   /* which systems, at the right edge */
.dd-menu.apps .plats::before { display: none; }
.soon-tag { margin-left: 6px; padding: 2px 6px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; color: #3b82f6; opacity: .9; }   /* not released yet: Wristdeck's blue */
.dd-menu.apps b > span:first-child { color: var(--fg); font-size: inherit; }   /* the name, not the menu's muted line */
.bill-top { display: flex; align-items: center; gap: 16px; }
.bill h2 .wd-word { font-size: .8em; letter-spacing: -.035em; }   /* the wordmark runs wider than the display face; the logos stay on its line */
.dark .bill-top img, .dark .prod img { outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px; }   /* a dark icon's edge, which the black page would swallow */
.bill-top .soon-tag { margin: 0; font-size: 11px; padding: 4px 10px; color: #5AB8FF; }   /* on the home page, beside the icon */
.dd-menu.apps .soon-tag { font-size: 9px; vertical-align: 3px; color: #3b82f6; }
.soon-tag.early, .dd-menu.apps .soon-tag.early, .bill-top .soon-tag.early { color: #f59e0b; }   /* released, but early: the same tag as Soon, in amber (not .beta: the guide's filled badge has that name) */
.hero .prod .soon-tag { font-size: 11px; padding: 4px 9px; vertical-align: middle; margin-left: 12px; }
@media (max-width: 1024px) {   /* once the products and the name in the middle no longer fit side by side */
  .nav-links { gap: 18px; }
  .nav-links > a { display: none; }
  .nav-apps { display: block; }
}
.lbl-narrow, .dd-tools { display: none; }
.dd-tools .dd-h { margin: 6px 0 0; padding: 12px 12px 4px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dd-menu.apps .dd-tools a { grid-template-columns: minmax(0, 1fr); }   /* a tool has no icon */
.dd-menu.apps .dd-tools b { display: block; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0; }
@media (max-width: 480px) {   /* Apps and Tools side by side would run into the name in the middle: one menu */
  .nav-tools, .lbl-wide, .nav-apps .chev { display: none; }
  .lbl-narrow { display: block; width: 18px; height: 18px; fill: currentColor; }   /* a 3 x 3 grid of dots: every app and tool */
  .nav-apps .dd-top { display: flex; padding: 6px; margin: -6px; }   /* a bigger target than the icon itself; a box, not a line of text, so it sits in the middle */
  .dd-tools { display: grid; }
  .dd-top.on-narrow { color: var(--fg); font-weight: 500; }
  .dd-menu.apps { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }   /* the apps and the tools: it scrolls if the phone is short */
}
@media (max-width: 640px) {
  .brand i, .brand a + a:not(:last-child), .brand a:first-child:not(:last-child) b { display: none; }
  .nav-in:has(.nav-prod.on) .brand a + a { display: none; }   /* with the name in the middle, the path shortens to ~/apps */
  .nav-in:has(.nav-prod.on) .brand a:first-child b { display: inline; }
  .nav-prod { font-size: 15px; }
  .nav-prod img, .nav-prod svg { width: 20px; height: 20px; }
}

/* ---------- hero ---------- */
.hero { padding-block: var(--s3) 0; overflow: hidden; }
.hero-text { display: grid; gap: 22px; max-width: 800px; }
.hero h1 { font-size: clamp(46px, 7.6vw, 104px); line-height: .96; letter-spacing: -.04em; }
.prod { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -.03em; color: var(--fg); }   /* which app this is: icon, name, platforms */
.prod img { width: 44px; height: 44px; border-radius: 10px; }
.prod .plats { font-size: .6em; margin-left: .7em; }
.prod .ver { margin-left: 14px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }   /* latest release, read at build time */
.prod .ver:hover { color: var(--fg); text-decoration: none; }
.claim { font-size: clamp(19px, 2vw, 23px); line-height: 1.4; max-width: 34em; }
.hero-note { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 18px; }
.hero-note b { color: var(--fg); font-weight: 500; }
.actions { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--fg); color: var(--bg); font-weight: 500; font-size: 15px; padding: 11px 18px; border-radius: 8px; border: 0; }
.btn:hover { text-decoration: none; opacity: .88; }
.hero .btn {   /* the page's gradient; with colors.btn (.flow) a longer one that slides on hover, back to its start so the loop is seamless */
  background: var(--grad); background-position: 0% 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25);
  font-weight: 600; font-size: 17px; padding: 15px 30px; border-radius: 12px;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.hero.flow .btn { background: var(--btn); background-size: 500% 100%; }
.hero .btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 34px -10px var(--btn-glow, rgba(12,13,16,.3)); }
.hero.flow .btn:hover { animation: btn-flow 4s linear infinite; }
@keyframes btn-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .hero .btn:hover { animation: none; } }
.cmd { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg-2); background: var(--fill); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; min-width: 0; }
.cmd .p { color: var(--accent); user-select: none; }
.cmd button { background: transparent; border: 0; color: var(--muted); padding: 0 0 0 6px; font-family: var(--mono); font-size: 12px; }
.cmd button:hover { color: var(--fg); }
.hero .hero-media { margin-top: var(--s4); transform-origin: 50% 0; }   /* starts at .65 and grows to 1 as it scrolls in (JS, data-grow); .hero prefix so .mac's margin does not win */
.hero-text > * { animation: rise .9s var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay: .08s; }
.hero-text > :nth-child(3) { animation-delay: .16s; }
.hero-text > :nth-child(4) { animation-delay: .24s; }
.hero-media { animation: fadein 1.1s var(--ease) .32s both; }   /* opacity only: the scroll transform must stay in charge */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 734px) { .hero .hero-media { margin-top: var(--s3); } }

/* ---------- the laptop: a screenshot reads as a product ---------- */
.mac { width: 100%; margin: 0 auto; max-width: 1100px; }   /* width set, so it also fills a grid cell */
.mac-screen { background: #0a0a0b; border-radius: 18px 18px 0 0; padding: 12px 12px 0; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.mac-screen > img, .mac-screen > .screen { border-radius: 8px 8px 0 0; width: 100%; }
.mac-base { height: 16px; background: linear-gradient(#e9eaee, #c3c6cc); border-radius: 0 0 12px 12px; box-shadow: 0 22px 50px rgba(12,13,16,.18), inset 0 1px 0 rgba(255,255,255,.7); }
.mac-base::after { content: ""; display: block; width: 14%; height: 5px; margin: 0 auto; background: #9a9ca3; border-radius: 0 0 5px 5px; }
.dark .mac-base { background: linear-gradient(#3a3d44, #1f2227); box-shadow: 0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.dark .mac-base::after { background: #15171b; }
@media (max-width: 734px) { .mac-screen { padding: 7px 7px 0; border-radius: 11px 11px 0 0; } .mac-base { height: 11px; } }

/* Composed screen: a desktop gradient in the product's colour, a menu bar, and the real panel on top. */
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--desk); }
.screen.grey { --desk: linear-gradient(160deg, #2b2b2e 0%, #17171a 100%); }
.screen .bar { position: absolute; inset: 0 0 auto; height: 3.2%; background: rgba(0,0,0,.35); }
.screen .shot { position: absolute; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); transform: scale(.985); }
.screen .shot.on { opacity: 1; transform: none; }
.screen .shot:not(.on) { pointer-events: none; }   /* a picker's hidden shots, stacked on top, must not take the click */
.screen .menu { left: 50%; top: 3.2%; translate: -50% 0; width: 26%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.screen .hud  { left: 50%; bottom: 7%; translate: -50% 0; width: 24%; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.screen .win  { left: 50%; top: 50%; translate: -50% -50%; width: 42%; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.screen .full { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .mid  { left: 50%; top: 50%; translate: -50% -50%; width: 34%; }
.screen .top  { left: 50%; top: 4%; translate: -50% 0; width: 26%; }
.screen .tall { left: 50%; top: 50%; translate: -50% -50%; height: 88%; width: auto; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }   /* a portrait window: sized by the screen's height */
@media (max-width: 734px) { .screen .menu { width: 44%; } .screen .hud { width: 46%; } .screen .win { width: 80%; } .screen .mid { width: 58%; } .screen .top { width: 48%; } }
/* a countdown on the stage: each number pops in from .65 to 1, in turn, every time its option is picked */
.count span { display: inline-block; opacity: 0; transform: scale(.65); }
.shot.on.count span { animation: pop .6s var(--ease) both; }
.shot.on.count span:nth-child(2) { animation-delay: .45s; }
.shot.on.count span:nth-child(3) { animation-delay: .9s; }
@keyframes pop { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .count span, .shot.on.count span { animation: none; opacity: 1; transform: none; } }

/* ---------- section heads, stats ---------- */
.sec { padding-block: var(--s4); }
.sec-head { display: grid; gap: 18px; max-width: 760px; }
.sec-head h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.035em; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.lead { font-size: 17px; max-width: 36em; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: var(--s3); max-width: 960px; }
.stat .pre { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat .num { font-family: var(--display); font-weight: 600; color: var(--fg); font-size: clamp(52px, 6.4vw, 96px); line-height: 1; letter-spacing: -.04em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.stat .num.grad { color: transparent; width: fit-content; }   /* the gradient spans the number, not the column */
.stat .post { margin-top: 12px; max-width: 18em; font-size: 15px; }
@media (max-width: 860px) { .sec { padding-block: var(--s3); } .stats { grid-template-columns: 1fr; gap: 40px; margin-top: var(--s2); } }

/* ---------- picker: segmented control, laptop stage, one caption per option ---------- */
.seg-wrap { display: flex; justify-content: center; margin: var(--s3) 0 var(--s2); overflow-x: auto; scrollbar-width: none; }
.seg-wrap::-webkit-scrollbar { display: none; }
.stats + .mac { margin-top: calc(var(--s3) + var(--s1)); }   /* a picker with one option has no buttons: the same room they would take */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); border: 1px solid var(--line); }
.fill .seg { background: var(--bg); }
.seg button { border: 0; background: transparent; color: var(--fg-2); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease); }
.seg button.on { background: var(--fg); color: var(--bg); }
.seg-wrap.left { justify-content: flex-start; }
.stage-cap { margin: 32px auto 0; max-width: 36em; text-align: center; font-size: 19px; line-height: 1.4; }
.stage-cap p { display: none; }
.stage-cap p.on { display: block; }
.stage-cap b { color: var(--fg); font-weight: 500; }
@media (max-width: 734px) { .seg-wrap { justify-content: flex-start; } .seg button { padding: 8px 13px; font-size: 13px; } }

/* ---------- tiles and galleries ---------- */
.gal-wrap { margin-top: var(--s3); }
.gal { --tile: min(380px, 82vw); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 6px var(--gutter) 10px; padding-right: max(var(--gutter), calc((100% - var(--tile)) / 2)); scrollbar-width: none; }   /* room at the end, so the last tile can be centred by a pill or a paddle */
.gal::-webkit-scrollbar { display: none; }
/* no smooth scrolling in CSS: a reload would otherwise animate the browser's restore of the old position; the paddles and pills
   ask for smooth themselves. The ends of a row of screenshots snap to the edges, so nothing shifts once the images have their size;
   a tile row keeps its last tile centred, or its centre and the end sit 16px apart and the last paddle step barely moves. */
.gal-wrap .gal > figure { scroll-snap-align: center; }
.gal-wrap .gal > :first-child { scroll-snap-align: start; }
.gal-wrap .gal > figure:last-child { scroll-snap-align: end; }
.gal-wrap.shots { display: block; }   /* device screens in a scrolling row, with the paddles */
.gal-wrap.shots .gal > figure { flex: 0 0 auto; width: min(280px, 64vw); }
.gal.fits { overflow-x: hidden; scroll-snap-type: none; }   /* every tile is already visible: no scrolling, no paddles */
.tile { position: relative; flex: 0 0 auto; width: var(--tile); height: 560px; scroll-snap-align: center; display: flex; flex-direction: column; border-radius: 16px; background: var(--fill); border: 1px solid var(--line); overflow: hidden; color: var(--fg-2); }
.tile[data-more] .tile-text { padding-right: 72px; }
.tile-plus { position: absolute; right: 20px; bottom: 20px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: transform .2s var(--ease); }
.tile-plus:hover { transform: scale(1.08); }
.tile-plus::before { content: "+"; margin-top: -2px; }
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.tabs button { border: 1px solid var(--line); background: var(--bg); color: var(--fg-2); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-family: var(--mono); letter-spacing: .02em; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.tabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* what "+" opens */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(5,5,7,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 22px; }
.modal.on { display: flex; }
.modal-box { position: relative; background: var(--bg); color: var(--fg-2); border-radius: 16px; max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; padding: 44px 44px 40px; display: grid; gap: 14px; animation: rise .35s var(--ease) both; }
.modal-box h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.08; }
.modal-box .more { font-size: 17px; line-height: 1.55; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.lightbox { position: fixed; inset: 0; z-index: 61; background: rgba(5,5,7,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: max(5vh, 56px) 4vw; cursor: zoom-out; }   /* a screenshot at full size (site.js) */
.lightbox.on { display: flex; flex-direction: column; gap: 18px; }
.lightbox img { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: rise .35s var(--ease) both; }
.lightbox .lb-cap { flex: none; max-width: 640px; text-align: center; color: #d4d4d8; display: grid; gap: 6px; }   /* the caption, or a tile's label and title */
.lightbox .lb-cap p { font-size: 15px; } .lightbox .lb-cap .label { color: #a1a1aa; font-size: 11px; } .lightbox .lb-cap h3 { color: #fff; font-size: 20px; line-height: 1.2; }
.lightbox .modal-close { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
[data-zoom] { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .lightbox img { animation: none; } }
@media (max-width: 640px) { .modal-box { padding: 36px 24px 28px; } }
.tile.wide { width: min(780px, 90vw); }
.tile.white { background: var(--bg); }
.tile.dark { border-color: #1f2227; }
.tile-media { flex: 0 0 400px; height: 400px; display: flex; align-items: center; justify-content: center; padding: 32px 32px 0; overflow: hidden; }
.tile-media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.tile-media.bleed { padding: 0; }
.tile-media.bleed img { width: 100%; height: 100%; max-height: none; object-fit: cover; }   /* full-screen overlays only; nothing is lost at the edges */
.tile-text { flex: 1; padding: 20px 28px 26px; display: grid; gap: 6px; align-content: start; }
.tile-text .label { font-size: 11px; }
.tile-text h3 { font-size: 21px; line-height: 1.15; letter-spacing: -.015em; }
.tile-text p { font-size: 14px; }
.giant { font-family: var(--display); font-weight: 600; font-size: clamp(56px, 6vw, 96px); line-height: 1; letter-spacing: -.04em; color: var(--fg); text-align: center; }
.giant.md { font-size: clamp(32px, 3vw, 46px); letter-spacing: -.03em; }
.giant.grad { color: transparent; }
.panel { filter: drop-shadow(0 18px 36px rgba(12,13,16,.22)); }
.dots { display: flex; gap: 10px; }
.dots span { width: 40px; height: 40px; border-radius: 50%; display: block; }
.kbd { display: grid; grid-template-columns: repeat(10, 10px); gap: 4px; }
.kbd span { height: 10px; border-radius: 2px; background: var(--fg); opacity: .85; }
.kbd span.sp { grid-column: 3 / 9; }
.keys { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.key { font-family: var(--mono); font-size: 20px; color: var(--fg); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 8px; padding: 8px 12px; min-width: 46px; text-align: center; background: var(--bg); }
.tile.dark .key { background: var(--fill); }
.paddles { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.paddles[hidden] { display: none; }
.paddles button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--fg); display: grid; place-items: center; font-size: 18px; line-height: 1; }
@media (max-width: 640px) { .tile { height: 500px; } .tile-media { flex-basis: 340px; height: 340px; padding: 24px 24px 0; } .gal-wrap { margin-top: var(--s2); } }

/* ---------- row: text beside one visual ---------- */
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: center; }
.row.flip > .row-text { order: 2; }
.row-text { display: grid; gap: 16px; }
.row h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.02; }
.row .more { font-size: 15px; }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; gap: 28px; } .row.flip > .row-text { order: 0; } }

/* ---------- wash: a colour gradient across the whole section, a big logo'd gradient title, then the row ---------- */
.wash.win { background: linear-gradient(180deg, #d6e5fb 0%, #eef4fd 45%, #ffffff 100%); }
.wash-title { display: flex; align-items: center; gap: .2em; font-size: clamp(44px, 6.4vw, 92px); line-height: 1; margin-bottom: var(--s2); }
.wash-title .logo { width: .72em; height: .72em; flex: none; fill: #0078d4; }
.wash-title .giant { font-size: inherit; text-align: left; letter-spacing: -.04em; }
.wash .more .grad { font-weight: 500; }            /* the gradient sits on an inline span, so it spans the text, not the grid cell */
.wash .more:hover { text-decoration-color: #7c3aed; }

/* ---------- drill: a sub-section that opens under its section (Details ↓); linkable by its #id ---------- */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.drill-btn { border: 0; background: none; padding: 0; font-size: 15px; font-weight: 500; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.drill-btn .chev { display: inline-block; transition: transform .4s var(--ease); }
.drill-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drill { --bleed: max(0px, (100vw - var(--w)) / 2); --pad: max(24px, var(--bleed)); margin-inline: calc(-1 * var(--bleed)); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); scroll-margin-top: 30vh; }   /* opening stops with the parent row still in view above it */
.drill.open { grid-template-rows: 1fr; }
.drill > div { min-height: 0; overflow: hidden; }
.drill-in { position: relative; margin: var(--s3) 0 4px; padding: var(--s2) var(--pad); border: 1px solid #d9def8; border-radius: 24px; background: linear-gradient(135deg, #e2edfc 0%, #ece6fd 100%); opacity: 0; transform: translateY(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.drill.open .drill-in { opacity: 1; transform: none; transition-delay: .15s; }
.drill-in::before { content: ""; position: absolute; left: -1px; top: 40px; bottom: 40px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #0078d4, #7c3aed); }   /* the parent's colours mark it as part of that section */
.drill-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.crumb b { color: #0078d4; font-weight: 400; }
.drill-block { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.drill-top + .drill-block { border-top: 0; padding-top: 0; }
.drill h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
.drill .lead { margin-top: 12px; }
.drill .seg-wrap { margin: var(--s1) 0; }
.drill .mac { max-width: 820px; }
.drill .stage-cap { font-size: 17px; margin-top: var(--s1); }
.drill .stats { margin-top: var(--s1); }
.drill .stat .num { font-size: clamp(40px, 4.6vw, 64px); }
.drill .ledger { margin-top: var(--s1); }
.drill .fine { text-align: left; }
.drill .gal-wrap { margin-top: var(--s1); }
.drill .gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 6px 0 10px; }   /* six cards, a 3 x 2 grid: nothing to scroll, nothing cut */
.drill .tile { width: auto; height: 400px; background: var(--bg); }
@media (max-width: 900px) { .drill .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .drill .gal { grid-template-columns: 1fr; } }
.drill .tile.dark { background: var(--fill); }
.drill .tile-media { flex-basis: 250px; height: 250px; }
.drill .tile-text h3 { font-size: 18px; }
.drill .tile[data-more] .tile-text { padding-right: 64px; }
.drill-block.dark { border-top: 0; margin-inline: calc(-1 * var(--pad)); padding: var(--s3) var(--pad); background: var(--bg); color: var(--fg-2); }   /* a black chapter inside the panel, edge to edge */
.drill-block.dark h3 { color: var(--fg); font-size: clamp(32px, 4vw, 56px); letter-spacing: -.04em; line-height: 1; margin-top: 12px; }
.drill-block.dark .lead b { color: var(--fg); }
.drill-block.dark + .drill-block { border-top: 0; }
.dark-next { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.drill-block.dark .stats { max-width: none; text-align: center; }   /* centred across the panel, captions on one line */
.drill-block.dark .stat .num { margin-inline: auto; }
.drill-block.dark .stat .post { max-width: none; margin-inline: auto; }
.drill-end { display: flex; justify-content: center; margin-top: var(--s2); }
/* the panel runs nearly edge to edge (8px off the viewport at most); its content lines up with the section above. Only vw in the maths, so children can reuse --pad */

/* ---------- FAQ: one list per product, from the repo's docs/faq.md ---------- */
.faq { max-width: 860px; margin: var(--s2) auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; font-size: 19px; font-weight: 600; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 20px; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { display: grid; gap: 12px; padding: 0 40px 24px 0; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.faq code, .guide-body code { font-family: var(--mono); font-size: .88em; background: var(--fill); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.faq a, .guide-body a { color: var(--accent); }
.faq-more { text-align: center; margin-top: var(--s2); }
/* the whole list folds away under its heading until asked for */
.faq-toggle { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: var(--s1); }   /* the guide sits beside the toggle: a different thing, always in view */
.faq-toggle .more { font-size: 15px; font-weight: 500; }
.faq-toggle .more { padding-left: 28px; border-left: 1px solid var(--line); line-height: 1.2; }   /* the same divider as GitHub's in the nav */
.guide-go { display: flex; justify-content: center; margin-top: var(--s1); font-size: 17px; font-weight: 500; }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq-body.open { grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; min-height: 0; }
.faq details { overflow: hidden; }   /* each answer slides open and shut (JS below), in every browser */
.src { margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- guide: the repo's docs/guide.md in the site's frame ---------- */
.guide-head { padding-block: var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.guide-head .crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.guide-head .crumbs a { color: inherit; }
.guide-head h1 { margin-top: 14px; font-family: var(--display); font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.04em; color: var(--fg); }
.guide-head .lead { margin-top: 18px; max-width: 46ch; }
.guide-sec { padding-block: var(--s3) var(--s4); }
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; align-items: start; }
.guide-toc { position: sticky; top: 84px; display: grid; gap: 10px; font-size: 15px; }
.guide-toc a { color: var(--fg-2); }
.guide-toc a:hover { color: var(--fg); }
.guide-toc .src { text-align: left; margin-top: 20px; line-height: 1.8; }
.guide-toc .toc-back { font-weight: 600; color: var(--fg); margin-bottom: 18px; }   /* the way back, always in view while the sidebar sticks */
.guide-body { min-width: 0; max-width: 760px; color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.guide-body h2 { font-family: var(--display); font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.03em; line-height: 1.05; color: var(--fg); margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.guide-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-body h3 { font-size: 22px; font-weight: 600; color: var(--fg); margin-top: 44px; }
.guide-body h4 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 32px; }
.guide-body p, .guide-body ol, .guide-body ul, .guide-body .term, .guide-body .tbl { margin-top: 14px; }
.guide-body ol, .guide-body ul { padding-left: 1.3em; display: grid; gap: 6px; }
.guide-body b { color: var(--fg); font-weight: 600; }
.guide-body h2 code, .guide-body h3 code { background: none; border: 0; padding: 0; font-size: .86em; }   /* a heading that is a setting name stays a heading */
.tbl { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-table th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.doc-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table td:first-child { white-space: nowrap; }
/* a guide made of several docs: one shows at a time */
.gpage { display: none; }
.gpage.on { display: block; }
.gpage-title + h2 { margin-top: 48px; padding-top: 0; border-top: 0; }
.gpage-title { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; font-size: clamp(36px, 4vw, 52px) !important; }
.guide-toc.multi .toc-sub .src { text-align: left; margin-top: 6px; }   /* the open page's source, as on a one-page guide */
.guide-toc.multi .toc-page button { border: 0; background: none; padding: 0; font: inherit; color: var(--fg-2); text-align: left; cursor: pointer; }
.guide-toc.multi .toc-page.on button { color: var(--fg); font-weight: 600; }
.guide-toc.multi .toc-sub { display: none; gap: 8px; padding: 10px 0 6px 14px; border-left: 1px solid var(--line); margin: 8px 0 4px 2px; font-size: 14px; }
.guide-toc.multi .toc-page.on .toc-sub { display: grid; }
.guide-body pre { white-space: pre; }
.beta { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #854d0e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 4px; padding: 1px 5px; vertical-align: 2px; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; gap: 32px; } .guide-toc { position: static; } .faq .a { padding-right: 0; } }

/* ---------- motion, round two ---------- */
/* Advanced: the schedule panel, drawn in HTML */
.sched { width: 100%; max-width: 300px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 20px 40px rgba(12,13,16,.08); font-size: 13px; color: var(--fg-2); }
.sched-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sched .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sched .days span { display: grid; place-items: center; height: 28px; border-radius: 7px; background: var(--fill); font-weight: 600; font-size: 12px; color: var(--muted); }
.sched .days span.on { background: var(--accent); color: #fff; }
.sched .row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.sched .row b { font-weight: 500; color: var(--fg); }
.sched .row span { font-family: var(--mono); font-size: 12px; }
.sched .sw { width: 30px; height: 18px; border-radius: 9px; background: var(--accent); position: relative; }
.sched .sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.sched .next { font-family: var(--mono); font-size: 11px; color: var(--accent); }
/* Breathing: the glow in the screenshot breathes, only while that theme is picked */
.breath { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border-radius: 50%; background: radial-gradient(closest-side, rgba(34,197,94,.34), rgba(34,197,94,.1) 55%, transparent); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.shot.full.on ~ .breath { opacity: 1; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.82); opacity: .45; } 50% { transform: scale(1.08); opacity: 1; } }
/* ledgers: rows arrive one after another */
.ledger.rv > div { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.ledger.rv.in > div { opacity: 1; translate: 0 0; }
.ledger.rv > div:nth-child(1) { transition-delay: 0.15s; }
.ledger.rv > div:nth-child(2) { transition-delay: 0.20s; }
.ledger.rv > div:nth-child(3) { transition-delay: 0.25s; }
.ledger.rv > div:nth-child(4) { transition-delay: 0.30s; }
.ledger.rv > div:nth-child(5) { transition-delay: 0.35s; }
.ledger.rv > div:nth-child(6) { transition-delay: 0.40s; }
.ledger.rv > div:nth-child(7) { transition-delay: 0.45s; }
.ledger.rv > div:nth-child(8) { transition-delay: 0.50s; }
.ledger.rv > div:nth-child(9) { transition-delay: 0.55s; }
.ledger.rv > div:nth-child(10) { transition-delay: 0.60s; }
.ledger.rv > div:nth-child(11) { transition-delay: 0.65s; }
.ledger.rv > div:nth-child(12) { transition-delay: 0.70s; }
/* terminals that print: lines appear in turn (JS) */
.term[data-type] .ln { visibility: hidden; }
.term[data-type] .ln.on { visibility: visible; }
/* cards lift under the pointer */
.cards .card, .explore a { transition: opacity .9s var(--ease), transform .9s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.cards .card:hover, .explore a:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(12,13,16,.1); }
@media (prefers-reduced-motion: reduce) { .breath, .shot.full.on ~ .breath { animation: none; } .ledger.rv > div { opacity: 1; translate: none; } .term[data-type] .ln { visibility: visible; } .cards .card:hover, .explore a:hover { translate: none; } }

/* ---------- the black chapter ---------- */
.chapter { position: relative; padding-block: 160px; overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: 0 0 auto; height: 60%; background: radial-gradient(60% 50% at 50% 0%, var(--glow-d, rgba(74,222,128,.14)), transparent 70%); pointer-events: none; }
.chapter > .wrap { position: relative; }
.chapter .sec-head h2 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -.04em; line-height: .98; }
.chapter .stats { margin-top: 96px; }
.chapter .row { margin-top: 128px; }
.chapter .row h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; }
@supports (animation-timeline: view()) {
  .chapter { animation: darken linear both; animation-timeline: view(); animation-range: entry 0% entry 22%; }
  @keyframes darken { from { background-color: #ffffff; } to { background-color: #050507; } }
  .chapter.soon-inside { animation-name: lighten; }   /* Wristdeck's runs the other way: black page, light chapter */
  @keyframes lighten { from { background-color: #050507; } to { background-color: #ffffff; } }
}
@media (max-width: 860px) { .chapter { padding-block: 110px; } .chapter .stats { margin-top: 64px; } .chapter .row { margin-top: 80px; } }

/* ---------- terminal ---------- */
.term { background: var(--dark-2); border: 1px solid #26292e; border-radius: 12px; overflow: hidden; min-width: 0; color: #a6acb4; text-align: left; }
.term-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid #26292e; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.term-bar .t { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #80868e; }
.term pre { margin: 0; padding: 20px 22px 24px; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; overflow-x: auto; }
.term.sm pre { padding: 14px 16px 16px; font-size: 12.5px; }
.card .term pre { white-space: pre-wrap; overflow-wrap: anywhere; }   /* a card's command wraps rather than scrolls when the card is narrow */
.term .c { color: #80868e; }
.term .p { color: #4ade80; }
.term .path { color: #22d3ee; }

/* ---------- ledger ---------- */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--line); }
.ledger div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ledger b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; overflow-wrap: anywhere; }   /* a long key, such as an environment variable, wraps inside its column */
.ledger span { color: var(--fg); min-width: 0; }
.chapter .ledger { margin-top: 96px; }
.sec-head + .ledger { margin-top: var(--s2); }
.stage-cap + .ledger { margin-top: var(--s3); }
@media (max-width: 760px) { .ledger { grid-template-columns: 1fr; } .ledger div { grid-template-columns: 120px minmax(0, 1fr); } }

/* ---------- cards: compare, get, explore ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--s3); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; align-items: stretch; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 36px 28px 28px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.card .ic { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: 20px; }
.card .ic img { width: 56px; height: 56px; border-radius: 14px; }
.cards .card .ic:has(> img) { background: none; }   /* the dark ground is for a text icon like >_; behind a light app icon it shows as a black ring */
.cards > .card { min-width: 0; }   /* a long command scrolls inside its terminal instead of widening the card */
.card h3 { font-size: 22px; margin-top: 8px; }
.card .sub { font-size: 14px; color: var(--muted); }
.card .btn { margin-top: 10px; }
.card .term { width: 100%; margin-top: 12px; }
.card dl { width: 100%; margin: 16px 0 0; border-top: 1px solid var(--line); }
.card dl > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.card dt { font-weight: 500; color: var(--fg); font-size: 15px; }
.card dd { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.card dl > div.no dt { color: var(--muted); font-weight: 400; }
.card .links { display: flex; gap: 18px; font-size: 14px; margin-top: auto; padding-top: 8px; }
@media (max-width: 560px) {   /* phones: two smaller cards a row */
  .cards.decks { gap: 10px; }
  .cards.decks .card.deck { padding: 18px 16px 16px; gap: 6px; }
  .cards.decks .card.deck h3 { font-size: 17px; margin-top: 4px; }
  .cards.decks .card.deck .sub { font-size: 13px; }
  .keys4 { grid-template-columns: repeat(2, 18px); gap: 4px; padding: 7px; border-radius: 12px; margin-bottom: 4px; }
  .keys4 i { width: 18px; height: 18px; border-radius: 6px; }
}/* platform groups: an outer card per platform, logo + mono label on top, product cards inside */
.groups { display: grid; grid-template-columns: var(--cols); gap: 20px; margin-top: var(--s3); }   /* --cols from the cards in each group (compare.html) */
.group { border: 1px solid var(--line); border-radius: 22px; padding: 18px; background: rgba(255,255,255,.55); display: grid; gap: 14px; align-content: start; min-width: 0; }
.group.win { background: linear-gradient(180deg, #e6effc 0%, #ffffff 70%); border-color: #d2e2f6; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 0; }
.group-head .logo { width: 20px; height: 20px; flex: none; fill: var(--fg); }
.group.win .logo { fill: #0078d4; }
.group .cards { margin-top: 0; gap: 14px; max-width: none; margin-inline: 0; }
.group .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group .cards.one { grid-template-columns: 1fr; }
.group .card { padding: 32px 24px 24px; }
@media (max-width: 960px) { .groups { grid-template-columns: 1fr; } .group .cards.two { grid-template-columns: 1fr; } }
.fine { font-size: 13px; color: var(--muted); text-align: center; margin-top: 28px; }
.fine code { font-family: var(--mono); font-size: 12px; }
.explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--s2); }
.explore.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
.explore a { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 36px 24px 32px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); color: var(--fg-2); }
.explore a:hover { text-decoration: none; border-color: var(--muted); }
.explore img { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 8px; }
.explore h3 { font-size: 20px; }
.explore span { color: var(--accent); font-size: 14px; margin-top: 6px; }
@media (max-width: 960px) { .cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .cards.two, .explore, .explore.two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home ---------- */
.intro { padding-block: 96px 72px; display: grid; gap: 18px; max-width: 800px; }
.intro h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: .98; letter-spacing: -.04em; }
.intro > * { animation: rise .9s var(--ease) both; }
.intro > :nth-child(2) { animation-delay: .08s; } .intro > :nth-child(3) { animation-delay: .16s; }
.bill { position: relative; overflow: hidden; }
.bill.dark::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: radial-gradient(50% 50% at 70% 0%, var(--glow, rgba(74,222,128,.14)), transparent 70%); pointer-events: none; }
.bill-in { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; align-items: center; padding-block: 110px; }
.bill-text { display: grid; gap: 14px; }
.bill-text img { width: 56px; height: 56px; border-radius: 13px; }
.bill h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.035em; }
.bill .claim { font-size: 18px; }
.plats { display: inline-flex; align-items: center; gap: .45em; vertical-align: middle; color: var(--muted); }   /* platforms, logos only */
.plats::before { content: ""; align-self: stretch; width: 1px; margin: .1em .5em .1em 0; background: currentColor; opacity: .45; }   /* the divider between the name and the logos */
.plats svg { fill: currentColor; align-self: flex-end; }   /* bottoms aligned: the apple leaf would pull a centred pair off */
.plats .i-apple { width: .815em; height: 1em; }   /* viewBoxes are cropped to each glyph, so the two read the same size */
.plats .i-win { width: .74em; height: .74em; }
.bill h2 .plats { font-size: .4em; margin-left: 1.2em; }
.bill .links { display: flex; gap: 20px; font-size: 16px; font-weight: 500; margin-top: 6px; }
.bill .links a:hover { text-decoration: none; }
.bill + .bill:not(.dark) { border-top: 1px solid var(--line); }
@media (max-width: 860px) { .bill-in { grid-template-columns: 1fr; gap: 24px; padding-block: 72px; } }
.tools { padding-block: 120px 150px; }
.tools h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 12px 0 26px; }
.tlist { border-top: 1px solid var(--line); }
.tlist a { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: 15px; align-items: baseline; }
.tlist a b { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--fg); }   /* plain here; a tool's colour lives on its own page */
.tlist a span:last-child { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tlist a:hover { text-decoration: none; color: var(--fg); }
@media (max-width: 640px) { .tlist a { grid-template-columns: 1fr; gap: 4px; } .tlist a span:last-child { display: none; } .tools { padding-block: 80px 100px; } }
/* the tools page: a card per tool, in its colours, with its install line */
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block: var(--s2) var(--s4); }
.tcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--fg-2); overflow: hidden; transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.tcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); }
.tcard:hover { text-decoration: none; translate: 0 -4px; border-color: var(--muted); box-shadow: 0 18px 40px rgba(12,13,16,.1); }   /* as the other cards on the site */
.tcard.rv { transition: opacity .9s var(--ease), transform .9s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }   /* .rv's transition would drop the hover's */
@media (prefers-reduced-motion: reduce) { .tcard:hover { translate: none; } }
.tcard .top { display: flex; align-items: center; gap: 12px; }
.tcard .top img { width: 44px; height: 44px; border-radius: 11px; }
.tcard .top b { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--fg); }
.tcard .meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tcard .meta .ver { border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.tcard p { font-size: 15px; line-height: 1.45; flex: 1; }
.tcard .term pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tcard .go { font-size: 14px; font-weight: 500; }
@media (max-width: 960px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tgrid { grid-template-columns: 1fr; } }

/* ---------- motion ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; } .rv-d3 { transition-delay: .3s; } .rv-d4 { transition-delay: .4s; }
html:not(.js) .rv { opacity: 1; transform: none; }
[data-px] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero-text > *, .hero-media, .intro > * { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .chapter { animation: none; }
  [data-px] { transform: none !important; }
  .gal { scroll-behavior: auto; }
}

/* ---------- numbered steps (How it works) ---------- */
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; border-top: 1px solid var(--line); }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
ol.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 2px; }
ol.steps b { color: var(--fg); font-weight: 500; }

/* LED light for a tile's html: .strip is one glowing strip, .glow fills the whole card behind its text. The colour is currentColor,
   so the glow follows it; .rainbow, .breathe and .cycle play Lumea's effects on either */
.strip { display: block; height: 12px; border-radius: 6px; color: #a855f7; background: currentColor; box-shadow: 0 0 18px 4px currentColor; }
.glow { position: absolute; inset: 0; color: #a855f7; background: radial-gradient(95% 75% at 50% 32%, currentColor, transparent 72%); pointer-events: none; }
.tile:has(.glow) .tile-text { position: relative; }   /* the text above the light */
:is(.strip, .glow).rainbow { color: #ff3b30; animation: led-hue 6s linear infinite; }   /* the whole wheel, from the colour it starts on */
:is(.strip, .glow).breathe { animation: led-breathe 4s ease-in-out infinite; }
:is(.strip, .glow).cycle { animation: led-cycle 10s linear infinite; }   /* glides through presets */
@keyframes led-hue { to { filter: hue-rotate(360deg); } }
@keyframes led-breathe { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
@keyframes led-cycle { 0%, 100% { color: #ff3b30; } 20% { color: #ffcc00; } 40% { color: #34c759; } 60% { color: #5ac8fa; } 80% { color: #af52de; } }
@media (prefers-reduced-motion: reduce) { .strip, .glow { animation: none !important; } }

/* ---------- in-page links ---------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 64px; }   /* clear of the sticky nav */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }