/* ============================================================================================
   Envoir — website design system. Mirrors client/css/app.css exactly: same tokens (surfaces,
   lines, radii, spacing, elevation, semantic tier/status colors), same two-face type system
   (sans for everything, mono for anything cryptographic — no serif anywhere, because the app
   has none), same component vocabulary (pills, key chips, avatars, the icon rail, gradient
   primary buttons, app-window chrome).

   Structurally, this page no longer wraps marketing copy in a chrome that merely borrows the
   app's colours — it IS the app shell: topbar → rail → list column → reading pane → statusbar,
   the exact stack in client/js/shell.js and client/css/app.css's .app/.rail/.mail-rail/
   .mail-read/.topbar rules, with the landing content living inside the reading pane the way a
   real message would. Class names below that mirror an app.css rule 1:1 are noted inline.
   ============================================================================================ */

:root {
  color-scheme: dark;

  /* ---- type — exactly the app's two faces, nothing else ---- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-sans: var(--sans);
  --font-mono: var(--mono);

  /* ---- Aurora Indigo — brand primitives (brand/README.md), verbatim from client/css/app.css ---- */
  --indigo: #4C4DFF;
  --violet: #9A4DFF;
  --teal:   #00E0C7;  /* the ONE accent — unread/new. Kept rare, same rule as the app. */
  --ink:    #16132E;
  --paper:  #FBFAFF;

  /* ---- dark surfaces (primary theme) — exact app.css values ---- */
  --bg:      #0a0912;
  --bg-1:    #100e1b;
  --bg-2:    #171524;
  --bg-3:    #201d31;
  --elev:    #221f36;
  --line:    #272338;
  --line-2:  #37324e;
  --text:      #ecebf6;
  --text-dim:  #a8a3c1;
  --text-faint:#736e91;

  /* ---- semantic accents — exact app.css mapping; SAME meaning here as in the product ---- */
  --accent:    var(--indigo);
  --accent-2:  var(--violet);
  --accent-ink:#8f90ff;
  --grad:      linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 22%, transparent), color-mix(in srgb, var(--violet) 22%, transparent));
  --good:  #2fd39a;
  --warn:  #ffbe5c;
  --bad:   #ff6b6b;
  --legacy:#e0a45e;  /* gateway-crossed mail — same colour as the app's legacy-origin pill */
  --priv:  var(--violet); /* private/mixnet tier — same colour as the app's tier pill */
  --fast:  var(--indigo); /* fast/direct tier — same colour as the app's tier pill */

  /* ---- spacing (8pt scale, app.css) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- radii (app.css) ---- */
  --r-sm: 7px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---- elevation (app.css) ---- */
  --sh-1: 0 1px 2px rgba(4,3,12,.5);
  --sh-2: 0 12px 32px -8px rgba(4,3,12,.6);
  --sh-3: 0 28px 70px -12px rgba(3,2,10,.72);
  --glow: 0 8px 30px -8px color-mix(in srgb, var(--violet) 60%, transparent);

  /* ---- motion (app.css) ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .12s; --dur-2: .2s; --dur-3: .32s;

  /* ---- shell geometry — app.css's real .app/.rail/.mail-rail column widths ---- */
  --rail-w: 86px;
  --list-w: 232px;
  --topbar-h: 56px;
  --statusbar-h: 30px;

  /* ---- landing-only layout tokens (not in app.css — reading-pane prose width) ---- */
  /* The reading pane is ~1120px wide at 1440 and the content system inside it
     is built for ~780px, so every section hugged the left of the pane with a
     permanently empty ~330px band down the right — and the page's optical
     centre sat well left of the window's, on top of 320px of app chrome. A
     narrower container centres that measured column inside the pane, which is
     what a reading pane is supposed to look like. */
  --container: 920px;
  --gutter: clamp(18px, 4vw, 44px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f0edf9; --bg-1:#ffffff; --bg-2:#f7f5fd; --bg-3:#eeeaf8; --elev:#ffffff;
  --line:#e7e3f3; --line-2:#d5cfe9;
  --text:#16132E; --text-dim:#514b73; --text-faint:#807a9c;
  --accent-ink:#4C4DFF;
  --good:#12b083;
  --legacy:#a06a1f; /* darkened vs dark-theme #e0a45e to hold WCAG AA on white, same hue */
  --sh-1: 0 1px 2px rgba(40,30,90,.10);
  --sh-2: 0 12px 30px -10px rgba(50,35,110,.22);
  --sh-3: 0 24px 60px -14px rgba(50,35,110,.26);
  --glow: 0 8px 30px -10px color-mix(in srgb, var(--violet) 40%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* the reading pane owns scrolling, exactly like the real app's .view */
}
@media (max-width: 820px) {
  body { overflow: visible; }
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 1;
}

::selection { background: var(--violet); color: #fff; }

/* ---------- eyebrow / section furniture ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--grad);
}
.eyebrow .tag { color: var(--accent-ink); }

h1, h2, h3 { font-family: var(--sans); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0; }
.lede {
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.14rem);
  color: var(--text-dim);
  max-width: 62ch;
  line-height: 1.65;
}

.mono { font-family: var(--mono); }

section { position: relative; z-index: 1; padding: clamp(36px, 5vw, 60px) 0; }
section + section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: clamp(20px, 3vw, 32px); max-width: 100%; }
.section-head h2 { margin-bottom: 0.9rem; }
.section-head.center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- corner-bracket panel: recurring HUD motif ---------- */
.bracketed { position: relative; }
.bracketed::before, .bracketed::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.bracketed::before { top: -1px; left: -1px; border-top: 2px solid var(--indigo); border-left: 2px solid var(--indigo); opacity: 0.75; }
.bracketed::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--violet); border-right: 2px solid var(--violet); opacity: 0.75; }

