/* Sidera Labs site: the shared design system, extracted from P2a (concepts/P2a-sidera-home-impeccable.html).
   Every value here is P2a's. Pages link this after the component CSS (assets/p2/*.css) and before their own inline
   <style>, so a page's rules win at equal specificity and the components keep P2a's cascade.

   Sections:
      1. Tokens            9. Tool row
      2. Base type        10. Numbered steps (.pillars)
      3. Lines            11. Text beside a figure (.split), point lists, feature grids
      4. Heading rows     12. Timeline (.days)
      5. Buttons, links   13. Proof numbers, quotes, placeholders
      6. Nav              14. Callouts
      7. Footer           15. Forms
      8. Heroes           16. Static terminal
                          17. Responsive, reduced motion
   The line budget (SITE-BUILD.md): two frame rails, one full-bleed rule per section with an ember node where it meets
   each rail, terminal frames, form fields and one timeline per page. Nothing else draws a line. */

/* ---------- 1. Tokens ---------- */
:root {
   --void: #000000;
   --line: #2a2a2a;
   --line-hi: #3d3d3d;
   --ember: #e8823f;
   --ember-hi: #ffb27a;
   --ember-deep: #5a2a16;
   --star: #f2f2ee;
   --text: #d9d7d2;
   --muted: #9b9890;
   --dim: #86837d;
   --ok: #9fd8a6;
   --warn: #e9bc64;
   --err: #f2877a;
   --review: #9cb8ff;
   --panel: #070707;
   --frame: min(1320px, calc(100% - 24px));
   --pad-x: clamp(20px, 4vw, 56px);
   --pad-y: clamp(96px, 11vw, 168px);
   --f-dot: "Doto", "Schibsted Grotesk", monospace;
   --rond: "ROND" 100;
   --f-sans: "Schibsted Grotesk", system-ui, sans-serif;
   --f-mono: "IBM Plex Mono", ui-monospace, monospace;

   --node: 5px;                          /* the ember node where a section rule meets a rail */
   --tool: rgba(242, 242, 238, .85);     /* tool logos and names: star-white at 85% */
   --gap-head: clamp(56px, 6vw, 88px);   /* heading row → content */
   --gap-group: clamp(48px, 5vw, 72px);  /* between groups inside a section */
   --gap-block: clamp(88px, 9vw, 128px); /* between the large blocks of a section */
   --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base type: Schibsted Grotesk 17/1.6 on the void; Doto for the h1 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); scrollbar-color: var(--line-hi) var(--void); }
body {
   margin: 0;
   background: var(--void);
   color: var(--text);
   font-family: var(--f-sans);
   font-size: 17px;
   line-height: 1.6;
   overflow-x: clip;   /* clip, not hidden: sticky components (phases) need it */
   -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ember); color: var(--void); }
input, select, textarea { caret-color: var(--ember); }
a { color: var(--star); text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s var(--ease); }
a:hover { color: var(--ember-hi); }
:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--star); font-weight: 500; }
h1 {
   font-family: var(--f-dot);
   font-weight: 900;
   font-size: clamp(36px, 4.5vw, 64px);
   font-variation-settings: var(--rond);
   line-height: 1.08;
   letter-spacing: -0.02em;
   max-width: 26ch;
   margin: 0 auto;
   text-wrap: balance;
}
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.025em; max-width: 18ch; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
/* a command or file named in running text (`/dev-task`): star-white in the text's own face, so Plex Mono stays
   inside terminals. A class, never a bare `code` rule: that would reach the terminal player's <code>. */
.cmd { font: inherit; color: var(--star); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--void); padding: 8px 12px; z-index: 10; }

/* ---------- 3. Lines: two frame rails, one full-bleed rule per section, an ember node where it meets each rail.
   <section class="band"><div class="frame">…</div></section>. .frame.flush drops the padding for full-bleed
   figures. ---------- */
