/* =========================================================================
   flotilla landing — "fleet command console" aesthetic, WARM LIGHT.
   A warm-paper ground, near-white ivory panels lifted by soft warm shadows +
   crisp warm borders, a deep-teal signal + ochre bus accent, warm ink. A
   CONDENSED display (Barlow Condensed — the same face the flotilla dash uses)
   over a monospace body (IBM Plex Mono), so product + marketing share ONE look:
   the page that sells flotilla matches the warm-light instrument you install.
   Faint warm grid + grain atmosphere. Mobile-first. No framework; CSS-only
   motion except the status widget. Tokens = the dash design book
   (docs/design/README.md); dark-theme names (--abyss*, --hull) are kept as
   aliases so every existing var() reference resolves, and every dark-baked hue
   literal is a color-mix() of a token so it re-derives on the light ground.
   ========================================================================= */

:root {
  /* ── surfaces (warm light) — page is the deepest warm tone so panels pop ── */
  --ground:     #efe7d8;   /* the page — warm parchment */
  --surface:    #faf5ec;   /* panels — raised warm ivory */
  --raised:     #f5eee1;   /* chrome: headers, tab strips, inputs */
  --card:       #fffdf9;   /* top surface — cards / hover / active */

  /* ── lines — warm taupe, deliberately visible for section separation ── */
  --line:       #cdbb98;   /* primary border / hairline */
  --line-soft:  #e0d5c0;   /* faint dividers, grid */

  /* ── ink — warm near-black scale ── */
  --ink-1:      #1f1810;
  --ink:        #2b2318;   /* high-emphasis text */
  --ink-2:      #544632;   /* body text */
  --ink-3:      #6d5f42;   /* muted (AA on the page) */

  /* ── accents + state (deep, AA-as-text on the warm surfaces) ── */
  --cyan:       #017468;   /* primary signal */
  --cyan-dim:   #2b7269;   /* secondary teal — kickers, hover */
  --cyan-strong:#015a51;   /* primary-button hover */
  --amber:      #8c5a0c;   /* ochre bus accent */
  --violet:     #6f4ec9;
  --ok:         #1c7439;   /* success / idle / realized */
  --warn:       var(--amber);
  --err:        #bd2f38;
  --busy:       var(--cyan);

  /* ── derived surface treatments (light-native elevation, not dark glow) ── */
  --scrim:      rgba(43, 35, 24, .34);
  --grid-line:  rgba(120, 100, 60, .10);
  --shadow-sm:  0 1px 2px rgba(74, 58, 30, .06);
  --shadow:     0 1px 2px rgba(74, 58, 30, .05), 0 4px 12px -2px rgba(74, 58, 30, .09);
  --shadow-lg:  0 18px 44px -16px rgba(58, 44, 20, .30);

  /* type — Barlow Condensed matches the dash display face (docs/design/README.md) */
  --display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* metrics */
  --maxw: 1140px;
  --r: 12px;
  --r-sm: 8px;

  /* ── legacy aliases (dark-theme names → semantic light tokens) ── */
  --abyss:      var(--ground);
  --abyss-2:    var(--surface);
  --abyss-3:    var(--raised);
  --hull:       var(--card);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── atmosphere ─────────────────────────────────────────────────────────── */
.bg-grid, .bg-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.bg-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .6;
  /* fade the grid out toward the edges + bottom */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}
.bg-grain {
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
/* a soft warm-teal aurora behind the hero */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  top: -20%; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 62%);
  filter: blur(20px);
}

/* keep content above atmosphere */
.nav, main, .footer { position: relative; z-index: 1; }

/* ── shared ─────────────────────────────────────────────────────────────── */
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--ink); }
code { font-family: var(--mono); }

/* Barlow Condensed is a condensed grotesque — it reads calmer near-neutral than the
   tight negative tracking the previous geometric face needed. Condensed also means
   headings take less width, which is the "too big" feel the operator flagged. */
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.1; letter-spacing: .005em; margin: 0; }

