/* ─────────────────────────────────────────────────────────────
       Aurora helloaurora.ai — Aurora AI Solutions Studio
       KI-Prozessanalyse mit Umsetzungsfahrplan. DE/EN.
       Display: Playfair Display · Body: Outfit · Mono: system monospace
       ───────────────────────────────────────────────────────────── */

    :root {
      --bg-ink:        #05070d;
      --bg-deep:       #07090f;
      --bg-night:      #0b1020;
      --bg-card:       rgba(18, 24, 42, 0.55);
      --bg-card-solid: #0f1424;
      --hairline:      rgba(255, 255, 255, 0.06);
      --hairline-2:    rgba(255, 255, 255, 0.12);
      --hairline-3:    rgba(255, 255, 255, 0.22);

      --ink-100:       #f4f6fb;
      --ink-200:       #d3d8e6;
      --ink-300:       #9ba6bf;
      --ink-400:       #8793ad;
      --ink-500:       #66718a;

      --aurora-mint:   #38e8c8;
      --aurora-cyan:   #00e5ff;
      --aurora-indigo: #4f46e5;
      --aurora-violet: #b026ff;
      --aurora-gold:   #f0c84c;

      --grad-aurora:   linear-gradient(135deg, #38e8c8 0%, #00e5ff 35%, #4f46e5 70%, #b026ff 100%);
      --grad-aurora-h: linear-gradient(90deg,  #38e8c8 0%, #00e5ff 35%, #4f46e5 70%, #b026ff 100%);

      --font-display: 'Playfair Display', ui-serif, Georgia, serif;
      --font-body:    'Outfit', system-ui, -apple-system, sans-serif;
      --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

      --radius-sm: 10px;
      --radius:    16px;
      --radius-lg: 22px;
      --radius-xl: 28px;

      --container: 1180px;
      --gutter: clamp(1.25rem, 4vw, 2.5rem);

      --shadow-card: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
      --shadow-lift: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;

      --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
    body {
      font-family: var(--font-body);
      background: var(--bg-ink);
      color: var(--ink-100);
      font-weight: 400;
      line-height: 1.6;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "ss01", "cv11", "calt";
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
    img, svg { max-width: 100%; display: block; }
    ::selection { background: rgba(0, 229, 255, 0.28); color: #fff; }
    :focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 3px; border-radius: 4px; }

    /* ── Language blocks (used for a few long HTML snippets only) ─── */
    html.lang-de .only-en { display: none !important; }
    html:not(.lang-de) .only-de { display: none !important; }

    /* ── Ambient ─────────────────────────────────────────────────── */
    .page-atmosphere {
      position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background:
        radial-gradient(900px 600px at 12% -10%, rgba(56, 232, 200, 0.09), transparent 60%),
        radial-gradient(900px 700px at 90% 6%,  rgba(176, 38, 255, 0.09), transparent 65%),
        radial-gradient(700px 600px at 50% 110%, rgba(79, 70, 229, 0.09), transparent 60%),
        var(--bg-ink);
    }
    .aurora-ambient {
      position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background:
        radial-gradient(60% 50% at 20% 10%, rgba(56,232,200,0.09), transparent 60%),
        radial-gradient(60% 50% at 80% 30%, rgba(176,38,255,0.09), transparent 60%),
        radial-gradient(50% 40% at 50% 90%, rgba(0,229,255,0.05), transparent 60%);
      mix-blend-mode: screen;
      animation: ambient-drift 24s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }
    @keyframes ambient-drift {
      from { transform: translate3d(0, 0, 0); opacity: 1; }
      to   { transform: translate3d(1%, -2%, 0); opacity: 0.85; }
    }
    .grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
      mix-blend-mode: overlay;
    }

    .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

    /* ── Scroll progress ─────────────────────────────────────────── */
    .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 90; pointer-events: none; }
    .progress i { display: block; height: 100%; width: 100%; background: var(--grad-aurora-h); transform: scaleX(0); transform-origin: left; }

    /* ── Nav ──────────────────────────────────────────────────────── */
    nav.site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 80;
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      background: rgba(7, 9, 15, 0.42);
      border-bottom: 1px solid transparent;
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }
    nav.site-nav.is-scrolled {
      background: rgba(7, 9, 15, 0.8);
      border-bottom-color: var(--hairline-2);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    }
    .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; height: 72px; }

    .brand { display: inline-flex; align-items: center; gap: 0.65rem; white-space: nowrap; flex-shrink: 0; color: var(--ink-100); }
    .brand .brand-mark { width: 28px; height: 28px; display: block; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 14px rgba(0, 229, 255, 0.35); }
    .brand .brand-text { display: inline-flex; align-items: baseline; }
    .brand .brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; line-height: 1; }
    .brand .brand-os {
      font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
      letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-400);
      margin-left: 0.7rem; padding-left: 0.7rem;
      border-left: 1px solid var(--hairline-3);
    }

    .nav-links { display: flex; align-items: center; gap: 1.35rem; min-width: 0; }
    .nav-links a { font-size: 0.86rem; color: var(--ink-300); transition: color 0.2s; position: relative; white-space: nowrap; }
    .nav-links a:hover, .nav-links a.on { color: var(--ink-100); }
    .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--grad-aurora-h); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
    .nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); }
    .nav-cta { padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); background: var(--ink-100); color: var(--bg-ink) !important; font-weight: 500; font-size: 0.85rem; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; }
    .nav-cta::after { display: none !important; }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,255,255,0.12); }

    .lang-toggle {
      display: inline-flex; align-items: center; flex-shrink: 0;
      border: 1px solid var(--hairline-2); border-radius: 999px;
      background: rgba(255,255,255,0.025); padding: 2px;
    }
    .lang-btn {
      font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
      letter-spacing: 0.08em; color: var(--ink-400);
      min-width: 38px; text-align: center;
      padding: 0.32rem 0.45rem; border-radius: 999px;
      transition: color 0.2s, background 0.2s;
    }
    .lang-btn:hover { color: var(--ink-200); }
    .lang-btn.on { color: var(--bg-ink); background: var(--ink-100); }

    .nav-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hairline-2); align-items: center; justify-content: center; }
    .nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink-100); position: relative; }
    .nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink-100); }
    .nav-burger span::before { top: -5px; } .nav-burger span::after { top: 5px; }

    .nav-sheet { display: none; }
    @media (max-width: 1280px) {
      .brand .brand-os { display: none; }
      .nav-row { height: 64px; gap: 0.9rem; }
      .nav-links > a:not(.nav-cta) { display: none; }
      .nav-burger { display: inline-flex; }
      .nav-sheet {
        display: block; position: fixed; top: 64px; left: 0; right: 0; z-index: 79;
        background: rgba(7, 9, 15, 0.96); border-bottom: 1px solid var(--hairline-2);
        padding: 0.6rem var(--gutter) 1rem;
        transform: translateY(-8px); opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
      }
      .nav-sheet.open { opacity: 1; transform: none; pointer-events: auto; }
      .nav-sheet a { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--hairline); color: var(--ink-200); font-size: 1rem; }
      .nav-sheet a:last-child { border-bottom: 0; }
    }
    @media (max-width: 560px) {
      .brand .brand-word { font-size: 1.05rem; }
      .nav-links .nav-cta { display: none; } /* the sheet + hero carry the CTA */
      .lang-btn { min-width: 32px; }
      .hero-kicker { display: block; }
      .hero-kicker > span { display: block; margin-bottom: 0.3rem; }
      .hero-kicker .sep { display: none; }
    }

    /* ── Buttons ─────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
      padding: 0.95rem 1.5rem; border-radius: var(--radius-sm);
      font-weight: 500; font-size: 0.95rem;
      border: 1px solid transparent;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .btn-primary { background: var(--ink-100); color: var(--bg-ink) !important; box-shadow: 0 10px 28px rgba(255,255,255,0.10); }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,255,255,0.16); }
    .btn-ghost { border-color: var(--hairline-3); color: var(--ink-100); background: rgba(255,255,255,0.02); }
    .btn-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
    .btn .arr { transition: transform 0.2s; }
    .btn:hover .arr { transform: translateX(3px); }

    /* ── Reveal on scroll ────────────────────────────────────────── */
    .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
    .rv.in { opacity: 1; transform: none; }
    .rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; } .rv-d3 { transition-delay: 0.24s; }
    .rv-d4 { transition-delay: 0.32s; } .rv-d5 { transition-delay: 0.40s; } .rv-d6 { transition-delay: 0.48s; }

    /* ── Section scaffolding ─────────────────────────────────────── */
    .sec { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
    .sec + .sec { border-top: 1px solid var(--hairline); }
    .sec-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
    .kicker {
      display: inline-flex; align-items: center; gap: 0.7rem;
      font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-400);
      margin-bottom: 1.2rem;
    }
    .kicker .num { color: var(--aurora-mint); }
    .kicker::before { content: ''; width: 22px; height: 1px; background: var(--hairline-3); }
    .sec h2 {
      font-family: var(--font-display); font-weight: 400;
      font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.14; letter-spacing: -0.02em;
      color: var(--ink-100); text-wrap: balance;
    }
    .lede { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.35vw, 1.15rem); color: var(--ink-300); line-height: 1.7; }
    .prose p { font-size: 1.04rem; color: var(--ink-200); line-height: 1.8; margin-bottom: 1.2rem; max-width: 66ch; }
    .prose p:last-child { margin-bottom: 0; }
    .prose strong { color: var(--ink-100); font-weight: 600; }
    .em { color: var(--ink-100); }
    .hl { background: var(--grad-aurora-h); -webkit-background-clip: text; background-clip: text; color: transparent; }

    /* ── Hero ─────────────────────────────────────────────────────── */
    .hero { position: relative; padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 4.5rem); }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
    @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
    .hero-kicker {
      display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center;
      font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-300);
      margin-bottom: 1.6rem;
    }
    .hero-kicker .sep { color: var(--ink-500); }
    .hero-kicker .tag { color: var(--aurora-mint); }
    .hero h1 {
      font-family: var(--font-display); font-weight: 400;
      font-size: clamp(2.1rem, 4.6vw, 3.55rem); line-height: 1.08; letter-spacing: -0.025em;
      color: var(--ink-100); text-wrap: balance;
    }
    .hero h1 .l2 { display: block; color: var(--ink-300); margin-top: 0.35em; font-size: 0.72em; line-height: 1.2; }
    .hero .sub { margin-top: 1.5rem; font-size: clamp(1.02rem, 1.35vw, 1.13rem); color: var(--ink-300); line-height: 1.7; max-width: 58ch; }
    .hero .sub strong { color: var(--ink-100); font-weight: 500; }
    .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; align-items: center; }
    .hero-note { margin-top: 1.1rem; font-size: 0.82rem; color: var(--ink-400); }

    /* the loop diagram */
    .loop-card {
      position: relative; border: 1px solid var(--hairline-2); border-radius: var(--radius-xl);
      background:
        radial-gradient(600px 300px at 80% -10%, rgba(79,70,229,0.14), transparent 60%),
        radial-gradient(500px 300px at 10% 110%, rgba(56,232,200,0.10), transparent 60%),
        linear-gradient(180deg, rgba(18,24,42,0.72), rgba(11,16,32,0.88));
      box-shadow: var(--shadow-lift);
      padding: 1.1rem 1.1rem 1.2rem;
      overflow: hidden;
    }
    .loop-head { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hairline); margin-bottom: 0.6rem; }
    .loop-svg { width: 100%; height: auto; overflow: visible; }
    .loop-svg .node rect { fill: #111830; stroke: rgba(255,255,255,0.16); stroke-width: 1; }
    .loop-svg .node text { fill: var(--ink-200); font-family: var(--font-body); font-size: 12.5px; font-weight: 500; }
    .loop-svg .node .sm { fill: var(--ink-400); font-size: 10px; font-weight: 400; }
    .loop-svg .node.gate rect { stroke: rgba(240,200,76,0.55); fill: #1b1a14; }
    .loop-svg .node.gate text { fill: var(--aurora-gold); }
    .loop-svg .node.gate .sm { fill: rgba(240,200,76,0.75); }
    .loop-svg .node.out rect { stroke: rgba(56,232,200,0.5); fill: #0f1f22; }
    .loop-svg .node.out text { fill: var(--aurora-mint); }
    .loop-svg .node.out .sm { fill: rgba(56,232,200,0.75); }
    .loop-svg .node.erp rect { stroke: rgba(129,140,248,0.55); fill: #14162e; }
    .loop-svg .node.erp text { fill: #c7caff; }
    .loop-svg .node.erp .sm { fill: rgba(199,202,255,0.7); }
    .loop-svg .wire { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 1.2; }
    .loop-svg .wire.back { stroke-dasharray: 3 4; stroke: rgba(255,255,255,0.10); }
    .loop-svg .pulse { fill: var(--aurora-cyan); filter: drop-shadow(0 0 6px rgba(0,229,255,0.9)); }
    .loop-svg .pulse2 { fill: var(--aurora-mint); filter: drop-shadow(0 0 6px rgba(56,232,200,0.9)); }
    .loop-svg .lbl { fill: var(--ink-500); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; }
    .loop-foot { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 0.7rem; font-size: 0.8rem; color: var(--ink-400); flex-wrap: wrap; }
    .loop-foot b { color: var(--ink-200); font-weight: 500; }
    .loop-foot .log { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
    .loop-foot .log i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-mint); box-shadow: 0 0 8px var(--aurora-mint); margin-right: 0.45rem; animation: dot-pulse 1.8s ease-in-out infinite; }

    /* facts strip */
    .facts { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
    .facts-row { display: grid; grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 860px) { .facts-row { grid-template-columns: repeat(2, 1fr); } }
    .fact { padding: 1.3rem 1.2rem 1.3rem 0; border-right: 1px solid var(--hairline); }
    .fact:last-child { border-right: 0; }
    .fact:not(:first-child) { padding-left: 1.2rem; }
    @media (max-width: 860px) { .fact:nth-child(2) { border-right: 0; } .fact:nth-child(3) { border-bottom: 0; padding-left: 0; } .fact:nth-child(1), .fact:nth-child(2) { border-bottom: 1px solid var(--hairline); } }
    .fact .n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-100); line-height: 1; }
    .fact .n small { font-size: 0.55em; color: var(--ink-300); margin-left: 0.15em; }
    .fact .l { margin-top: 0.45rem; font-size: 0.82rem; color: var(--ink-400); line-height: 1.4; }

    /* ── Problem: symptom → cause ────────────────────────────────── */
    .problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }
    .symptoms { display: flex; flex-direction: column; gap: 0.6rem; }
    .symptom {
      display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
      text-align: left; padding: 1rem 1.1rem; border-radius: var(--radius);
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
      transition: border-color 0.25s, background 0.25s, transform 0.25s;
    }
    .symptom:hover { border-color: var(--hairline-3); background: rgba(255,255,255,0.04); }
    .symptom.on { border-color: rgba(56,232,200,0.5); background: rgba(56,232,200,0.05); }
    .symptom .ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline-2); color: var(--ink-300); flex-shrink: 0; }
    .symptom.on .ic { color: var(--aurora-mint); border-color: rgba(56,232,200,0.4); }
    .symptom .t { display: block; font-size: 0.98rem; font-weight: 500; color: var(--ink-100); }
    .symptom .s { display: block; font-size: 0.78rem; color: var(--ink-400); margin-top: 0.1rem; }
    .symptom .arr { color: var(--ink-500); transition: transform 0.25s, color 0.25s; }
    .symptom.on .arr { color: var(--aurora-mint); transform: translateX(3px); }
    .cause {
      position: relative; border-radius: var(--radius-lg); border: 1px solid var(--hairline-2);
      background: linear-gradient(180deg, rgba(18,24,42,0.72), rgba(11,16,32,0.88));
      box-shadow: var(--shadow-card); padding: clamp(1.4rem, 3vw, 2rem); min-height: 100%;
    }
    .cause .lab { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
    .cause .lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--aurora-gold); box-shadow: 0 0 8px var(--aurora-gold); }
    .cause-pane { display: none; }
    .cause-pane.on { display: block; animation: rise 0.45s var(--ease-out) both; }
    .cause h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: 0.8rem; }
    .cause p { font-size: 0.98rem; color: var(--ink-200); line-height: 1.7; }
    .cause .then { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--hairline-2); font-size: 0.92rem; color: var(--ink-300); line-height: 1.6; }
    .cause .then b { color: var(--aurora-mint); font-weight: 500; }

    /* ── Phases timeline ─────────────────────────────────────────── */
    .phases { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    @media (max-width: 960px) { .phases { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .phases { grid-template-columns: 1fr; } }
    .track { position: relative; height: 2px; background: var(--hairline-2); margin: 0 0 1.6rem; border-radius: 2px; overflow: hidden; }
    .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--grad-aurora-h); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out); }
    .track.go i { transform: scaleX(1); }
    .weeks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.6rem; }
    .phase {
      position: relative; padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--radius-lg);
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
      transition: border-color 0.3s, background 0.3s, transform 0.3s;
    }
    .phase:hover { border-color: var(--hairline-3); background: rgba(255,255,255,0.035); transform: translateY(-3px); }
    .phase .n { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--aurora-mint); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.6rem; }
    .phase .n em { font-style: normal; color: var(--ink-500); letter-spacing: 0.12em; }
    .phase h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.32rem; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: 0.6rem; }
    .phase p { font-size: 0.92rem; color: var(--ink-300); line-height: 1.65; }
    .phase .q { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--hairline-2); font-size: 0.86rem; color: var(--ink-200); line-height: 1.6; }

    /* ── Six pages ────────────────────────────────────────────────── */
    .pages-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    @media (max-width: 900px) { .pages-grid { grid-template-columns: 1fr; } }
    .pages { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    @media (max-width: 520px) { .pages { grid-template-columns: 1fr; } }
    .page {
      position: relative; aspect-ratio: 1 / 1.08; padding: 1rem 1rem 0.9rem;
      border-radius: 12px; border: 1px solid var(--hairline-2);
      background: linear-gradient(180deg, rgba(244,246,251,0.06), rgba(244,246,251,0.02));
      display: flex; flex-direction: column; justify-content: space-between;
      transition: transform 0.35s var(--ease-out), border-color 0.3s, background 0.3s;
      overflow: hidden;
    }
    .page::before { content: ''; position: absolute; left: 1rem; right: 1rem; top: 2.6rem; height: 1px; background: var(--hairline-2); }
    .page::after {
      content: ''; position: absolute; left: 1rem; right: 2.2rem; top: 3.4rem; height: 34%;
      background: repeating-linear-gradient(180deg, var(--hairline) 0 1px, transparent 1px 11px);
      mask-image: linear-gradient(180deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
    }
    .page:hover { transform: translateY(-4px) rotate(-0.6deg); border-color: var(--hairline-3); background: linear-gradient(180deg, rgba(244,246,251,0.09), rgba(244,246,251,0.03)); }
    .page .pn { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-500); }
    .page .pt { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.3; color: var(--ink-100); letter-spacing: -0.005em; }
    .page .pd { font-size: 0.78rem; color: var(--ink-400); line-height: 1.5; margin-top: 0.4rem; }
    .pages-note { margin-top: 1.2rem; font-size: 0.88rem; color: var(--ink-400); line-height: 1.6; }
    .pages-note b { color: var(--ink-200); font-weight: 500; }

    /* ── Example decision map ────────────────────────────────────── */
    .map-shell {
      border: 1px solid var(--hairline-2); border-radius: var(--radius-xl);
      background:
        radial-gradient(720px 320px at 10% -10%, rgba(56,232,200,0.10), transparent 62%),
        radial-gradient(640px 320px at 96% 110%, rgba(79,70,229,0.12), transparent 60%),
        linear-gradient(180deg, rgba(18,24,42,0.78), rgba(11,16,32,0.88));
      box-shadow: var(--shadow-lift); padding: clamp(1.2rem, 3vw, 2rem);
    }
    .map-source { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
    .map-source span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
    .map-source .truth { color: var(--aurora-mint); }
    .map-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1rem; }
    @media (max-width: 780px) { .map-flow { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .map-flow { grid-template-columns: 1fr; } }
    .map-tab {
      text-align: left; min-height: 132px; padding: 1rem; border-radius: var(--radius);
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
      transition: transform 0.25s var(--ease-out), border-color 0.25s, background 0.25s;
    }
    .map-tab:hover { transform: translateY(-3px); border-color: var(--hairline-3); background: rgba(255,255,255,0.04); }
    .map-tab.on { border-color: rgba(56,232,200,0.5); background: rgba(56,232,200,0.055); }
    .map-tab .mn { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--aurora-mint); margin-bottom: 0.7rem; }
    .map-tab strong { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; line-height: 1.25; color: var(--ink-100); }
    .map-tab small { display: block; margin-top: 0.45rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-400); }
    .map-detail { margin-top: 0.8rem; min-height: 150px; padding: clamp(1.2rem, 3vw, 1.7rem); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); background: rgba(5,7,13,0.48); }
    .map-pane { display: none; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: start; }
    .map-pane.on { display: grid; animation: rise 0.4s var(--ease-out) both; }
    @media (max-width: 720px) { .map-pane.on { grid-template-columns: 1fr; } }
    .map-pane .status { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aurora-cyan); }
    .map-pane h3 { margin-top: 0.55rem; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; line-height: 1.2; color: var(--ink-100); }
    .map-pane p { font-size: 0.98rem; line-height: 1.72; color: var(--ink-200); }
    .map-caption { margin-top: 1rem; max-width: 78ch; font-size: 0.84rem; line-height: 1.65; color: var(--ink-400); }

    /* ── Foundation layers ───────────────────────────────────────── */
    .layers-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    @media (max-width: 900px) { .layers-grid { grid-template-columns: 1fr; } }
    .layers { display: flex; flex-direction: column; gap: 0.5rem; }
    .layer {
      display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 0.9rem;
      text-align: left; width: 100%;
      padding: 0.95rem 1.1rem; border-radius: 12px;
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
      transition: border-color 0.25s, background 0.25s, transform 0.25s;
    }
    .layer:hover { border-color: var(--hairline-3); background: rgba(255,255,255,0.04); }
    .layer.on { border-color: rgba(0,229,255,0.45); background: rgba(0,229,255,0.05); }
    .layer .ln { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-500); }
    .layer.on .ln { color: var(--aurora-cyan); }
    .layer .lt { display: block; font-size: 1rem; font-weight: 500; color: var(--ink-100); }
    .layer .ls { display: block; font-size: 0.78rem; color: var(--ink-400); margin-top: 0.1rem; }
    .layer .plus { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hairline-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-400); font-size: 0.9rem; transition: transform 0.25s, color 0.25s, border-color 0.25s; }
    .layer.on .plus { transform: rotate(45deg); color: var(--aurora-cyan); border-color: rgba(0,229,255,0.4); }
    .layer.betrieb { margin-top: 0.5rem; border-style: dashed; }
    .layer.betrieb.on { border-style: solid; border-color: rgba(240,200,76,0.5); background: rgba(240,200,76,0.05); }
    .layer.betrieb.on .ln, .layer.betrieb.on .plus { color: var(--aurora-gold); border-color: rgba(240,200,76,0.4); }
    .layer-detail {
      position: sticky; top: 96px;
      border-radius: var(--radius-lg); border: 1px solid var(--hairline-2);
      background: linear-gradient(180deg, rgba(18,24,42,0.72), rgba(11,16,32,0.88));
      box-shadow: var(--shadow-card); padding: clamp(1.4rem, 3vw, 2rem);
    }
    .layer-pane { display: none; }
    .layer-pane.on { display: block; animation: rise 0.45s var(--ease-out) both; }
    .layer-pane .lab { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aurora-cyan); margin-bottom: 0.8rem; }
    .layer-pane h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: 0.8rem; }
    .layer-pane p { font-size: 0.98rem; color: var(--ink-200); line-height: 1.72; }
    .layer-pane .line { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--hairline-2); font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-300); }
    .stack-note { margin-top: 1.1rem; font-size: 0.88rem; color: var(--ink-400); line-height: 1.6; }
    .stack-note b { color: var(--ink-200); font-weight: 500; }

    /* ── Two-column: human / not-this ────────────────────────────── */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
    .panel {
      padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: var(--radius-lg);
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
    }
    .panel.gold { border-color: rgba(240,200,76,0.3); background: rgba(240,200,76,0.04); }
    .panel h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: 0.9rem; }
    .panel .kicker { margin-bottom: 0.8rem; }
    .panel p { font-size: 0.98rem; color: var(--ink-200); line-height: 1.7; }
    .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
    .chip { font-size: 0.82rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid rgba(240,200,76,0.35); color: var(--ink-200); background: rgba(240,200,76,0.05); }
    .nots { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
    .nots li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; color: var(--ink-200); line-height: 1.6; }
    .nots li .x { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(240,110,110,0.45); color: #f0a3a3; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 0.15rem; }
    .nots li.is .x { border-color: rgba(56,232,200,0.5); color: var(--aurora-mint); }
    .nots li.is { color: var(--ink-100); }

    /* ── The path ────────────────────────────────────────────────── */
    .path { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; position: relative; }
    .path .step { grid-column: span 2; }
    .path .step.first { grid-column: span 3; }
    @media (max-width: 900px) {
      .path { grid-template-columns: 1fr; }
      .path .step, .path .step.first { grid-column: auto; }
    }
    .step {
      position: relative; padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--radius-lg);
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
      transition: transform 0.3s, border-color 0.3s, background 0.3s;
    }
    .step:hover { transform: translateY(-3px); border-color: var(--hairline-3); background: rgba(255,255,255,0.035); }
    .step.first {
      border-color: rgba(56,232,200,0.45);
      background:
        radial-gradient(400px 200px at 50% -20%, rgba(56, 232, 200, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
      box-shadow: 0 0 40px rgba(56,232,200,0.08);
    }
    .step .sn { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 0.8rem; }
    .step.first .sn { color: var(--aurora-mint); }
    .step h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink-100); line-height: 1.25; }
    .step .price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-100); margin: 0.8rem 0 0.2rem; line-height: 1; }
    .step .price small { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aurora-mint); margin-left: 0.4rem; vertical-align: middle; }
    .step .pm { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-300); margin: 0.8rem 0 0.2rem; }
    .step p { font-size: 0.92rem; color: var(--ink-300); line-height: 1.65; margin-top: 0.6rem; }
    .step .arrow { display: none; }
    @media (min-width: 901px) {
      .step:not(:last-child)::after {
        content: '→'; position: absolute; right: -0.95rem; top: 50%; transform: translateY(-50%);
        font-family: var(--font-mono); color: var(--ink-500); z-index: 2; font-size: 1rem;
      }
      .step.first::after { content: none; }
    }
    .seat {
      margin-top: 0.9rem; padding: 1.3rem 1.4rem; border-radius: var(--radius-lg);
      border: 1px dashed var(--hairline-3); background: rgba(255,255,255,0.015);
      display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center;
    }
    @media (max-width: 760px) { .seat { grid-template-columns: 1fr; } }
    .seat .sn { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); }
    .seat h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--ink-100); }
    .seat p { font-size: 0.9rem; color: var(--ink-300); margin-top: 0.2rem; line-height: 1.6; }
    .seat .rate { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-300); white-space: nowrap; }
    .footnote { margin-top: 1.2rem; font-size: 0.78rem; color: var(--ink-500); line-height: 1.6; }

    /* ── Quick win + walkthrough ─────────────────────────────────── */
    .qw-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    @media (max-width: 960px) { .qw-grid { grid-template-columns: 1fr; } }
    .module-card {
      margin-top: 1.6rem; padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--radius-lg);
      border: 1px solid rgba(0,229,255,0.35);
      background:
        radial-gradient(420px 200px at 20% -10%, rgba(0,229,255,0.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
      box-shadow: var(--shadow-card);
    }
    .module-card .lab { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aurora-cyan); margin-bottom: 0.7rem; display: flex; gap: 0.7rem; align-items: center; }
    .module-card .lab em { font-style: normal; color: var(--ink-500); }
    .module-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: 0.7rem; }
    .module-card p { font-size: 0.96rem; color: var(--ink-200); line-height: 1.7; }
    .module-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1.1rem; }
    @media (max-width: 520px) { .module-facts { grid-template-columns: 1fr; } }
    .mf { padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02); font-size: 0.8rem; color: var(--ink-300); line-height: 1.4; }
    .mf b { display: block; color: var(--ink-100); font-weight: 500; font-size: 0.86rem; margin-bottom: 0.15rem; }

    .cases { display: inline-flex; gap: 0.35rem; padding: 3px; border-radius: 999px; border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02); margin-bottom: 1rem; }
    .case-btn { font-size: 0.82rem; font-weight: 500; color: var(--ink-400); padding: 0.45rem 0.9rem; border-radius: 999px; transition: color 0.2s, background 0.2s; }
    .case-btn:hover { color: var(--ink-200); }
    .case-btn.on { color: var(--bg-ink); background: var(--ink-100); }

    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

    .cockpit {
      position: relative;
      border: 1px solid var(--hairline-2);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(700px 320px at 80% -20%, rgba(79,70,229,0.10), transparent 60%),
        linear-gradient(180deg, rgba(18,24,42,0.72), rgba(11,16,32,0.86));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow-lift);
      overflow: hidden;
      transition: border-color 0.45s ease, box-shadow 0.45s ease;
    }
    .cockpit.gate-on { border-color: rgba(240, 200, 76, 0.5); box-shadow: 0 0 44px rgba(240, 200, 76, 0.13), var(--shadow-lift); }
    .cockpit-head { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.015); }
    .tdots { display: inline-flex; gap: 5px; }
    .tdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-500); opacity: 0.7; }
    .cockpit-title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); }
    .cockpit-live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--aurora-mint); }
    .cockpit-live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-mint); box-shadow: 0 0 8px var(--aurora-mint); animation: dot-pulse 1.8s ease-in-out infinite; }
    .cockpit-stage { position: relative; padding: 1.3rem 1.3rem 1.5rem; }
    .cockpit.is-live .cockpit-stage { min-height: 268px; }
    .act-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.8rem; }
    .act + .act { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px dashed var(--hairline); }
    .cockpit.is-live .act { display: none; }
    .cockpit.is-live .act.active { display: block; }
    .cockpit.is-live .act + .act { margin-top: 0; padding-top: 0; border-top: 0; }
    .sub { transition: opacity 0.5s ease, transform 0.5s var(--ease-out); }
    .cockpit.is-live .sub { opacity: 0; transform: translateY(10px); }
    .cockpit.is-live .sub.in { opacity: 1; transform: none; }
    .mail-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--hairline-2); border-radius: var(--radius); background: rgba(255,255,255,0.03); font-size: 0.92rem; color: var(--ink-100); font-weight: 500; }
    .mail-row .ic { color: var(--aurora-cyan); flex-shrink: 0; display: inline-flex; }
    .mail-row .mail-time { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-400); }
    .check { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: rgba(255,255,255,0.018); font-size: 0.88rem; color: var(--ink-200); }
    .check + .check { margin-top: 0.5rem; }
    .check .ic { flex-shrink: 0; display: inline-flex; margin-top: 0.22rem; }
    .check.ok .ic { color: var(--aurora-mint); }
    .check.warn { border-color: rgba(240,200,76,0.3); background: rgba(240,200,76,0.05); }
    .check.warn .ic { color: var(--aurora-gold); }
    .draft-box { padding: 1rem 1.1rem; border: 1px solid var(--hairline-2); border-radius: var(--radius); background: rgba(255,255,255,0.025); }
    .skel i { display: block; height: 11px; border-radius: 6px; margin-bottom: 0.65rem; background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
    .skel i:nth-child(2) { width: 92%; }
    .skel i:nth-child(3) { width: 64%; margin-bottom: 0; }
    @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    .draft-real { font-size: 0.92rem; line-height: 1.6; color: var(--ink-200); font-style: italic; }
    .cockpit:not(.is-live) .skel { display: none; }
    .cockpit.is-live .draft-box .draft-real { display: none; }
    .cockpit.is-live .draft-box.done .skel { display: none; }
    .cockpit.is-live .draft-box.done .draft-real { display: block; animation: rise 0.5s ease both; }
    .gate-badge { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aurora-gold); padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid rgba(240,200,76,0.4); background: rgba(240,200,76,0.07); margin-bottom: 0.9rem; }
    .gate-badge .ic { display: inline-flex; }
    .gate-btns { display: flex; gap: 0.55rem; flex-wrap: wrap; }
    .gbtn { font-size: 0.86rem; font-weight: 500; padding: 0.55rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.03); color: var(--ink-200); transition: transform 0.18s, border-color 0.18s, background 0.18s, color 0.18s; min-width: 96px; text-align: center; }
    .gbtn:hover { transform: translateY(-1px); }
    .gbtn.approve { border-color: rgba(56,232,200,0.45); color: var(--aurora-mint); background: rgba(56,232,200,0.07); }
    .gbtn.approve:hover { background: rgba(56,232,200,0.14); }
    .gbtn.edit:hover { border-color: var(--hairline-3); color: var(--ink-100); background: rgba(255,255,255,0.06); }
    .gbtn.reject { color: var(--ink-300); }
    .gbtn.reject:hover { border-color: rgba(240,110,110,0.45); color: #f0a3a3; background: rgba(240,110,110,0.06); }
    .edit-line { display: none; margin-top: 0.9rem; padding: 0.55rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid rgba(0,229,255,0.3); background: rgba(0,229,255,0.05); font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-200); line-height: 1.5; }
    .edit-line.show { display: block; animation: rise 0.4s ease both; }
    .cockpit:not(.is-live) .edit-line { display: none; }
    .sent-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid rgba(56,232,200,0.35); background: rgba(56,232,200,0.06); font-size: 0.92rem; font-weight: 500; color: var(--ink-100); }
    .trace-row { margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-400); }
    .toast { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.9rem; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 0.95rem; border-radius: var(--radius); border: 1px solid rgba(56,232,200,0.45); background: rgba(9, 22, 24, 0.94); box-shadow: 0 14px 34px rgba(0,0,0,0.5); font-size: 0.85rem; color: var(--ink-100); line-height: 1.45; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s var(--ease-out); z-index: 3; }
    .toast .ic { color: var(--aurora-mint); flex-shrink: 0; display: inline-flex; margin-top: 0.15rem; }
    .toast.show { opacity: 1; transform: none; }
    .cockpit:not(.is-live) .toast { display: none; }
    .act-dots { display: none; margin-top: 0.9rem; gap: 0.4rem; flex-wrap: wrap; }
    .cockpit-wrap.live .act-dots { display: flex; }
    .act-dot { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(255,255,255,0.015); transition: color 0.25s, border-color 0.25s, background 0.25s; }
    .act-dot .n { color: var(--ink-500); }
    .act-dot:hover { color: var(--ink-200); border-color: var(--hairline-2); }
    .act-dot.on { color: var(--ink-100); border-color: rgba(56,232,200,0.45); background: rgba(56,232,200,0.06); }
    .act-dot.on .n { color: var(--aurora-mint); }
    .cockpit-hint { display: none; margin-top: 0.55rem; font-size: 0.72rem; color: var(--ink-500); }
    .cockpit-wrap.live .cockpit-hint { display: block; }
    .demo-note { margin-top: 0.7rem; font-size: 0.72rem; color: var(--ink-500); line-height: 1.5; }

    /* ── Modules grid ────────────────────────────────────────────── */
    .modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
    @media (max-width: 960px) { .modules { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .modules { grid-template-columns: 1fr; } }
    .mod {
      position: relative; padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--radius-lg);
      border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
      display: flex; flex-direction: column; gap: 0.6rem;
      transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
    }
    .mod:hover { transform: translateY(-4px); border-color: var(--hairline-3); background: rgba(255,255,255,0.035); }
    .mod .tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--hairline-2); }
    .mod.one .tag { color: var(--aurora-cyan); border-color: rgba(0,229,255,0.4); }
    .mod .mi { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hairline-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-200); margin-top: 0.3rem; }
    .mod h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; letter-spacing: -0.01em; color: var(--ink-100); line-height: 1.25; }
    .mod p { font-size: 0.9rem; color: var(--ink-300); line-height: 1.65; }
    .mod .pr { margin-top: auto; padding-top: 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); border-top: 1px dashed var(--hairline); }

    /* ── Privacy ─────────────────────────────────────────────────── */
    .privacy-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    @media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; } }
    .pv { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    @media (max-width: 600px) { .pv { grid-template-columns: 1fr; } }
    .pv li { padding: 1.05rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02); font-size: 0.92rem; color: var(--ink-200); line-height: 1.6; display: flex; gap: 0.75rem; align-items: flex-start; }
    .pv li .ic { flex-shrink: 0; color: var(--aurora-mint); margin-top: 0.2rem; display: inline-flex; }
    .pv li b { color: var(--ink-100); font-weight: 500; }

    /* ── FAQ ─────────────────────────────────────────────────────── */
    .faq { max-width: 820px; }
    .faq details { border-top: 1px solid var(--hairline-2); }
    .faq details:last-child { border-bottom: 1px solid var(--hairline-2); }
    .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1.15rem 0; font-size: 1.05rem; font-weight: 500; color: var(--ink-100); transition: color 0.2s; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary:hover { color: var(--aurora-mint); }
    .faq summary .plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-400); font-size: 1rem; transition: transform 0.3s, color 0.3s, border-color 0.3s; flex-shrink: 0; }
    .faq details[open] summary .plus { transform: rotate(45deg); color: var(--aurora-mint); border-color: rgba(56,232,200,0.4); }
    .faq .a { padding: 0 0 1.3rem; font-size: 0.98rem; color: var(--ink-300); line-height: 1.72; max-width: 66ch; animation: rise 0.35s var(--ease-out) both; }

    /* ── CTA ─────────────────────────────────────────────────────── */
    .cta-box {
      position: relative; overflow: hidden;
      padding: clamp(2.2rem, 5vw, 3.6rem); border-radius: var(--radius-xl);
      border: 1px solid var(--hairline-2);
      background:
        radial-gradient(700px 300px at 20% -10%, rgba(56, 232, 200, 0.12), transparent 60%),
        radial-gradient(700px 300px at 90% 110%, rgba(176, 38, 255, 0.14), transparent 60%),
        linear-gradient(180deg, rgba(18,24,42,0.72), rgba(11,16,32,0.88));
      box-shadow: var(--shadow-lift);
      display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: center;
    }
    @media (max-width: 860px) { .cta-box { grid-template-columns: 1fr; } }
    .cta-box h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
    .cta-box .lede { margin-top: 0.9rem; }
    .cta-actions { display: flex; flex-direction: column; gap: 0.7rem; }
    .cta-actions .btn { width: 100%; }

    /* ── Footer ──────────────────────────────────────────────────── */
    footer.site-foot { padding: 4rem 0 2rem; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.012)); }
    .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
    @media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
    .foot-col h5 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-300); margin-bottom: 1rem; font-weight: 500; }
    .foot-col a { display: block; font-size: 0.92rem; color: var(--ink-300); margin-bottom: 0.55rem; transition: color 0.2s; }
    .foot-col a:hover { color: var(--ink-100); }
    .foot-about p { font-size: 0.92rem; color: var(--ink-300); line-height: 1.55; max-width: 36ch; margin-top: 0.9rem; }
    .foot-about .contact { margin-top: 0.9rem; font-size: 0.88rem; color: var(--ink-300); line-height: 1.7; }
    .foot-about .contact a { display: inline; margin: 0; color: var(--ink-200); }
    .foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-size: 0.78rem; color: var(--ink-400); line-height: 1.6; }
    .foot-legal strong { color: var(--ink-200); font-weight: 500; }

    /* ── Reduced motion — static but complete ─────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
      }
      html { scroll-behavior: auto; }
      .aurora-ambient { animation: none !important; }
      .rv { opacity: 1; transform: none; }
      .track i { transform: scaleX(1); }
    }

/* Shared service navigation and overview pages. */
.nav-links { gap: 1.1rem; }
.service-hero { padding: clamp(8rem,14vw,11rem) 0 4rem; }
.service-hero h1 { font: 500 clamp(2.4rem,5.5vw,4.6rem)/1.1 var(--font-display); letter-spacing:-.035em; max-width:19ch; text-wrap:balance; }
.service-hero .lede { margin-top:1.6rem; max-width:65ch; }
.service-hero .hero-note { max-width:70ch; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.service-card { display:flex; flex-direction:column; padding:clamp(1.4rem,3vw,2.4rem); border:1px solid var(--hairline-2); border-radius:var(--radius-xl); background:var(--bg-card); }
.service-card h2 { font:500 clamp(1.65rem,3vw,2.3rem)/1.2 var(--font-display); letter-spacing:-.02em; margin:.7rem 0 1rem; }
.service-card p,.service-card li { color:var(--ink-300); }
.service-card ul { padding-left:1.2rem; margin:1.2rem 0; }
.service-card li + li { margin-top:.55rem; }
.service-card .card-end { margin-top:auto; padding-top:1.2rem; }
.service-card .card-end p { margin-bottom:1rem; color:var(--ink-200); }
.service-card.erp { border-color:rgba(240,200,76,.3); }
.service-card .btn { white-space:normal; text-align:center; }
.service-section { padding:clamp(3.5rem,7vw,6rem) 0; border-top:1px solid var(--hairline); }
.service-section h2 { font:500 clamp(1.8rem,3.5vw,2.8rem)/1.15 var(--font-display); letter-spacing:-.025em; margin-bottom:1.2rem; max-width:28ch; }
.service-section .lede { max-width:66ch; margin-bottom:2rem; }
.service-section .panel p + p { margin-top:1rem; }
.scope-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.scope-grid .panel { display:flex; flex-direction:column; }
.scope-grid .scope-num { font: .75rem var(--font-mono); color:var(--aurora-mint); margin-bottom:1rem; }
.scope-grid .panel p { color:var(--ink-300); }
.section-links { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:2rem; }
.section-links a { color:var(--ink-200); text-decoration:underline; text-underline-offset:5px; }
.breadcrumb { font-size:.85rem; color:var(--ink-300); margin-bottom:1.8rem; }
.breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.contact-note { color:var(--ink-300); font-size:.9rem; margin-top:1rem; }
.nav-sheet a[aria-current="page"],.nav-links a[aria-current="page"] { color:var(--ink-100); }
.nav-sheet a[aria-current="page"] { border-left:2px solid var(--aurora-mint); padding-left:.7rem; }
.ai-local-nav { margin-top:2rem; }
@media(max-width:1050px) { .nav-links { gap:.8rem; } .nav-links a {font-size:.8rem;} .brand-os {display:none;} }
@media(max-width:860px) { .service-grid,.scope-grid {grid-template-columns:1fr;} .service-hero h1 {max-width:20ch;} }
@media(max-width:1100px) { .nav-links > a:not(.nav-cta) {display:none;} .nav-burger {display:inline-flex;} .nav-sheet {display:block;} }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} }

