/* ============================================================
   OpenDeck — marketing site
   Reuses the app's "Zen / Paper" design system: ultra-minimal,
   monochrome, hierarchy from type + space. Light / Dark / Auto.
   Bundled fonts (no CDN) so the site is self-contained & offline.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-italic-latin.woff2") format("woff2");
}

/* ---------------------------- tokens ---------------------------- */
:root {
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;   --space-9: 6rem;  --space-10: 9rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms; --dur: 280ms;

  --maxw: 72rem;
  --measure: 38rem;
}

/* Light (paper) — default + Auto fallback */
:root, :root[data-theme="light"] {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-sunk: #F2F2EE;
  --separator: rgba(26,26,26,0.10);
  --hairline: rgba(26,26,26,0.08);
  --text: #1A1A1A;
  --text-secondary: #6E6E68;
  --text-faint: #B4B4AE;
  --ink: #1A1A1A;
  --on-ink: #FAFAF8;
  --press: rgba(26,26,26,0.05);
  --focus-ring: rgba(26,26,26,0.40);
  --thumb-a: #ECECE6;
  --thumb-b: #E2E2DA;
  --scrim: rgba(250,250,248,0.72);
}

/* Dark */
:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-sunk: #1C1C1C;
  --separator: rgba(245,245,240,0.12);
  --hairline: rgba(245,245,240,0.08);
  --text: #F4F4EF;
  --text-secondary: #9A9A92;
  --text-faint: #555550;
  --ink: #F4F4EF;
  --on-ink: #0A0A0A;
  --press: rgba(245,245,240,0.06);
  --focus-ring: rgba(245,245,240,0.45);
  --thumb-a: #20201E;
  --thumb-b: #2A2A27;
  --scrim: rgba(10,10,10,0.72);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0A0A0A; --surface: #141414; --surface-sunk: #1C1C1C;
    --separator: rgba(245,245,240,0.12); --hairline: rgba(245,245,240,0.08);
    --text: #F4F4EF; --text-secondary: #9A9A92; --text-faint: #555550;
    --ink: #F4F4EF; --on-ink: #0A0A0A; --press: rgba(245,245,240,0.06);
    --focus-ring: rgba(245,245,240,0.45); --thumb-a: #20201E; --thumb-b: #2A2A27;
    --scrim: rgba(10,10,10,0.72);
  }
}

/* ---------------------------- base ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; margin: 0; color: var(--text); }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
img { max-width: 100%; display: block; }

.serif { font-family: var(--font-serif); font-weight: 400; }
.ital { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.muted { color: var(--text-secondary); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); }
.eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }

/* ---------------------------- buttons ---------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-weight: 500; font-size: 0.98rem;
  padding: 0.7rem 1.2rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), opacity var(--dur-fast);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { opacity: 0.88; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--separator); }
.btn--ghost:hover { background: var(--press); }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }

/* ---------------------------- nav ---------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--scrim); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav__in { display: flex; align-items: center; gap: var(--space-5); height: 60px; }
.brand { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; letter-spacing: -0.02em; font-size: 1.05rem; }
.brand img { width: 26px; height: 26px; }
.nav__links { display: flex; gap: var(--space-5); margin-left: auto; align-items: center; }
.nav__links a { color: var(--text-secondary); font-size: 0.95rem; transition: color var(--dur-fast); }
.nav__links a:hover { color: var(--text); }
.nav__links .navcta { color: var(--text); font-weight: 500; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--radius-md); border: 1px solid var(--separator);
  background: transparent; color: var(--text); cursor: pointer;
}
.theme-toggle:hover { background: var(--press); }
.theme-toggle svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .nav__links a:not(.navcta) { display: none; } }

/* ---------------------------- hero ---------------------------- */
.hero { padding-top: clamp(var(--space-8), 9vw, var(--space-9)); padding-bottom: clamp(var(--space-7), 7vw, var(--space-9)); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-6), 6vw, var(--space-9)); align-items: center; }
.hero h1 .ital { letter-spacing: -0.01em; }
.hero__lead { margin-top: var(--space-5); font-size: 1.2rem; color: var(--text-secondary); max-width: var(--measure); }
.hero__cta { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__note { margin-top: var(--space-4); font-size: 0.9rem; color: var(--text-faint); }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { order: -1; } }

