/* Agenticmore landing v3
   Tokens are the product design system's "Monochrome Ink" values
   (docs/superpowers/specs/2026-10-06-design-system-design.md §3), copied verbatim.
   The dark set appears three times on purpose: OS preference (no toggle used),
   the toggle's [data-theme="dark"], and the always-dark security band.
   Keep the three blocks in sync. */

/* ---------- Light (default) ---------- */
:root {
  color-scheme: light;
  --bg: #f4f4f4;
  --surface: #fafafa;
  --raised: #ffffff;
  --hover: #f0f0f0;
  --selected: #ececec;
  --border: #e0e0e0;
  --border-control: #858585;
  --fg: #171717;
  --fg-muted: #575757;
  --accent: #171717;
  --accent-hover: #333333;
  --on-accent: #fafafa;
  --focus: #171717;
  --danger: #c42b1f;
  --fg-danger: #c42b1f;
  --chart: #525252;

  --st-working: #2f62b0; --st-working-bg: #e3ebf6; --st-working-on: #23559f;
  --st-waiting: #a87300; --st-waiting-bg: #ecb84a; --st-waiting-on: #2a1c00;
  --st-stuck: #8a2c83;   --st-stuck-bg: #8a2c83;   --st-stuck-on: #fbf3fa;
  --st-done: #2f7a35;    --st-done-bg: #e1eedf;    --st-done-on: #2a6a2f;
  --st-failed: #b3261e;  --st-failed-bg: #b3261e;  --st-failed-on: #fdf6f5;
  --st-queued: #5b6880;  --st-queued-bg: #e6e9ef;  --st-queued-on: #414c60;

  --term-bg: #fcfcfc; --term-fg: #1f1f1f; --term-dim: #666666; --term-prompt: #171717;
  --term-ok: #2a6a2f; --term-warn: #7a4e00; --term-err: #a3241b; --term-info: #23559f;

  --shadow-raised: 0 1px 2px #14141412, 0 2px 6px #1414140a;
  --shadow-overlay: 0 2px 4px #14141410, 0 8px 24px #1414141f;
  --band-bg: #101010;
  --phone-bezel: #171717;
}

/* ---------- Dark, from the OS (no explicit choice) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101010; --surface: #171717; --raised: #1f1f1f; --hover: #1c1c1c; --selected: #262626;
    --border: #2c2c2c; --border-control: #727272;
    --fg: #ededed; --fg-muted: #a3a3a3;
    --accent: #ededed; --accent-hover: #d4d4d4; --on-accent: #111111; --focus: #ededed;
    --danger: #dc2626; --fg-danger: #f28b82; --chart: #a3a3a3;
    --st-working: #8fb5ec; --st-working-bg: #1d2a3b; --st-working-on: #a6c4ef;
    --st-waiting: #e2b55a; --st-waiting-bg: #d9ac52; --st-waiting-on: #241a05;
    --st-stuck: #d897d0;   --st-stuck-bg: #c98bc2;   --st-stuck-on: #260d23;
    --st-done: #8dc78f;    --st-done-bg: #1f2e21;    --st-done-on: #a0d2a1;
    --st-failed: #f08b81;  --st-failed-bg: #e27f75;  --st-failed-on: #260c09;
    --st-queued: #a3aec2;  --st-queued-bg: #242932;  --st-queued-on: #bcc5d4;
    --term-bg: #0c0c0c; --term-fg: #e5e5e5; --term-dim: #8f8f8f; --term-prompt: #ededed;
    --term-ok: #8dc78f; --term-warn: #e5b85a; --term-err: #f08b81; --term-info: #8fb5ec;
    --shadow-raised: none;
    --shadow-overlay: 0 8px 24px #00000099;
    --band-bg: #171717;
    --phone-bezel: #3a3a3a;
  }
}

/* ---------- Dark, chosen with the toggle ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101010; --surface: #171717; --raised: #1f1f1f; --hover: #1c1c1c; --selected: #262626;
  --border: #2c2c2c; --border-control: #727272;
  --fg: #ededed; --fg-muted: #a3a3a3;
  --accent: #ededed; --accent-hover: #d4d4d4; --on-accent: #111111; --focus: #ededed;
  --danger: #dc2626; --fg-danger: #f28b82; --chart: #a3a3a3;
  --st-working: #8fb5ec; --st-working-bg: #1d2a3b; --st-working-on: #a6c4ef;
  --st-waiting: #e2b55a; --st-waiting-bg: #d9ac52; --st-waiting-on: #241a05;
  --st-stuck: #d897d0;   --st-stuck-bg: #c98bc2;   --st-stuck-on: #260d23;
  --st-done: #8dc78f;    --st-done-bg: #1f2e21;    --st-done-on: #a0d2a1;
  --st-failed: #f08b81;  --st-failed-bg: #e27f75;  --st-failed-on: #260c09;
  --st-queued: #a3aec2;  --st-queued-bg: #242932;  --st-queued-on: #bcc5d4;
  --term-bg: #0c0c0c; --term-fg: #e5e5e5; --term-dim: #8f8f8f; --term-prompt: #ededed;
  --term-ok: #8dc78f; --term-warn: #e5b85a; --term-err: #f08b81; --term-info: #8fb5ec;
  --shadow-raised: none;
  --shadow-overlay: 0 8px 24px #00000099;
  --band-bg: #171717;
  --phone-bezel: #3a3a3a;
}

/* ---------- The security band is always ink (dark tokens) ---------- */
.band-ink {
  color-scheme: dark;
  --bg: #101010; --surface: #171717; --raised: #1f1f1f; --hover: #1c1c1c; --selected: #262626;
  --border: #2c2c2c; --border-control: #727272;
  --fg: #ededed; --fg-muted: #a3a3a3;
  --accent: #ededed; --accent-hover: #d4d4d4; --on-accent: #111111; --focus: #ededed;
  --danger: #dc2626; --fg-danger: #f28b82; --chart: #a3a3a3;
  --st-working: #8fb5ec; --st-working-bg: #1d2a3b; --st-working-on: #a6c4ef;
  --st-waiting: #e2b55a; --st-waiting-bg: #d9ac52; --st-waiting-on: #241a05;
  --st-done: #8dc78f;    --st-done-bg: #1f2e21;    --st-done-on: #a0d2a1;
  --st-failed: #f08b81;  --st-failed-bg: #e27f75;  --st-failed-on: #260c09;
  --shadow-raised: none;
}