.kicker {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan-dim);
}
.muted { color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: .9rem; font-weight: 500;
  padding: .72em 1.25em; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--cyan); color: var(--card); font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 42%, transparent), 0 8px 30px -8px color-mix(in srgb, var(--cyan) 50%, transparent);
}
.btn-primary:hover { color: var(--card); background: var(--cyan-strong); }
.btn-ghost { border-color: var(--line); color: var(--ink-2); background: transparent; }
.btn-ghost:hover { border-color: var(--cyan-dim); color: var(--ink); }

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 1.1rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.brand-mark { color: var(--cyan); display: inline-flex; }
/* Calmer brand: the dash mark is a lowercase Barlow Condensed wordmark, not a heavy
   tight-tracked logo. Lighter weight + gentle tracking reads as an instrument, not a
   startup masthead (operator: header "too big / too techno"). */
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: .04em; }
.nav-links { display: flex; align-items: center; gap: 1.35rem; font-size: .8rem; }
.nav-links a { color: var(--ink-3); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  color: var(--cyan) !important;
  border: 1px solid var(--line); padding: .45em .9em; border-radius: var(--r-sm);
}
.nav-cta:hover { border-color: var(--cyan-dim); }
/* Mobile: horizontal scroll strip — all section links stay reachable (no hamburger). */
@media (max-width: 760px) {
  .nav {
    flex-wrap: wrap; align-items: center; gap: .55rem;
    padding: .85rem 1rem 1rem;
  }
  .nav-links {
    order: 3; width: 100%; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: .65rem; padding: .15rem 0 .35rem;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex-shrink: 0; white-space: nowrap;
    font-size: .74rem; letter-spacing: .04em;
    padding: .35em .8em; border-radius: 999px;
    /* 44px touch target for the section-nav pills (docs/design/README §7) */
    min-height: 44px; display: inline-flex; align-items: center;
    border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--ink) 4%, transparent);
  }
  .nav-links a:hover { border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
  .nav-cta { margin-left: auto; padding: .4em .75em; border-radius: var(--r-sm); }
}

/* ── Independence Day banner ─────────────────────────────────────────────── */
.id-banner {
  position: relative; z-index: 1;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 10%, var(--raised)),
    color-mix(in srgb, var(--amber) 8%, var(--raised))
  );
}
.id-banner-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: .75rem;
}
.id-banner-flag { font-size: 1.25rem; flex-shrink: 0; }
.id-banner-copy {
  margin: 0; font-size: .82rem; line-height: 1.45; color: var(--ink-2);
}
.id-banner-copy strong { color: var(--ink); font-weight: 600; }
.id-banner-copy a {
  color: var(--cyan); font-weight: 500; white-space: nowrap;
}
@media (max-width: 640px) {
  .id-banner-inner { flex-wrap: wrap; padding: .65rem 1rem; }
  .id-banner-copy a { white-space: normal; display: inline-block; margin-top: .15rem; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center;
}
@media (max-width: 920px) { .hero-inner { grid-template-columns: 1fr; gap: 2.4rem; } }
/* Grid/flex children default to min-width:auto, which is their CONTENT width — so a
   non-wrapping code line (the install command, the start snippets) refuses to shrink
   and drags the whole column past the viewport (horizontal overflow on mobile). Let
   these columns shrink to the track so long lines scroll WITHIN their box instead. */
.hero-copy, .hero-dash { min-width: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line);
  padding: .4em .85em; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 7%, transparent);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.hero-headline {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700;
  margin: 1.3rem 0 1.1rem;
}
.hero-headline .hl {
  color: var(--cyan);
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--cyan) 22%, transparent) 62%);
}
.hero-sub { font-size: 1.02rem; color: var(--ink-2); max-width: 34em; margin: 0 0 1.7rem; }