.band { position: relative; border-top: 1px solid var(--line); }
.frame {
   position: relative;
   width: var(--frame);
   margin: 0 auto;
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line);
   padding: var(--pad-y) var(--pad-x);
}
.frame.flush { padding: 0; }
.band > .frame::before, .band > .frame::after {
   content: "";
   position: absolute;
   top: -3px;
   width: var(--node);
   height: var(--node);
   background: radial-gradient(circle, var(--ember) 2px, transparent 2.6px);
   pointer-events: none;
   z-index: 2;
}
.band > .frame::before { left: -3px; }
.band > .frame::after { right: -3px; }
/* .block: the space between the large blocks inside one section */
.block { margin-top: var(--gap-block); }

/* ---------- 4. Heading rows: every h2 (plus its lead) alone in a full-width row; nothing sits beside it ---------- */
.head-row { margin-bottom: var(--gap-head); }
.head-row h2 { max-width: 22ch; text-wrap: balance; }
.head-row .lead { margin-top: 28px; max-width: 56ch; font-size: 18px; color: var(--text); }
/* one sentence per line: <h2 class="h-lines"><span>One.</span> <span>Two.</span></h2>; on a phone a long
   sentence still wraps inside its own line */
.head-row h2.h-lines { max-width: none; }
.h-lines > span { display: block; }

/* ---------- 5. Buttons and links. A button is a label plus a boxed arrow:
   <a class="btn" href="…"><span>Label</span><span class="box" aria-hidden="true"><svg …/></span></a>.
   .solid for the one primary action in a view; .small in the nav. ---------- */
.btn {
   display: inline-flex;
   align-items: stretch;
   gap: 0;
   border: 1px solid var(--star);
   border-radius: 0;
   padding: 0;
   color: var(--star);
   background: transparent;
   font: 500 15px/1 var(--f-sans);
   text-decoration: none;
   cursor: pointer;
   transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn span { padding: 14px 18px; }
.btn .box { display: grid; place-items: center; width: 44px; border-left: 1px solid currentColor; padding: 0; }
.btn .box svg { width: 14px; height: 14px; }
.btn:hover { border-color: var(--ember-hi); color: var(--ember-hi); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--star); color: var(--void); }
.btn.solid .box { border-left-color: rgba(0, 0, 0, .25); }
.btn.solid:hover { background: var(--ember-hi); border-color: var(--ember-hi); color: var(--void); }
.btn.small span { padding: 10px 14px; }
.btn.small .box { width: 36px; }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--line-hi); color: var(--dim); background: transparent; cursor: not-allowed; transform: none; }
/* a row of text links under a block (e.g. "Read the Deliveri Story · How we measured") */
.links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* ---------- 6. Nav: the Doto wordmark, five page links, Book a Call. The current page's link carries
   aria-current="page": star-white with the ember underline, so colour is never the only cue. ---------- */
.nav { border-top: 0; }
.nav .frame {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 14px 32px;
   padding-top: 18px;
   padding-bottom: 18px;
}
.nav .frame::before, .nav .frame::after { display: none; }
.wordmark {
   font-family: var(--f-dot);
   font-weight: 900;
   font-variation-settings: var(--rond);
   font-size: 24px;
   line-height: 1;
   color: var(--star);
   text-decoration: none;
   white-space: nowrap;
}
.wordmark:hover { color: var(--ember-hi); }
.nav-right { display: flex; align-items: center; gap: 32px; }
.nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.nav ul a { color: var(--text); text-decoration: none; font-size: 15px; }
.nav ul a:hover { color: var(--ember-hi); }
.nav ul a[aria-current="page"], .foot-cols a[aria-current="page"] { color: var(--star); text-decoration: underline; text-decoration-color: var(--ember); }
.nav ul a[aria-current="page"]:hover, .foot-cols a[aria-current="page"]:hover { color: var(--ember-hi); }