/* ---------- Fonts: self-hosted only, nothing is fetched from a third party (GDPR) ----------
   The product's pair (OFL-1.1). Drop the variable files into fonts/ (see fonts/README.md);
   until then the system stacks below are used. */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: local("Schibsted Grotesk"), url("fonts/SchibstedGrotesk-Variable.woff2") format("woff2"), url("fonts/SchibstedGrotesk-Variable.ttf") format("truetype");
}
@font-face {
  font-family: "Red Hat Mono"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: local("Red Hat Mono"), url("fonts/RedHatMono-Variable.woff2") format("woff2"), url("fonts/RedHatMono-Variable.ttf") format("truetype");
}

/* ---------- Scale ---------- */
:root {
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px;
  --gutter: 16px;
  --maxw: 1200px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --fast: 120ms;
  --base: 200ms;
  --topbar-h: 60px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
@media (prefers-reduced-motion: reduce) { :root { --fast: 0ms; --base: 0ms; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
code, kbd { font-family: var(--font-mono); font-size: .92em; }
svg { flex: none; }
.ic { width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -.25em; }
.sic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
html { accent-color: var(--accent); caret-color: var(--fg); scrollbar-color: var(--border-control) var(--surface); }
.budgets em { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { padding-left: 32px; padding-right: 32px; } }

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 60;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 14px; border-radius: var(--r-md); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- Buttons, tags, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 .9375rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) linear, border-color var(--fast) linear, color var(--fast) linear;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover, .btn--primary:active { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--secondary { background: var(--raised); color: var(--fg); border-color: var(--border-control); }
.btn--secondary:hover, .btn--secondary:active { background: var(--hover); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: .875rem; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  font: 600 .75rem/1 var(--font-sans); white-space: nowrap;
}
.tag--outline { border: 1px solid var(--border-control); color: var(--fg); }
.tag--solid { background: var(--accent); color: var(--on-accent); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 7px; border-radius: var(--r-sm);
  font: 600 .75rem/1 var(--font-sans); white-space: nowrap;
}
.chip--working { background: var(--st-working-bg); color: var(--st-working-on); }
.chip--waiting { background: var(--st-waiting-bg); color: var(--st-waiting-on); }
.chip--stuck   { background: var(--st-stuck-bg);   color: var(--st-stuck-on); }
.chip--done    { background: var(--st-done-bg);    color: var(--st-done-on); }
.chip--queued  { background: var(--st-queued-bg);  color: var(--st-queued-on); }
.chip--auto    { background: transparent; color: var(--fg); border: 1px solid var(--border-control); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  background: transparent; color: var(--fg); border: 1px solid transparent; border-radius: var(--r-md);
  font: 500 .875rem/1 var(--font-sans); cursor: pointer;
}
.icon-btn:hover, .icon-btn:active { background: var(--hover); }

/* terminal colour helpers, shared by hero and tiles */
.t-prompt { color: var(--term-prompt); font-weight: 600; }
.t-dim { color: var(--term-dim); }
.t-ok { color: var(--term-ok); }
.t-warn { color: var(--term-warn); font-weight: 600; }
.t-err { color: var(--term-err); }
.t-info { color: var(--term-info); }
.t-strong { color: var(--term-fg); font-weight: 600; }

/* priority bars (Linear-style) and risk meter (DS §3.7) */
.bars { display: inline-flex; align-items: flex-end; gap: 1.5px; width: 12px; height: 10px; flex: none; }
.bars { background-image:
  linear-gradient(var(--fg), var(--fg)),
  linear-gradient(var(--fg), var(--fg)),
  linear-gradient(var(--fg), var(--fg));
  background-repeat: no-repeat;
  background-size: 3px 40%, 3px 70%, 3px 100%;
  background-position: 0 100%, 4.5px 100%, 9px 100%;
}
.bars--2 { background-image: linear-gradient(var(--fg), var(--fg)), linear-gradient(var(--fg), var(--fg)), linear-gradient(var(--border-control), var(--border-control)); }
.bars--1 { background-image: linear-gradient(var(--fg), var(--fg)), linear-gradient(var(--border-control), var(--border-control)), linear-gradient(var(--border-control), var(--border-control)); }
.meter { display: inline-block; width: 22px; height: 6px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--fg) 0 22%, transparent 22% 26%, var(--border-control) 26% 48%, transparent 48% 52%, var(--border-control) 52% 74%, transparent 74% 78%, var(--border-control) 78% 100%); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 12px; min-height: var(--topbar-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.brand-mark { width: 20px; height: 20px; fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; }
.brand-mark circle { fill: var(--fg); stroke: none; }
.brand-word { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }
.menu-btn { display: none; margin-left: auto; }
.sitenav { order: 5; width: 100%; }
.sitenav ul { display: flex; flex-wrap: wrap; gap: 0 4px; padding-bottom: 8px; }
.sitenav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  border-radius: var(--r-md); color: var(--fg-muted); font-weight: 500; font-size: .9375rem; text-decoration: none;
}
.sitenav a:hover { color: var(--fg); background: var(--hover); }
.theme-btn--menu {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--fg-muted); font: 500 .9375rem/1 var(--font-sans); cursor: pointer;
}
.theme-btn--menu:hover { color: var(--fg); background: var(--hover); }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.theme-btn .theme-sun { display: none; }
:root[data-theme="dark"] .theme-btn .theme-moon { display: none; }
:root[data-theme="dark"] .theme-btn .theme-sun { display: inline; }

/* With JS: the nav folds into a menu on small screens. */
.js .menu-btn { display: inline-flex; }
.js .topbar-actions { margin-left: 0; }
.js .sitenav { display: none; }
.js .topbar.is-open .sitenav { display: block; }
.js .sitenav ul { flex-direction: column; padding: 4px 0 12px; }
.nav-theme { display: none; }
@media (max-width: 559px) {
  .topbar-inner { gap: 8px; }
  .js .topbar-actions .theme-btn { display: none; }
  .js .nav-theme { display: block; }
  .menu-btn .ic { display: none; }
}
/* The longer wordmark: below 420 px the header shows the wordmark without the mark, so brand, menu and CTA keep one row. */
@media (max-width: 419px) {
  .topbar-inner { gap: 4px; }
  .topbar .brand-mark { display: none; }
  .brand-word { font-size: 1rem; }
  .menu-btn { padding: 0 8px; }
  .topbar-cta { padding: 0 12px; }
}
@media (min-width: 960px) {
  .js .menu-btn, .menu-btn { display: none; }
  .sitenav, .js .sitenav { display: block; order: 0; width: auto; margin-left: auto; }
  .sitenav ul, .js .sitenav ul { flex-direction: row; padding: 0; }
  .topbar-inner { flex-wrap: nowrap; }
  .topbar-actions, .js .topbar-actions { margin-left: 8px; }
}

/* ---------- Section scaffolding ---------- */
.section { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 768px) { .section { padding-top: 96px; padding-bottom: 96px; } }
@media (min-width: 1280px) { .section { padding-top: 120px; padding-bottom: 120px; } }
.section--alt { background: var(--bg); border-block: 1px solid var(--border); }
.section--tight { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 768px) { .section.section--tight { padding-top: 72px; padding-bottom: 72px; } }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
h2 {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance;
}
.h2-sm { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); margin-bottom: 28px; }
h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.section-sub { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.45; color: var(--fg-muted); max-width: 36rem; text-wrap: pretty; }

