/* Steepbook site. A printed, poster-like look: paper with a fine grain, big condensed "stamp"
   headlines, italic serif labels, flat colour blocks and heavy ink rules, in Steepbook's Matcha &
   Clay colours (matcha green, Yixing clay, pine and a dark leaf green, on warm paper). Body text stays a plain
   sans at a comfortable size and measure; the grain sits under the content, never over the text. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Display faces (SIL OFL): Bricolage Grotesque, variable in width for the condensed headlines,
   and Instrument Serif italic for the hand-set labels. Latin subsets. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 700 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Matcha & Clay (docs/STEEPBOOK.md). Paper and ink */
  --bg: #F6F3EA;
  --bg-alt: #EEEADD;
  --card: #FBF9F2;
  --card-2: #EEEADD;
  --line: #DCD8C6;
  --rule: #1F2A1C;
  --ink: #1A2216;
  --ink-2: #434C3B;
  --ink-3: #5F6856;
  /* Brand: matcha green for titles and big numbers, Yixing clay as the accent, pine for the pin */
  --brand: #4E7A22;
  --brand-ink: #FBFDF5;
  --brand-wash: #E3EDCF;
  --clay: #A0492B;
  --clay-wash: #F6DED3;
  --clay-text: #A0492B;
  --pin: #2F4A36;
  --pin-wash: #DCEADF;
  /* Colour blocks (the same in light and dark, so they read as printed panels) */
  --block-edge: #1F2A1C;
  --block-matcha: #4E7A22;
  --block-matcha-ink: #FBFDF5;
  --block-matcha-accent: #CDE6A3;
  --block-clay: #A0492B;
  --block-clay-ink: #FBF9F2;
  --block-clay-accent: #F6DED3;
  --block-dark: #1F2A1C;
  --block-dark-ink: #F6F3EA;
  --block-dark-accent: #CDE6A3;
  --block-pine: #2F4A36;
  --block-pine-ink: #F2F6EF;
  --block-pine-accent: #CDE6A3;
  --block-paper: #EEEADD;
  --block-paper-ink: #1A2216;
  --block-paper-accent: #A0492B;
  /* Buttons: the spec's Block colour, which flips in dark mode */
  --button-bg: #1F2A1C;
  --button-ink: #CDE6A3;
  --button-hover: #A0492B;
  --button-hover-ink: #FBF9F2;
  --hero-1: #EEEADD;
  --hero-2: #F6F3EA;
  --shadow: 0 30px 60px -20px rgba(20, 34, 12, .28), 0 12px 24px -12px rgba(20, 34, 12, .18);
  --radius: 22px;
  --max: 1180px;
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --script: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Fine paper grain, drawn under the content as a background layer. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.14 0 0 0 0 0.07 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Speckled "printed ink" mask, for the biggest headlines only. */
  --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 11.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  color-scheme: light dark;
}

/* Dark theme: follows the system unless the visitor picked a theme with the header toggle
   (kept for the visit in sessionStorage and applied as html[data-theme] before first paint). */
:root[data-theme="dark"] {
  --bg: #121510;
  --bg-alt: #1A1E17;
  --card: #1A1E17;
  --card-2: #22271E;
  --line: #2E3428;
  --rule: #EEF0E6;
  --ink: #EEF0E6;
  --ink-2: #C3C9B8;
  --ink-3: #9AA190;
  --brand: #A9D46E;
  --brand-ink: #142007;
  --brand-wash: #2A3A1A;
  --clay: #E8946F;
  --clay-wash: #3B2219;
  --clay-text: #E8946F;
  --pin: #9FD0AE;
  --pin-wash: #1F3326;
  --block-paper: #1A1E17;
  --block-paper-ink: #EEF0E6;
  --block-paper-accent: #E8946F;
  --button-bg: #CDE6A3;
  --button-ink: #1A2410;
  --button-hover: #E8946F;
  --button-hover-ink: #1A2410;
  --hero-1: #1A1E17;
  --hero-2: #121510;
  --shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.96 0 0 0 0 0.88 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121510;
    --bg-alt: #1A1E17;
    --card: #1A1E17;
    --card-2: #22271E;
    --line: #2E3428;
    --rule: #EEF0E6;
    --ink: #EEF0E6;
    --ink-2: #C3C9B8;
    --ink-3: #9AA190;
    --brand: #A9D46E;
    --brand-ink: #142007;
    --brand-wash: #2A3A1A;
    --clay: #E8946F;
    --clay-wash: #3B2219;
    --clay-text: #E8946F;
    --pin: #9FD0AE;
    --pin-wash: #1F3326;
    --block-paper: #1A1E17;
    --block-paper-ink: #EEF0E6;
    --block-paper-accent: #E8946F;
    --button-bg: #CDE6A3;
    --button-ink: #1A2410;
    --button-hover: #E8946F;
    --button-hover-ink: #1A2410;
    --hero-1: #1A1E17;
    --hero-2: #121510;
    --shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.96 0 0 0 0 0.88 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grain), var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 64px, var(--max)); } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand); color: var(--brand-ink); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { left: 12px; }

