:root {
    color-scheme: light;
    --surface-1:      rgba(255,255,255,0.58);
    --surface-2:      rgba(255,255,255,0.74);
    --page:           #F8FBFD;
    --bg-gradient: #F8FBFD;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --gridline:       #e1e0d9;
    --border:         rgba(11,11,11,0.10);
    --border-strong:  rgba(11,11,11,0.16);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.65);
    --glass-blur:     blur(18px) saturate(150%);
    --good:           #0ca30c;
    --accent:         #2568d0;
    --insight:        #7c5cff;
    --pending:        #a06a00;
    --pending-bg:     rgba(245,166,35,0.14);
    --pending-border: rgba(245,166,35,0.38);
    --shadow-card:    0 1px 2px rgba(11,11,11,0.05), 0 10px 28px rgba(11,11,11,0.06);
    --shadow-card-hover: 0 1px 2px rgba(11,11,11,0.06), 0 16px 36px rgba(11,11,11,0.09);
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface-1:      rgba(32,32,34,0.58);
    --surface-2:      rgba(40,40,43,0.68);
    --page:           #0d0d0d;
    --bg-gradient:
      radial-gradient(1200px 700px at 15% -10%, rgba(90,110,255,0.20), transparent 60%),
      radial-gradient(1000px 620px at 100% 8%, rgba(150,90,255,0.14), transparent 55%),
      radial-gradient(900px 700px at 45% 105%, rgba(40,190,255,0.10), transparent 55%),
      #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.08);
    --glass-blur:     blur(18px) saturate(150%);
    --good:           #0ca30c;
    --accent:         #3987e5;
    --insight:        #9d85ff;
    --pending:        #f2b544;
    --pending-bg:     rgba(245,166,35,0.14);
    --pending-border: rgba(245,166,35,0.32);
    --shadow-card:    0 1px 2px rgba(0,0,0,0.3), 0 10px 28px rgba(0,0,0,0.28);
    --shadow-card-hover: 0 1px 2px rgba(0,0,0,0.35), 0 18px 40px rgba(0,0,0,0.35);
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    /* clip (not hidden) prevents sideways scroll WITHOUT making the root a
       scroll container -- hidden here silently breaks the sticky topbar. */
    overflow-x: clip;
  }
  a { color: inherit; }
  img { max-width: 100%; display: block; }

  /* ---- nav ---- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    /* Default = transparent bar floating over the hero (top of page).
       This paints immediately, so there is no flash of the solid bar
       before JS runs. JS adds .is-scrolled once you scroll past the hero. */
    background: transparent;
    border-bottom: 1px solid transparent;
    font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif;
    transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  }
  /* Scrolled past the hero top: solid white glass bar */
  .nav.is-scrolled {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(17,17,17,0.06);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    max-width: 1200px; margin: 0 auto; padding: 16px 24px;
    color: #fff; transform: translateY(16px);
    /* Inset hairline under the bar while it floats over the hero. Reservoice
       puts this on the inner bar rather than the header, so the rule stops at
       the 1200px container instead of running edge to edge -- then fades out
       once the solid glass bar takes over on scroll. */
    border-bottom: 1px solid rgba(255,255,255,0.18);
    transition: color .3s ease, transform .3s ease, border-color .3s ease;
  }
  @media (min-width: 768px) { .nav-inner { padding: 16px 40px; } }
  @media (min-width: 1024px) { .nav-inner { transform: translateY(28px); } }
  .nav.is-scrolled .nav-inner { color: #111; transform: translateY(0); border-bottom-color: transparent; }
  .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  /* White wordmark while it sits over the dark hero; coloured once solid */
  .nav-brand img { height: 22px; width: auto; filter: brightness(0) invert(1); transition: filter .3s ease; }
  .nav.is-scrolled .nav-brand img { filter: none; }
  .nav-links { display: flex; align-items: center; gap: 24px; }
  /* Type below matches reservoice's navbar.module.css: links 0.95rem/500,
     CTA 0.9rem/600, language trigger 0.95rem/600, mobile links 1rem/600. */
  .nav-links a { font-size: 0.95rem; font-weight: 500; color: inherit; opacity: 0.92; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,0.28); }
  .nav-links a:hover { opacity: 1; }
  .nav.is-scrolled .nav-links a { opacity: 0.85; text-shadow: none; }
  .nav-actions { display: flex; align-items: center; gap: 12px; }
  /* Log in -> subtle text link */
  .nav-actions .cta-btn.is-ghost { height: auto; padding: 6px 4px; border: none; background: transparent; box-shadow: none; color: inherit; opacity: 0.92; font-size: 0.95rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.28); }
  .nav-actions .cta-btn.is-ghost:hover { opacity: 1; filter: none; transform: none; }
  .nav.is-scrolled .nav-actions .cta-btn.is-ghost { opacity: 0.85; text-shadow: none; }
  /* Try the demo -> reservoice outlined CTA (fills on hover) */
  .nav-actions .cta-btn:not(.is-ghost) { height: auto; padding: 0.5rem 0.9rem; border: 1px solid rgba(255,255,255,0.55); border-radius: 6px; background: transparent; color: inherit; box-shadow: none; font-size: 0.9rem; font-weight: 600; transition: background-color .2s ease, color .2s ease, border-color .3s ease; }
  .nav-actions .cta-btn:not(.is-ghost):hover { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.75); filter: none; transform: none; }
  .nav.is-scrolled .nav-actions .cta-btn:not(.is-ghost) { border-color: #111; }
  .nav.is-scrolled .nav-actions .cta-btn:not(.is-ghost):hover { background: #111; color: #fff; border-color: #111; }
  .lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 11px; border-radius: 8px;
    border: none; background: transparent; color: inherit; font: inherit;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; opacity: 0.9; cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.28);
    transition: background-color .2s ease, opacity .2s ease;
  }
  .lang-toggle:hover { opacity: 1; background: rgba(255,255,255,0.16); }
  .nav.is-scrolled .lang-toggle { opacity: 0.8; text-shadow: none; }
  .nav.is-scrolled .lang-toggle:hover { background: rgba(17,17,17,0.05); }
  .lang-toggle svg { width: 18px; height: 18px; }
  .theme-btn { width: 34px; padding: 0; }
  .theme-btn svg { width: 15px; height: 15px; }
  .cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 16px; border-radius: 8px; border: none;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 1px 2px rgba(11,11,11,0.06), 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform .12s ease, filter .12s ease;
  }
  .cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .cta-btn.is-large { height: 46px; padding: 0 24px; font-size: 14.5px; border-radius: 10px; }
  .cta-btn.is-ghost {
    background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
  }
  .nav-mobile-hide { display: flex; }
  .nav-burger {
    display: none; width: 38px; height: 34px; padding: 0; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface-1); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  }
  .nav-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform .22s ease, opacity .22s ease; }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-menu {
    display: none; position: fixed; top: 61px; left: 0; right: 0; z-index: 29;
    flex-direction: column; padding: 12px 20px 18px;
    background: var(--surface-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card);
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 13px 4px; font-size: 1rem; font-weight: 600; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border); }
  .nav-menu a.cta-btn { justify-content: center; margin-top: 14px; border-bottom: none; color: #fff; }
  @media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-mobile-hide { display: none; }
  }
  @media (min-width: 861px) { .nav-menu { display: none !important; } }

  /* ---- shared layout ---- */
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  @media (min-width: 768px) { .wrap { padding: 0 40px; } }
  section { padding: 88px 0; }
  /* keep anchored section headings clear of the sticky topbar */
  section[id] { scroll-margin-top: 76px; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--insight); margin-bottom: 18px;
  }
  .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--insight); }
  h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
  .section-head { max-width: 640px; margin-bottom: 48px; }
  .section-head h2 { font-size: 34px; font-weight: 750; line-height: 1.15; }
  .section-head p { font-size: 16px; color: var(--text-secondary); line-height: 1.6; margin-top: 14px; }

  /* ---- hero (reservoice-style full-bleed card) ---- */
  /* Pull the hero up under the sticky nav so the photo shows through the
     transparent bar at the top (reservoice-style). */
  .hero { padding: 0; margin-top: -3.5rem; position: relative; z-index: 0; }
  @media (min-width: 640px)  { .hero { margin-top: -3.75rem; } }
  @media (min-width: 1024px) { .hero { margin-top: -4rem; } }
  .hero-card {
    position: relative; min-height: 100vh;
    margin: 0 clamp(0.25rem,1vw,0.75rem); border-radius: 1.5rem; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 70%),
      url('/static/images/hero-bg.webp') center/cover no-repeat;
    background-color: #0a3981;
    padding: 7rem 1.5rem 3rem; display: flex; align-items: center;
  }
  @media (min-width: 640px)  { .hero-card { padding: 8rem 2.5rem 4rem; } }
  @media (min-width: 1024px) { .hero-card { padding: 9rem 4rem 5rem; } }
  /* Local scrim behind the headline only. The daylight photo is bright right
     where the text sits (~2.9:1 for the pale #d4ebf8 line, under the 3:1 floor),
     and the text colour can't be fixed -- it's already near white -- so the
     background has to come down. Radial rather than linear: no straight edge,
     so no visible seam across the sky. Follows the text, which is centred below
     1024px and in the left column above it. */
  .hero-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(100% 95% at 50% 45%,
      rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.15) 45%, transparent 75%);
  }
  @media (min-width: 1024px) {
    .hero-card::before {
      background: radial-gradient(85% 90% at 22% 45%,
        rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.16) 42%, transparent 72%);
    }
  }
  .hero-content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
  @media (min-width: 1024px) { .hero-content { grid-template-columns: 1fr 1fr; gap: 4rem; } }
  .hero-textcol { display: flex; flex-direction: column; gap: 1rem; text-align: center; align-items: center; }
  @media (min-width: 1024px) { .hero-textcol { text-align: left; align-items: flex-start; } }
  .hero-h1 { margin: 0; font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 2rem; line-height: 1.2; font-weight: 675; letter-spacing: normal; }
  @media (min-width: 640px)  { .hero-h1 { font-size: 3rem; } }
  @media (min-width: 1024px) { .hero-h1 { font-size: 3.5rem; } }
  /* pre-line: the pale setup line breaks where the copy puts a newline
     (static/i18n/*.json), so the two-line phrasing survives translation
     instead of depending on where the viewport happens to wrap it. */
  .hero-accent { display: block; color: #d4ebf8; white-space: pre-line; }
  .hero-white { display: block; color: #fff; }

  .hero-mediacol { display: none; }
  @media (min-width: 1024px) { .hero-mediacol { display: block; width: 100%; } }
  .hero-frame { width: 100%; background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.35); border-radius: 24px; padding: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hero-dash { background: #fff; border-radius: 16px; overflow: hidden; }
  .hd-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef1f6; }
  .hd-dots { display: flex; gap: 6px; }
  .hd-dots i { width: 10px; height: 10px; border-radius: 50%; }
  .hd-dots i:nth-child(1){background:#ef5f5f;} .hd-dots i:nth-child(2){background:#f4bd4e;} .hd-dots i:nth-child(3){background:#5ac26a;}
  .hd-app { margin-left: 4px; font-size: 12.5px; font-weight: 650; color: #6B7280; }
  .hd-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; color: #0a7a0a; background: #eef8ee; border: 1px solid #c3e6c3; border-radius: 999px; padding: 3px 9px; }
  .hd-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #0ca30c; }
  .hd-body { padding: 16px 16px 18px; }
  /* Single-shipment field list. Same visual language as the demo walkthrough's
     "extract" scene (.de-* below) so the hero and the demo agree. */
  .hd-ref { margin: 0 0 12px; font-size: 14px; font-weight: 750; color: #0a3981; }
  .hd-fields { margin: 0; }
  .hd-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #f1f3f7; }
  .hd-field:first-of-type { border-top: 0; }
  .hd-key { font-size: 12.5px; color: #6B7280; }
  .hd-val { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #111827; }
  .hd-num.is-urgent { color: #b45309; }
  /* Provenance tag, not a status. Warm grey deliberately: slate read as the
     same thing as the blue transit badge (7deg apart on the wheel), while this
     sits 177deg away and matches the warm token scale (--text-secondary,
     --gridline). Neutral also says "metadata", not "shipment state" -- and it
     repeats on every row, so it stays the quietest badge on the card. */
  .hd-src { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 10.5px; font-weight: 700; color: #57534e; background: #f5f4f2; border: 1px solid #e5e1d9; border-radius: 999px; padding: 2px 8px; }
  .hd-src svg { width: 10px; height: 10px; }
  .hd-track { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
  .hd-track-ref { flex: none; width: 92px; font-size: 11.5px; font-weight: 700; color: #111827; }
  .hd-dotline { flex: 1; display: flex; align-items: center; min-width: 0; }
  .hd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; }
  .hd-dot.on { background: #0a3981; }
  .hd-seg { flex: 1; height: 2px; background: #e5e7eb; }
  .hd-seg.on { background: #0a3981; }
  /* Stage badge: soft tint + darker text of the same hue + hairline border,
     the same construction as the .hd-live pill above. Colour carries the
     meaning -- blue in transit, amber waiting on docs, green delivered, red
     delayed -- so the badge reads at a glance without reading the word.
     All four clear 5:1. */
  .hd-track-label { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; }
  .hd-tone-transit   { color: #1e4fa0; background: #eaf1fc; border-color: #c9dcf6; }
  .hd-tone-docs      { color: #8a6000; background: #fdf3dd; border-color: #f0dcae; }
  .hd-tone-delivered { color: #0a7a0a; background: #eef8ee; border-color: #c3e6c3; }
  .hd-tone-delayed   { color: #b3261e; background: #fdecec; border-color: #f3c9c6; }
  .hd-note { margin: 0; font-size: 11.5px; color: #6B7280; }
  .hd-heading { margin: 0 0 12px; font-size: 14px; font-weight: 750; color: #111827; }
  .hd-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #f1f3f7; }
  .hd-row:first-of-type { border-top: 0; }
  .hd-icon { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; }
  .hd-icon svg { width: 17px; height: 17px; }
  .i-ship { background: #eaf1fc; color: #2568d0; } .i-doc { background: #eef8ee; color: #0ca30c; } .i-track { background: #eef1fc; color: #1F509A; }
  .hd-text { min-width: 0; flex: 1; }
  .hd-title { font-size: 12.5px; font-weight: 700; color: #111827; }
  .hd-sub { font-size: 11.5px; color: #6B7280; margin-top: 2px; }
  .hd-badge { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
  .hd-badge-amber { color: #8a6000; background: #fdf3dd; } .hd-badge-green { color: #0a7a0a; background: #eef8ee; } .hd-badge-blue { color: #1e4fa0; background: #eaf1fc; }
  .hd-divider { height: 1px; background: #eef1f6; margin: 10px 0; }
  .hd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hd-stat-v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #111827; }
  .hd-stat-v.accent { color: #2568d0; }
  .hd-stat-l { font-size: 12px; color: #6B7280; margin-top: 2px; }

  /* ---- problem ---- */
  /* Modeled on maindtec workspace "AI that knows your project" 3-card section:
     centered header, white rounded-3xl cards with a coloured pill, a fixed-
     height centred mockup, then headline + description. */
  .prob2 { padding: 64px 0; }
  @media (min-width:640px){ .prob2 { padding: 80px 0; } }
  @media (min-width:768px){ .prob2 { padding: 112px 0; } }
  .prob2-head { max-width: 40rem; margin: 0 auto; text-align: center; }
  .prob2-eyebrow { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.2em; color:#6B7280; }
  @media (min-width:640px){ .prob2-eyebrow { font-size:13px; } }
  /* balance: keeps the two lines even instead of stranding one word. */
  .prob2-title { text-wrap: balance; margin-top:12px; font-size:26px; line-height:1.2; font-weight:675; letter-spacing:-0.01em; color:#171a33; }
  @media (min-width:640px){ .prob2-title { font-size:30px; } }
  @media (min-width:1024px){ .prob2-title { font-size:36px; } }

  .prob2-grid { margin-top:40px; display:grid; grid-template-columns:1fr; gap:20px; }
  @media (min-width:640px){ .prob2-grid { gap:24px; } }
  @media (min-width:768px){ .prob2-grid { margin-top:56px; } }
  @media (min-width:1024px){ .prob2-grid { grid-template-columns:repeat(3,1fr); } }
  .prob2-card { display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1.5px solid #E5E7EB; border-radius:24px; padding:24px; }
  @media (min-width:640px){ .prob2-card { padding:32px; } }
  .prob2-pill { align-self:flex-start; display:inline-flex; align-items:center; width:fit-content; padding:4px 10px; border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:#fff; background:var(--acc,#1e4fa0); }
  @media (min-width:640px){ .prob2-pill { font-size:11px; } }
  .prob2-mock { margin-top:20px; height:140px; display:flex; align-items:center; justify-content:center; }
  @media (min-width:640px){ .prob2-mock { margin-top:24px; height:160px; } }
  .prob2-text { margin-top:20px; }
  @media (min-width:640px){ .prob2-text { margin-top:24px; } }
  .prob2-text h3 { font-size:18px; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color:#111827; margin:0; }
  .prob2-text p { margin:12px 0 0; font-size:15px; line-height:1.6; color:#1f2937; }
  @media (min-width:640px){ .prob2-text p { font-size:16px; } }

  /* mock 1: inbox list */
  /* Card 1: the hero mock's rows, but the right column holds where the value
     lives rather than the value. Set in italic and grey so it reads as a note
     scribbled in the margin, not as data the system holds. */
  .pm-blanks { width:100%; max-width:250px; display:flex; flex-direction:column; gap:11px; }
  .pm-blank { display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:12.5px; color:#6B7280; }
  .pm-val { flex:none; font-style:italic; font-size:12px; color:#9AA1AB; text-align:right; }
  .pm-blank.is-unknown .pm-val { font-style:normal; font-weight:800; font-size:15px; color:#C62828; }

  /* mock 2: overdue counter */
  .pm-counterwrap { width:100%; max-width:240px; text-align:center; }
  .pm-counter { font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1; color:#b45309; }
  .pm-counter-sub { margin-top:8px; font-size:12px; color:#6B7280; }
  .pm-up { color:#b45309; font-weight:700; }
  .pm-meter { margin:12px auto 0; width:100%; height:7px; border-radius:999px; background:#F3E9DA; overflow:hidden; }
  .pm-noalert { margin-top:10px; font-size:11.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#9CA3AF; }
  .pm-meter-fill { width:72%; height:100%; border-radius:999px; background:linear-gradient(90deg,#D98324,#B45309); }

  /* mock 3: messy, scattered stuck notes */
  /* Card 3: one cell per shipment, none of them answered. */
  /* Card 3: what is actually waiting -- mail and calls, none of them answered.
     Filled chips rather than bare glyphs: a symbol on white has no weight, a
     pill does, and overlap is what makes a pile read as a pile. */
  .pm-chaos { width:100%; max-width:250px; text-align:center; }
  .pm-count { font-size:12.5px; color:#6B7280; }
  .pm-count b { font-size:22px; font-weight:800; letter-spacing:-.02em; color:#C62828; margin-right:7px; }
  .pm-chips { position:relative; width:100%; height:140px; margin:10px 0 2px; }
  .pm-chip { position:absolute; display:inline-flex; align-items:center; gap:5px;
    padding:4px 9px 4px 7px; border-radius:999px; font-size:12.5px; font-weight:800;
    border:1.5px solid #fff; box-shadow:0 1px 3px rgba(11,11,11,.10); }
  .pm-chip svg { width:11px; height:11px; flex:none; }
  .pm-chip.is-mail  { background:#FBEAEA; color:#C62828; }
  .pm-chip.is-phone { background:#FBF0DF; color:#9A5B12; }
  .pm-chip:nth-child(1) { left:4%; top:0%; transform:rotate(7deg); z-index:0; }
  .pm-chip:nth-child(2) { left:38%; top:6%; transform:rotate(7deg); z-index:1; }
  .pm-chip:nth-child(3) { left:76%; top:2%; transform:rotate(-7deg); z-index:2; }
  .pm-chip:nth-child(4) { left:2%; top:38%; transform:rotate(-5deg); z-index:3; }
  .pm-chip:nth-child(5) { left:43%; top:26%; transform:rotate(-5deg); z-index:4; }
  .pm-chip:nth-child(6) { left:70%; top:31%; transform:rotate(3deg); z-index:5; }
  .pm-chip:nth-child(7) { left:0%; top:64%; transform:rotate(5deg); z-index:6; }
  .pm-chip:nth-child(8) { left:34%; top:67%; transform:rotate(-5deg); z-index:7; }
  .pm-chip:nth-child(9) { left:69%; top:69%; transform:rotate(-5deg); z-index:8; }
  .pm-unknown-label { margin-top:8px; font-size:11.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#9CA3AF; }

  /* ---- how it works ---- */
  .steps { display: flex; flex-direction: column; gap: 14px; }
  .step {
    display: grid; grid-template-columns: 56px 1fr 240px; gap: 20px; align-items: center;
    background: var(--surface-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px;
    box-shadow: var(--shadow-card), var(--glass-highlight);
  }
  .step-shot {
    border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
    background: var(--surface-2);
  }
  .step-shot img { width: 100%; display: block; }
  @media (max-width: 1060px) { .step { grid-template-columns: 56px 1fr; } .step-shot { display: none; } }
  .step-num {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--insight));
    color: #fff; font-weight: 800; font-size: 15px;
  }
  .step h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
  .step p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

  /* ---- trust ---- */
  .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .trust-card {
    background: var(--surface-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: 16px; padding: 26px;
    box-shadow: var(--shadow-card), var(--glass-highlight);
  }
  .trust-card svg { width: 26px; height: 26px; color: var(--good); margin-bottom: 16px; }
  .trust-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
  .trust-card p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
  .cert-seal {
    width: 48px; height: 48px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--insight));
    box-shadow: 0 6px 16px rgba(124,92,255,0.28);
    margin-bottom: 16px;
  }
  .cert-seal svg { width: 24px; height: 24px; color: #fff; margin: 0; }
  .cert-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
    color: var(--pending); background: var(--pending-bg);
    border: 1px solid var(--pending-border);
    border-radius: 999px; padding: 3px 10px 3px 8px;
    margin-bottom: 10px;
  }
  .cert-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pending); flex: none; }

  /* ---- final cta ---- */
  .final-cta {
    text-align: center; border-radius: 24px; padding: 64px 40px;
    background: var(--surface-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); box-shadow: var(--shadow-card-hover), var(--glass-highlight);
  }
  .final-cta h2 { font-size: 32px; font-weight: 750; max-width: 560px; margin: 0 auto; line-height: 1.2; }
  .final-cta p { font-size: 15px; color: var(--text-secondary); margin: 14px auto 28px; max-width: 480px; }

  /* ---- footer (reservoice-style) ---- */
  .site-footer { width: 100%; padding: 0; }
  .ft-frame {
    position: relative; margin: 48px clamp(6px,1vw,12px) 12px; border-radius: 24px; overflow: hidden;
    background-color: #0a3981;
  }
  /* The photo is a lazy <img> (see partials/layout/footer.html) with the scrim
     as a sibling on top, replacing what used to be a two-layer CSS background.
     Both sit at the bottom of the stack; .ft-glow and .ft-content come later
     in the DOM and so still paint above them, as before. */
  .ft-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ft-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.22) 70%); }
  @media (min-width: 1024px) { .ft-frame { margin-top: 80px; } }
  .ft-glow { position: absolute; width: 22rem; height: 22rem; border-radius: 999px; filter: blur(80px); pointer-events: none; }
  .ft-glow-orange { top: -6rem; right: -6rem; background: #ffa63d; opacity: 0.18; }
  .ft-glow-mint { top: 28%; left: -7rem; background: #c8ffb0; opacity: 0.14; }
  .ft-glow-blue { bottom: -9rem; right: 22%; background: #3ba0ff; opacity: 0.16; }
  .ft-content { position: relative; z-index: 1; }
  .ft-cta { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 20px 84px; }
  @media (min-width: 1024px) { .ft-cta { padding: 96px 24px 120px; } }
  .ft-cta-title { margin: 0; max-width: 56rem; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.45); }
  @media (min-width: 640px) { .ft-cta-title { font-size: 40px; } }
  @media (min-width: 1024px) { .ft-cta-title { font-size: 52px; line-height: 1.12; } }
  .ft-cta-btn { margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: #fff; color: #111827; border-radius: 11px; font-size: 16px; font-weight: 750; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 rgba(17,24,39,0.18), 0 12px 40px rgba(255,255,255,0.25); transition: background .25s ease, box-shadow .25s ease, transform .1s ease; }
  .ft-cta-btn:hover { background: #dcecff; box-shadow: 0 4px 0 #9fc0ea, 0 12px 48px rgba(37,104,208,0.28); }
  .ft-cta-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9fc0ea; }
  .ft-card { margin: 0 12px 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 20px; box-shadow: 0 -4px 24px rgba(0,0,0,0.08); padding: 32px 20px; }
  @media (min-width: 1024px) { .ft-card { margin: 0 48px 32px; padding: 48px; } }
  .ft-brandrow { margin-bottom: 20px; text-align: center; }
  @media (min-width: 768px) { .ft-brandrow { text-align: left; } }
  .ft-brand { font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -0.01em; }
  .ft-columns { display: flex; flex-wrap: wrap; gap: 28px 40px; }
  @media (min-width: 768px) { .ft-columns { gap: 40px 72px; } }
  .ft-col { display: flex; flex-direction: column; min-width: 130px; }
  .ft-col-title { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .02em; }
  .ft-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .ft-link { font-size: 14.5px; font-weight: 500; color: #111827; text-decoration: none; opacity: 0.82; transition: opacity .15s ease, color .15s ease; }
  .ft-link:hover { opacity: 1; color: #2568d0; }
  .ft-copyrow { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(17,24,39,0.1); }
  .ft-copy { margin: 0; text-align: center; font-size: 13px; color: rgba(17,24,39,0.5); }

  @media (max-width: 860px) {
    section { padding: 56px 0; }
    .section-head h2 { font-size: 26px; }
  }

  /* ---- see-it-work demo (reservoice-style dark frame) ---- */
  .demo-sec { padding: 40px 0 88px; }
  .demo-frame {
    position: relative; border-radius: 24px; overflow: hidden;
    padding: 96px 24px 104px;
    background:
      radial-gradient(ellipse 60% 50% at 50% 8%, rgba(31,80,154,0.55) 0%, rgba(10,57,129,0) 60%),
      linear-gradient(180deg, #0A3981 0%, #071E4C 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 40px 90px rgba(8,11,21,0.45);
  }
  .demo-inner { max-width: 900px; margin: 0 auto; text-align: center; }
  .demo-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: #D4EBF8; opacity: 0.75; margin-bottom: 12px;
  }
  .demo-title { font-size: 48px; font-weight: 675; color: #fff; line-height: 1.25; letter-spacing: -0.01em; max-width: 40rem; margin: 12px auto 0; }
  .demo-desc { font-size: 16.8px; color: rgba(212,235,248,0.82); line-height: 1.55; max-width: 40rem; margin: 14px auto 0; }
  /* progress stepper for the single continuous walkthrough */
  .demo-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; max-width: 520px; margin: 44px auto 0; }
  .demo-step { display: flex; flex-direction: column; align-items: center; gap: 11px; position: relative; flex: 1; }
  .demo-step::before { content: ''; position: absolute; top: 9px; left: calc(-50% + 12px); width: calc(100% - 24px); height: 2px; border-radius: 2px; background: rgba(212,235,248,0.18); transition: background .4s ease; }
  .demo-step:first-child::before { display: none; }
  .demo-step .ds-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: rgba(212,235,248,0.08); border: 2px solid rgba(212,235,248,0.30); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .demo-step .ds-label { font-size: 12.5px; font-weight: 650; color: rgba(212,235,248,0.60); transition: color .3s ease; }
  .demo-step.done .ds-dot { background: #C8FFB0; border-color: #C8FFB0; }
  .demo-step.done::before, .demo-step.active::before { background: #C8FFB0; }
  .demo-step.active .ds-dot { background: #C8FFB0; border-color: #C8FFB0; animation: demoDotPulse 1.2s ease-in-out infinite; }
  .demo-step.active .ds-label, .demo-step.done .ds-label { color: #fff; }
  @keyframes demoDotPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(200,255,176,0.35); } 50% { box-shadow: 0 0 0 7px rgba(200,255,176,0.06); } }

  .demo-playrow { display: flex; justify-content: center; margin: 36px 0 8px; }
  .demo-play {
    display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px;
    border-radius: 12px; cursor: pointer; border: none; background: #C8FFB0; color: #0A3981;
    font-size: 14.5px; font-weight: 800;
    box-shadow: 0 4px 0 #9AE07D;
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
  }
  .demo-play:hover { background: #B2F093; box-shadow: 0 4px 0 #7EC65C; }
  .demo-play:active { transform: translateY(2px); box-shadow: 0 2px 0 #7EC65C; }
  .demo-play svg { width: 15px; height: 15px; margin-left: -2px; }

  /* stage: sidecar | device | sidecar (reservoice layout) */
  .demo-stage { position: relative; display: grid; grid-template-columns: 180px minmax(0,440px) 180px; justify-content: center; align-items: center; gap: 36px; max-width: 100%; margin: 0 auto; min-height: 380px; }
  .demo-device { justify-self: center; width: 100%; }
  .demo-glow {
    position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 560px; height: 340px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, #D4EBF8 0%, rgba(212,235,248,0) 72%);
    filter: blur(48px); opacity: 0.4; animation: demoGlow 4s ease-in-out infinite;
  }
  @keyframes demoGlow { 0%,100% { opacity:0.42; transform:translate(-50%,-50%) scale(1);} 50% { opacity:0.62; transform:translate(-50%,-50%) scale(1.06);} }
  .demo-device { position: relative; z-index: 1; }
  .demo-app {
    text-align: left; border-radius: 14px; overflow: hidden;
    background: #F8FBFD;
    border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 24px 60px rgba(7,30,76,0.45);
  }
  .demo-chrome { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #E5E7EB; background: #E8F1FA; }
  .demo-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
  .demo-chrome i:nth-child(1){ background:#ef5f5f;} .demo-chrome i:nth-child(2){ background:#f4bd4e;} .demo-chrome i:nth-child(3){ background:#5ac26a;}
  .demo-chrome span { margin-left: 10px; font-size: 12px; font-weight: 650; color: #6B7280; }
  .demo-body { position: relative; padding: 0; height: 250px; }
  .demo-screen { position: absolute; inset: 0; }
  /* The body is a fixed 250px but the scenes are not the same height -- connect
     and track are barely 80px -- so left to flow they sat at the top with dead
     space under them. Centred vertically instead; `safe` keeps a scene that
     ever outgrows the body aligned to the top rather than clipped at both ends. */
  .demo-screen .scene { position: absolute; inset: 0; padding: 18px; overflow: hidden;
    display: grid; align-content: center; align-content: safe center;
    animation: sceneIn .34s cubic-bezier(0.2,0.8,0.25,1); }
  .demo-screen .scene.is-out { animation: sceneOut .24s ease forwards; }
  @keyframes sceneIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
  @keyframes sceneOut { from { opacity:1; transform:none;} to { opacity:0; transform: translateY(-7px);} }
  .demo-screen .scene .anim { opacity:0; animation: demoIn .45s cubic-bezier(0.2,0.8,0.25,1) forwards; }
  .demo-screen .scene .anim.d1 { animation-delay:.05s; }
  .demo-screen .scene .anim.d2 { animation-delay:.22s; }
  .demo-screen .scene .anim.d3 { animation-delay:.40s; }
  .demo-screen .scene .anim.d4 { animation-delay:.58s; }
  .demo-screen .scene .anim.d5 { animation-delay:.76s; }
  .demo-done { width:52px; height:52px; border-radius:50%; margin:6px auto 0; display:flex; align-items:center; justify-content:center; background:#C8FFB0; box-shadow:0 8px 20px rgba(154,224,125,0.5); }
  .demo-done svg { width:26px; height:26px; color:#0A3981; }

  /* idle "press play" screen */
  .demo-idle { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; cursor:pointer; background:linear-gradient(180deg, #E8F1FA 0%, #F8FBFD 100%); }
  .demo-idle.is-hidden { display:none; }
  .demo-idle .play { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(31,80,154,0.10); border:1px solid rgba(31,80,154,0.15); box-shadow: 0 0 0 6px rgba(31,80,154,0.05); transition: transform .2s cubic-bezier(0.2,0.8,0.25,1.15), box-shadow .2s ease; }
  .demo-idle:hover .play { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(31,80,154,0.09); }
  .demo-idle:focus-visible { outline:none; }
  .demo-idle:focus-visible .play { box-shadow: 0 0 0 4px rgba(31,80,154,0.45); }
  .demo-idle .play svg { width:26px; height:26px; color:#1F509A; margin-left:2px; }
  .demo-idle .hint { font-size:13.5px; color:#1F509A; max-width:260px; line-height:1.5; }

  /* sidecars */
  .demo-sidecar { display:flex; flex-direction:column; gap:12px; align-self:center; }
  .demo-side-item { padding:12.8px 15.2px; border-radius:14px; background:rgba(255,255,255,0.07); border:1px solid rgba(212,235,248,0.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; transform:translateY(8px); }
  .demo-side-item.show { animation: demoIn .45s cubic-bezier(0.2,0.8,0.25,1) forwards; }
  .demo-side-item .lab { display:block; font-size:10.4px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(212,235,248,0.65); }
  .demo-side-item b { display:block; margin-top:4.8px; font-size:14.4px; font-weight:600; color:#fff; line-height:1.3; }
  .demo-sidecar.right .demo-side-item { text-align:right; }

  /* corner toasts */
  .demo-toasts { position:absolute; inset:0; z-index:6; pointer-events:none; }
  .demo-toast { position:absolute; top:24px; display:flex; align-items:flex-start; gap:10.4px; padding:12px 14.4px; border-radius:12px; background:rgba(255,255,255,0.97); box-shadow:0 14px 32px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.5); min-width:200px; max-width:240px; animation: demoToastIn .34s ease; }
  .demo-toast.left { left:24px; }
  .demo-toast.right { right:24px; }
  .demo-toast .tk { width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:#C8FFB0; color:#0A3981; font-size:12px; font-weight:800; margin-top:1px; }
  .demo-toast .tt { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .demo-toast .tt b { font-size:13.6px; font-weight:700; color:#0A3981; line-height:1.2; }
  .demo-toast .tt span { font-size:12px; font-weight:500; color:#6b7280; line-height:1.3; }
  @keyframes demoToastIn { from { opacity:0; transform:translateX(28px) scale(0.94);} to { opacity:1; transform:none;} }

  /* reusable fade/slide-in used across panels when playing */
  .demo-panel.is-playing .anim { opacity: 0; animation: demoIn .5s cubic-bezier(0.2,0.8,0.25,1) forwards; }
  .demo-panel.is-playing .anim.d1 { animation-delay: .10s; }
  .demo-panel.is-playing .anim.d2 { animation-delay: .35s; }
  .demo-panel.is-playing .anim.d3 { animation-delay: .60s; }
  .demo-panel.is-playing .anim.d4 { animation-delay: .85s; }
  .demo-panel.is-playing .anim.d5 { animation-delay: 1.10s; }
  @keyframes demoIn { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: none;} }

  .demo-cap { margin-top: 22px; font-size: 13.5px; color: rgba(212,235,248,0.72); max-width: 560px; margin-left:auto; margin-right:auto; }

  /* connect panel */
  .dc-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #E5E7EB; border-radius:10px; background:#FFFFFF; }
  .dc-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#0A3981; background:#C8FFB0; border-radius:999px; padding:3px 10px; }
  .dc-badge::before{ content:''; width:6px;height:6px;border-radius:50%;background:#0A3981;}
  .dc-scope { margin-top:12px; font-size:13px; color:#6B7280; }
  .dc-scope b { color: #111827; }

  /* group panel */
  .dg-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .dg-col-h { font-size:11.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:#6B7280; margin-bottom:8px; }
  .dg-mail { font-size:12.5px; color:#374151; padding:8px 10px; border:1px solid #E5E7EB; border-radius:8px; background:#FFFFFF; margin-bottom:7px; }
  .dg-mail b { color:#111827; font-weight:650; }
  .dg-case { padding:11px 12px; border:1px solid #E5E7EB; border-radius:10px; background:#FFFFFF; margin-bottom:9px; box-shadow:0 1px 3px rgba(10,57,129,0.05); }
  .dg-ref { font-size:13px; font-weight:750; color:#0A3981; }
  .dg-meta { font-size:11.5px; color:#6B7280; margin-top:3px; }

  /* extract panel */
  .de-card { border:1px solid #E5E7EB; border-radius:12px; background:#FFFFFF; padding:16px; box-shadow:0 1px 3px rgba(10,57,129,0.05); }
  .de-ref { font-size:14px; font-weight:750; color:#0A3981; margin-bottom:12px; }
  .de-field { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid #E5E7EB; }
  .de-field:first-of-type { border-top:0; }
  .de-key { font-size:12.5px; color:#6B7280; }
  .de-val { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:650; color:#111827; }
  .de-src { font-size:10.5px; font-weight:700; color:#1F509A; background:#D4EBF8; border-radius:999px; padding:2px 8px; }

  /* track panel */
  .dt-track { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-top:6px; }
  .dt-step { flex:1; text-align:center; position:relative; }
  .dt-step::before { content:''; position:absolute; top:11px; left:-50%; width:100%; height:2px; background:#E5E7EB; z-index:0; }
  .dt-step:first-child::before { display:none; }
  .dt-dot { position:relative; z-index:1; width:24px; height:24px; border-radius:50%; margin:0 auto 8px; background:#FFFFFF; border:2px solid #E5E7EB; }
  .dt-step.done .dt-dot { background:#1F509A; border-color:#1F509A; }
  .dt-step.done::before { background:#1F509A; }
  .dt-step.now .dt-dot { background:#0A3981; border-color:#0A3981; box-shadow:0 0 0 5px rgba(10,57,129,0.18); }
  .dt-label { font-size:11.5px; font-weight:650; color:#6B7280; }
  .dt-step.now .dt-label { color:#0A3981; }

  @media (max-width: 960px) { .demo-stage { grid-template-columns: 108px minmax(0,1fr) 108px; gap: 12px; } .demo-side-item { font-size: 10.5px; padding: 8px 9px; } .demo-side-item b { font-size: 11px; } }
  @media (max-width: 760px) {
    .demo-frame { padding: 64px 20px 72px; border-radius: 18px; }
    .demo-title { font-size: 30px; }
    .demo-toast { top: 8px; min-width:0; max-width:70%; }
    .demo-toast.left { left: 8px; } .demo-toast.right { right: 8px; }
    .demo-stage { grid-template-columns: 1fr; min-height: auto; }
    .demo-sidecar { display: none; }
    .dg-grid { grid-template-columns: 1fr; }
    .dt-label { font-size: 10px; }
  }

  /* ---- today vs with (comparison, reservoice style) ---- */
  #compare { font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif; }
  #compare .section-head h2 { font-family: 'Nunito', system-ui, sans-serif; letter-spacing: -0.01em; }
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 22px 0 24px; }
  .cmp-flex { display: flex; align-items: center; min-width: 620px; }
  @media (min-width: 640px) { .cmp-scroll { overflow-x: visible; padding: 22px 4px; } .cmp-flex { min-width: 0; } }

  /* white table card: feature + today */
  .cmp-left { flex: 1 1 auto; position: relative; z-index: 0;
    background:#fff; border:1px solid #E9EDF3; border-radius:20px; box-shadow:none; overflow:hidden; }
  .cmp-lrow { display: grid; grid-template-columns: 2fr 1fr; }
  .cmp-lrow > div { min-width:0; height:76px; display:flex; align-items:center; padding:0 28px; }
  .cmp-lrow.cmp-head > div { height:64px; }
  .cmp-lrow:not(.cmp-head) { border-top:1px solid #EEF1F6; }
  .cmp-c-feat { font-weight:700; color:#111827; font-size:15px; }
  .cmp-c-cell { justify-content:center; }
  .cmp-hl { color:#9CA3AF; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; justify-content:center; }

  /* navy winning column: separate raised card, vertically centered so it extends above/below */
  .cmp-right { flex: 0 0 23%; position: relative; z-index: 1; margin-left:-18px;
    padding: 20px 0; background:#0A3981; border-radius:20px; box-shadow:0 12px 26px -14px rgba(10,57,129,0.38); }
  .cmp-rrow { height:76px; display:flex; align-items:center; justify-content:center; color:#fff; }
  .cmp-rrow.cmp-head { height:64px; }
  .cmp-rrow:not(.cmp-head) { border-top:1px solid rgba(255,255,255,0.12); }
  .cmp-hr { font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

  .mk { display:inline-flex; width:30px; height:30px; border-radius:50%; flex:none; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
  .mk-x { background:#E5E7EB; color:#9CA3AF; }
  .mk-v { background:#C8FFB0; color:#0A3981; }


  /* ---- why now (timeline) ---- */
  .tl { position:relative; margin-top:10px; max-width:660px; }
  .tl-item { display:grid; grid-template-columns:52px 1fr; column-gap:20px; }
  .tl-year { text-align:right; font-size:13px; font-weight:800; color:var(--accent); letter-spacing:.02em; padding-top:2px; }
  .tl-body { position:relative; padding:0 0 26px 26px; }
  .tl-item:last-child .tl-body { padding-bottom:0; }
  .tl-body::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--border-strong); }
  .tl-item:last-child .tl-body::before { display:none; }
  .tl-dot { position:absolute; left:0; top:3px; width:14px; height:14px; border-radius:50%; background:var(--surface-1); border:2px solid var(--border-strong); }
  .tl-name { font-size:15.5px; font-weight:750; color:var(--text-primary); }
  .tl-note { font-size:13px; color:var(--text-secondary); margin-top:3px; }
  .tl-item.is-now .tl-year { color:var(--text-primary); }
  .tl-item.is-now .tl-dot { background:var(--accent); border-color:var(--accent); animation: tlPulse 1.8s ease-in-out infinite; }
  .tl-item.is-now .tl-name { color:var(--accent); }
  .tl-item.is-now .tl-body { background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); border-radius:12px; padding:12px 16px 14px 26px; }
  @keyframes tlPulse { 0%,100% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); } 50% { box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 6%,transparent); } }

  /* ---- what it does (value cards) ---- */
  /* selectable feature cards (maindtec-style) */
  .feat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
  .feat-card {
    text-align:left; cursor:pointer; background:#fff; border:2px solid #EEF1F6; border-radius:16px;
    padding:22px 24px 24px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; font:inherit;
  }
  .feat-card:hover { border-color:#D6DEEA; }
  .feat-card.is-active { border-color:var(--accent); box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 40%,transparent); }
  :root[data-theme="dark"] .feat-card { background:#141821; border-color:rgba(255,255,255,0.08); }
  .feat-card h3 { font-size:17px; font-weight:750; margin-bottom:8px; }
  .feat-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.5; margin:0; }

  /* product preview panel that switches with the active card */
  .feat-preview { border-radius:24px; padding:clamp(20px,4vw,44px); border:1px solid #DCE4EF;
    background:linear-gradient(180deg, #E4EBF6 0%, #EEF2F9 100%); }
  :root[data-theme="dark"] .feat-preview { background:linear-gradient(180deg,#10151f 0%,#0b0e15 100%); border-color:rgba(255,255,255,0.06); }
  .feat-window { max-width:900px; margin:0 auto; border-radius:14px; overflow:hidden; background:#fff; border:1px solid #E5E7EB; box-shadow:0 24px 60px -24px rgba(10,57,129,0.35); }
  .feat-chrome { display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid #E5E7EB; background:#F1F5FA; }
  .feat-chrome i { width:10px; height:10px; border-radius:50%; }
  .feat-chrome i:nth-child(1){background:#ef5f5f;} .feat-chrome i:nth-child(2){background:#f4bd4e;} .feat-chrome i:nth-child(3){background:#5ac26a;}
  .feat-chrome span { margin-left:10px; font-size:12px; font-weight:650; color:#6B7280; }
  .feat-screen { padding:20px; min-height:362px; display:grid; }
  /* ---- value preview scenes ----
     Four scenes, four deliberately different silhouettes: columns, a calendar
     grid, one urgent item over a queue, and a timeline rail. They were four
     identical row stacks before, which made clicking a tab feel like nothing
     had happened. Only one is ever visible; the rest carry [hidden]. */
  /* Grid item so it stretches to the window; each scene then distributes
     that height in the way its own shape wants. */
  .feat-scene { display:flex; flex-direction:column; min-height:0; }
  .feat-scene[hidden] { display:none; }
  .feat-scene.is-in { animation: sceneIn .32s cubic-bezier(0.2,0.8,0.25,1); }

  /* 1 - board: kanban columns, the only left-to-right mock on the page */
  .sc-cols { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-content:stretch; }
  .sc-col { background:#F7F9FC; border:1px solid #EBEFF5; border-radius:12px; padding:10px; }
  .sc-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#6B7280; margin-bottom:10px; }
  .sc-col-head b { font-size:12px; color:#111827; background:#fff; border:1px solid #E5E9F0; border-radius:6px; padding:1px 6px; }
  .sc-tile { display:block; background:#fff; border:1px solid #E5E9F0; border-radius:10px; padding:9px 10px; margin-bottom:8px;
    box-shadow:0 1px 2px rgba(11,11,11,.04); }
  .sc-tile.is-urgent { border-color:#F2C9C9; box-shadow:0 1px 2px rgba(198,40,40,.10); }
  .sc-tile-ref { display:block; font-size:12.5px; font-weight:800; color:#111827; }
  .sc-tile-route { display:block; font-size:11.5px; color:#6B7280; margin-top:2px; }
  .sc-tile-flag { display:inline-block; margin-top:7px; font-size:10.5px; font-weight:800;
    letter-spacing:.02em; color:#C62828; background:#FBEAEA; border-radius:999px; padding:2px 8px; }

  /* 2 - docs: a calendar, so the deadline claim is shown rather than asserted */
  .sc-cal { flex:1; display:grid; grid-template-columns:repeat(7,1fr);
    grid-template-rows:auto repeat(3, 1fr); gap:6px; }
  .sc-cal-day { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    color:#9AA1AB; text-align:center; padding-bottom:2px; }
  .sc-cal-cell { border:1px solid #EEF1F6; border-radius:9px; padding:5px 6px; background:#fff; }
  .sc-cal-n { display:block; font-size:11px; font-weight:700; color:#9AA1AB; }
  .sc-cal-cell.has-doc { background:#F5F8FD; border-color:#DCE6F5; }
  .sc-cal-doc { display:block; margin-top:4px; font-size:10.5px; font-weight:800; color:#1e4fa0; }
  .sc-cal-cell.is-urgent { background:#FDF3F3; border-color:#F2C9C9; }
  .sc-cal-cell.is-urgent .sc-cal-doc { color:#C62828; }
  .sc-cal-cell.is-urgent .sc-cal-n { color:#C62828; }
  .sc-cal-foot { margin:12px 0 0; text-align:center; font-size:11.5px; color:#6B7280; }

  /* 3 - exceptions: one item dominates, the rest queue under it */
  .sc-alert { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px;
    background:#FDF3F3; border:1.5px solid #F0BFBF; box-shadow:0 8px 22px -14px rgba(198,40,40,.55); }
  .sc-alert-icon { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
    background:#C62828; color:#fff; }
  .sc-alert-icon svg { width:17px; height:17px; }
  .sc-alert-body { flex:1; min-width:0; }
  .sc-alert-body b { display:block; font-size:15px; font-weight:800; color:#8E2B2B; }
  .sc-alert-body em { display:block; font-style:normal; font-size:12.5px; color:#A05353; margin-top:2px; }
  .sc-alert-act { flex:none; font-size:12px; font-weight:800; color:#fff; background:#C62828;
    border-radius:8px; padding:7px 14px; }
  .sc-queue { flex:1; list-style:none; margin:12px 0 0; padding:0; }
  .sc-queue li { display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid #F0F2F6; font-size:12.5px; }
  .sc-queue li:last-child { border-bottom:0; }
  .sc-q-title { font-weight:700; color:#111827; }
  .sc-q-about { flex:1; min-width:0; color:#6B7280; }
  .sc-q-when { flex:none; color:#9AA1AB; }

  /* 4 - log: a rail, because an audit trail is chronological */
  .sc-log-grid { flex:1; display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:26px; align-items:start; }
  .sc-tl { list-style:none; margin:0; padding:0; }
  /* Aggregate beside the trail -- a manager reads both. */
  .sc-sum { border-left:1px solid #EEF1F6; padding-left:22px; height:100%; }
  .sc-sum h4 { margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; color:#9AA1AB; }
  .sc-sum-stats { display:flex; gap:18px; margin-bottom:18px; }
  .sc-sum-stats b { display:block; font-size:23px; font-weight:800; letter-spacing:-.02em; color:#111827; line-height:1.1; }
  .sc-sum-stats span { font-size:11.5px; color:#6B7280; }
  .sc-sum h5 { margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; color:#9AA1AB; }
  .sc-sum-top { list-style:none; margin:0; padding:0; }
  .sc-sum-top li { display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:6px 0; border-bottom:1px solid #F2F4F8; font-size:12px; }
  .sc-sum-top li:last-child { border-bottom:0; }
  .sc-sum-top span { color:#4B5563; }
  .sc-sum-top b { flex:none; font-size:11px; font-weight:700; color:#6B7280;
    background:#F4F6FA; border-radius:5px; padding:1px 7px; }
  .sc-sum-foot { margin:16px 0 0; font-size:11px; line-height:1.5; color:#9AA1AB; }
  .sc-tl-item { position:relative; display:grid; grid-template-columns:58px 18px 1fr auto;
    align-items:start; gap:0 4px; padding-bottom:13px; font-size:12.5px; }
  .sc-tl-item:last-child { padding-bottom:0; }
  .sc-tl-item::before { content:""; grid-column:2; grid-row:1; justify-self:center; align-self:stretch;
    width:1.5px; background:#E5E9F0; margin-top:15px; margin-bottom:-13px; }
  .sc-tl-item:last-child::before { display:none; }
  .sc-tl-time { color:#9AA1AB; font-variant-numeric:tabular-nums; padding-top:1px; }
  .sc-tl-dot { grid-column:2; grid-row:1; justify-self:center; width:9px; height:9px; margin-top:4px;
    border-radius:50%; background:#fff; border:2px solid #2568d0; position:relative; z-index:1; }
  .sc-tl-item.is-system .sc-tl-dot { background:#2568d0; }
  .sc-tl-item.is-past .sc-tl-dot { border-color:#C6CCD6; }
  .sc-tl-ref { justify-self:end; align-self:center; font-size:11px; font-weight:700; color:#6B7280;
    background:#F4F6FA; border:1px solid #E9EDF3; border-radius:6px; padding:2px 8px; white-space:nowrap; }
  .sc-tl-text b { display:block; font-weight:800; color:#111827; }
  .sc-tl-text em { display:block; font-style:normal; color:#6B7280; margin-top:2px; }

  @media (max-width: 720px) {
    .sc-cols { grid-template-columns:repeat(2,1fr); }
    .sc-tl-item { grid-template-columns:48px 18px 1fr; }
    .sc-tl-ref { display:none; }
    /* No room for the aggregate beside the trail on a phone. */
    .sc-log-grid { grid-template-columns:1fr; gap:0; }
    .sc-sum { display:none; }
  }

  .feat-scene > * { opacity:0; animation: demoIn .45s cubic-bezier(0.2,0.8,0.25,1) forwards; }
  .feat-scene > *:nth-child(1){animation-delay:.02s;} .feat-scene > *:nth-child(2){animation-delay:.11s;}
  .feat-scene > *:nth-child(3){animation-delay:.20s;} .feat-scene > *:nth-child(4){animation-delay:.29s;}
  @media (prefers-reduced-motion: reduce) {
    .feat-scene.is-in { animation:none; }
    /* demoIn is what restores opacity, so it cannot simply be switched off. */
    .feat-scene > * { opacity:1; animation:none; }
  }

  /* product-accurate mockup: KPI tiles + shipment cards + stage tracker (product colors) */

  .pc-card { border:1px solid #E5E7EB; border-radius:12px; padding:14px 16px; margin-bottom:10px; background:#fff; }
  .pc-card:last-child { margin-bottom:0; }
  .pc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .pc-lane { font-size:14px; font-weight:750; color:#111827; }
  .pc-refs { font-size:12px; color:#6B7280; margin-top:3px; }

  /* list rows (docs / exceptions / log) */
  .fr { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid #E5E7EB; border-radius:12px; margin-bottom:9px; background:#fff; }
  .fr:last-child { margin-bottom:0; }
  .fr-ref { font-size:13.5px; font-weight:750; color:#111827; }
  .fr-sub { font-size:12px; color:#6B7280; margin-top:3px; }

  /* status pills - product palette (blue/green/amber/red) */
  @media (max-width: 980px) { .feat-cards { grid-template-columns:repeat(2,1fr); } }
  @media (max-width: 560px) { .feat-cards { grid-template-columns:1fr; } .feat-card h3 { min-height:0; } }