/* ---------- Hero ---------- */
.hero { padding-top: 40px; padding-bottom: 72px; overflow: clip; }
.hero-grid { display: grid; gap: 40px; }
.hero-copy { display: grid; gap: 28px; }
h1 {
  font-size: clamp(2.125rem, 1rem + 5.4vw, 4.75rem);
  line-height: .98; letter-spacing: -.04em; font-weight: 800;
}
h1 span { display: block; text-wrap: balance; }
.lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.4; color: var(--fg-muted); max-width: 32rem; text-wrap: pretty; }
.agents-line { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); display: grid; gap: 4px; }
.agents-label { font-size: .875rem; color: var(--fg-muted); }
.agents-list { display: flex; flex-wrap: wrap; gap: 4px .5em; font-weight: 600; font-size: 1.0625rem; }
.agents-list span:not(:last-child)::after { content: "·"; padding-left: .5em; color: var(--fg-muted); font-weight: 400; }
.agents-note { font-size: .875rem; color: var(--fg-muted); }
@media (min-width: 768px) { .hero { padding-top: 56px; padding-bottom: 96px; } }
.hero-side { max-width: 40rem; }
@media (min-width: 1200px) {
  .hero-side { max-width: none; padding-top: 8px; }
  .hero-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; }
  h1 { font-size: clamp(3rem, .5rem + 3.6vw, 4.25rem); }
}