/* ============================================================================================
   APP SHELL — topbar / rail / list column / reading pane / statusbar. This is the literal
   structure of client/js/shell.js's mountShell(): <nav class="rail">, <header class="topbar">
   (search, ⌘K, net-pill, theme toggle, primary Compose button), and (from mail.js) a folder
   list (`.folder`, `.label-item`) in a left column beside the content. Class names carried
   over 1:1 from app.css where the geometry matches; layout-only additions are new here.
   ============================================================================================ */
.app-shell { height: 100vh; display: flex; flex-direction: column; }
@media (max-width: 820px) { .app-shell { height: auto; min-height: 100vh; } }

/* ---- topbar — 1:1 with app.css's .topbar/.topbar-search/.cmd-open/.net-pill/.topbar-right ---- */
.topbar {
  height: var(--topbar-h); flex: 0 0 auto; z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.topbar-brand { display: flex; align-items: center; gap: 9px; flex: none; text-decoration: none; margin-right: 4px; }
.topbar-brand img { width: 26px; height: 26px; border-radius: 7px; }
/* Always shown. Hiding it below 480px left the phone header as a row of
   unlabelled icon buttons with the product name nowhere on the screen. */
.topbar-brand .word { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; display: inline; }

.topbar-search { flex: 1; max-width: 340px; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); transition: .14s; }
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 40%, transparent); }
.topbar-search svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.topbar-search input { border: none; background: none; padding: 0; height: auto; font: inherit; font-size: 13px; color: var(--text); width: 100%; }
.topbar-search input:focus { outline: none; box-shadow: none; }
.topbar-search input::placeholder { color: var(--text-faint); }

.cmd-open { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-faint); font-size: 12px; transition: .14s; cursor: pointer; white-space: nowrap; }
.cmd-open:hover { border-color: var(--line-2); color: var(--text-dim); }
.cmd-open kbd { font-family: var(--mono); font-size: 12px; background: var(--bg-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 5px; color: var(--text-dim); }

.net-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); padding: 4px 10px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); white-space: nowrap; }
.net-pill svg { width: 13px; height: 13px; color: var(--accent); }

.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--text-dim); background: transparent; border: 1px solid transparent; transition: background .14s, color .14s; cursor: pointer; }
.icon-btn:hover { background: var(--bg-2); color: var(--text); border-color: var(--line); }
.icon-btn svg { width: 17px; height: 17px; }

/* theme toggle sun/moon swap (same idea as app.css's icon('sun'|'moon') swap) */
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--sans);
  font-size: 13.5px; font-weight: 600; padding: 0.68em 1.15em; border-radius: var(--r-sm);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
/* An inline <svg> with a viewBox but no width/height fills its container. Inside a
   flex button that resolves to the button's full width — the Compose CTA's pencil
   rendered at ~100px. Every other icon holder here sizes its svg explicitly; the
   button did not. Matches the app's icon scale. */
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--violet) 65%, transparent); }
.btn-primary:hover { box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--violet) 75%, transparent); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 12%, transparent); }
.btn-mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; }
.btn.sm { padding: 0.5em 0.9em; font-size: 12.5px; }
/* Header shedding order, set from measurement rather than round numbers.
   The bar's children are brand 80 + search 340 + palette 118 + net-pill 145 +
   right group 256, plus 48 of gaps and 32 of padding: ~1019px with everything
   shown, and ~719 once the search has flexed down to its minimum. The old
   thresholds started shedding at 620, which left the whole 621-719 band
   overflowing, and 520 and 320 broken further down. Each step below is the
   width at which what remains actually fits. Verified by sweeping 320-1920. */
@media (max-width: 760px) { .topbar .btn span.full { display: none; } }
/* Below 480px the net pill collapsed to just its status dot, which reads as a
   stray grey circle wedged between two real controls rather than as status.
   Drop it entirely there — the status bar already carries "node: simulated". */
@media (max-width: 620px) { .net-pill { display: none; } }
@media (max-width: 460px) { .cmd-open span.full { display: none; } }
/* Last to go: the GitHub icon button. The primary call to action beside it
   points at the same repository, so nothing becomes unreachable. */
@media (max-width: 380px) { .topbar-right .icon-btn[href] { display: none; } }
/* Below ~560px the search field is squeezed to about two visible characters
   ("Se…"), which reads as broken rather than compact. The command palette is
   already the real search affordance on this page, so drop the field and let
   the ⌘K control carry it. */
@media (max-width: 700px) { .topbar-search { display: none; } }

/* ---- shell body: rail + list column + reading pane ---- */
.shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--rail-w) var(--list-w) 1fr; }
@media (max-width: 1080px) { .shell { grid-template-columns: var(--rail-w) 1fr; } }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; height: auto; } }