.install {
  display: flex; align-items: stretch; gap: 0; max-width: 36rem; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  background: var(--abyss-2);
}
.install code {
  flex: 1; min-width: 0; padding: .85rem 1rem; font-size: .82rem; color: var(--cyan);
  white-space: nowrap; overflow-x: auto; align-self: center;
}
.install code::before { content: "$ "; color: var(--ink-3); }
.copy-btn {
  border: none; border-left: 1px solid var(--line);
  background: var(--abyss-3); color: var(--ink-2);
  font-family: var(--mono); font-size: .78rem; padding: 0 1.1rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.copy-btn:hover { background: var(--hull); color: var(--cyan); }
.copy-btn.copied { color: var(--ok); }

.hero-cta { display: flex; gap: .8rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── hero dash mock-up: a static picture of `flotilla dash`, Goals/org view ──
   Styled from the same tokens as the live dash (docs/design/README.md). Pure
   CSS; the nodes are % -positioned so the command-chart scales with the box. */
.hero-dash {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2); overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(58,44,20,.16), 0 0 0 1px color-mix(in srgb, var(--cyan) 8%, transparent);
}
.dash-chrome {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: var(--abyss-3);
}
.dash-brand { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-weight: 600; letter-spacing: .04em; color: var(--ink); font-size: .92rem; }
.dash-brand-mark { width: 12px; height: 12px; border-left: 2px solid var(--cyan); border-top: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan-dim); display: inline-block; }
.dash-brand-sub { color: var(--ink-3); font-weight: 500; }
.dash-tabs { display: flex; gap: .1rem; margin-left: .4rem; }
.dash-tab { font-family: var(--display); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: .2rem .55rem; border-radius: var(--r-sm); }
.dash-tab.active { color: var(--ink); background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.dash-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.dash-toggle span { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: .18rem .5rem; }
.dash-toggle span + span { border-left: 1px solid var(--line-soft); }
.dash-toggle .on { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--ink); }

.dash-canvas {
  position: relative; aspect-ratio: 4 / 3.6; width: 100%;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center;
}
.dash-spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.dash-spokes line { stroke: var(--cyan-dim); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }

.dnode {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--abyss-2); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3); border-radius: var(--r-sm);
  padding: .5rem .6rem; box-shadow: 0 8px 24px -14px rgba(74,58,30,.14);
}
/* three tiers, sized so the command hierarchy reads at a glance:
   chief of staff (hub) > flotilla (XO-led) > desk. */
.dnode.hub { width: 33%; max-width: 215px; min-width: 128px; border-left-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 6%, var(--abyss-2)); }
.dnode.flotilla { width: 29%; max-width: 190px; min-width: 116px; background: color-mix(in srgb, var(--cyan) 4%, var(--card)); }
.dnode.desk { width: 22%; max-width: 148px; min-width: 92px; }
.dnode-eyebrow { font-family: var(--display); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dnode-title { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: .88rem; line-height: 1.1; margin-top: .05rem; }
.dnode.hub .dnode-title { font-size: 1.06rem; }
.dnode.flotilla .dnode-title { font-size: .96rem; }
/* the XO badge — a teal chip that marks the flotilla layer as XO-led (distinct
   from the muted harness chip); this is flotilla's differentiating tier */
.dxo { font-family: var(--mono); font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); border-radius: 3px; padding: 0 .3rem; white-space: nowrap; }
.dnode-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .4rem; }
.dpill { font-family: var(--display); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.dpill.cyan { color: var(--cyan); } .dpill.ok { color: var(--ok); } .dpill.amber { color: var(--amber); }
.dharness { font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-soft); border-radius: 3px; padding: 0 .3rem; white-space: nowrap; }
/* status-tint the desk nodes' accent to match their pill */
.dnode:has(.dpill.cyan) { border-left-color: var(--cyan); }
.dnode:has(.dpill.ok) { border-left-color: var(--cyan-dim); }
.dnode:has(.dpill.amber) { border-left-color: var(--amber); }

.hero-dash figcaption { padding: .7rem .9rem .8rem; font-size: .66rem; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; border-top: 1px solid var(--line-soft); }
.hero-dash figcaption strong { color: var(--ink-2); }