/* ---------- Developers: bento ---------- */
.bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: var(--r-xl);
  background: var(--raised); border: 1px solid var(--border); box-shadow: var(--shadow-raised);
  min-width: 0;
}
.tile h3 { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.tile h3 .ic { width: 20px; height: 20px; }
.tile p { color: var(--fg-muted); font-size: .9375rem; line-height: 1.45; }
.tile-art { min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
/* Rows balance at every width: the phone tile spans exactly two rows. */
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--board { grid-column: span 2; }
  .tile--phone { grid-row: span 2; }
  .tile--preview, .tile--sleep { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--board { grid-column: 1 / span 2; grid-row: 1; }
  .tile--phone { grid-column: 3; grid-row: 1 / span 2; }
  .tile--preview { grid-column: 1 / span 2; }
  .tile--sleep { grid-column: auto; }
}

/* Agent Board art: lane cards, the twin of the hero board lanes */
.art-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .art-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lane-card { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.lane-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .875rem; }
.lane-card-head b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-card-tail { font: .78rem/1.5 var(--font-mono); color: var(--term-fg); }
.lane-card-tail p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Phone art */
.art-phone { align-items: center; justify-content: center; }
.tile--phone .tile-art { flex: 1; }


/* ---------- Phone: one component, used by the hero demo and the developers tile ----------
   Everything inside is sized in em, so a phone scales with its font-size and nothing else. */
.phone {
  box-sizing: border-box; display: flex; flex-direction: column;
  aspect-ratio: 9 / 19; padding: .55em; border-radius: 2.6em;
  background: var(--phone-bezel); box-shadow: var(--shadow-overlay);
  color: var(--fg); line-height: 1.35; text-align: left;
}
.phone-screen {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: .5em;
  padding: .45em .65em .35em; border-radius: 2.05em; background: var(--surface);
}
.phone-status { display: flex; align-items: center; justify-content: space-between; height: 1.7em; padding: 0 .9em; font-size: .78em; font-weight: 700; flex: none; }
.phone-island { width: 5.6em; height: 1.45em; border-radius: 999px; background: var(--phone-bezel); }
.phone-status .bars { width: 1.1em; height: .8em; }
.phone-head { display: flex; align-items: center; justify-content: space-between; padding: .1em .2em 0; font-weight: 700; font-size: 1.15em; flex: none; }
.phone-count { font-size: .68em; line-height: 1; font-variant-numeric: tabular-nums; padding: .35em .6em; border-radius: 999px; background: var(--selected); }
.phone-list { display: flex; flex-direction: column; gap: .45em; min-height: 0; overflow: hidden; }
.phone-item {
  display: grid; gap: .3em; padding: .6em .65em; border-radius: .8em; font-size: .88em;
  background: var(--raised); border: 1px solid var(--border);
}
.phone-item--wait { border-color: var(--border-control); }
.phone .chip { justify-self: start; height: auto; padding: .25em .5em; gap: .3em; border-radius: .4em; font-size: .9em; }
.phone .sic { width: 1em; height: 1em; }
.phone .ic { width: 1.15em; height: 1.15em; }
.phone-title { font-weight: 600; overflow-wrap: anywhere; }
.phone-title code { font-size: .95em; font-weight: 600; white-space: nowrap; }
.phone-kind { display: inline-flex; align-items: center; gap: .4em; color: var(--fg-muted); font-size: .92em; }
.phone-risk { display: inline-flex; align-items: center; gap: .45em; color: var(--fg-muted); }
.phone-risk .meter { width: 2em; height: .5em; }
.phone-why { color: var(--fg-muted); }
.phone-actions { display: flex; gap: .4em; margin-top: .1em; }
.phone-act {
  position: relative; padding: .45em .75em; border-radius: .55em; font-weight: 600;
  background: var(--raised); border: 1px solid var(--border-control);
  transition: background-color .15s linear, transform .15s var(--ease);
}
.phone-act--ghost { border-color: transparent; }
.phone-act.is-pressed { background: var(--selected); transform: scale(.95); }
.phone-act.is-pressed::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em;
  border-radius: 50%; border: 2px solid var(--fg); animation: phone-tap .45s var(--ease) both;
}
@keyframes phone-tap { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.2); } }
.phone-tabbar {
  margin-top: auto; flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: .45em; border-top: 1px solid var(--border); font-size: .72em; color: var(--fg-muted);
}
.phone-tabbar > * { display: flex; flex-direction: column; align-items: center; gap: .2em; font-weight: 500; }
.phone-tabbar b { color: var(--fg); font-weight: 700; }
.phone-tabbar .ic { width: 1.35em; height: 1.35em; }
.phone--tile { font-size: 13.5px; width: min(100%, 16.3em); } /* same metrics as the hero phone at desktop size */
@media (prefers-reduced-motion: reduce) { .phone-act.is-pressed::after { animation: none; } }
@media (forced-colors: active) { .phone, .phone-item { border: 1px solid CanvasText; box-shadow: none; } }