/* Type: condensed stamp headlines for the big moments, a plain sans for everything you read. */
h1, h2 {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--ink);
}
h1 { font-size: clamp(48px, 9vw, 112px); line-height: .9; margin: 18px 0 24px; }
h1 em { font-style: normal; color: var(--brand); }
h2 { font-size: clamp(38px, 6vw, 72px); line-height: .92; margin: 0 0 18px; }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; font-weight: 800; margin: 0 0 8px; }
/* The printed-ink speckle, on the hero headline only. */
.hero h1 { -webkit-mask-image: var(--ink-mask); mask-image: var(--ink-mask); -webkit-mask-size: 320px; mask-size: 320px; }
.eyebrow {
  font-family: var(--script);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay-text);
  margin: 0 0 10px;
}
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 38ch; margin: 0 0 28px; }
.muted { color: var(--ink-2); }
section { scroll-margin-top: 84px; }

/* Header on the page's own paper, like Slow Drip: the wordmark in ink, a dark round menu button and
   theme switch, and an outlined store pill. As on Slow Drip it scrolls away with the page; only
   the round menu button stays, pinned where it sat in the header. */
.site-header {
  position: relative; z-index: 5;
  background: var(--grain), var(--hero-1); color: var(--ink);
}
.site-header .menu-button {
  position: fixed; z-index: 30; top: 12px;
  left: calc((100vw - min(100vw - 32px, var(--max))) / 2);
  box-shadow: 0 6px 18px -8px rgba(15, 25, 8, .45);
}
@media (min-width: 700px) { .site-header .menu-button { left: calc((100vw - min(100vw - 64px, var(--max))) / 2); } }
/* Keeps the button's place in the header grid now that the button itself is fixed. */
.site-header .wrap::before { content: ""; width: 44px; height: 44px; justify-self: start; grid-column: 1; grid-row: 1; }
.site-header .theme-toggle { background: var(--button-bg); color: var(--button-ink); }
/* Round outlined header button (the web app link): an outlined circle the theme switch's size. */
.header-ig { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--rule); color: var(--ink); text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.header-ig:hover { background: var(--button-bg); color: var(--button-ink); border-color: var(--button-bg); }
.header-ig:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.site-header .theme-toggle:hover { background: var(--button-hover); color: var(--button-hover-ink); }
/* Slow Drip's layout: a round menu button, the lockup centred, the store pill and theme switch. */
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; }
.site-header .brand { justify-self: center; }
.header-end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.menu-button {
  justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--button-bg); color: var(--button-ink);
  cursor: pointer; transition: transform .25s ease, background .2s ease;
}
.menu-button:hover { transform: scale(1.06); background: var(--button-hover); color: var(--button-hover-ink); }
.menu-button:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.site-menu-close:focus-visible { outline: 3px solid var(--block-dark-accent); outline-offset: 3px; }
.menu-lines { display: flex; flex-direction: column; gap: 4px; }
.menu-lines span { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor; }
.menu-lines span:nth-child(2) { width: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The menu: a full-screen dark green sheet with the links as big stamp words. */
.site-menu {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--grain), var(--block-dark); color: var(--block-dark-ink);
  --ink: var(--block-dark-ink); --rule: var(--block-dark-ink);
}
.site-menu::backdrop { background: rgba(10, 16, 6, .5); }
.site-menu[open] { animation: menu-in .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-14px); } }
.site-menu-inner { min-height: 100%; display: flex; flex-direction: column; gap: 32px; padding: 14px 0 36px; }
.site-menu-top { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.site-menu-top .brand { color: var(--block-dark-ink); }
.site-menu-close {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--block-dark-ink); background: transparent;
  color: var(--block-dark-ink); font-size: 28px; line-height: 1; cursor: pointer;
}
.site-menu-close:hover { background: var(--block-dark-accent); border-color: var(--block-dark-accent); color: var(--block-dark); }
.site-menu-list { margin: auto 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.site-menu-list a {
  font: 800 clamp(48px, 9vw, 108px)/.95 var(--display); font-stretch: 75%; text-transform: uppercase;
  color: var(--block-dark-ink); text-decoration: none;
}
.site-menu-list a:hover, .site-menu-list a[aria-current="page"] { color: var(--block-dark-accent); }
.site-menu-list a:focus-visible { outline: 3px solid var(--block-dark-accent); outline-offset: 4px; border-radius: 6px; }
.site-menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 32px; }
.site-menu-foot .script { margin: 0; font: italic 400 26px/1.1 var(--script); color: var(--block-dark-accent); }
.site-menu-foot .pill { border-color: color-mix(in srgb, var(--block-dark-ink) 70%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 24px/1 var(--display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--ink); border: 2px solid var(--rule); white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
a.pill { text-decoration: none; }
a.pill:hover { background: var(--button-bg); color: var(--button-ink); border-color: var(--button-bg); }
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 420px) { .brand { font-size: 21px; } .site-header .pill { font-size: 11px; padding: 6px 10px; } }
/* Too narrow for lockup, pill and theme switch together: the hero's store buttons sit just below. */
@media (max-width: 480px) { .site-header .header-end .pill { display: none; } .site-header .header-ig:not(.header-app) { display: none; } .site-header .wrap { grid-template-columns: 92px 1fr 92px; gap: 8px; } .site-header .header-end { gap: 8px; } }

/* Hero, after Slow Drip's landing: a huge centred stamp headline on clean paper. As you scroll it
   lifts away while one phone rises and straightens into the middle, and the pitch and store buttons
   come in either side. Wide screens pin the stage (motion.js writes --p from 0 to 1); phones,
   reduced motion and no-script get the same pieces stacked. */
.hero { background: var(--grain), var(--hero-1); border-bottom: 2px solid var(--rule); }
.hero .pill { background: var(--card); }
.stage { --p: 0; position: relative; }
.stage-pin { padding: clamp(40px, 7svh, 72px) 0 72px; }
.stage-title { text-align: center; padding-inline: 16px; }
.stage-title h1 { font-size: clamp(52px, min(12.2vw, 19svh), 224px); line-height: .86; margin: 28px auto 0; letter-spacing: -.005em; }
.stage-title h1 .line { display: block; }
.stage-phone { width: min(64vw, 300px); margin: 40px auto 0; transform: rotate(-5deg); }
.stage-phone .phone { position: relative; width: 100%; }
.stage-layer { display: grid; gap: 30px; margin-top: 48px; }
.stage-copy .eyebrow { margin-bottom: 10px; }
.stage-pitch { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; font-weight: 600; color: var(--ink); max-width: 34ch; margin: 0 0 22px; }
.readout { display: inline-flex; align-items: center; gap: 18px; padding: 14px 22px; border-radius: 20px; background: var(--card); border: 2px solid var(--rule); }
.readout .num { font: 800 54px/.9 var(--display); font-stretch: 75%; color: var(--brand); }
.readout .meta { display: grid; gap: 8px; }
.readout .unit { font: 700 12px/1 var(--mono); letter-spacing: .14em; color: var(--ink-3); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--pin-wash); color: var(--pin); font-weight: 700; font-size: 13px; }
.hero-note { margin: 22px 0 0; font-size: 15px; color: var(--ink-2); max-width: 40ch; }
@media (min-width: 861px) {
  .stage-layer { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Pinned stage: wide screens with motion (html.motion is only set when motion.js runs). */
@media (min-width: 861px) {
  .motion .stage { height: 235vh; }
  .motion .stage-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; }
  .motion .stage-title {
    position: absolute; inset: 9svh 0 auto;
    opacity: clamp(0, calc(1 - var(--p) * 2.4), 1); transform: translateY(calc(var(--p) * -16svh));
  }
  .motion .stage-phone {
    position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0;
    width: clamp(230px, min(21vw, 36svh), 330px);
    transform: translate(-50%, calc(-50% + (1 - var(--p)) * 48svh)) rotate(calc((1 - var(--p)) * -12deg));
    will-change: transform;
  }
  .motion .stage-layer { display: block; position: relative; height: 100%; margin: 0 auto; }
  .motion .stage-copy {
    --show: clamp(0, calc((var(--p) - .5) * 3.2), 1);
    position: absolute; top: 50%; width: min(380px, calc(50% - 220px)); opacity: var(--show);
  }
  .motion .stage-left { left: 0; transform: translate(calc((1 - var(--show)) * -40px), -50%); }
  .motion .stage-right { right: 0; transform: translate(calc((1 - var(--show)) * 40px), -50%); }
}

.phone { position: absolute; width: 290px; border-radius: 46px; padding: 9px; background: #0f130d; box-shadow: var(--shadow); }
.phone img, .phone picture img { border-radius: 38px; width: 100%; }
@media (max-width: 480px) {
  .phone { border-radius: 36px; padding: 7px; }
  .phone img, .phone picture img { border-radius: 30px; }
  .readout { gap: 14px; padding: 12px 16px; }
  .readout .num { font-size: 44px; }
}
@media (max-width: 860px) {
  .stage-copy { text-align: left; }
}

/* Styles strip: a dark green band edged with timer ticks. */
.strip { background: var(--block-dark); color: var(--block-dark-ink); position: relative; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--block-dark-accent) 0 2px, transparent 2px 14px); opacity: .55; }
.strip::before { top: 0; }
.strip::after { bottom: 0; }
.strip .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: center; padding: 28px 0; }
.strip p { margin: 0; font: italic 400 24px/1 var(--script); color: var(--block-dark-accent); }
.strip ul { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.strip li { font: 800 22px/1.1 var(--display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; }

/* Sections */
.section { padding: 96px 0; }
.section-head { max-width: 760px; margin: 0 0 48px; padding-bottom: 22px; border-bottom: 2px solid var(--rule); }
.section-head p:not(.eyebrow) { color: var(--ink-2); max-width: 62ch; margin: 0; }
#beta .section-head, .cta .section-head { margin-inline: auto; }

/* Colour blocks: flat printed panels. Text, rules and cards inside take the block's own ink. */
.block { --rule: var(--block-ink); color: var(--block-ink); background: var(--grain), var(--block-bg); padding: 96px 0 !important; border-bottom: 2px solid var(--block-edge); }
.block h2, .block h3, .block .strong { color: var(--block-ink); }
.block .eyebrow { color: var(--block-accent); }
.block .muted, .block p, .block .section-head p:not(.eyebrow), .block .card p, .block .steps p { color: color-mix(in srgb, var(--block-ink) 88%, transparent); }
.block .card, .block .steps li { background: transparent; border-color: color-mix(in srgb, var(--block-ink) 45%, transparent); }
.block .card .icon { background: color-mix(in srgb, var(--block-ink) 14%, transparent); color: var(--block-ink); }
.block a:not(.button) { color: var(--block-ink); }
.block-matcha { --block-bg: var(--block-matcha); --block-ink: var(--block-matcha-ink); --block-accent: var(--block-matcha-accent); }
.block-dark { --block-bg: var(--block-dark); --block-ink: var(--block-dark-ink); --block-accent: var(--block-dark-accent); }
.block-pine { --block-bg: var(--block-pine); --block-ink: var(--block-pine-ink); --block-accent: var(--block-pine-accent); }
.block-paper { --block-bg: var(--block-paper); --block-ink: var(--block-paper-ink); --block-accent: var(--block-paper-accent); }
.block .badge { background: color-mix(in srgb, var(--block-ink) 16%, transparent); color: var(--block-ink); }

/* Features: phone beside copy, rows split by heavy rules. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 48px 0; }
.feature + .feature { border-top: 2px solid var(--rule); }
.feature.flip .feature-media { order: 2; }
.feature-media { display: flex; justify-content: center; }
.feature-media .phone { position: relative; width: 320px; }
.feature h3 { font: 800 clamp(30px, 3.6vw, 44px)/.95 var(--display); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0; margin-bottom: 16px; }
.feature p.muted { max-width: 52ch; }
.feature ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; max-width: 52ch; border-top: 1.5px solid var(--rule); }
.feature li { display: flex; gap: 12px; color: var(--ink-2); padding: 10px 0; border-bottom: 1.5px solid var(--line); }
.feature li::before { content: ""; flex: 0 0 3px; height: 16px; margin-top: 5px; border-radius: 2px; background: var(--clay); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { padding: 8px 14px; border-radius: 999px; background: transparent; border: 2px solid var(--rule); font: 700 14px/1 var(--mono); color: var(--ink); }
.chip b { color: var(--brand); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .feature.flip .feature-media { order: 0; }
  .feature-media .phone { width: 250px; }
}

/* Numbers band: big stamp numbers on Yixing clay. */
.band { background: var(--grain), var(--block-clay); color: var(--block-clay-ink); border-block: 2px solid var(--block-edge); overflow: hidden; }
.band .wrap { padding: 48px 0; display: flex; flex-wrap: wrap; gap: 18px 48px; justify-content: center; align-items: baseline; }
.band span { font: 800 clamp(44px, 7vw, 84px)/.9 var(--display); font-stretch: 75%; white-space: nowrap; }
.band small { font: 700 12px/1 var(--mono); letter-spacing: .14em; color: var(--block-clay-accent); margin-left: 10px; }

/* Cards: outlined, flat, no shadows. */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--card); border: 2px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.card h3 { font-size: 20px; }
.card p { margin: 0; color: var(--ink-2); }
.icon { width: 46px; height: 46px; border-radius: 50%; background: var(--clay-wash); color: var(--brand); display: grid; place-items: center; margin-bottom: 16px; }
.icon svg { width: 24px; height: 24px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.privacy-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.privacy-split .grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .privacy-split { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .privacy-split .grid { grid-template-columns: 1fr; } }

/* Steps: big stamp numerals over a rule. */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; border-top: 2px solid var(--rule); padding: 18px 0 0; }
.steps li::before { content: "0" counter(step); display: block; font: 800 64px/.9 var(--display); font-stretch: 75%; color: var(--brand); margin-bottom: 12px; }
.steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* FAQ: a ruled list, not cards. */
.faq { max-width: 860px; display: grid; gap: 0; border-top: 2px solid var(--rule); }
/* The FAQ list draws its own top rule, so its heading drops the section rule (no double line). */
#faq .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.faq details { border-bottom: 1.5px solid var(--rule); padding: 0 2px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 19px; line-height: 1.35; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 800 30px/.8 var(--display); color: var(--brand); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--ink-2); max-width: 65ch; }

/* Closing call to action: a matcha block. */
.cta { text-align: center; }
.cta img { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 22px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
.cta h2 { max-width: 14ch; margin-inline: auto; }

/* Footer: dark green, like the back of a tea pouch. */
.site-footer { background: var(--grain), var(--block-dark); color: var(--block-dark-ink); padding: 44px 0 56px; font-size: 15px; border-top: 2px solid var(--block-edge); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.site-footer a { color: var(--block-dark-ink); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--block-dark-accent); text-decoration: underline; }

/* Document pages (privacy, support, guides): a paper block header with a stamp title, then text. */
.doc-hero { background: var(--grain), var(--block-paper); color: var(--block-paper-ink); padding: 56px 0 40px; border-bottom: 2px solid var(--rule); }
.doc-hero h1 { font-size: clamp(44px, 7vw, 88px); margin: 6px 0 14px; color: var(--block-paper-ink); }
.doc-hero .eyebrow { color: var(--block-paper-accent); }
.doc-hero .lede, .doc-hero p:not(.eyebrow):not(.crumbs) { color: var(--ink-2); }
.doc { width: min(100% - 32px, 760px); margin: 0 auto; padding: 24px 0 88px; }
.doc-hero .doc { padding: 0; }
.doc h2 { font-size: clamp(30px, 4vw, 44px); margin: 52px 0 14px; padding-top: 18px; border-top: 2px solid var(--rule); }
.doc h3 { margin-top: 28px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p { max-width: 68ch; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.summary-card { background: var(--pin-wash); color: var(--pin); border-radius: 18px; padding: 18px 22px; font-weight: 600; margin: 22px 0 8px; border: 2px solid currentColor; }
.contact-card { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--card); border: 2px solid var(--rule); border-radius: var(--radius); padding: 22px 26px; margin: 28px 0; }
.contact-card p { margin: 0; }

/* Buttons: solid dark green pills with a pale matcha label; clay on hover. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--button-bg); color: var(--button-ink); font-weight: 800; text-decoration: none; border: 0; }
.button:hover { background: var(--button-hover); color: var(--button-hover-ink); text-decoration: none; }
.block .button:not(.ghost) { background: var(--block-ink); color: var(--block-bg); }
.block .button:not(.ghost):hover { background: var(--block-accent); color: var(--block-edge); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Theme toggle */
.theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: 4px;
  border-radius: 999px; border: 0; background: var(--button-bg); color: var(--button-ink);
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.theme-toggle:hover { background: var(--button-hover); color: var(--button-hover-ink); }
.theme-toggle:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

/* Content pages: guides, charts and Learn */
.crumbs { margin: 0 0 4px; font: 700 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.doc.wide { width: min(100% - 32px, 1100px); }
.small { font-size: 14px; }
.strong { font-weight: 700; color: var(--ink); }
.note { background: var(--clay-wash); border: 2px solid var(--rule); border-radius: 16px; padding: 14px 18px; color: var(--ink) !important; }
.table-wrap { overflow-x: auto; margin: 0 0 12px; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); background: transparent; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.chart-table th, .chart-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.chart-table thead th { font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border-bottom: 1.5px solid var(--rule); }
.chart-table tbody th { color: var(--ink); font-weight: 700; }
.chart-table tbody tr:last-child th, .chart-table tbody tr:last-child td { border-bottom: 0; }
.chart-table.matrix td { white-space: nowrap; }
.chart-table a { color: var(--brand); }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 18px; margin: 0; }
.specs div { border-top: 2px solid var(--rule); padding: 12px 0 14px; }
.specs dt { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.specs dd { margin: 0; color: var(--ink); font-weight: 700; font-size: 18px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin: 8px 0 28px; }
.guide-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 2px solid var(--rule); text-decoration: none; color: var(--ink); transition: background .15s, transform .15s; }
.guide-card:hover { background: var(--clay-wash); transform: translateY(-2px); }
.guide-card strong { color: var(--ink); font-size: 18px; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cta-card { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; margin-top: 44px; padding: 22px 24px; border-radius: 20px; background: var(--grain), var(--block-matcha); color: var(--block-matcha-ink); border: 0; }
.cta-card p { margin: 0; flex: 1 1 280px; color: var(--block-matcha-ink) !important; }
.cta-card a:not(.button), .cta-card .muted { color: var(--block-matcha-ink); }
.cta-card .muted { opacity: .92; }
.cta-card .button { background: var(--block-matcha-ink); color: var(--block-edge); }
.cta-card .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cta-card .cta-web { font-weight: 700; text-underline-offset: 3px; }
.cta-card .button:hover { background: var(--block-edge); color: var(--block-matcha-ink); }
.prose h2 + p, .prose p { line-height: 1.7; }

/* App screenshots come in light and dark pairs; show the one that matches the page's theme
   (the system's, unless the visitor picked one with the header toggle). */
.shot-dark { display: none; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-dark { display: inline; }
}

/* Store buttons (pre-order / pre-registration); plain glyphs, since the stores' own logos may only
   appear in their official badge artwork. */
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }
.store-buttons.center { justify-content: center; margin-top: 26px; }
.button.store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; text-align: left; }
.button.store span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; }
.button.store small { font-size: 11px; font-weight: 600; opacity: .85; }
.button.store.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--rule); }
.button.store.ghost:hover { background: var(--button-bg); color: var(--button-ink); box-shadow: none; }
.block .button.store.ghost { color: var(--block-ink); box-shadow: inset 0 0 0 2px var(--block-ink); }
.block .button.store.ghost:hover { background: var(--block-ink); color: var(--block-bg); }