/* ---- rail — 1:1 with app.css's .rail/.rail-btn/.rail-badge/.rail-id ---- */
.rail { background: var(--bg-1); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0 10px; gap: 2px; overflow-y: auto; }
.rail-brand { margin-bottom: 12px; flex: none; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--accent-2) 40%, transparent)); }
.rail-brand img { width: 30px; height: 30px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; width: 100%; align-items: center; }
.rail-btn { position: relative; width: 72px; padding: 9px 0 7px; border-radius: 12px; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 640; transition: color .14s, background .14s; background: transparent; border: none; cursor: pointer; text-decoration: none; }
.rail-btn svg { width: 21px; height: 21px; }
.rail-btn:hover { color: var(--text-dim); background: var(--bg-2); }
.rail-btn.on { color: var(--accent-ink); }
.rail-btn.on::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--grad); }
.rail-badge { position: absolute; top: 5px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 20px; background: var(--teal); color: var(--ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-1); }
.rail-spacer { flex: 1; }
.rail-id { width: 38px; height: 38px; border-radius: 50%; margin-top: 6px; flex: none; padding: 0; overflow: hidden; display: grid; place-items: center; box-shadow: var(--sh-1); background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--accent-ink); cursor: pointer; transition: transform .1s; }
.rail-id:hover { transform: scale(1.06); }
.rail-id svg { width: 18px; height: 18px; }

@media (max-width: 820px) {
  .rail {
    order: 2; flex: 0 0 auto; width: 100%; flex-direction: row; align-items: center; gap: 0;
    padding: 3px max(3px, env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
    border-right: none; border-top: 1px solid var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch; position: sticky; bottom: 0; z-index: 30;
  }
  .rail-brand { display: none; }
  .rail-nav { flex-direction: row; width: auto; gap: 0; }
  .rail-spacer { display: none; }
  /* `flex: 1 1 0` split the bar into eight equal ~46px columns, so every label
     past "Mail" ellipsed to "Cale…", "Cont…", "Iden…", "Gro…", "Se…". The rail
     already scrolls horizontally; let each item take the width its own label
     needs and use that scroll instead of truncating all eight. */
  .rail-btn { width: auto; flex: 0 0 auto; min-width: 62px; min-height: 46px; padding: 5px 10px; font-size: 12px; }
  .rail-btn span { max-width: none; overflow: visible; white-space: nowrap; }
  .rail::-webkit-scrollbar { display: none; }
  .rail { scrollbar-width: none; }
  .rail-btn.on::before { left: 14px; right: 14px; top: auto; bottom: 1px; width: auto; height: 3px; }
  .rail-badge { top: 1px; right: 7px; }
  .rail-id { margin: 0 2px 0 4px; flex-shrink: 0; }
}

/* ---- list column — 1:1 with app.css's .mail-rail/.folder/.label-item/.labels ---- */
.list-col { background: var(--bg-1); border-right: 1px solid var(--line); padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.list-col .btn.block { width: 100%; margin-bottom: 10px; justify-content: center; }
/* Must come AFTER the .list-col base rule above, not inside the grid media query
   further up: a media query adds no specificity, so an earlier `display:none`
   loses to a later `display:flex` at the same specificity and the column never
   hid at all — a phone got a full screen of navigation before any content. */
@media (max-width: 1080px) { .list-col { display: none; } }

/* ---- section strip — the folder list, for screens with no room for a column ----
   Hiding .list-col below 1080px removed the ONLY way to move between sections,
   leaving a single ~31,000px scroll with no navigation and no sense of how much
   was left. This is the same folder list, laid out as one sticky scrollable row
   under the header, so the metaphor survives the breakpoint. */
.section-strip { display: none; }
@media (max-width: 1080px) {
  .section-strip {
    display: flex; gap: 6px; align-items: center;
    position: sticky; top: 0; z-index: 25;
    padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .section-strip::-webkit-scrollbar { display: none; }
  .section-strip a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--line); background: var(--bg-2);
    color: var(--text-dim); font-size: 13px; font-weight: 560; text-decoration: none;
    transition: color .14s, background .14s, border-color .14s;
  }
  .section-strip a svg { width: 14px; height: 14px; opacity: .85; }
  .section-strip a:hover { color: var(--text); }
  .section-strip a.on {
    background: var(--grad-soft); color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); font-weight: 650;
  }
}
.folders { display: flex; flex-direction: column; gap: 1px; }
.folder { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--text-dim); font-weight: 560; font-size: 13.5px; transition: .12s; text-align: left; text-decoration: none; background: none; border: none; width: 100%; cursor: pointer; }
.folder svg { width: 17px; height: 17px; opacity: .85; flex: none; }
.folder span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder .count { font-family: var(--mono); font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--teal) 88%, var(--text)); flex: none; }
.folder:hover { background: var(--bg-2); color: var(--text); }
.folder.on { background: var(--grad-soft); color: var(--text); font-weight: 650; }
.folder.on svg { color: var(--accent); opacity: 1; }
.rail-label-h { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin: 16px 8px 8px; font-weight: 700; }
.labels { display: flex; flex-direction: column; gap: 1px; }
.label-item { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px; color: var(--text-dim); font-size: 13px; text-align: left; transition: .12s; background: none; border: none; width: 100%; cursor: pointer; text-decoration: none; }
.label-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: hsl(var(--h) 65% 58%); }
.label-item:hover { background: var(--bg-2); color: var(--text); }
.label-item.on { background: var(--bg-2); color: var(--text); font-weight: 600; }