/* tighten the mock on narrow viewports so the three tiers stay legible + don't
   overlap: a taller canvas spreads the rings apart, smaller nodes, and desks drop
   their redundant eyebrow + harness chip so four fit the outer ring on a phone. */
@media (max-width: 520px) {
  .dash-canvas { aspect-ratio: 4 / 4.9; }
  .dnode { font-size: .82em; padding: .4rem .45rem; }
  .dnode.hub { width: 42%; min-width: 0; }
  .dnode.flotilla { width: 36%; min-width: 0; }
  .dnode.desk { width: 25%; min-width: 0; }
  .dnode.desk .dnode-eyebrow, .dnode.desk .dharness { display: none; }
  /* the real tab labels (Conversations/Goals/Issues) need the room — drop the
     "your fleet" sub-wordmark so the mock chrome doesn't crowd on a phone */
  .dash-brand-sub { display: none; }
}

/* staggered hero reveal */
.hero-copy > *, .hero-dash { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { animation-delay: .02s; }
.hero-headline { animation-delay: .08s; }
.hero-sub { animation-delay: .16s; }
.install { animation-delay: .24s; }
.hero-cta { animation-delay: .32s; }
.hero-dash { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* harness strip */
.harness-strip {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
}
.hs-label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.hs-chip {
  font-size: .8rem; color: var(--ink-2); padding: .35em .8em;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.hs-chip.soon { color: var(--ink-3); border-style: dashed; }
.hs-chip.soon em { color: var(--cyan-dim); font-style: normal; }

/* ── bands ──────────────────────────────────────────────────────────────── */
.band {
  max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem;
  scroll-margin-top: 1rem; /* anchor jumps clear the nav strip */
}
.band + .band { border-top: 1px solid var(--line-soft); }
.band-head { margin-bottom: 2.6rem; }
.band-head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: .7rem; max-width: 20em; }
#positioning .band-head h2 { max-width: 22em; }

/* what — cards */
.cards.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .cards.three { grid-template-columns: 1fr; } }
.card {
  position: relative; padding: 1.6rem 1.5rem; border: 1px solid var(--line);
  border-radius: var(--r); background: linear-gradient(160deg, var(--hull), var(--abyss-2));
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--cyan-dim); transform: translateY(-3px); }
.card-num { font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--cyan-dim); margin-bottom: .9rem; }
.card h3 { font-size: 1.18rem; margin-bottom: .6rem; }
.card p { font-size: .92rem; margin: 0; }
.card p em { color: var(--ink-3); font-style: italic; }

/* positioning — altitude + pull-quote */
.band-lede { font-size: 1.02rem; color: var(--ink-2); max-width: 42em; margin: .9rem 0 0; }
.pull-quote {
  margin: 0 0 2.2rem; padding: 1.5rem 1.6rem 1.4rem;
  border-left: 3px solid var(--cyan);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 68%);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pull-quote p { margin: 0; font-size: 1.05rem; color: var(--ink); line-height: 1.65; }
.pull-quote em { color: var(--cyan); font-style: normal; font-weight: 600; }
.pull-aside {
  display: block; margin-top: .75rem; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.altitude-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-bottom: 1.6rem;
}
@media (max-width: 900px) { .altitude-grid { grid-template-columns: 1fr; } }
.altitude-card {
  padding: 1.35rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2);
}
.altitude-card.highlight {
  border-color: color-mix(in srgb, var(--cyan) 38%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cyan) 10%, transparent), var(--abyss-2));
  box-shadow: 0 18px 50px -28px color-mix(in srgb, var(--cyan) 38%, transparent);
}
.altitude-tag {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .55rem;
}
.altitude-card.highlight .altitude-tag { color: var(--cyan-dim); }
.altitude-card h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.altitude-examples { font-size: .76rem; color: var(--cyan-dim); margin: 0 0 .75rem; }
.altitude-card p { font-size: .88rem; margin: 0; }
.diff-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.2rem;
}
@media (max-width: 720px) { .diff-strip { grid-template-columns: 1fr; } }
.diff-col {
  padding: 1.25rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2);
}
.diff-col.flotilla-col { border-color: color-mix(in srgb, var(--cyan) 32%, transparent); }
.diff-col h4 {
  font-family: var(--display); font-size: .95rem; color: var(--ink);
  margin: 0 0 .85rem;
}
.diff-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.diff-col li {
  font-size: .86rem; padding-left: 1rem; position: relative;
}
.diff-col li::before { content: "›"; position: absolute; left: 0; color: var(--ink-3); }
.diff-col.flotilla-col li::before { color: var(--cyan-dim); }
.positioning-foot { font-size: .82rem; color: var(--ink-3); margin: 0; }
.positioning-foot a { color: var(--cyan-dim); }
.positioning-foot a:hover { color: var(--cyan); }
@media (max-width: 600px) {
  .pull-quote { padding: 1.15rem 1.1rem; margin-bottom: 1.6rem; }
  .pull-quote p { font-size: .95rem; }
  .altitude-grid { gap: .85rem; margin-bottom: 1.2rem; }
  .diff-strip { gap: .85rem; }
}