/* Scroll motion (home page, motion.js). Layers drift at different speeds as you scroll, like the
   Slow Drip site: progress arrives as custom properties and becomes `translate` / `rotate`, which
   compose with each element's own transform. Only when motion.js has run (html.motion), so with
   reduced motion or no script everything sits still. Phones get a lighter version. */
:root { --amp: 1; }
@media (max-width: 700px) { :root { --amp: .55; } }
/* Feature screenshots: ease in once, then drift slightly against their copy. */
.motion .feature-media .phone { translate: 0 calc(var(--p, 0) * -34px * var(--amp)); rotate: calc(var(--p, 0) * 2.2deg * var(--amp)); }
.motion .feature.flip .feature-media .phone { rotate: calc(var(--p, 0) * -2.2deg * var(--amp)); }
.will-ease .phone { opacity: 0; scale: .94; transition: opacity .8s ease, scale 1s cubic-bezier(.2, .8, .2, 1); }
.will-ease.is-in .phone { opacity: 1; scale: 1; }
/* Styles strip: the timer ticks run one way, the names the other. */
.strip { overflow: hidden; }
.strip::before, .strip::after { left: -84px; right: -84px; }
.motion .strip::before { translate: calc(var(--p, 0) * 84px) 0; }
.motion .strip::after { translate: calc(var(--p, 0) * -84px) 0; }
.motion .strip ul { translate: calc(var(--p, 0) * -28px * var(--amp)) 0; }
/* Numbers band: the row of readings slides sideways as one, like a dial turning past. */
.motion .band .wrap { translate: calc(var(--p, 0) * -60px * var(--amp)) 0; }
/* A timer ruler down the right edge on wide screens: the clay line fills and the
   knob travels as you read down the page (the drip line's cousin). */