/* paper-stacked deck mark (echoes the app icon's stacked cards) */
.deckmark { position: relative; aspect-ratio: 1; max-width: 360px; margin-inline: auto; }
.deckmark span {
  position: absolute; inset: 14% 14% 14% 14%;
  background: linear-gradient(180deg, var(--surface), var(--surface-sunk));
  border: 1px solid var(--hairline); border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,0.45);
}
.deckmark span:nth-child(1) { transform: translate(7%, -6%) rotate(4deg); opacity: 0.55; }
.deckmark span:nth-child(2) { transform: translate(3.5%, -3%) rotate(2deg); opacity: 0.8; }
.deckmark span:nth-child(3) { display: grid; place-items: center; }
.deckmark img { width: 100%; height: auto; }

/* There's An AI For That verification badge (homepage footer only) */
.foot__taaft { margin-top: var(--space-5); text-align: center; }
.foot__taaft a { display: inline-block; line-height: 0; }
.foot__taaft img { width: 300px; height: auto; opacity: 0.92; }

/* hero promo reel — full-width showcase below the hero, before the examples */
.hero__reel { margin: var(--space-8) auto 0; max-width: 960px; }
.hero__video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline); border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,0.45);
}

/* ---------------------------- the loop (3 steps) ---------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.step { padding: var(--space-6); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.step__n { font-family: var(--font-serif); font-size: 2.2rem; color: var(--text-faint); line-height: 1; }
.step h3 { margin-top: var(--space-3); }
.step p { margin-top: var(--space-2); color: var(--text-secondary); font-size: 0.98rem; }
.step .tag { display: inline-block; margin-top: var(--space-3); font-size: 0.8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------- features ---------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 6vw, var(--space-8)); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.feature-list { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.feature .dot { width: 9px; height: 9px; margin-top: 0.55rem; border-radius: 50%; background: var(--ink); flex: none; }
.feature h3 { font-size: 1.02rem; }
.feature p { color: var(--text-secondary); font-size: 0.96rem; margin-top: 2px; }

/* code chip */
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem; background: var(--surface-sunk); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-4); color: var(--text);
  overflow-x: auto; white-space: pre; margin-top: var(--space-5);
}
.code .c { color: var(--text-faint); }

/* ---------------------------- platforms ---------------------------- */
.platforms { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.5rem 0.85rem; border: 1px solid var(--separator); border-radius: 999px;
  font-size: 0.92rem; color: var(--text-secondary); background: var(--surface);
  text-decoration: none;
}
/* The live chip is a link to the web app — give it a clear clickable affordance. */
a.chip--live { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.chip--live:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10, 10, 10, 0.18); }
.chip .soon { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); border-left: 1px solid var(--hairline); padding-left: var(--space-2); }
.chip__ic { flex: none; }
/* live = available now: inverted (filled) chip stands out among the outlined "soon" ones */
.chip--live { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip--live .now { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--on-ink); border-left: 1px solid color-mix(in srgb, var(--on-ink) 32%, transparent); padding-left: var(--space-2); }

/* ---------------------------- principles ---------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-7); }
.card { padding: var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); }
.card h3 { font-size: 1.0rem; }
.card p { margin-top: var(--space-2); color: var(--text-secondary); font-size: 0.92rem; }
@media (max-width: 880px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }

/* ---------------------------- cta band ---------------------------- */
.band { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-xl); padding: clamp(var(--space-7), 6vw, var(--space-9)); text-align: center; }
.band h2 { color: var(--on-ink); }
.band p { color: color-mix(in srgb, var(--on-ink) 72%, transparent); margin-top: var(--space-4); max-width: var(--measure); margin-inline: auto; }
.band .hero__cta { justify-content: center; }
.band .btn--primary { background: var(--on-ink); color: var(--ink); }
.band .btn--ghost { border-color: color-mix(in srgb, var(--on-ink) 32%, transparent); color: var(--on-ink); }

/* ---------------------------- footer ---------------------------- */
.foot { padding-block: var(--space-6); }
.foot__in { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; }
.foot a { color: var(--text-secondary); font-size: 0.92rem; }
.foot a:hover { color: var(--text); }
/* Footer brand (logo + wordmark) — make its clickability legible. */
.foot .brand { color: var(--text); display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; }
.foot .brand span { text-underline-offset: 3px; }
.foot .brand:hover span { text-decoration: underline; text-decoration-color: var(--separator); }
.foot .copy { color: var(--text-faint); font-size: 0.86rem; margin-left: auto; }