/* ---------- 7. Footer: three link columns, the wordmark set large in Doto, the legal line ---------- */
.foot .frame { padding-bottom: clamp(112px, 10vw, 144px); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); max-width: 760px; }
.foot-title { font-size: 15px; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.foot-cols ul { display: grid; gap: 8px; }
.foot-cols a { color: var(--text); text-decoration: none; font-size: 15px; }
.foot-cols a:hover { color: var(--ember-hi); text-decoration: underline; text-decoration-color: var(--ember); }
.foot-mark {
   margin-top: clamp(80px, 9vw, 128px);
   font-family: var(--f-dot);
   font-weight: 900;
   font-variation-settings: var(--rond);
   font-size: clamp(44px, 7.2vw, 104px);
   line-height: .9;
   letter-spacing: -0.02em;
   color: var(--star);
   white-space: nowrap;
}
.legal { color: var(--dim); font-size: 14px; margin-top: 24px; }

/* ---------- 8. Heroes: a centred head over the sky. The frame is the sky's positioned parent; everything but the
   sky is lifted above it. .hero is the homepage's; .page-hero is every inner page's:
   <section class="band page-hero"><div class="frame" id="hero-copy">
      <div class="p2-sky" data-p2="sky" data-quiet="true" data-clear="#hero-copy" aria-hidden="true"></div>
      <h1>…</h1> <p class="lead">…</p> <div class="hero-actions">…buttons…</div>
   </div></section>
   Same padding as the homepage hero, so the h1 lands at the same height on every page. ---------- */
.hero .frame > :not(.p2-sky), .page-hero .frame > :not(.p2-sky) { position: relative; z-index: 1; }
.hero .frame, .page-hero .frame { text-align: center; padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(72px, 7.5vw, 112px); }
.hero-sub, .page-hero .lead { max-width: 60ch; margin: 22px auto 0; color: var(--text); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ---------- 9. Tool row: one-colour logos (assets/logos/*-icon.svg, inlined) with their names ---------- */
.tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; }
.tool { display: inline-flex; align-items: center; gap: .5em; color: var(--tool); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; }
.tool svg { width: 1.05em; height: 1.05em; flex: none; display: block; }

/* ---------- 10. Numbered steps: an ember Doto number above each step, for any ordered sequence.
   <ol class="pillars"><li><strong>Install.</strong> <span>…</span></li>…</ol>. Three columns; the page sets the
   top margin. ---------- */
.pillars {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--gap-group) clamp(40px, 5vw, 80px);
   margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: pillar;
}
.pillars li { counter-increment: pillar; }
.pillars li::before {
   content: counter(pillar);
   display: block;
   margin-bottom: 16px;
   font-family: var(--f-dot);
   font-weight: 900;
   font-variation-settings: var(--rond);
   font-size: 48px;
   line-height: 1;
   color: var(--ember);
}
.pillars strong { display: block; margin-bottom: 10px; color: var(--star); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.pillars li > span { display: block; color: var(--muted); max-width: 34ch; } /* only the step text, not spans nested inside it */

/* ---------- 11. Text beside a figure, point lists, feature grids ---------- */
/* .split: text (5) beside a terminal or figure (7), below the heading row, never beside an h2; stacks at 960 */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-group) clamp(48px, 6vw, 96px); align-items: center; }
.split > * { min-width: 0; }
/* .points: a list of bold lead-ins, each with a short line under it */
.points { display: grid; gap: 28px; }
.points li { color: var(--muted); max-width: 40ch; }
.points strong { display: block; color: var(--star); font-weight: 500; font-size: 18px; line-height: 1.4; margin-bottom: 4px; }
/* .options: two weighed choices, a larger h3 over a muted line */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-group) clamp(48px, 7vw, 112px); }
.options h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 14px; max-width: 22ch; }
.options p { color: var(--muted); max-width: 52ch; }
/* .caps: three columns of short h3 + line items (two at 960, one at 640). Space separates them, never rules. */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.5vw, 64px) clamp(40px, 5vw, 80px); }
.caps h3 { margin-bottom: 10px; }
.caps p { color: var(--muted); font-size: 16px; max-width: 38ch; }
.caps em { color: var(--dim); }

/* ---------- 12. Timeline: the page's one timeline rule, with ember nodes.
   <ol class="days"><li><span class="day-when">Morning</span><div class="day-body"><h3>…</h3><p>…</p></div></li></ol> ---------- */