.dial-progress { display: none; position: fixed; right: 20px; top: 96px; bottom: 28px; width: 14px; pointer-events: none; z-index: 4; }
@media (min-width: 1320px) {
  .motion .dial-progress { display: block; }
  /* The clay dot is the scroll indicator here, so the browser's scroll bar steps aside. */
  html.motion { scrollbar-width: none; }
  html.motion::-webkit-scrollbar { display: none; }
}
.dial-progress::before { content: ""; position: absolute; inset: 0 0 0 4px; background: repeating-linear-gradient(180deg, var(--ink-3) 0 1.5px, transparent 1.5px 16px); opacity: .45; }
.dial-progress span { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--clay); transform-origin: top; scale: 1 var(--page-p, 0); }
/* The dot starts centred on the first tick line (1.5 px tall at the top) and travels the rail's full height. */
.dial-progress::after { content: ""; position: absolute; left: -4px; top: -4.25px; width: 10px; height: 10px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px var(--bg); translate: 0 calc(var(--page-p, 0) * (100vh - 124px)); }

/* Social link: icon and handle (unused until Steepbook has an account to link). */
.social { display: inline-flex; align-items: center; gap: 8px; }
.social svg { flex: none; }
.site-menu-foot .social { color: var(--block-dark-ink); text-decoration: none; font-weight: 700; }
.site-menu-foot .social:hover { color: var(--block-dark-accent); }