/* how — grid */
.how-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 920px) { .how-grid { grid-template-columns: 1fr; gap: 2rem; } }

.diagram {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2); padding: 1.2rem; position: sticky; top: 1.5rem;
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .hub { fill: var(--abyss-3); stroke: var(--cyan); stroke-width: 1.6; }
.diagram .node { fill: var(--hull); stroke: var(--line); stroke-width: 1.4; transition: stroke .3s; }
.diagram .nodes g:hover .node { stroke: var(--cyan); }
.node-label { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); }
.hub-label { fill: var(--cyan); font-weight: 600; font-size: 13px; }
.bus { fill: color-mix(in srgb, var(--amber) 10%, transparent); stroke: var(--amber); stroke-width: 1.2; }
.bus-label { font-family: var(--mono); font-size: 9.5px; fill: var(--amber); letter-spacing: .03em; }
.diagram figcaption { font-size: .78rem; color: var(--ink-3); margin-top: 1rem; line-height: 1.5; }
/* animated signal traveling the spokes */
.spokes path { stroke-dasharray: 4 8; animation: flow 3.5s linear infinite; }
.bus-link { animation: flow 4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -120; } }
@media (max-width: 920px) { .diagram { position: static; } }
@media (prefers-reduced-motion: reduce) {
  .spokes path, .bus-link, .eyebrow .dot, .live-pulse, .hero-copy > *, .hero-dash { animation: none !important; }
}

.how-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.how-steps li {
  padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2);
}
.step-tag { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.how-steps h3 { font-size: 1.1rem; margin: .45rem 0 .5rem; }
.how-steps p { font-size: .9rem; margin: 0; }

/* arch */
.arch-layout { display: grid; gap: 2rem; }
.arch-lead p { font-size: 1.02rem; color: var(--ink-2); max-width: 50em; }
.arch-lead code, .arch-lead em { color: var(--cyan); font-style: normal; }
.arch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 820px) { .arch-cols { grid-template-columns: 1fr; } }
.arch-col { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--abyss-2); }
.arch-col.shipped { border-color: color-mix(in srgb, var(--cyan) 32%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 7%, transparent), var(--abyss-2)); }
.arch-col.roadmap { border-style: dashed; }
.arch-tag { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.arch-col.shipped .arch-tag { color: var(--cyan); }
.arch-col.roadmap .arch-tag { color: var(--ink-3); }
.tick { color: var(--ok); }
.soon-tick { color: var(--amber); }
.arch-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.arch-col li { font-size: .9rem; padding-left: 1.1rem; position: relative; }
.arch-col li::before { content: "›"; position: absolute; left: 0; color: var(--cyan-dim); }
.arch-col.roadmap li::before { color: var(--ink-3); }
.arch-col li b { color: var(--ink); font-weight: 600; }
.roadmap-note { font-size: .82rem; color: var(--ink-3); margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft); }