.days { --when: 168px; --day-gap: 56px; --body-x: 56px; }
.days li { position: relative; display: grid; grid-template-columns: var(--when) minmax(0, 1fr); }
.days li + li { margin-top: var(--day-gap); }
.days li::before {
   content: "";
   position: absolute;
   left: calc(var(--when) - 2px);
   top: 11px;
   width: var(--node);
   height: var(--node);
   background: radial-gradient(circle, var(--ember) 2px, transparent 2.6px);
   z-index: 1;
}
.days li:not(:last-child)::after {
   content: "";
   position: absolute;
   left: var(--when);
   top: 13px;
   bottom: calc(-1 * (var(--day-gap) + 13px));
   width: 1px;
   background: var(--line-hi);
}
.day-when { color: var(--ember-hi); font-size: 15px; font-weight: 500; line-height: 26px; letter-spacing: .01em; }
.day-body { padding-left: var(--body-x); }
.day-body h3 { margin-bottom: 10px; }
.day-body p { color: var(--muted); max-width: 58ch; }

/* ---------- 13. Proof numbers, set large with no cell borders and no glow; quotes; placeholders.
   <ul class="nums-a"><li><span class="stat-big">15.2 h <span class="arw">→</span> 3.3 h</span>
   <span class="stat-lab">median build time per ticket</span></li></ul>. .nums-a is two up, .nums-b three up (set a
   step smaller), .nums stacks them. Only sourced numbers (SITE-BUILD.md). ---------- */
.nums { display: grid; gap: clamp(56px, 6vw, 88px); }
.nums-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-group) clamp(40px, 5vw, 80px); }
.nums-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-group) clamp(40px, 5vw, 80px); }
.stat-big {
   display: block;
   white-space: nowrap;
   font: 400 clamp(40px, 5vw, 76px)/1 var(--f-sans);
   color: var(--star);
   letter-spacing: -0.035em;
   margin-bottom: 16px;
}
.nums-b .stat-big { font-size: clamp(34px, 4.2vw, 60px); }
.stat-big .arw { color: var(--ember-hi); }
.stat-lab { display: block; color: var(--muted); font-size: 16px; max-width: 30ch; }
.quote-by { margin-top: 14px; color: var(--muted); font-size: 15px; }
.caveat { margin-top: 40px; color: var(--muted); font-size: 15px; max-width: 46ch; }
/* Placeholders: [square brackets] in ember-hi, the site's one pending style. .placeholder is a pending quote or
   figure; .pending marks any pending line or link; .ph is the footer's; .slot .placeholder sits in a .nums-a cell. */
.placeholder { color: var(--ember-hi); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.35; letter-spacing: -0.01em; max-width: 30ch; }
.pending { color: var(--ember-hi); }
.slot .placeholder { display: block; max-width: 32ch; font-size: clamp(18px, 1.7vw, 22px); }
.ph { color: var(--ember-hi); font-size: 15px; }

/* ---------- 14. Callouts: a heading that names the mechanism, a body that proves it, an optional closing line.
   The closing line (.kicker) comes after the body, never above a heading. ---------- */
.callout h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -0.015em; max-width: 22ch; text-wrap: balance; }
.callout-body { margin-top: 18px; max-width: 44ch; color: var(--text); }
.kicker { margin-top: 36px; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--star); letter-spacing: -0.01em; text-wrap: balance; }
.example { margin-top: 6px; color: var(--text); max-width: 44ch; }
.example a { white-space: nowrap; }