/* "Open Steepbook in your browser" under the store buttons */
.web-app-link { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.web-app-link.center { text-align: center; }
.web-app-link a { font-weight: 700; color: var(--clay-text); text-underline-offset: 3px; }

/* Header button to the web app: a round icon button beside the theme toggle,
   with a small clay ring so it reads as the way in. Shown on phones too. */
.header-app { border-color: var(--clay); color: var(--clay-text); }

a.pill { text-decoration: none; }
.stage-title a.pill:hover { border-color: var(--clay); }

/* Home page: a hand-drawn note under the web app button, "Brew it in your browser", with an arc
   that bows up into the icon. Part of the link, so the words open the app too. Drawn on once. */
.header-app { position: relative; }
.app-callout { position: absolute; top: calc(100% - 2px); right: 50%; display: flex; align-items: flex-end; gap: 10px; width: max-content; color: var(--clay-text); pointer-events: auto; }
.app-callout-text { font: italic 400 21px/1 var(--script); white-space: nowrap; transform: rotate(-3deg); transform-origin: right center; }
.app-callout-arrow { display: block; margin-bottom: 0; flex: none; }
.app-callout-arrow .arc, .app-callout-arrow .head { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .app-callout-arrow .arc { animation: callout-draw .9s .5s cubic-bezier(.45, 0, .2, 1) both; }
  .app-callout-arrow .head { animation: callout-draw .3s 1.35s ease-out both; }
  .app-callout-text { animation: callout-fade .5s .3s ease-out both; }
}
/* Hidden until it starts drawing: a zero-length dash still paints its round cap as a dot. */
@keyframes callout-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 0.1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes callout-fade { from { opacity: 0; transform: translateY(4px) rotate(-3deg); } to { opacity: 1; transform: rotate(-3deg); } }
.header-app:hover .app-callout { color: var(--clay); }
@media (max-width: 480px) {
  .app-callout-text { font-size: 18px; }
  .app-callout { gap: 8px; }
  .app-callout-arrow { width: 50px; height: 42px; margin-bottom: 0; }
}

/* A single quiet line about the app at the end of guide, teaware and recipe pages. */
.app-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-note a { color: var(--clay-text); font-weight: 700; }

/* Phone mocks: the app's screens drawn in HTML and CSS until real screenshots exist. They use the
   page's own tokens, so they follow light and dark mode. Every size is in em and the screen's font
   size is a share of its width (container units), so a mock scales as one with its phone. */
.mock { container-type: inline-size; aspect-ratio: 640 / 1391; border-radius: 38px; overflow: hidden; background: var(--bg); color: var(--ink); position: relative; }
@media (max-width: 480px) { .mock { border-radius: 30px; } }
.mock .screen { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 4.5cqw; line-height: 1.3; padding: 0 1.1em; }
.mock .s-status { display: flex; justify-content: space-between; align-items: center; height: 3.2em; padding: 0 .6em; font: 700 .85em/1 var(--mono); flex: none; }
.mock .s-status i { width: 1.6em; height: .7em; border-radius: .2em; border: .12em solid currentColor; display: inline-block; }
.mock .s-title { font: 800 2.2em/1 var(--display); font-stretch: 75%; text-transform: uppercase; margin: .25em 0 .35em; }
.mock .s-sub { font-size: .82em; color: var(--ink-3); margin: -.2em 0 .7em; }
.mock .s-card { background: var(--card); border: .1em solid var(--line); border-radius: 1.1em; padding: .85em .95em; margin-bottom: .6em; }
.mock .s-card.hero-card { border: .14em solid var(--rule); }
.mock .s-tea { font-weight: 800; color: var(--brand); font-size: 1.08em; line-height: 1.2; }
.mock .s-meta { font-size: .78em; color: var(--ink-3); margin-top: .15em; }
.mock .s-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.mock .s-big { display: flex; align-items: flex-end; gap: .45em; margin: .4em 0 .2em; }
.mock .s-big b { font: 800 4.6em/.82 var(--display); font-stretch: 75%; color: var(--brand); }
.mock .s-big span { font: 700 .66em/1.25 var(--mono); letter-spacing: .12em; color: var(--ink-3); padding-bottom: .4em; }
.mock .s-chips { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .5em; }
.mock .s-chip { font: 700 .7em/1 var(--mono); padding: .45em .6em; border-radius: 99em; border: .14em solid var(--line); color: var(--ink-2); }
.mock .s-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.mock .s-chip.done { background: var(--brand-wash); border-color: var(--brand-wash); color: var(--brand); }
.mock .s-tag { display: inline-block; font-size: .66em; font-weight: 700; padding: .25em .6em; border-radius: 99em; background: var(--clay-wash); color: var(--clay-text); }
.mock .s-pin { display: inline-flex; align-items: center; gap: .3em; font-size: .7em; font-weight: 700; padding: .3em .7em; border-radius: 99em; background: var(--pin-wash); color: var(--pin); }
.mock .s-pin svg { width: 1.1em; height: 1.1em; }
.mock .s-small { font-size: .74em; color: var(--ink-2); }
.mock .s-mono { font-family: var(--mono); font-weight: 700; }
.mock .s-list { margin: 0; padding: 0; list-style: none; }
.mock .s-list li { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .62em 0; border-bottom: .08em solid var(--line); font-size: .86em; }
.mock .s-list li:last-child { border-bottom: 0; }
.mock .s-list li small { display: block; color: var(--ink-3); font-size: .85em; }
.mock .s-list .s-val { font: 700 .95em/1 var(--mono); color: var(--brand); white-space: nowrap; }
.mock .s-step { display: flex; align-items: center; gap: .5em; }
.mock .s-step i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--card-2); font-style: normal; font-weight: 800; color: var(--ink); }
.mock .s-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; background: var(--card-2); border-radius: 99em; padding: .22em; font-size: .74em; font-weight: 700; text-align: center; }
.mock .s-seg span { padding: .45em 0; border-radius: 99em; color: var(--ink-2); }
.mock .s-seg .on { background: var(--card); color: var(--clay-text); box-shadow: 0 .1em .3em rgba(0, 0, 0, .12); }
.mock .s-tip { display: flex; gap: .6em; align-items: flex-start; background: var(--brand-wash); color: var(--ink); border-radius: 1em; padding: .7em .8em; font-size: .78em; }
.mock .s-tip b { color: var(--brand); }
.mock .s-pip { flex: none; width: 2.4em; height: 2.4em; }
.mock .s-button { display: block; text-align: center; font-weight: 800; padding: .75em; border-radius: 99em; background: var(--button-bg); color: var(--button-ink); font-size: .9em; }
.mock .s-button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .14em var(--line); }
.mock .s-ring { position: relative; width: 70%; aspect-ratio: 1; margin: .6em auto .8em; border-radius: 50%; background: conic-gradient(var(--brand) 0 var(--done, 40%), var(--card-2) 0); display: grid; place-items: center; }
.mock .s-ring::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: var(--bg); }
.mock .s-ring div { position: relative; text-align: center; }
.mock .s-ring b { display: block; font: 800 4.4em/.9 var(--display); font-stretch: 75%; color: var(--brand); }
.mock .s-ring span { font: 700 .7em/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); }
.mock .s-stat { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-bottom: .6em; }
.mock .s-stat div { background: var(--card); border: .1em solid var(--line); border-radius: .9em; padding: .6em .7em; }
.mock .s-stat b { display: block; font: 800 1.9em/1 var(--display); font-stretch: 75%; color: var(--brand); }
.mock .s-stat span { font-size: .68em; color: var(--ink-3); }
.mock .s-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: .2em; }
.mock .s-cal i { aspect-ratio: 1; border-radius: .2em; background: var(--card-2); }
.mock .s-cal i.l1 { background: color-mix(in srgb, var(--brand) 35%, var(--card-2)); }
.mock .s-cal i.l2 { background: color-mix(in srgb, var(--brand) 65%, var(--card-2)); }
.mock .s-cal i.l3 { background: var(--brand); }
.mock .s-split { display: flex; height: .8em; border-radius: 99em; overflow: hidden; margin: .5em 0 .35em; }
.mock .s-split i:nth-child(1) { background: var(--clay-wash); }
.mock .s-split i:nth-child(2) { background: var(--brand); }
.mock .s-split i:nth-child(3) { background: var(--clay); }
.mock .s-radio { width: 1.1em; height: 1.1em; border-radius: 50%; border: .14em solid var(--line); flex: none; }
.mock .s-radio.on { border: .34em solid var(--brand); }
.mock .s-toggle { width: 2.2em; height: 1.3em; border-radius: 99em; background: var(--brand); position: relative; flex: none; }
.mock .s-toggle::after { content: ""; position: absolute; right: .15em; top: .15em; width: 1em; height: 1em; border-radius: 50%; background: var(--brand-ink); }
.mock .s-toggle.off { background: var(--card-2); }
.mock .s-toggle.off::after { right: auto; left: .15em; background: var(--ink-3); }
.mock .s-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: .7em 0 1.6em; border-top: .08em solid var(--line); font-size: .62em; font-weight: 700; color: var(--ink-3); flex: none; margin-inline: -1.8em; }
.mock .s-tabs span { display: grid; justify-items: center; gap: .35em; }
.mock .s-tabs span::before { content: ""; width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--card-2); }
.mock .s-tabs .on { color: var(--brand); }
.mock .s-tabs .on::before { background: var(--brand-wash); }
.mock .s-sheet { margin-top: .4em; flex: 1; background: var(--card); border-radius: 1.4em 1.4em 0 0; margin-inline: -1.1em; padding: .5em 1.1em 0; border-top: .1em solid var(--line); display: flex; flex-direction: column; gap: .55em; }
.mock .s-grab { width: 2.6em; height: .3em; border-radius: 99em; background: var(--line); margin: 0 auto .2em; }
.mock .s-dial { text-align: center; padding: .2em 0; }
.mock .s-dial .s-big { justify-content: center; margin: 0; }
.mock .s-dial .s-row { justify-content: center; gap: 1.6em; }
.mock .s-dial i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--button-bg); color: var(--button-ink); font-style: normal; font-weight: 800; font-size: 1.1em; }
.mock .s-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: .35em .5em; }
.mock .s-pairs div { background: var(--card-2); border-radius: .8em; padding: .45em .6em; }
.mock .s-pairs small { display: block; font-size: .62em; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mock .s-pairs b { font: 700 .86em/1.2 var(--mono); }

/* Placeholder frame for a real screenshot still to come (website/public/images, see the README note). */
.shot-placeholder { display: grid; place-items: center; aspect-ratio: 640 / 1391; border-radius: 38px; border: 2px dashed var(--line); color: var(--ink-3); font: 700 12px/1.4 var(--mono); text-align: center; padding: 24px; }

/* Guide pages: a row of facts and a table that fits a phone. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0 18px; margin: 24px 0 8px; }
.facts div { border-top: 2px solid var(--rule); padding: 10px 0 12px; }
.facts dt { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.facts dd { margin: 0; font: 800 30px/1 var(--display); font-stretch: 75%; color: var(--brand); }
.chart-table td.num { font-family: var(--mono); font-weight: 700; color: var(--ink); white-space: nowrap; }
.chart-table caption { caption-side: bottom; text-align: left; padding: 10px 0 0; font-size: 14px; color: var(--ink-3); }
.glossary dt { font-weight: 800; color: var(--ink); margin-top: 18px; }
.glossary dt small { font-weight: 600; color: var(--ink-3); font-size: 14px; margin-left: 6px; }
.glossary dd { margin: 4px 0 0; color: var(--ink-2); max-width: 68ch; }
/* Lists inside a mock are the app's rows, not the feature's ruled bullet list. */
.feature .mock ul { border-top: 0; margin: 0; max-width: none; }
.feature .mock li { color: var(--ink); }
.feature .mock li::before { display: none; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .grid.two { grid-template-columns: 1fr; } }
.phone { outline: 1.5px solid color-mix(in srgb, var(--rule) 22%, transparent); outline-offset: 0; }
.chart-table td.seq { font: 700 13px/1.5 var(--mono); color: var(--ink); min-width: 9em; }