/* ---- reading pane — the app's .mail-read / .view: the ONLY scrolling surface ---- */
.reading-pane { min-width: 0; overflow-y: auto; overflow-x: clip; background: var(--bg); position: relative; scroll-padding-top: 12px;
  background:
    radial-gradient(ellipse 900px 460px at 18% 0%, color-mix(in srgb, var(--indigo) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 700px 460px at 100% 0%, color-mix(in srgb, var(--violet) 11%, transparent), transparent 55%),
    var(--bg);
}
.reading-pane::-webkit-scrollbar { width: 10px; }
.reading-pane::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--bg); }

/* faint dot-grid instrument texture inside the reading pane */
.reading-pane::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(236, 235, 246, 0.05) 1px, transparent 1px);
  background-size: 28px 28px; mix-blend-mode: overlay;
}
:root[data-theme="light"] .reading-pane::before { background-image: radial-gradient(rgba(22, 19, 46, 0.06) 1px, transparent 1px); }

/* reading-progress rule — sticky to the pane it measures, not the viewport */
.scroll-progress { position: sticky; top: 0; left: 0; right: 0; height: 2px; z-index: 20; pointer-events: none; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad); box-shadow: 0 0 12px -2px var(--violet); will-change: transform; }

/* ---- pane-crumb — one per major section, mirrors the app's message subject/path row ---- */
.pane-crumb {
  display: flex; align-items: center; gap: 8px; padding: 10px var(--gutter);
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-1) 55%, transparent);
  position: sticky; top: 2px; z-index: 10; backdrop-filter: blur(6px);
}
.pane-crumb .cur { color: var(--text-dim); }
.pane-crumb .sep { opacity: .5; }
.pane-crumb .meta { margin-left: auto; display: flex; gap: 14px; color: var(--text-faint); }
@media (max-width: 620px) { .pane-crumb .meta span:not(:last-child) { display: none; } }

/* ---------- statusbar — 1:1 in spirit with wede's fixed bottom statusbar ---------- */
.statusbar {
  flex: 0 0 auto; height: var(--statusbar-h); display: flex; align-items: center; gap: 16px;
  padding: 0 14px; background: var(--bg-2); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--text-dim); overflow-x: auto; white-space: nowrap;
}
.statusbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; box-shadow: 0 0 6px var(--good); }
.statusbar .item { display: inline-flex; align-items: center; gap: 6px; }
.statusbar .warn-dot { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.statusbar .right { margin-left: auto; display: flex; gap: 16px; }
@media (max-width: 680px) { .statusbar .hide-sm { display: none; } }

/* ---------- pills / tier badges — same classes+colours as the app (client/css/app.css) ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; font-family: var(--sans); }
.pill svg { width: 13px; height: 13px; }
.pill.priv   { background: color-mix(in srgb, var(--priv) 18%, transparent); color: color-mix(in srgb, var(--priv) 85%, var(--text)); }
.pill.fast   { background: color-mix(in srgb, var(--fast) 18%, transparent); color: color-mix(in srgb, var(--fast) 85%, var(--text)); }
.pill.good   { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.pill.warn   { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.pill.legacy { background: color-mix(in srgb, var(--legacy) 18%, transparent); color: var(--legacy); }
.pill.dim    { background: var(--bg-3); color: var(--text-dim); }

/* ---------- key chip — identical rule to app.css's .key (line 161) ---------- */
.key { font-family: var(--mono); font-size: 12px; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; display: inline-block; }

/* ============================================================================================
   HERO — rendered as an actual opened message in the reading pane (mail.js's #mail-read),
   not a two-column marketing hero. Structure mirrors mail-dark.png: title, pill tags, a
   sender row with avatar + verified badge + address + timestamp, then body copy.
   ============================================================================================ */
.msg-card { padding: clamp(20px, 3.5vw, 34px) var(--gutter) clamp(28px, 4vw, 44px); max-width: var(--container); margin: 0 auto; position: relative; }
.msg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.msg-title { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.7rem); line-height: 1.12; margin: 0 0 20px; max-width: 20ch; }
.msg-head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.msg-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: var(--glow); }
.msg-avatar img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.msg-who { min-width: 0; flex: 1; }
.msg-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; flex-wrap: wrap; }
.msg-addr { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-when { font-size: 12px; color: var(--text-faint); flex: none; text-align: right; }
.msg-body { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.08rem); color: var(--text-dim); line-height: 1.7; max-width: 66ch; display: flex; flex-direction: column; gap: 16px; }
.msg-body strong { color: var(--text); }
.msg-body a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px dotted currentColor; }
.msg-body a:hover { color: var(--text); }
.msg-sign { font-style: normal; color: var(--text-faint); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 24px; }

.hero-address {
  display: inline-flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-1); max-width: 100%;
}
.hero-address .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); }
.hero-address .readout { font-family: var(--mono); font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.1rem); color: var(--text); min-height: 1.4em; font-weight: 600; }
.hero-address .readout .cursor { display: inline-block; width: 0.55ch; background: var(--indigo); margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-address-note { font-size: 12.5px; color: var(--text-faint); }
.hero-address-note a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px dotted currentColor; }
.hero-address-note a:hover { color: var(--text); }