/* Terminal art */
.art-term {
  font: .8125rem/1.6 var(--font-mono); color: var(--term-fg);
  background: var(--term-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px;
  overflow-wrap: anywhere;
}
/* Browser art */
.art-browser { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; gap: 0; justify-content: flex-start; }
.br-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.br-bar i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border-control); }
.br-bar span { margin-left: 6px; font-size: .75rem; color: var(--fg-muted); }
.art-browser ul { padding: 12px 14px; display: grid; gap: 6px; font: .8125rem/1.4 var(--font-mono); }
/* Preview art */
.art-preview { display: grid; gap: 10px; align-content: start; justify-content: stretch; }
.pv-frame { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); font-size: .875rem; }
.pv-title { font-weight: 700; }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-switch { position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--accent); flex: none; }
.pv-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--on-accent); }
.pv-switch--off { background: var(--border-control); }
.pv-switch--off::after { right: auto; left: 2px; }
.pv-banner { padding: 6px 8px; border-radius: var(--r-sm); background: var(--selected); font-size: .8125rem; }
@media (min-width: 720px) {
  .art-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; }
  .art-preview .pv-frame { grid-column: 2; grid-row: 1 / span 3; }
}
.pv-url, .pv-share {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); font: .8125rem/1.3 var(--font-mono); min-width: 0;
}
.pv-url { overflow-wrap: anywhere; background: var(--surface); }
.pv-share { justify-content: flex-start; font-family: var(--font-sans); font-weight: 600; }
.pv-share span { margin-left: auto; font: 500 .75rem/1 var(--font-mono); color: var(--fg-muted); }
/* Sleep art */
.art-sleep { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.art-sleep .sl-arrow { width: 1px; height: 14px; margin-left: 22px; }
.art-sleep .sl-arrow::after { right: -3px; top: auto; bottom: 0; width: 7px; height: 5px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sl { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-md); border: 1px dashed var(--border-control); font-size: .8125rem; font-weight: 600; color: var(--fg-muted); }
.sl--on { border-style: solid; color: var(--fg); background: var(--surface); }
.sl-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sl-step em { font-style: normal; font-size: .8125rem; color: var(--fg-muted); }
.sl-arrow { width: 16px; height: 1px; background: var(--border-control); position: relative; }
.sl-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 5px; height: 7px; background: var(--border-control); clip-path: polygon(0 0, 100% 50%, 0 100%); }