/* ── fleet status widget ────────────────────────────────────────────────── */
.fleet-panel {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--abyss-2);
  box-shadow: 0 24px 60px -28px rgba(58,44,20,.14);
}
.fleet-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--abyss-3);
  font-size: .82rem;
}
.fleet-bar-title { color: var(--ink); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.fleet-bar-title .muted { color: var(--ink-3); }
/* honesty marker: the widget renders a demo fleet, mirroring the demo GIF's
   "Mockup — illustrative" treatment so a sample render is never read as live */
.sample-badge {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  padding: .15em .55em; border-radius: 999px; white-space: nowrap;
}
.fleet-note { font-size: .76rem; color: var(--ink-3); margin: .9rem 0 0; line-height: 1.55; }
.fleet-note strong { color: var(--ink-2); }
.fleet-note code { color: var(--cyan); }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 55%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cyan) 50%, transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.fleet-bar-meta { color: var(--ink-3); font-size: .76rem; }

#fleet-status { padding: .4rem .4rem .6rem; }
.fleet-fallback { padding: 1.5rem; color: var(--ink-3); margin: 0; }

/* Columns mirror what `flotilla status` knows: name (+role) · surface · state. */
.fleet-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 1rem; align-items: center;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft);
  font-size: .88rem;
  animation: fadein .4s ease both;
}
.fleet-row:last-child { border-bottom: none; }
@keyframes fadein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.fleet-name { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .55rem; min-width: 0; }
.fleet-name .role { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--abyss); background: var(--cyan); padding: .12em .5em; border-radius: 4px; font-weight: 700; }
.fleet-surface { font-size: .72rem; color: var(--ink-3); white-space: nowrap; }