/* hero visual: the faint mesh canvas now sits behind the message card itself */
.hero-mesh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; z-index: 0; pointer-events: none; }
.msg-card > * { position: relative; z-index: 1; }

/* ---------- generic cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }
.card { padding: 26px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-1); transition: border-color 0.25s ease, transform 0.25s var(--ease-out); }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card .num { font-family: var(--mono); color: var(--text-faint); font-size: 12.5px; margin-bottom: 14px; display: block; }
.card h3 { margin-bottom: 8px; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; }
.card p { color: var(--text-dim); font-size: 0.95rem; }

/* ---------- why-different: lead cards with a small icon each ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }
.why-card { padding: 28px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-1); display: flex; flex-direction: column; gap: 14px; transition: border-color 0.25s ease, transform 0.25s var(--ease-out); }
.why-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.why-card .why-ic { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--grad-soft); color: var(--accent-ink); flex: none; }
.why-card .why-ic svg { width: 24px; height: 24px; }
.why-card h3 { font-family: var(--sans); font-weight: 700; font-size: 1.08rem; }
.why-card p { color: var(--text-dim); font-size: 0.94rem; line-height: 1.6; }
.why-card p strong { color: var(--text); }

/* ============================================================
   HAND-AUTHORED ILLUSTRATIONS — unchanged from the previous pass.
   ============================================================ */
.illo-mote { position: relative; aspect-ratio: 1 / 1; max-width: 340px; margin: 8px auto; }
.illo-mote svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.illo-mote-label { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.illo-mote-label span { display: block; font-size: 13px; font-weight: 650; color: var(--text-dim); }
.illo-mote-label.center { left: 50%; top: 50%; }
.illo-mote-label.center span { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--text); background: var(--bg-1); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.illo-mote-label.top { left: 50%; top: 15%; transform: translate(-50%, calc(-50% + 42px)); }
.illo-mote-label.right { left: 85%; top: 50%; transform: translate(-50%, calc(-50% + 42px)); }
.illo-mote-label.bottom { left: 50%; top: 85%; transform: translate(-50%, calc(-50% + 42px)); }
.illo-mote-label.left { left: 15%; top: 50%; transform: translate(-50%, calc(-50% + 42px)); }

.illo-bridge { display: grid; grid-template-columns: 1.2fr auto 0.75fr auto 1.2fr; align-items: center; gap: 6px; padding: 10px 4px; }
@media (max-width: 820px) { .illo-bridge { grid-template-columns: 1fr; gap: 18px; } .illo-bridge .illo-link { transform: rotate(90deg); width: 32px; margin: 0 auto; } }
.illo-node { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.illo-node .illo-node-ic { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line-2); }
.illo-node .illo-node-ic svg { width: 28px; height: 28px; }
.illo-node .illo-node-tt { font-size: 12px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.illo-node .illo-node-dd { font-size: 12px; color: var(--text-faint); max-width: 15ch; overflow-wrap: anywhere; }
.illo-link { width: 100%; height: 24px; }

.illo-rotation { padding: 8px 4px 4px; }
.illo-rotation .ir-addr { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 650; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 16px; margin: 0 auto 6px; display: flex; width: fit-content; }
.illo-rotation .ir-addr .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.illo-rotation svg { width: 100%; height: 60px; display: block; }
.illo-rotation .ir-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.illo-rotation .ir-key { text-align: center; padding: 10px 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); }
.illo-rotation .ir-key.current { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, var(--bg-1)); }
.illo-rotation .ir-key .ir-key-tt { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.illo-rotation .ir-key.current .ir-key-tt { color: var(--accent-ink); }
.illo-rotation .ir-key .ir-key-vv { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.illo-rotation .ir-key.current .ir-key-vv { color: var(--text); font-weight: 600; }

.illo-tiers { display: flex; flex-direction: column; gap: 22px; padding: 6px 4px; }
.illo-tier-row { display: grid; grid-template-columns: 100px 1fr; gap: 18px; align-items: center; }
@media (max-width: 560px) { .illo-tier-row { grid-template-columns: 1fr; gap: 8px; } }
.illo-tier-tt { display: flex; flex-direction: column; gap: 3px; }
.illo-tier-tt .name { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.illo-tier-tt .name.fast { color: var(--fast); }
.illo-tier-tt .name.priv { color: var(--priv); }
.illo-tier-tt .status { font-size: 12px; color: var(--text-faint); }
.illo-tier-row svg { width: 100%; height: 44px; display: block; }

.two-col-illos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; }
@media (max-width: 760px) { .two-col-illos { grid-template-columns: 1fr; } }

.illo { display: block; width: 100%; height: auto; background: var(--bg-2); }
.illo-frame { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-1); overflow: hidden; box-shadow: var(--sh-1); }
.illo-caption { padding: 12px 16px; font-size: 12.5px; color: var(--text-faint); border-top: 1px solid var(--line); background: var(--bg-2); font-family: var(--mono); letter-spacing: 0.01em; }
.illo-frame text { font-family: var(--sans); }
.illo-frame .illo-mono { font-family: var(--mono); }
.illo-frame .c-indigo  { stroke: var(--indigo); fill: var(--indigo); }
.illo-frame .c-violet  { stroke: var(--violet); fill: var(--violet); }
.illo-frame .c-teal    { stroke: var(--teal); fill: var(--teal); }
.illo-frame .c-good    { stroke: var(--good); fill: var(--good); }
.illo-frame .c-warn    { stroke: var(--warn); fill: var(--warn); }
.illo-frame .c-legacy  { stroke: var(--legacy); fill: var(--legacy); }
.illo-frame .c-line    { stroke: var(--line-2); }
.illo-frame .c-text    { fill: var(--text); }
.illo-frame .c-dim     { fill: var(--text-dim); }
.illo-frame .c-faint   { fill: var(--text-faint); }
.illo-frame .c-bg      { fill: var(--bg-2); }
.illo-frame .c-bg1     { fill: var(--bg-1); }
.illo-frame .il-label  { font-size: 13px; font-weight: 600; }
.illo-frame .il-sub    { font-size: 12px; }
.illo-frame .il-mono   { font-family: var(--mono); font-size: 12px; }

/* ---------- terminal trace ---------- */
.trace { font-family: var(--mono); font-size: 0.85rem; line-height: 1.9; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); padding: 22px 24px; overflow-x: auto; color: var(--text-dim); }
.trace .step { color: var(--accent-ink); }
.trace .tag { color: var(--text-faint); }
.trace .ok { color: var(--good); }
.trace .prompt { color: var(--text-faint); }

/* ---------- naming: primary address showcase ---------- */
.naming-primary { border-radius: var(--r-xl); border: 1px solid var(--line-2); padding: clamp(22px, 3.5vw, 34px); background: linear-gradient(180deg, color-mix(in srgb, var(--indigo) 8%, transparent), color-mix(in srgb, var(--violet) 4%, transparent)), var(--bg-1); margin-bottom: 22px; }
.np-badge { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--good); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; margin-bottom: 20px; }
.np-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 20px; }
@media (max-width: 600px) { .np-grid { grid-template-columns: 1fr; } }
.np-flavor { display: flex; flex-direction: column; gap: 6px; }
.np-tt { font-family: var(--sans); font-weight: 700; font-size: 0.85rem; color: var(--text-dim); }
.np-example { font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.4rem); color: var(--text); font-weight: 600; }
.np-dd { font-size: 0.88rem; color: var(--text-dim); max-width: 46ch; }
.np-note { font-size: 0.88rem; color: var(--text-dim); max-width: 74ch; border-top: 1px solid var(--line); padding-top: 16px; }

.naming-secondary { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px; }
.ns-row { display: grid; grid-template-columns: 150px 160px 1fr; gap: 18px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.ns-row:last-child { border-bottom: none; }
.ns-form { font-weight: 700; font-size: 0.9rem; }
.ns-example { font-size: 0.9rem; color: var(--text); }
.ns-note { font-size: 0.86rem; color: var(--text-dim); }
@media (max-width: 760px) { .ns-row { grid-template-columns: 1fr; gap: 4px; } }

.signin-strip { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; padding: 20px 24px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); }
.signin-strip .lbl { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); }
.signin-strip .lbl b { color: var(--text); }

/* ============================================================
   SHOT FRAME — the app-window presentation for every screenshot.
   ============================================================ */
.shot-frame { border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg-1); box-shadow: var(--sh-3); overflow: hidden; }
.shot-chrome { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.shot-chrome .dots { display: flex; gap: 6px; flex: none; }
.shot-chrome .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.shot-chrome .addr { margin-left: 2px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-media-wrap { position: relative; background: var(--bg-2); line-height: 0; }
.shot-img { display: block; width: 100%; height: auto; }
.shot-caption { padding: 14px 18px; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); border-top: 1px solid var(--line); background: var(--bg-1); }
.shot-caption b { color: var(--text); }

/* ---------- product gallery: alternating feature rows ---------- */
.feature-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 56px); align-items: center; padding: 30px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row.reverse .feature-media { order: 2; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; padding: 22px 0; } .feature-row.reverse .feature-media { order: 0; } }
.feature-tag { display: inline-block; font-size: 12px; letter-spacing: 0.05em; color: var(--accent-ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.feature-copy h3 { font-size: 1.4rem; margin-bottom: 12px; }
.feature-copy > p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.65; max-width: 52ch; margin-bottom: 16px; }
.feature-copy strong, .feature-copy b { color: var(--text); }
.feature-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feature-points li { position: relative; padding-left: 20px; font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; max-width: 54ch; }
.feature-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 1.5px; background: var(--grad); }
.feature-points b { color: var(--text); }

/* ---------- gallery grid: the "more of the product" wall ---------- */
.shot-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 12px; }
.shot-gallery .shot-frame { display: flex; flex-direction: column; height: 100%; }
.shot-gallery .shot-frame.wide { grid-column: span 2; }
.shot-gallery .shot-caption { margin-top: auto; }
@media (max-width: 980px) { .shot-gallery { grid-template-columns: repeat(2, 1fr); } .shot-gallery .shot-frame.wide { grid-column: span 2; } }
@media (max-width: 560px) { .shot-gallery { grid-template-columns: 1fr; } .shot-gallery .shot-frame.wide { grid-column: auto; } }

/* ============================================================
   WALKTHROUGH — numbered stepper, "how you'd use it"
   ============================================================ */