/* ---------- 15. Forms: labelled fields on a two-column grid (one at 640). Every input has a <label for>.
   <form class="form-grid"><div class="field"><label for="f-name">Name</label><input id="f-name" …></div>…
   <div class="form-actions"><button class="btn solid" type="submit">…</button>
   <p class="form-done" role="status" hidden>…</p></div></form>
   .field.wide spans both columns; .field-note is a hint, .field-error an error (pair it with aria-invalid and
   aria-describedby). ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; max-width: 760px; }
.field { display: grid; gap: 8px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea {
   font: 400 16px var(--f-sans);
   color: var(--star);
   background: var(--void);
   border: 1px solid var(--line-hi);
   border-radius: 0;
   padding: 13px 14px;
   width: 100%;
   transition: border-color .2s var(--ease);
}
.field textarea { min-height: 128px; line-height: 1.5; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--dim); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 0; border-color: var(--ember); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field-note { font-size: 14px; color: var(--muted); }
.field-error { font-size: 14px; color: var(--err); }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.form-done { color: var(--ok); font-size: 15px; }
.form-done[hidden] { display: none; }

/* ---------- 16. Static terminal: the shared frame for terminal content that isn't one of the four animated
   scripts (those use <figure class="p2-term" data-p2="terminal" data-script="t1…t4"> and terminals.css). The
   same look as the player, with no controls and no fake animation. Plex Mono lives here.
   <figure class="term" aria-label="…"><div class="term-bar"><span class="term-title">nebula · …</span></div>
   <pre class="term-pre" tabindex="0"><code>lines, with <span class="c-ok">roles</span></code></pre></figure> ---------- */
.term {
   position: relative;
   margin: 0;
   min-width: 0;
   max-width: 100%;
   background: var(--panel);
   border: 1px solid var(--line-hi);
   color: var(--text);
}
.term-bar {
   display: flex;
   align-items: center;
   min-height: 34px;
   padding: 2px 16px;
   border-bottom: 1px solid var(--line);
   font: 400 12.5px/1.5 var(--f-mono);
   color: var(--muted);
}
.term-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-pre {
   margin: 0;
   padding: 18px 20px 22px;
   overflow-x: auto;
   overflow-y: hidden;
   font: 400 13px/1.7 var(--f-mono);
   color: var(--text);
   white-space: pre;
   tab-size: 3;
   scrollbar-width: thin;
   scrollbar-color: var(--line-hi) transparent;
}
.term-pre:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: -3px; }
.term-pre code { font: inherit; color: inherit; white-space: inherit; }
/* colour roles, as in the player: ok green, warn amber, err red, dim, commands and agents star-white, accent ember */
.term .c-ok { color: var(--ok); }
.term .c-warn { color: var(--warn); }
.term .c-err { color: var(--err); }
.term .c-dim { color: var(--dim); }
.term .c-cmd { color: var(--star); }
.term .c-acc { color: var(--ember-hi); }
.term .c-agent { color: var(--star); font-weight: 500; }

/* ---------- 17. Responsive (1100, 960, 640, 480) and reduced motion ---------- */
@media (max-width: 1100px) {
   .nav ul { gap: 6px 18px; }
   .nav-right { gap: 24px; }
}
@media (max-width: 960px) {
   .nav-right { display: contents; }
   .nav ul { order: 3; flex-basis: 100%; }
   .split { grid-template-columns: minmax(0, 1fr); }
   .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .nums-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .days { --when: 152px; --body-x: 40px; }
}
@media (max-width: 640px) {
   body { font-size: 16px; }
   .nav .frame { column-gap: 16px; }
   .nav ul { gap: 4px 12px; justify-content: space-between; }
   .nav ul a { display: inline-block; padding: 6px 0; font-size: 14px; }
   .hero-actions .btn { width: 100%; justify-content: space-between; }
   .pillars, .options, .caps, .nums-a, .nums-b { grid-template-columns: minmax(0, 1fr); }
   .nums, .nums-a, .nums-b { gap: 40px; }
   .days { --body-x: 28px; }
   .days li { grid-template-columns: minmax(0, 1fr); }
   .days li::before { left: -2px; top: 11px; }
   .days li:not(:last-child)::after { left: 0; }
   .day-when { padding-left: var(--body-x); }
   .tools { gap: 12px 24px; }
   .form-grid { grid-template-columns: minmax(0, 1fr); }
   .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
   .term-bar { padding-left: 14px; }
   .term-pre { padding: 16px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- utility: text for screen readers only ---------- */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}