.also { display: grid; gap: 4px 28px; margin-top: 28px; }
.also li { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--fg); font-size: .9375rem; }
.also .ic { color: var(--fg-muted); }
@media (min-width: 900px) { .also { grid-template-columns: repeat(3, auto); justify-content: start; } }

/* ---------- Jira & Linear flow ---------- */
.flow { display: grid; gap: 16px; counter-reset: none; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.flow-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-control); font-weight: 700; font-size: .8125rem; line-height: 1; font-variant-numeric: tabular-nums; background: var(--surface);
}
.flow-art {
  display: grid; gap: 6px; align-content: center; padding: 14px;
  border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--border); margin-block: 4px 8px;
  font-size: .8125rem; min-width: 0;
}
.flow-step h3 { font-size: 1rem; }
.flow-step p { color: var(--fg-muted); font-size: .9375rem; }
.is-row { display: grid; grid-template-columns: 12px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: var(--r-sm); }
.is-row code { font-weight: 500; }
.is-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-row b { font-size: .75rem; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--border-control); }
.is-row--top { background: var(--raised); border: 1px solid var(--border-control); border-radius: var(--r-md); }
.is-row { border: 1px solid transparent; border-bottom-color: var(--border); }
.is-row--top b { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.art-task p, .art-pr p { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.art-task .ic, .art-pr .ic { width: 16px; height: 16px; color: var(--fg-muted); }
.art-pr p:first-child { font-weight: 600; }
.art-pr-by { color: var(--fg-muted); }
@media (min-width: 860px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .flow-art { min-height: 168px; }
  .flow-step:not(:last-child)::after {
    content: ""; position: absolute; top: 14px; left: 40px; right: -28px; height: 1px;
    background: var(--border-control);
  }
  .flow-step:not(:last-child)::before {
    content: ""; position: absolute; top: 10px; right: -28px; width: 7px; height: 9px;
    background: var(--border-control); clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}
.sync {
  margin-top: 28px; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px dashed var(--border-control); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
}
.sync-label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.sync-steps { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--fg-muted); font-size: .9375rem; }
.sync-steps li { display: inline-flex; align-items: center; gap: 8px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; }
.sync-dot--working { background: var(--st-working); }
.sync-dot--done { background: var(--st-done); }

/* ---------- Reports ---------- */
.reports-grid { display: grid; gap: 32px; }
.reports-grid .section-head { margin-bottom: 0; }
.report {
  border-radius: var(--r-xl); background: var(--raised);
  box-shadow: var(--shadow-overlay); overflow: hidden; min-width: 0;
}
.report-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: .9375rem; }
.report-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.report-kpis div { padding: 14px 18px; display: grid; gap: 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.report-kpis div:nth-child(2n) { border-right: 0; }
.report-kpis div:nth-child(n+3) { border-bottom: 0; }
.report-kpis span, .report-label { font-size: .8125rem; color: var(--fg-muted); }
.report-kpis b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -.02em; }
.report-split { display: grid; }
.report-block { padding: 16px 18px; display: grid; gap: 10px; min-width: 0; }
.report-block + .report-block { border-top: 1px solid var(--border); }
.hbars, .budgets { display: grid; gap: 8px; font-size: .8125rem; }
.hbars li, .budgets li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hbars span { font-family: var(--font-mono); font-size: .78rem; }
.budgets span { font-size: .8125rem; }
.hbars i, .budgets i { height: 8px; border-radius: 2px; background: var(--hover); position: relative; overflow: hidden; }
.hbars i::after, .budgets i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); background: var(--chart); border-radius: 2px; }
.budgets em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: .78rem; }
.hbars li { grid-template-columns: 96px minmax(0, 1fr); }
.report-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); font-size: .875rem; }
.report-foot span { display: inline-flex; align-items: center; gap: 8px; }
.report-dl { font-size: .75rem; font-weight: 600; line-height: 1; padding: 6px 10px; border: 1px solid var(--border-control); border-radius: var(--r-sm); }