.walk { display: flex; flex-direction: column; gap: 0; }
.walk-step { display: grid; grid-template-columns: 44px 1fr; gap: 24px; padding: 20px 0; position: relative; }
.walk-step + .walk-step { border-top: 1px solid var(--line); }
.walk-num { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 15px; flex: none; box-shadow: var(--glow); }
.walk-body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 44px); align-items: center; min-width: 0; }
@media (max-width: 860px) { .walk-body { grid-template-columns: 1fr; } }
.walk-copy, .walk-media { min-width: 0; }
.walk-copy h3 { font-size: 1.15rem; margin-bottom: 8px; font-family: var(--sans); font-weight: 700; }
.walk-copy p { color: var(--text-dim); font-size: 0.94rem; line-height: 1.6; max-width: 48ch; }
.walk-copy .pill { margin-top: 12px; }
.walk-media .shot-frame { box-shadow: var(--sh-2); }
.walk-media.compact { max-width: 400px; margin-left: auto; }
@media (max-width: 860px) { .walk-media.compact { max-width: 100%; margin-left: 0; } }

/* ---------- transport traceability ---------- */
.trace-showcase { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 48px); align-items: center; }
@media (max-width: 900px) { .trace-showcase { grid-template-columns: 1fr; } }
.trace-copy h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; margin-bottom: 14px; }
.trace-copy .feature-points { margin-bottom: 18px; }
.trace-boundary { font-size: 0.88rem; color: var(--text-dim); line-height: 1.6; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--bg-1); }
.trace-boundary strong { color: var(--text); }

/* ---------- feature parity ---------- */
.parity-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 640px) { .parity-tally { grid-template-columns: repeat(2, 1fr); } }
.pt-stat { text-align: center; padding: 22px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); transition: border-color 0.25s ease, transform 0.25s var(--ease-out); }
.pt-stat:hover { border-color: var(--line-2); transform: translateY(-3px); }
.pt-num { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); line-height: 1; margin-bottom: 8px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-feature-settings: "tnum" 1; }
.pt-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); line-height: 1.5; }

/* ---------- privacy ---------- */
.priv-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .priv-grid { grid-template-columns: 1fr; } }
.priv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.priv-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.priv-list .ic { width: 22px; height: 22px; flex: none; color: var(--accent-ink); margin-top: 2px; }
.priv-list h3 { font-family: var(--sans); font-size: 0.98rem; font-weight: 700; margin-bottom: 4px; }
.priv-list p { color: var(--text-dim); font-size: 0.92rem; }

.honest-box { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 6%, transparent) 0 10px, transparent 10px 20px), var(--bg-1); }
.honest-box .eyebrow { color: var(--warn); }
.honest-box .eyebrow::before { background: linear-gradient(90deg, var(--warn), var(--violet)); }
.honest-box p { color: var(--text-dim); font-size: 0.93rem; margin-top: 10px; }
.honest-box p + p { margin-top: 12px; }
.honest-box strong { color: var(--text); }
.honest-box code { font-family: var(--mono); font-size: 0.92em; background: var(--bg-3); padding: 0.1em 0.4em; border-radius: 4px; }
.honest-list { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.honest-list li { position: relative; padding-left: 18px; color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; }
.honest-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 1.5px; background: var(--warn); }
.honest-list em { color: var(--text); font-style: normal; }
.honest-list code { font-family: var(--mono); font-size: 0.92em; background: var(--bg-3); padding: 0.1em 0.4em; border-radius: 4px; }

/* ---------- self-hosting / operators ---------- */
.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }
.compare .col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; background: var(--bg-1); }
.compare .col.hosted { border-color: var(--line-2); background: linear-gradient(180deg, color-mix(in srgb, var(--indigo) 8%, transparent), transparent 60%), var(--bg-1); }
.compare .col h3 { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.compare .price { font-family: var(--mono); font-size: 0.85rem; color: var(--text-faint); margin-bottom: 18px; display: block; }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.compare li { font-size: 0.9rem; color: var(--text-dim); display: flex; gap: 10px; align-items: flex-start; }
.compare li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--good); }
.seam-note { margin-top: 24px; font-size: 0.88rem; color: var(--text-dim); max-width: 68ch; }
.seam-note code { font-family: var(--mono); font-size: 0.95em; background: var(--bg-3); padding: 0.1em 0.4em; border-radius: 4px; }

/* ---------- trust / state table ---------- */
.state-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.state-table th, .state-table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.state-table th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.state-table td:first-child { color: var(--text); }
.state-table td.loc { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-ink); white-space: nowrap; }
.state-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: 6px 18px; }

/* ---------- final CTA ---------- */
.cta-final { border-radius: var(--r-xl); border: 1px solid var(--line-2); padding: clamp(24px, 4vw, 44px); background: radial-gradient(ellipse 700px 400px at 20% 0%, color-mix(in srgb, var(--indigo) 16%, transparent), transparent 60%), radial-gradient(ellipse 700px 400px at 100% 100%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%), var(--bg-1); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .cta-final { grid-template-columns: 1fr; } }
.cta-final h2 { margin-bottom: 14px; }
.cta-final .lede { margin-bottom: 22px; }
.code-block { font-family: var(--mono); font-size: 0.85rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim); padding: 20px; line-height: 1.8; overflow-x: auto; }
.code-block .c { color: var(--text-faint); }
.code-block .g { color: var(--good); }

.status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--warn); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; margin-top: 22px; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

/* ---------- footer (sits as the last block inside the reading pane) ---------- */
footer { padding: 40px 0 28px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 30px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-brand img { width: 26px; height: 26px; border-radius: 6px; }
.foot-col h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; font-weight: 500; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { text-decoration: none; color: var(--text-dim); font-size: 0.9rem; }
.foot-col a:hover { color: var(--text); }
.foot-desc { color: var(--text-dim); font-size: 0.9rem; max-width: 36ch; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-faint); }
.foot-bottom .legal-links { display: flex; gap: 18px; }
.foot-bottom a { text-decoration: none; color: var(--text-faint); }
.foot-bottom a:hover { color: var(--text-dim); }

/* ---------- grid-item shrink safety net ---------- */
.feature-row > .feature-media, .feature-row > .feature-copy,
.trace-showcase > .trace-media, .trace-showcase > .trace-copy,
.priv-grid > .priv-list, .priv-grid > .honest-box,
.cta-final > div, .cta-final > .code-block {
  min-width: 0;
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.reveal[data-d="1"] { transition-delay: 0.06s; }
.reveal[data-d="2"] { transition-delay: 0.12s; }
.reveal[data-d="3"] { transition-delay: 0.18s; }
.reveal[data-d="4"] { transition-delay: 0.24s; }

/* ---------- command palette ---------- */
.palette-backdrop { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 11vh 16px 0; }
.palette-backdrop[hidden] { display: none; }
.palette { width: 100%; max-width: 560px; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; }
.palette input { width: 100%; border: none; background: none; padding: 16px 18px; font: inherit; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--line); }
.palette input:focus { outline: none; }
.palette .results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette .row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 9px; background: none; border: none; color: var(--text-dim); font-size: 13.5px; text-align: left; cursor: pointer; }
.palette .row svg { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
.palette .row[aria-selected="true"] { background: var(--grad-soft); color: var(--text); }
.palette .row .k { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.palette .empty { padding: 18px; color: var(--text-faint); font-size: 13px; text-align: center; }
.palette .foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); }
.palette .foot kbd { font-family: var(--mono); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; margin-right: 3px; }

/* ---------- misc ---------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--violet); color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Every micro-label on the page holds a >=12px floor at every breakpoint. */

/* ── Vulos suite chrome — identical on every product landing ───────────────
   Two elements, and only two: a logo-only home button in the top bar, and
   one line in the footer. Deliberately free of repo variables so the block
   is byte-identical across the suite and can be diffed as one thing. */
.vulos-home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; opacity: .72; transition: opacity .15s ease, transform .15s ease; }
.vulos-home:hover, .vulos-home:focus-visible { opacity: 1; transform: translateY(-1px); }
.vulos-home img { display: block; width: 22px; height: 22px; border-radius: 6px; }
.vulos-foot { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.45; text-decoration: none; color: inherit; opacity: .85; transition: opacity .15s ease; }
.vulos-foot:hover { opacity: 1; text-decoration: none; }
.vulos-foot img { display: block; width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; }

/* Dark-ground correction for the mark above. vulos-logo.png is flat #2E383A
   on transparency — ink drawn for paper — so composited on this surface it
   measures about 1.3:1 and reads as a smudge, not as a dimmed logo. The
   artwork carries its whole shape in the alpha channel, so brightness(0)
   invert(1) recolours it to the surface's foreground with the glyph intact,
   and the opacity holds it at the same secondary weight the light theme
   gives it. Styling only: the chrome markup stays byte-identical suite-wide. */
:root:not([data-theme="light"]) .vulos-home img,
:root:not([data-theme="light"]) .vulos-foot img { filter: brightness(0) invert(1); opacity: .66; }


/* ---- full-size screen viewer ----------------------------------------------
   The tour renders each capture in a ~325px device card. That reads as an
   illustration, which is the intent, but at that size none of the UI the
   caption is describing is legible — the shots were decoration you could not
   actually inspect. The media area is now a button that opens the same capture
   full size; the caption stays where it is. */
.shot-media-wrap { position: relative; }
button.shot-media-wrap {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; font: inherit; color: inherit;
}
button.shot-media-wrap::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .2s;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 70%, transparent));
}
button.shot-media-wrap:hover::after,
button.shot-media-wrap:focus-visible::after { opacity: 1; }
button.shot-media-wrap .zoom-cue {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  border: 1px solid var(--line-2, var(--line));
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
}
button.shot-media-wrap:hover .zoom-cue,
button.shot-media-wrap:focus-visible .zoom-cue { opacity: 1; transform: none; }
button.shot-media-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* No hover on touch: show the cue outright so the affordance still exists. */
@media (hover: none) { button.shot-media-wrap .zoom-cue { opacity: 1; transform: none; } }

#shot-lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: min(96vw, 1600px); max-height: 94vh; overflow: visible; color: var(--text);
}
#shot-lightbox::backdrop { background: color-mix(in srgb, #05040c 90%, transparent); backdrop-filter: blur(3px); }
#shot-lightbox img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--sh-3); }
#shot-lightbox .lb-cap { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
#shot-lightbox .lb-cap b { color: var(--text); }
#shot-lightbox .lb-x {
  position: absolute; top: -15px; right: -15px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--text);
  cursor: pointer; transition: .2s;
}
#shot-lightbox .lb-x:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); }
#shot-lightbox .lb-x svg { width: 16px; height: 16px; }
@media (max-width: 700px) { #shot-lightbox .lb-x { top: -46px; right: 0; } }