/* example decks */
.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
@media (max-width: 880px) { .examples { grid-template-columns: 1fr; max-width: 30rem; } }
.example { display: flex; flex-direction: column; }
.example__open { display: block; text-decoration: none; color: inherit; }
.example__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--surface-sunk);
  /* stacked-slides effect — echoes the app icon's layered slides peeking
     up and to the right behind the front card (fill + hairline edge per layer). */
  box-shadow:
    6px -7px 0 -3px var(--surface),
    6px -7px 0 -2px var(--separator),
    12px -14px 0 -7px var(--surface),
    12px -14px 0 -6px var(--separator),
    0 18px 44px -30px rgba(0,0,0,0.5);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.example__open:hover .example__thumb, .example__open:focus-visible .example__thumb {
  box-shadow:
    9px -10px 0 -3px var(--surface),
    9px -10px 0 -2px var(--separator),
    18px -20px 0 -7px var(--surface),
    18px -20px 0 -6px var(--separator),
    0 22px 50px -28px rgba(0,0,0,0.55);
}
.example__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.example__open:hover .example__thumb img, .example__open:focus-visible .example__thumb img { transform: scale(1.03); }
.example__badge {
  /* one colour per mode: theme ink on an opaque pill — high contrast in both
     light and dark, and on-brand with the monochrome Zen/Paper system. */
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--separator);
  backdrop-filter: saturate(1.3) blur(8px); -webkit-backdrop-filter: saturate(1.3) blur(8px);
}
.example__play { position: absolute; inset: 0; display: grid; place-items: center; }
.example__play svg { width: 56px; height: 56px; opacity: 0.92; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.example__open:hover .example__play svg, .example__open:focus-visible .example__play svg { transform: scale(1.08); opacity: 1; }
.example__title { display: block; margin-top: var(--space-4); font-weight: 600; letter-spacing: -0.01em; }
.example__title .tag { color: var(--text-secondary); font-weight: 500; }
.example__title .tag::after { content: " · "; color: var(--text-faint); }
.example__sub { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 0.92rem; }

/* Secondary action: download the deck as a portable .deck file. A compact pill
   below the open/play link — its own anchor (a download link can't nest inside
   it). Low emphasis: the play/open card is the primary action. */
.example__dl {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: var(--space-3); padding: 3px 10px 3px 8px;
  border-radius: 999px; border: 1px solid var(--separator); background: var(--surface-sunk);
  color: var(--text-secondary); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.example__dl:hover, .example__dl:focus-visible { color: var(--text); border-color: var(--text-faint); background: var(--surface); }
.example__dl:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.example__dl-icon { width: 13px; height: 13px; flex: none; opacity: 0.85; }
.example__dl-meta { color: var(--text-faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.example__dl-meta::before { content: "·"; margin-right: 5px; }

/* contribute — low-key, bottom of page */
.contribute { text-align: center; padding-block: clamp(var(--space-7), 8vw, var(--space-9)); border-top: 1px solid var(--hairline); margin-top: var(--space-8); }
.contribute h3 { font-size: 1.2rem; }
.contribute p { margin-top: var(--space-2); }
.contribute__links { margin-top: var(--space-5); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* Outlined pills (same language as the install tabs) so they clearly read as
   clickable; hover fills with --text → --bg, inverting correctly in both themes. */
.contribute__links a {
  display: inline-flex; align-items: center; gap: 0.34rem;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  padding: 0.46rem 1rem; border-radius: 999px;
  color: var(--text); background: transparent;
  border: 1px solid var(--separator);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.contribute__links a::after { content: "↗"; font-size: 0.85em; opacity: 0.65; }
.contribute__links a:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.contribute__links a:hover::after { opacity: 0.8; }
.contribute__links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* code block sitting on the dark CTA band */
.band .code { text-align: left; max-width: 34rem; margin-inline: auto; }
/* The band is an inverted panel (background = --ink), so derive the code
   block's colors from --on-ink to stay legible in both light and dark. */
.code--onband { background: color-mix(in srgb, var(--on-ink) 8%, transparent); border-color: color-mix(in srgb, var(--on-ink) 18%, transparent); color: var(--on-ink); }
.code--onband .c { color: color-mix(in srgb, var(--on-ink) 55%, transparent); }

/* install box: agent tabs above the command block (only Claude Code is live) */
.install { max-width: 34rem; margin: var(--space-6) auto 0; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.tab { font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.38rem 0.8rem; cursor: pointer;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 0.34rem;
  border: 1px solid color-mix(in srgb, var(--on-ink) 20%, transparent);
  background: transparent; color: color-mix(in srgb, var(--on-ink) 70%, transparent);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.tab:not(.is-active):not(.is-soon):hover { color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 42%, transparent); }
.tab:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.tab.is-active { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); cursor: default; }
.tab.is-soon { opacity: 0.5; cursor: not-allowed; }
.tab .soon { font-style: normal; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.tab__sub { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0.7; padding-left: 0.32rem; border-left: 1px solid currentColor; }
.install .code { margin-top: 0; }

/* web-app install panel (Claude.ai): GUI steps + skill ZIP download */
.install .codebox--ask { margin-top: var(--space-3); }
.webinstall { text-align: left; max-width: 34rem; margin: 0 auto; }
.web-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--space-3);
  color: color-mix(in srgb, var(--on-ink) 86%, transparent); font-size: 0.92rem; line-height: 1.5; }
.web-steps li { padding-left: 0.2rem; }
.web-steps li::marker { color: color-mix(in srgb, var(--on-ink) 55%, transparent); font-weight: 600; font-variant-numeric: tabular-nums; }
.web-steps strong { font-weight: 650; color: var(--on-ink); }
.web-steps__note { display: block; font-size: 0.82rem; color: color-mix(in srgb, var(--on-ink) 58%, transparent); margin-top: 0.15rem; }
.dl-skill { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: var(--space-4);
  padding: 0.6rem 1rem; border-radius: var(--radius-md); text-decoration: none;
  font-weight: 650; font-size: 0.92rem; background: var(--on-ink); color: var(--ink);
  border: 1px solid var(--on-ink); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.dl-skill:hover { opacity: 0.92; }
.dl-skill:active { transform: translateY(1px); }
.dl-skill:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 3px; }
.dl-skill svg { width: 15px; height: 15px; flex: none; }
.dl-skill__meta { font-size: 0.78rem; font-weight: 600; opacity: 0.6; }
.webinstall__note { margin-top: var(--space-3); font-size: 0.82rem;
  color: color-mix(in srgb, var(--on-ink) 60%, transparent); }
[hidden] { display: none !important; }

/* code box + copy-to-clipboard button (top-right, icon → "Copied") */
.codebox { position: relative; }
.codebox .code { margin: 0; padding-right: 3.4rem; }   /* clear space under the button */
.copy-btn {
  position: absolute; top: 0.55rem; right: 0.55rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.32rem 0.46rem; border-radius: var(--radius-sm);
  font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-ink) 20%, transparent);
  background: color-mix(in srgb, var(--on-ink) 10%, transparent);
  color: color-mix(in srgb, var(--on-ink) 75%, transparent);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.copy-btn:hover { background: color-mix(in srgb, var(--on-ink) 18%, transparent); color: var(--on-ink); }
.copy-btn:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.copy-btn svg { width: 14px; height: 14px; display: block; flex: none; }
.copy-btn .copy-btn__ic--check, .copy-btn .copy-btn__label { display: none; }
.copy-btn.is-copied { color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 42%, transparent); }
.copy-btn.is-copied .copy-btn__ic--copy { display: none; }
.copy-btn.is-copied .copy-btn__ic--check { display: block; }
.copy-btn.is-copied .copy-btn__label { display: inline; }
@media (prefers-reduced-motion: reduce) { .copy-btn { transition: none; } }

.divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }
/* Reveal is a progressive enhancement: only hidden once JS marks the page,
   so no-JS visitors (and crawlers) always see the content. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* Footer brand mark sits a touch smaller than the header's. */
.foot .brand img { width: 22px; height: 22px; }
/* Spacing utility — replaces former inline style="" attributes so the
   marketing CSP can keep style-src strict (no 'unsafe-inline'). */
.mt-4 { margin-top: var(--space-4); }

/* ── Legal / long-form prose (privacy, etc.) ─────────────────────────────────
   A narrow, readable measure for body text. Uses the same tokens as the rest
   of the site so it inherits theming. No inline styles — keeps CSP strict. */
.legal { max-width: 44rem; }
.legal__updated { color: var(--text-faint); font-size: 0.92rem; margin-top: var(--space-4); }
.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}
.legal h3 { margin-top: var(--space-6); margin-bottom: var(--space-4); }
.legal p, .legal ul { color: var(--text-secondary); line-height: 1.65; margin-bottom: var(--space-4); }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--separator); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--text); }
.legal strong { color: var(--text); font-weight: 600; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-sunk, var(--press));
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.legal__note {
  border-left: 2px solid var(--separator);
  padding-left: var(--space-4);
  margin-block: var(--space-5);
  color: var(--text-secondary);
}

/* Content pages (/open, /format): the .legal prose rules restyle links, which
   would clobber buttons placed in the prose. Keep buttons looking like buttons,
   and give CTA button rows the same breathing room as the hero's. */
.legal a.btn { text-decoration: none; }
.legal a.btn--primary { color: var(--on-ink); }
.legal a.btn--ghost { color: var(--text); }
.cta-row { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }