/* Landing page styles. Dark first: the dark tokens are the default and the light ones apply under
   prefers-color-scheme: light (feature images follow the same rule). One brand accent, violet; each feature
   section carries the app's own section colour (--c), with an "ink" variant that keeps text contrast in both
   appearances. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark light;
  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #0C0A14;
  --bg-band: #110E1C;
  --surface: #16131F;
  --surface-2: #1D1929;
  --ink: #EFECF7;
  --ink-2: #CFC9E0;
  --muted: #A49DBA;
  --line: #2A2539;
  --line-soft: #211D2E;
  --frame: rgb(255 255 255 / 10%);

  --accent: #874DF2;
  --accent-hover: #9864F7;
  --accent-ink: #B89BFF;
  --on-accent: #FFFFFF;
  --grad-a: #B89BFF;
  --grad-b: #46D3D6;

  --c-violet: #874DF2;   --c-violet-ink: #B89BFF;   --c-violet-soft: rgb(135 77 242 / 18%);
  --c-green: #29AD61;    --c-green-ink: #5AD893;    --c-green-soft: rgb(41 173 97 / 17%);
  --c-magenta: #DB389E;  --c-magenta-ink: #F27CC6;  --c-magenta-soft: rgb(219 56 158 / 17%);
  --c-orange: #F58C29;   --c-orange-ink: #FFAE63;   --c-orange-soft: rgb(245 140 41 / 16%);
  --c-blue: #2E7AF5;     --c-blue-ink: #7DAEFF;     --c-blue-soft: rgb(46 122 245 / 18%);
  --c-teal: #1AA8AD;     --c-teal-ink: #4FD4D8;     --c-teal-soft: rgb(26 168 173 / 18%);
  --c-indigo: #5454DB;   --c-indigo-ink: #9C9CF7;   --c-indigo-soft: rgb(84 84 219 / 20%);

  --term-bg: #08070D;
  --term-ink: #E6E2F2;
  --term-dim: #8C85A3;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --gutter: 16px;
  --shadow-shot: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 30px 60px -20px rgb(0 0 0 / 70%), 0 12px 24px -12px rgb(0 0 0 / 60%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F7F6FB;
    --bg-band: #EFEDF6;
    --surface: #FFFFFF;
    --surface-2: #F4F2FA;
    --ink: #17131F;
    --ink-2: #312B40;
    --muted: #5E5770;
    --line: #E1DDEA;
    --line-soft: #ECE9F3;
    --frame: rgb(23 19 31 / 10%);

    --accent: #7B3FEA;
    --accent-hover: #6A30D8;
    --accent-ink: #6431D2;
    --grad-a: #6A32D6;
    --grad-b: #0F7D82;

    --c-violet-ink: #6431D2;   --c-violet-soft: rgb(135 77 242 / 12%);
    --c-green-ink: #19804A;    --c-green-soft: rgb(41 173 97 / 13%);
    --c-magenta-ink: #B3237F;  --c-magenta-soft: rgb(219 56 158 / 12%);
    --c-orange-ink: #A9570C;   --c-orange-soft: rgb(245 140 41 / 15%);
    --c-blue-ink: #1E5FCF;     --c-blue-soft: rgb(46 122 245 / 12%);
    --c-teal-ink: #0E7579;     --c-teal-soft: rgb(26 168 173 / 14%);
    --c-indigo-ink: #3B3BC2;   --c-indigo-soft: rgb(84 84 219 / 13%);

    --term-bg: #17131F;
    --term-ink: #F1EEF8;
    --term-dim: #9C95B2;
    --shadow-shot: 0 30px 60px -24px rgb(40 20 80 / 30%), 0 12px 24px -12px rgb(40 20 80 / 18%);
    --shadow-card: 0 1px 2px rgb(40 20 80 / 6%);
  }
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
code { font: 500 0.9em/1.4 var(--mono); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

:focus-visible { outline: 2.5px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: var(--radius-s); }
.skip:focus { top: 12px; }

.ico { width: 20px; height: 20px; flex: none; }
.g { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gf { fill: currentColor; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; font-size: 1.125rem; letter-spacing: -0.015em; }
.brand img { width: 32px; height: 32px; }
.nav-links { display: none; gap: 2px; margin-left: auto; }
.nav-links a { display: block; padding: 8px 12px; border-radius: var(--radius-s); text-decoration: none; color: var(--muted); font-weight: 550; font-size: 0.95rem; }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav .btn-small { margin-left: auto; }
@media (min-width: 860px) {
  .nav-links { display: flex; }
  .nav .btn-small { margin-left: 8px; }
}

/* ---------- Buttons and the command chip ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-m);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none; letter-spacing: -0.005em;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 1px 0 rgb(255 255 255 / 18%) inset;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 0.95rem; border-radius: 10px; box-shadow: none; }

.cmd {
  display: inline-flex; align-items: stretch; max-width: 100%; min-height: 52px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  overflow: hidden;
}
.cmd code {
  display: flex; align-items: center; padding: 10px 14px; min-width: 0;
  background: none; border: 0; border-radius: 0;
  font: 500 0.8125rem/1.45 var(--mono); color: var(--ink-2);
  white-space: normal; overflow-wrap: anywhere;
}
.copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 0 14px; border: 0; border-left: 1px solid var(--line);
  background: transparent; color: var(--muted); font: 600 0.875rem var(--font); cursor: pointer;
}
.copy .ico { width: 17px; height: 17px; }
.copy:hover { color: var(--ink); background: var(--surface-2); }
.copy:focus-visible { outline-offset: -3px; }
.copy.is-done { color: var(--accent-ink); }

/* ---------- Shared section heads ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 650; letter-spacing: 0.01em; color: var(--accent-ink);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c-violet), var(--c-teal)); }
.eyebrow .ico { width: 18px; height: 18px; }
.section-title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.section-head > .section-title, .section-head > .section-lede { max-width: 46rem; }
.section-lede { margin-top: 16px; font-size: 1.125rem; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-glow {
  position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background:
    radial-gradient(40% 50% at 72% 30%, color-mix(in srgb, var(--c-violet) 30%, transparent), transparent 70%),
    radial-gradient(30% 40% at 95% 75%, color-mix(in srgb, var(--c-teal) 18%, transparent), transparent 70%),
    radial-gradient(35% 45% at 10% 0%, color-mix(in srgb, var(--c-indigo) 16%, transparent), transparent 70%);
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px;
  padding-top: 48px; padding-bottom: 64px;
}
@media (min-width: 720px) {
  .hero-inner { gap: 64px; padding-top: 88px; padding-bottom: 96px; }
  .hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-copy .lede { margin-inline: auto; }
  .hero-copy .cta, .hero-copy .facts { justify-content: center; }
}
.hero-copy { min-width: 0; }
.hero-app-icon { display: block; width: 96px; height: 96px; margin-bottom: 18px; }
.hero h1 {
  margin-top: 18px;
  font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.6rem);
  line-height: 1.0; font-weight: 820; letter-spacing: -0.042em;
}
.hero h1 span { display: block; }
.hero h1 span + span {
  background: linear-gradient(100deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.lede { margin-top: 24px; font-size: 1.1875rem; line-height: 1.55; color: var(--muted); max-width: 36em; }
@media (min-width: 720px) { .lede { font-size: 1.25rem; } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.facts li { font-size: 0.875rem; font-weight: 550; color: var(--muted); padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.facts li:first-child { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent); }

/* Three feature images stacked like windows on a desk: diagonal on phones, side by side with the middle one in
   front from 720 px. */
.stack { position: relative; aspect-ratio: 1.12; min-width: 0; }
.stack-item {
  position: absolute; width: 74%;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--frame);
  box-shadow: var(--shadow-shot), 0 0 0 1px rgb(0 0 0 / 4%);
  background: var(--surface);
}
.stack-item img { width: 100%; }
.stack-1 { top: 0; left: 0; z-index: 1; }
.stack-2 { top: 21%; right: 0; z-index: 2; }
.stack-3 { top: 44%; left: 9%; z-index: 3; }
@media (min-width: 720px) {
  .stack { aspect-ratio: 2.05; max-width: 1136px; width: 100%; margin-inline: auto; }
  .stack-item { width: 55%; }
  .stack-1 { top: 0; left: 0; }
  .stack-2 { top: 0; right: 0; left: auto; z-index: 1; }
  .stack-3 { top: auto; bottom: 0; left: 22.5%; z-index: 3; }
}

/* ---------- Features ---------- */
.features { padding-block: 40px 24px; }
.section-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.section-index a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--ink-2);
}
.section-index a .ico { width: 18px; height: 18px; color: var(--c-ink); }
.section-index a:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); color: var(--ink); }

.feature {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  padding-block: 64px; border-top: 1px solid var(--line-soft);
}
.feature:first-of-type { margin-top: 40px; }
@media (min-width: 960px) {
  /* Top-aligned: a short render (Protection) next to long copy would otherwise float in the middle of an empty column.
     The render stays in view while the copy beside it scrolls. Even sections mirror the columns so every render gets
     the wide one. */
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; padding-block: 88px; }
  .feature:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature:nth-of-type(even) .feature-text { order: 2; }
  .feature .shot { position: sticky; top: 96px; margin-top: 6px; }
}
.feature-text { min-width: 0; }
.feature-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.975rem; color: var(--c-ink); }
.feature-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-soft); }
.feature-icon .ico { width: 20px; height: 20px; }
.feature h3 { margin-top: 16px; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem); line-height: 1.12; font-weight: 780; letter-spacing: -0.028em; }
.feature-summary { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; }

.points { margin-top: 20px; display: grid; gap: 10px; }
.points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.ico-check { width: 18px; height: 18px; margin-top: 2px; color: var(--c-ink, var(--accent-ink)); }

.shot { position: relative; margin: 0; min-width: 0; }
.shot::before {
  content: ""; position: absolute; inset: 8% 4% -6%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 34%, transparent), transparent);
  filter: blur(28px); pointer-events: none;
}
.shot picture { position: relative; z-index: 1; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--frame); box-shadow: var(--shadow-shot); background: var(--surface); }
.shot img { width: 100%; }

/* ---------- Command line and AI ---------- */
.agent { padding-block: 32px 72px; }
.agent-inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  padding-block: 32px;
  border-radius: 24px;
  background:
    radial-gradient(60% 80% at 100% 0%, var(--c-violet-soft), transparent 70%),
    var(--bg-band);
  border: 1px solid var(--line-soft);
  padding-inline: 20px;
}
@media (min-width: 720px) { .agent-inner { padding: 56px 48px; } }
@media (min-width: 1000px) { .agent-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } }
.agent-copy { min-width: 0; }
.agent .section-title { margin-top: 14px; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.agent .points { --c-ink: var(--accent-ink); }
.terminal { margin: 0; min-width: 0; border-radius: 14px; background: var(--term-bg); border: 1px solid rgb(255 255 255 / 8%); box-shadow: var(--shadow-shot); overflow: hidden; }
.terminal-bar { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.terminal-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / 16%); }
.terminal pre { margin: 0; padding: 20px 20px 24px; overflow-x: auto; }
.terminal code { display: block; background: none; border: 0; padding: 0; font: 500 0.875rem/1.7 var(--mono); color: var(--term-ink); white-space: normal; }
/* Commands never wrap: a break inside "--depth" or after "--" changes what someone types. A line that does not fit
   scrolls inside the terminal, never the page. */
.terminal code { width: max-content; min-width: 100%; }
.terminal .line { display: block; margin-block: 0.3em; white-space: pre; }
@media (max-width: 480px) { .terminal code { font-size: 0.7rem; } .terminal pre { padding: 16px 12px 20px; } }
.terminal .prompt { color: var(--c-violet-ink); user-select: none; }
@media (prefers-color-scheme: light) { .terminal .prompt { color: #B89BFF; } }

/* ---------- What it does not do ---------- */
.limits { padding-block: 72px; }
.limit-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
@media (min-width: 640px) { .limit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .limit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.limit-list li { padding: 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.limit-list .ico { width: 26px; height: 26px; color: var(--muted); }
.limit-list h3 { margin-top: 16px; font-size: 1.125rem; font-weight: 720; letter-spacing: -0.01em; }
.limit-list p { margin-top: 8px; color: var(--muted); font-size: 0.97rem; line-height: 1.55; }
@media (max-width: 639px) {
  .limit-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 20px; }
  .limit-list .ico { width: 22px; height: 22px; }
  .limit-list h3 { margin-top: 0; }
  .limit-list p { grid-column: 1 / -1; }
}

/* ---------- Privacy ---------- */
.privacy { padding-block: 80px; background: var(--bg-band); border-block: 1px solid var(--line-soft); }
.privacy-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 32px; margin-top: 40px; }
@media (min-width: 640px) { .privacy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .privacy-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.privacy-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.privacy-list .ico { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--c-violet-soft); color: var(--accent-ink); }
.privacy-list h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin-top: 2px; }
.privacy-list p { margin-top: 6px; color: var(--muted); font-size: 0.97rem; line-height: 1.55; }

/* ---------- Install ---------- */
.install { padding-block: 88px 64px; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; counter-reset: step; }
@media (min-width: 980px) { .steps { grid-template-columns: 1.65fr 1fr 1fr; gap: 18px; } }
.step { position: relative; padding: 28px 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); min-width: 0; }
.badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: 0.95rem; }
.step h3 { margin-top: 18px; font-size: 1.1875rem; font-weight: 740; letter-spacing: -0.012em; }
.step > p { margin-top: 8px; color: var(--muted); font-size: 0.97rem; }
.step-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.step-actions .btn { min-height: 48px; font-size: 1rem; }
.step-actions .cmd { min-height: 48px; }
.step .fine { margin-top: 14px; font-size: 0.85rem; color: var(--muted); }
.install-notes { margin-top: 24px; color: var(--muted); font-size: 0.97rem; }

/* ---------- FAQ ---------- */
.faq { padding-block: 64px 96px; }
.faq-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 980px) { .faq-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; } }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font-weight: 650; font-size: 1.0625rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.faq details[open] summary .ico { transform: rotate(90deg); color: var(--accent-ink); }
.faq summary:hover { color: var(--accent-ink); }
.faq details p { padding: 0 2px 22px; color: var(--muted); max-width: 44em; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line-soft); padding-block: 36px; background: var(--bg-band); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.foot-brand img { width: 28px; height: 28px; }
.foot-label { font-weight: 500; color: var(--muted); font-size: 0.9rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.foot-links a:hover { color: var(--ink); }
.copyright { color: var(--muted); font-size: 0.9rem; }
@media (min-width: 720px) { .copyright { margin-left: auto; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media (min-width: 980px) { .step-actions .cmd code { font-size: 0.75rem; white-space: nowrap; } .step-actions .copy { padding-inline: 12px; } }