.nav-sheet:not(.open) { visibility:hidden; }
.nav-sheet.open { visibility:visible; }

/* Focused editorial refinement: purposeful diagrams, quieter surfaces, readable UI. */
:root { --ink-400:#a5afc4; --ink-500:#9ba6bf; }
.kicker,.visual-label,.route-index { font:500 .75rem/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-200); }
.hero-note,.demo-note,.cockpit-hint { font-size:.875rem; color:var(--ink-300); }
.act-dot { font-size:.75rem; min-height:44px; }
.trace-row,.gate-badge { font-size:.78rem; }
.premium-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.85fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.hero-copy { min-width:0; }
.premium-hero h1 { font-size:clamp(2.5rem,4.4vw,4rem); }
.premium-hero .lede { font-size:1.05rem; line-height:1.8; }
.service-compass { position:relative; padding:2rem 0 0 1.7rem; }
.compass-axis { position:absolute; top:0; bottom:4rem; left:0; width:1px; background:linear-gradient(var(--aurora-mint),#806daa,var(--aurora-gold)); }
.compass-axis span { position:absolute; width:7px; height:7px; left:-3px; background:var(--aurora-mint); border-radius:50%; box-shadow:0 0 20px #38e8c850; }
.compass-axis span:nth-child(2) {top:35%;background:#b8a4df;} .compass-axis span:nth-child(3) {top:85%;background:var(--aurora-gold);}
.compass-route { display:block; border-top:1px solid var(--hairline-3); padding:1.6rem 0; margin-top:1rem; position:relative; transition:padding-left .3s,color .3s; }
.compass-route:hover,.compass-route:focus-visible { padding-left:.6rem; color:var(--aurora-mint); }
.route-index { color:var(--aurora-mint); }
.erp-route .route-index { color:var(--aurora-gold); }
.compass-route strong { display:block; font:400 clamp(1.5rem,2.4vw,2rem)/1.25 var(--font-display); margin:.65rem 0 1rem; }
.route-bottom { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--ink-200); }
.route-bottom>span:last-child {font-size:1.4rem;} .compass-note {font-size:.85rem;color:var(--ink-300);max-width:33ch;}
.service-grid { gap:clamp(2rem,5vw,5rem); }
.service-card,.service-card.erp { border:0;border-top:1px solid var(--hairline-3); border-radius:0;background:none;padding:2rem 0 0; }
.service-card h2 {font-size:clamp(1.6rem,2.5vw,2rem);}
.service-card .card-end {border-top:1px solid var(--hairline); margin-top:1rem;}
.readiness-visual { padding:2rem; border:1px solid var(--hairline-2); border-radius:2px 2px 36px 2px; background:radial-gradient(ellipse at 50% 25%,#38e8c80b,transparent 65%); }
.readiness-orbit { position:relative; width:190px;height:190px;margin:1.5rem auto;display:grid;place-items:center; }
.readiness-orbit i {position:absolute;inset:0;border:1px solid #38e8c850;border-radius:50%;transform:rotate(-25deg) scaleY(.5);}
.readiness-orbit i:nth-child(2) {transform:rotate(35deg) scaleY(.5);border-color:#ab9bdd80;}
.readiness-orbit i:nth-child(3) {transform:rotate(90deg) scaleY(.5);border-color:#f0c84c70;}
.readiness-orbit span {font:400 2.1rem var(--font-display);background:var(--bg-ink);border-radius:50%;padding:1.2rem;}
.readiness-lines p { display:flex;gap:1rem; padding:.7rem 0;border-top:1px solid var(--hairline-2); }
.readiness-lines p>span:first-child {font: .75rem/1.8 var(--font-mono);color:var(--aurora-mint);}
.text-link {text-decoration:underline;text-underline-offset:5px;font-size:.875rem;min-height:44px;display:inline-flex;align-items:center;gap:.5rem;}
.readiness-visual .text-link {margin-top:1rem;}
body[data-page="erp"] .scope-grid {gap:0 3rem;}
body[data-page="erp"] .scope-grid .panel {border:0;border-top:1px solid var(--hairline-2);border-radius:0;background:none;padding:1.6rem 0;display:grid;grid-template-columns:2rem 1fr;gap:0 .7rem;}
body[data-page="erp"] .scope-grid .panel p {grid-column:2;}
body[data-page="erp"] .scope-num {margin:.25rem 0;}
.example-intro {display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;}
.example-intro .lede {margin:0 0 1.2rem;}
.example-disclaimer {color:var(--ink-300);font-size:.875rem;margin:1rem 0 2rem;}
.erp-example {border:1px solid #68728580;background:linear-gradient(145deg,#101925,#090d15);border-radius:4px 4px 24px 4px;overflow:hidden;}
.erp-example[hidden],.example-actions [hidden] {display:none;}
.example-topline {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--hairline-2);}
.example-layout {display:grid;grid-template-columns:230px minmax(0,1fr);}
.example-steps {display:flex;flex-direction:column;border-right:1px solid var(--hairline-2);padding:1rem;gap:.5rem;}
.example-steps button {display:flex;text-align:left;align-items:baseline;gap:.8rem;padding:.85rem .6rem;border-left:2px solid transparent;border-radius:2px;font-size:.9rem;min-height:52px;}
.example-steps button[aria-current] {border-color:var(--aurora-mint);background:#38e8c80a;color:var(--aurora-mint);}
.example-steps button:disabled {color:#a3adc0;cursor:default;}
.step-number {font:.75rem var(--font-mono);}
.example-workspace {padding:clamp(1.3rem,3vw,2.5rem);min-width:0;}
.evidence-status {font:500 .75rem/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--aurora-mint);margin-bottom:1rem;}
.evidence-status.is-blocked {color:#ffc78a;}
#erp-evidence h3 {font:400 clamp(1.6rem,2.6vw,2.2rem)/1.2 var(--font-display);margin-bottom:1rem;}
.evidence-body {color:var(--ink-200);font-size:.95rem;line-height:1.75;max-width:70ch;}
.evidence-ledger {margin:1.6rem 0 2rem;}
.evidence-ledger>div {display:grid;grid-template-columns:minmax(100px,.65fr) 1.35fr;gap:1rem;border-top:1px solid var(--hairline-2);padding:.75rem 0;font-size:.875rem;}
.evidence-ledger dt {color:var(--ink-300);} .evidence-ledger dd {color:var(--ink-100);}
.example-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;}
.example-actions .btn {font-size:.875rem;padding:.85rem 1rem;white-space:normal;text-align:left;min-height:48px;}
.example-actions .btn:disabled {background:#142d2b;color:#c4eee6;cursor:default;opacity:1;}
.example-feedback {color:#ffd7aa;font-size:.9rem;line-height:1.6;margin-top:1rem;min-height:1.5rem;}
.example-help {border-top:1px solid var(--hairline-2);padding:1.2rem 1.5rem;font-size:.8rem;line-height:1.7;color:var(--ink-200);}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.motion-control {display:block;margin-top:1rem;color:var(--ink-200);font-size:.85rem;min-height:44px;text-decoration:underline;text-underline-offset:4px;}
.motion-paused *, .motion-paused *::before,.motion-paused *::after {animation:none!important;transition:none!important;}
html.motion-paused {scroll-behavior:auto;}.motion-paused .rv {opacity:1;transform:none;}
@media(prefers-reduced-motion:no-preference) {.compass-axis {transform-origin:top;animation:compass-draw .8s var(--ease-out) both;} }
@keyframes compass-draw {from {transform:scaleY(.3);} to {transform:scaleY(1);}}
.erp-example {transition:border-color .3s;} .erp-example[data-step="1"] {border-color:#ffc78a80;}
@media(max-width:1000px) {.premium-hero {grid-template-columns:1fr 1fr;gap:2rem;} .example-layout {grid-template-columns:190px minmax(0,1fr);}}
@media(max-width:860px) {.premium-hero,.example-intro {grid-template-columns:1fr;} .service-compass {margin-top:1rem;} .readiness-visual {max-width:100%;} .readiness-orbit {width:150px;height:150px;} .example-layout {grid-template-columns:1fr;} .example-steps {border-right:0;border-bottom:1px solid var(--hairline-2);display:grid;grid-template-columns:1fr 1fr;gap:.25rem;} .example-steps button {font-size:.8rem;padding:.65rem .4rem;gap:.45rem;} .example-topline {padding:.8rem 1rem;} .evidence-ledger>div {grid-template-columns:1fr;gap:.2rem;} .example-actions {align-items:stretch;flex-direction:column;}}
@media(prefers-reduced-motion:reduce) {.readiness-orbit,.compass-route {animation:none!important;} .rv {opacity:1!important;transform:none!important;}}

.cta-actions .btn {white-space:normal;text-align:center;min-width:0;} .cta-actions .btn>span {min-width:0;}
.cockpit-title,.cockpit-live,.act-label,.cause .lab,.weeks,.phase .n,.page .pn,.layer-pane .lab,.step .sn,.seat .sn,.module-card .lab,.mod .tag,.mod .pr,.loop-foot .log {font-size:.75rem;letter-spacing:.1em;}
.loop-mobile {display:none;}
@media(max-width:600px) {.loop-svg {display:none;} .loop-mobile {display:grid;gap:.6rem;list-style:none;counter-reset:flow;padding:.6rem 0;} .loop-mobile li {counter-increment:flow;display:block;border-left:1px solid #38e8c880;padding:.5rem .7rem;font-size:.9rem;color:var(--ink-200);} .loop-mobile li::before {content:counter(flow,decimal-leading-zero) " / ";font:.7rem var(--font-mono);color:var(--aurora-mint);}.cockpit-head {flex-wrap:wrap;}.cockpit-title {max-width:75%;}.loop-head .cockpit-title {max-width:70%;}}

/* Alternative entry offers; no compulsory sequence. */
.path .step.first { grid-column: span 2; }
.path .step::after { content: none; }
@media (max-width: 900px) { .path { grid-template-columns: 1fr; } .path .step.first, .path .step { grid-column: auto; } }
.blueprint-dashboard { padding: clamp(1rem,3vw,2.4rem); margin-bottom: 4rem; border: 1px solid rgba(130,224,191,.3); border-radius: 18px; background: linear-gradient(135deg,rgba(130,224,191,.06),rgba(150,120,220,.05)),var(--bg-raised,#0c1220); box-shadow: 0 24px 80px #0004; }
.blueprint-dashboard h3 { font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.5rem);font-weight:500;margin:.6rem 0; }
.blueprint-dashboard h4 { font-size:.85rem;letter-spacing:.06em;margin:0 0 1rem; }
.sample-label {color:var(--aurora-mint);font-size:.75rem;border-bottom:1px solid var(--hairline);padding-bottom:1rem;margin-bottom:1.5rem;}
.dashboard-intro {max-width:780px;color:var(--ink-300);margin-bottom:2rem;}
.dashboard-grid {display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:2rem;}
.dashboard-cases {display:grid;gap:.6rem;}
.dashboard-cases button {text-align:left;border:1px solid var(--hairline-3);border-radius:8px;padding:1rem;background:transparent;color:var(--ink-100);font:inherit;font-size:.85rem;cursor:pointer;transition:background .2s,border-color .2s;}
.dashboard-cases button[aria-pressed=true] {background:rgba(130,224,191,.09);border-color:var(--aurora-mint);}
.dashboard-detail dl {display:grid;gap:.8rem;margin-bottom:1.5rem;}
.dashboard-detail dl>div {display:grid;grid-template-columns:125px 1fr;gap:.75rem;border-bottom:1px solid var(--hairline);padding-bottom:.8rem;}
.dashboard-detail dt {font-size:.75rem;color:var(--ink-400);}
.dashboard-detail dd {font-size:.9rem;margin:0;color:var(--ink-100);}
.dashboard-detail label {display:block;font-size:.8rem;margin-bottom:.5rem;}
.dashboard-detail textarea {width:100%;box-sizing:border-box;background:#06090f;color:#e8ecf5;border:1px solid var(--hairline-3);border-radius:8px;padding:1rem;font:inherit;resize:vertical;min-height:110px;}
.dashboard-actions {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;}
.dashboard-detail .btn {white-space:normal;text-align:left;}
.dashboard-detail button:disabled {opacity:.55;cursor:default;}
#dash-status {min-height:3rem;margin:1rem 0;color:var(--aurora-mint);font-size:.85rem;}
.dashboard-rule {border-top:1px solid var(--hairline);padding:1rem 0;font-size:.85rem;color:var(--ink-300);}
.dashboard-rule p {margin-bottom:1rem;}
.blueprint-dashboard :focus-visible {outline:2px solid var(--aurora-mint);outline-offset:4px;}
@media(max-width:700px) {.dashboard-grid {grid-template-columns:1fr;gap:1.5rem;}.dashboard-detail dl>div{grid-template-columns:1fr;gap:.3rem;}.dashboard-cases button{min-height:48px;}}
@media(prefers-reduced-motion:reduce){.dashboard-cases button{transition:none;}}

/* Offer outputs scan quickly; actions share the bottom edge. */
.path .step.first {display:flex;flex-direction:column;align-items:stretch;}
.path .step.first>.btn {margin-top:auto!important;padding-top:1rem;flex-shrink:0;}
.path .step.first .offer-outputs {margin:1.1rem 0 0;padding-left:1.1rem;color:var(--ink-200);font-size:.9rem;line-height:1.6;}
.path .step.first .offer-outputs li+li {margin-top:.65rem;}
.path .step.first .offer-note {font-size:.8rem;color:var(--ink-300);margin:1.2rem 0 1.5rem;}