.feature-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.feature-list li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.feature-list .ic { width: 22px; height: 22px; grid-row: span 2; margin-top: 1px; }
.feature-list b { font-weight: 600; }
.feature-list span { color: var(--fg-muted); font-size: .9375rem; }
.privacy { display: flex; flex-wrap: wrap; gap: 8px; }
.privacy li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border-control); font-size: .875rem; font-weight: 500;
}
.privacy .ic { width: 16px; height: 16px; }
@media (min-width: 720px) { .report-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .report-kpis div { border-bottom: 0; }
  .report-kpis div:nth-child(2n) { border-right: 1px solid var(--border); }
  .report-kpis div:last-child { border-right: 0; }
  .report-split { grid-template-columns: 1fr 1fr; }
  .report-block + .report-block { border-top: 0; border-left: 1px solid var(--border); } }
@media (min-width: 1080px) {
  .reports-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; row-gap: 28px; align-items: start; }
  .reports-grid .section-head { grid-column: 1 / -1; }
  .report { grid-column: 1; grid-row: 2; }
  .privacy { grid-column: 1; grid-row: 3; }
  .feature-list { grid-column: 2; grid-row: 2 / span 2; }
}

/* ---------- Security (ink band) ---------- */
.band-ink { background: var(--band-bg); color: var(--fg); border-block: 1px solid var(--border); }
.arch {
  display: grid; gap: 0; margin-bottom: clamp(40px, 6vw, 64px);
  font-size: .875rem;
}
.arch-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--fg-muted); margin-bottom: 10px; }
.arch-cp, .arch-vds { border: 1px solid var(--border-control); border-radius: var(--r-xl); padding: 16px; min-width: 0; }
.arch-cp-items { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-cp-items span, .arch-gate {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-md);
  background: var(--raised); border: 1px solid var(--border); font-weight: 500;
}
.arch-cp-items .ic, .arch-gate .ic, .arch-key .ic { width: 16px; height: 16px; }
.arch-tunnel { position: relative; display: grid; place-items: center; min-height: 64px; }
.arch-tunnel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--border-control); }
.arch-tunnel span { position: relative; background: var(--band-bg); padding: 4px 10px; font-size: .8125rem; line-height: 1.3; color: var(--fg-muted); text-align: center; }
.arch-ws-row { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arch-ws { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--border); min-width: 0; }
.arch-ws span { color: var(--fg-muted); font-size: .8125rem; }
.arch-key { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--fg) !important; font-size: .8125rem !important; }
.arch-egress { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.arch-egress ul { display: grid; gap: 6px; font: .8125rem/1.3 var(--font-mono); }
.arch-egress li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.arch-egress .ok .ic { color: var(--st-done); width: 16px; height: 16px; }
.arch-egress .no { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--st-failed); }
.arch-egress .no .ic { color: var(--st-failed); width: 16px; height: 16px; }
@media (min-width: 900px) {
  .arch { grid-template-columns: minmax(0, 4fr) minmax(140px, 1.6fr) minmax(0, 6fr); align-items: center; }
  .arch-tunnel { min-height: 0; height: 100%; }
  .arch-tunnel::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed var(--border-control); }
  .arch-egress { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .arch-egress ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
}