.state {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; padding: .28em .7em; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap;
}
.state .glyph { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.state.working { color: var(--busy); border-color: color-mix(in srgb, var(--cyan) 42%, transparent); }
.state.working .glyph { background: var(--busy); box-shadow: 0 0 8px var(--busy); animation: blink 1.3s infinite; }
.state.idle { color: var(--ink-3); }
.state.idle .glyph { background: var(--ink-3); }
.state.awaiting { color: var(--warn); border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
.state.awaiting .glyph { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: blink 1.6s infinite; }
.state.errored { color: var(--err); border-color: color-mix(in srgb, var(--err) 42%, transparent); }
.state.errored .glyph { background: var(--err); }
.state.offline { color: var(--ink-3); opacity: .7; }
.state.offline .glyph { background: var(--ink-3); }

@media (max-width: 680px) {
  /* row 1: name | state ; row 2: surface full-width — the status widget's 3-field
     shape (#99 content reshape) */
  .fleet-row { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .fleet-name { grid-column: 1; grid-row: 1; }
  .fleet-row .state { grid-column: 2; grid-row: 1; }
  .fleet-surface { grid-column: 1 / -1; grid-row: 2; }
  /* stack the panel header so "flotilla status --json" + its meta don't collide /
     wrap mid-flag on a narrow screen (#98 mobile-flow fix) */
  .fleet-bar { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .fleet-bar-meta { font-size: .72rem; }
}

/* ── 30-second start ────────────────────────────────────────────────────── */
.start-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; }
/* grid tracks default to a min of min-content; a child with a non-wrapping line
   (the install command, a URL) would otherwise expand its track past the phone
   viewport. min-width:0 lets each column shrink to its track so long lines wrap
   or scroll WITHIN their box instead of widening the page (#330). */
.start-grid > * { min-width: 0; }
@media (max-width: 860px) { .start-grid { grid-template-columns: 1fr; gap: 2rem; } }
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.start-steps li { display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; }
/* the step body holds non-wrapping <pre><code> snippets — let it shrink so they
   scroll within the box rather than widening the page (mobile horizontal overflow). */
.start-steps li > div { min-width: 0; flex: 1; }
.start-n {
  flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  color: var(--cyan); border: 1px solid var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.start-steps h3 { font-size: 1rem; margin: .15rem 0 .55rem; }
.start-steps pre {
  margin: 0; background: var(--abyss-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .8rem 1rem; overflow-x: auto;
}
.start-steps pre code { font-size: .82rem; color: var(--cyan); white-space: pre; }
.start-steps pre code::before { content: "$ "; color: var(--ink-3); }
.start-note { font-size: .82rem; color: var(--ink-3); margin: .55rem 0 0; }
.start-note code { color: var(--ink-2); }
.start-aside {
  padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2);
}
.start-aside p { font-size: .92rem; margin: 0 0 1.2rem; }
.start-aside .btn { width: 100%; justify-content: center; margin-bottom: .7rem; }
.start-aside .install { margin-bottom: 1.1rem; max-width: none; }

/* ── narrative scene: "a day with flotilla" ──────────────────────────────────
   A copy/structure component (issue #323), built from the SAME tokens as the
   cards / how-steps — a bordered panel of stacked "moments", each with an amber
   time label (the audit/bus accent) and a second-person line. Not a re-theme. */
.scene {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--abyss-2); overflow: hidden;
}
.moment {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem;
  padding: 1.6rem 1.7rem;
}
.moment + .moment { border-top: 1px solid var(--line-soft); }
.moment-when {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
  padding-top: .15rem;
}
.moment h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
.moment p { font-size: .95rem; margin: 0; color: var(--ink-2); }
/* the second-person beats — lift them to high-emphasis ink so the reader's own
   actions in the scene stand out from the surrounding narration */
.moment p .you { color: var(--ink); font-weight: 500; }
@media (max-width: 620px) {
  .moment { grid-template-columns: 1fr; gap: .55rem; padding: 1.35rem 1.25rem; }
  .moment-when { padding-top: 0; }
}

/* ── paste-this-to-your-agent prompt block ───────────────────────────────────
   The single next action: a copyable prompt. Same panel + copy-btn language as
   the install one-liner, but the body WRAPS (it's a sentence, not a shell line)
   and carries no "$" prefix. Tokens only. */
.paste {
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent); border-radius: var(--r);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 8%, transparent), var(--abyss-2));
  overflow: hidden;
}
.paste-lead {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan-dim); margin: 0; padding: 1rem 1.3rem .2rem;
}
.paste-body {
  margin: 0; padding: .3rem 1.3rem 1.2rem; color: var(--ink);
  font-size: .95rem; line-height: 1.65;
  /* the prompt embeds a full https:// URL — an unbreakable token that, left
     alone, sets this grid column's min-content width and drags the whole
     "start" grid past a phone viewport (horizontal overflow, #330). Let the
     URL wrap. */
  overflow-wrap: anywhere;
}
.paste-copy {
  display: block; width: 100%; text-align: center;
  border: none; border-top: 1px solid var(--line);
  padding-top: .85rem; padding-bottom: .85rem;
}

/* ── mobile rhythm ──────────────────────────────────────────────────────────
   On a phone the desktop 4.5rem band rhythm reads as oversized dead space; tighten
   the vertical cadence (gutters + look unchanged) so sections flow tighter. */
@media (max-width: 600px) {
  .hero { padding-top: 2rem; padding-bottom: 3rem; }
  .band { padding-top: 3rem; padding-bottom: 3rem; }
  .band-head { margin-bottom: 1.8rem; }
  .band-head h2 { max-width: none; }
  .harness-strip { margin-top: 2.2rem; padding-top: 1.3rem; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; min-width: 9rem; }
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); margin-top: 3rem; background: var(--abyss-2); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem 2rem;
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.footer-brand .brand-name { font-size: 1.3rem; }
.footer-brand p { color: var(--ink-3); font-size: .85rem; margin: .4rem 0 0; }
.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.footer-links a { color: var(--ink-2); font-size: .88rem; }
.footer-base {
  max-width: var(--maxw); margin: 0 auto; padding: 1.2rem 1.5rem 2.5rem;
  border-top: 1px solid var(--line-soft); display: flex; gap: .8rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-3);
}
.footer-base .sep { color: var(--line); }
.footer-base a { color: var(--ink-3); }
.footer-base a:hover { color: var(--cyan); }