.cgroups { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.cgroup h3, .addons h3 { padding-bottom: 10px; border-bottom: 1px solid var(--border-control); font-size: 1rem; font-weight: 700; }
.controls { display: grid; }
.controls li, .addons li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.controls .ic, .addons .ic { width: 22px; height: 22px; grid-row: span 2; margin-top: 1px; }
.controls b, .addons b { font-weight: 600; }
.controls span, .addons span { color: var(--fg-muted); font-size: .9375rem; }
.addon { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-control); color: var(--fg); font: 500 .75rem/1.4 var(--font-sans); font-style: normal; }
@media (min-width: 720px) { .cgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cgroups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.addons { margin-top: 48px; }
.addons ul { display: grid; column-gap: 32px; }
@media (min-width: 860px) { .addons ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.limits {
  margin-top: 28px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  font-size: .9375rem; color: var(--fg-muted); max-width: 52rem;
}
.limits b { color: var(--fg); }
.limits .ic { width: 22px; height: 22px; color: var(--fg); }

/* ---------- Deployment ---------- */
.deploy { display: grid; gap: 16px; }
.dep {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--raised);
}
.dep--rec { border: 2px solid var(--accent); }
.dep--rec .tag { position: absolute; top: -12px; left: 18px; }
.dep h3 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.dep p { color: var(--fg-muted); }
.dep-art { display: grid; gap: 6px; margin-bottom: 6px; }
.dep-bar { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-md); font-size: .8125rem; font-weight: 600; }
.dep-bar--yours { background: var(--accent); color: var(--on-accent); }
.dep-bar--ours { border: 1px dashed var(--border-control); color: var(--fg-muted); }
.dep-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: .8125rem; color: var(--fg-muted); }
.dep-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dep-key { width: 22px; height: 12px; border-radius: 3px; }
.dep-key--yours { background: var(--accent); }
.dep-key--ours { border: 1px dashed var(--border-control); }
.facts { margin-top: 36px; display: grid; gap: 4px 32px; }
.facts li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 500; }
@media (min-width: 860px) {
  .deploy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Table stakes: icon + short label ---------- */
.basics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; border-top: 1px solid var(--border); }
@media (min-width: 480px) { .basics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.basics li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--border); font-weight: 500; line-height: 1.3; }
.basics .ic { width: 24px; height: 24px; flex: none; }
@media (min-width: 640px) { .basics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .basics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } }

/* ---------- Request-access dialog (the page's only form) ---------- */
.modal {
  width: min(30rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px 24px 20px;
  border: none; border-radius: var(--r-xl);
  background: var(--raised); color: var(--fg); box-shadow: var(--shadow-overlay);
}
.modal::backdrop { background: #10101066; }
.modal:focus, .modal:focus-visible { outline: none; }
.modal .form-msg:empty { min-height: 0; }
.modal[open] { animation: modal-in .2s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal-close-form { position: absolute; top: 10px; right: 10px; margin: 0; }
.modal-title { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; padding-right: 40px; }
.modal-sub { margin-top: 8px; color: var(--fg-muted); }
.modal .cta-form { margin-top: 20px; }
.cta-form { display: grid; gap: 8px; }
.cta-form label { font-weight: 600; font-size: .9375rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-row input { flex: 1 1 240px; min-width: 0; }
.cta-row .btn { flex: 0 0 auto; }
@media (max-width: 559px) { .cta-row .btn { flex: 1 0 100%; } }
.cta-form input {
  min-height: 48px; width: 100%; padding: 0 14px;
  border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--raised); color: var(--fg);
  font: 1rem/1.2 var(--font-sans);
}
.cta-form input::placeholder { color: var(--fg-muted); opacity: 1; }
.cta-form input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.cta-form .btn { min-height: 48px; }
.form-msg { min-height: 1.5em; font-size: .9375rem; color: var(--fg-muted); }
.form-msg.is-error { color: var(--fg-danger); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: 32px 40px; background: var(--bg); }
.footer-inner { display: grid; gap: 14px; }
.brand--foot { min-height: 0; }
.footer-note, .footer-copy { color: var(--fg-muted); font-size: .875rem; }
.footer nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--fg-muted); font-size: .9375rem; }
.footer nav a:hover { color: var(--fg); }

/* Dark theme: overlays get a 1 px edge because shadows vanish on dark (DS §3.15). */
:root[data-theme="dark"] .report { border: 1px solid var(--border); }
:root[data-theme="dark"] .modal { border: 1px solid var(--border-control); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .report { border: 1px solid var(--border); }
  :root:not([data-theme="light"]) .modal { border: 1px solid var(--border-control); box-shadow: none; }
}

/* ---------- Forced colours ---------- */
@media (forced-colors: active) {
  .chip, .tag, .btn, .dep-bar, .sl { border: 1px solid CanvasText; }
  .tile, .report { box-shadow: none; }
  .brand-mark { stroke: CanvasText; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .theme-moon { display: none; }
  :root:not([data-theme="light"]) .theme-btn .theme-sun { display: inline; }
}