:root {
    --paper: #ECEEE9;
    --ink: #14232B;
    --ink-2: #4A5A61;
    --rule: rgba(20, 35, 43, .13);
    --mech: #2E4A7D;
    --tension: #9A4B40;
    --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
    --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --pad: clamp(18px, 4vw, 56px);
    color-scheme: light;
    box-sizing: border-box;
  }
  *, *::before, *::after { box-sizing: inherit; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; }
  body {
    background-color: var(--paper);
    background-image:
      linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  button { font: inherit; color: inherit; cursor: pointer; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--mech); outline-offset: 3px; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 calc(var(--pad) + 22px) 0 var(--pad); }

  /* ---------- Retail -> institutional bridge (page-wide) ---------- */
  .bridge {
    position: fixed; z-index: 30; right: 12px; top: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 0; pointer-events: none;
  }
  .bridge span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; white-space: nowrap;
  }
  .bridge .b-bot { color: var(--mech); }
  .b-track { flex: 1; width: 2px; background: rgba(20, 35, 43, .15); position: relative; }
  .b-fill { position: absolute; inset: 0; background: var(--mech); transform-origin: top; transform: scaleY(0); }

  /* ---------- Hero ---------- */
  .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }
  .top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .mark { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: .02em; padding: 4px 9px 2px; border: 2px solid var(--ink); }
  .mark-name { font-weight: 500; color: var(--ink-2); font-size: 15px; }
  .domain { margin-left: auto; color: var(--ink-2); font-size: 14px; }

  .hero-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 28px; }
  .reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; width: 100%; margin: 0 auto; }
  .col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .letter {
    font-family: var(--display); font-weight: 900; line-height: .78;
    font-size: clamp(110px, 17vw, 250px); letter-spacing: -.01em;
  }
  .reel {
    --h: 1.35em;
    height: var(--h); overflow: hidden; margin-top: 14px; width: 100%;
    font-size: clamp(15px, 2.4vw, 32px); font-weight: 600;
    -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
            mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  }
  .reel ul { list-style: none; margin: 0; padding: 0; will-change: transform; }
  .reel li { height: var(--h); line-height: var(--h); text-align: center; white-space: nowrap; }
  .reels.landed .reel li.cur { color: var(--mech); }
  .reels.landed.problem .reel li.cur { color: var(--tension); }

  .meanings { list-style: none; padding: 0; margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; max-width: 900px; }
  .meanings button {
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 4px 6px; font-size: 14.5px; color: var(--ink-2);
  }
  .meanings button:hover { color: var(--ink); }
  .meanings button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--mech); font-weight: 600; }
  .meanings-note { text-align: center; color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }

  .tagline {
    margin: 44px auto 0; max-width: 24ch; text-align: center;
    font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.2vw, 56px); line-height: .95;
  }
  .tagline em { font-style: normal; color: var(--mech); }
  .sub { margin: 16px auto 0; max-width: 52ch; text-align: center; color: var(--ink-2); }
  .cta-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ink); color: var(--paper); border: 0; padding: 13px 22px;
    font-weight: 600; text-decoration: none;
  }
  .btn:hover { background: #000; }
  .btn.blue { background: var(--mech); }
  .btn.blue:hover { background: #233B66; }
  .bridge-note { text-align: center; color: var(--ink-2); font-size: 13px; margin: 14px 0 0; }

  /* ---------- Section 1: Market Tension State ---------- */
  .tension { padding: 90px 0 110px; }
  .eq {
    margin: 0; font-family: var(--display); font-weight: 900; line-height: .9;
    font-size: clamp(48px, 7.5vw, 112px);
  }
  .eq .t { color: var(--tension); }
  .lede { margin: 18px 0 0; max-width: 58ch; font-size: 19px; color: var(--ink-2); }
  .lede strong { color: var(--ink); }

  .monitor {
    margin-top: 40px; border: 2px solid var(--ink);
    background-color: #F8F7F5;
    background-image:
      linear-gradient(rgba(154, 75, 64, .10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(154, 75, 64, .10) 1px, transparent 1px),
      linear-gradient(rgba(154, 75, 64, .05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(154, 75, 64, .05) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  }
  .mon-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1.5px solid var(--ink); background: var(--paper); flex-wrap: wrap; }
  .tabs { display: flex; }
  .tabs button {
    background: none; border: 0; border-right: 1.5px solid var(--ink);
    padding: 12px 18px; font-size: 15px; font-weight: 500; text-align: left; line-height: 1.2;
  }
  .tabs button b { font-family: var(--display); font-weight: 800; font-size: 19px; margin-left: 6px; }
  .tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .tabs button:hover:not([aria-selected="true"]) { background: rgba(20, 35, 43, .06); }
  .rec { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; color: var(--tension); font-weight: 600; }
  .rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--tension); animation: blink 1.2s steps(2, start) infinite; }
  @keyframes blink { to { visibility: hidden; } }

  .mon-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
  .gauge { border-right: 1.5px solid var(--ink); padding: 18px 16px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(251, 247, 245, .85); }
  .gauge svg { width: 100%; max-width: 190px; overflow: visible; }
  .g-val { font-family: var(--display); font-weight: 900; font-size: 58px; line-height: .9; color: var(--tension); margin-top: 10px; text-align: center; font-variant-numeric: tabular-nums; }
  .g-lab { font-size: 13px; color: var(--ink-2); text-align: center; line-height: 1.35; margin-top: 4px; }
  .g-lab b { color: var(--ink); display: block; font-size: 14px; }
  .trace { position: relative; height: 300px; }
  .trace canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  .below { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start; }
  .seg-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
  .seg-note { margin: 4px 0 14px; color: var(--ink-2); }
  .rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
  .rows li { border-bottom: 1px solid rgba(20, 35, 43, .2); }
  .row {
    width: 100%; background: none; border: 0; text-align: left; padding: 13px 4px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  }
  .row:hover { background: rgba(154, 75, 64, .05); }
  .row .nm { font-weight: 600; font-size: 17px; }
  .row .nm small { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink-2); margin-left: 6px; }
  .row .emo { font-weight: 700; color: var(--tension); font-size: 14px; text-align: right; }
  .row .trap { grid-column: 1 / -1; color: var(--ink-2); font-size: 15.5px; }
  .row .more { grid-column: 1 / -1; font-size: 15px; color: var(--ink); max-height: 0; overflow: hidden; transition: max-height .35s ease, margin .35s ease; }
  .row[aria-expanded="true"] .more { max-height: 140px; margin-top: 6px; }
  .row .more span { display: block; border-left: 3px solid var(--tension); padding: 4px 0 4px 10px; }
  .row .go { grid-column: 1 / -1; font-size: 14px; color: var(--tension); font-weight: 600; }
  .row.calm .emo, .row.calm .nm { color: var(--mech); }
  .row.calm .more span { border-left-color: var(--mech); }
  .row.calm:hover { background: rgba(46, 74, 125, .05); }

  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
  .seg-zone { margin-top: 32px; }
  .fact { border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .6); padding: 16px 18px; }
  .fact .num { font-family: var(--display); font-weight: 900; font-size: 54px; line-height: .9; color: var(--tension); }
  .fact p { margin: 6px 0 0; font-size: 15.5px; }
  .fact .src { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
  .fact.model .num { color: var(--ink); }

  .turn {
    margin-top: 56px; padding: 26px 0 0; border-top: 2px solid var(--ink);
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  }
  .turn p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 52px); line-height: .95; }
  .turn p em { font-style: normal; color: var(--mech); }

  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px) {
    .wrap { padding: 0 var(--pad); }
    .bridge { right: 0; left: 0; top: 0; bottom: auto; height: 3px; padding: 0; flex-direction: row; }
    .bridge span { display: none; }
    .b-track { width: 100%; height: 3px; flex: 1; }
    .b-fill { transform-origin: left; transform: scaleX(0); }
    .mark-name { display: none; }
    .mon-body { grid-template-columns: 1fr; }
    .gauge { border-right: 0; border-bottom: 1.5px solid var(--ink); flex-direction: row; gap: 16px; padding: 12px 16px; }
    .gauge svg { max-width: 120px; }
    .g-val { font-size: 44px; margin: 0; }
    .g-lab { text-align: left; }
    .trace { height: 190px; }
    .monitor { position: sticky; top: 50px; z-index: 6; }
    .gauge svg { max-width: 84px; }
    .g-val { font-size: 36px; }
    .gauge { padding: 8px 14px; }
    .facts { grid-template-columns: 1fr; }
    .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .tabs button { border-bottom: 1.5px solid var(--ink); padding: 10px 12px; font-size: 14px; }
    .tabs button:nth-child(2n) { border-right: 0; }
    .rec { padding: 8px 12px; }
    .seg-zone { margin-top: 20px; }
    .tension { padding: 64px 0 80px; }
    .lede { font-size: 17px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rec i { animation: none; }
    .row .more { transition: none; }
  }

  .mon-bot { display: flex; align-items: stretch; border-top: 1.5px solid var(--ink); background: var(--paper); }
  .mon-bot .mb-lab { display: flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 14px; color: var(--mech); border-right: 1.5px solid var(--ink); white-space: nowrap; }
  .mon-bot .tabs { flex: 1; }
  .mon-bot .tabs button { flex: 1; }
  @media (max-width: 860px) {
    .mon-bot { flex-direction: column; }
    .mon-bot .mb-lab { border-right: 0; border-bottom: 1.5px solid var(--ink); padding: 6px 12px; }
    .mon-bot .tabs button { border-bottom: 0; }
    .mon-bot .tabs button:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); }
  }

  .tri { display: grid; gap: 22px; margin-top: 26px; }
  .gblock { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: stretch; }
  .gmon { border: 2px solid var(--ink); display: flex; flex-direction: column; background-color: #F8F7F5;
    background-image: linear-gradient(rgba(154, 75, 64, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 75, 64, .10) 1px, transparent 1px), linear-gradient(rgba(154, 75, 64, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 75, 64, .05) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; }
  .gtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); background: var(--paper); }
  .gtitle b { font-size: 18px; }
  .gtitle em { font-style: normal; font-family: var(--display); font-weight: 900; font-size: 22px; }
  .gtitle span { color: var(--tension); font-weight: 600; font-size: 14.5px; }
  .gtrace { position: relative; flex: 1; min-height: 230px; }
  .gtrace canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .tapsign { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--mech); }
  .tapsign i { width: 14px; height: 14px; border-radius: 50%; background: var(--mech); position: relative; flex: none; }
  .tapsign i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--mech); animation: tapRing 1.4s ease-out infinite; }
  @keyframes tapRing { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
  .grp-card.tapme .f { box-shadow: inset 0 0 0 2px var(--mech); }
  @media (max-width: 860px) {
    .gblock { grid-template-columns: 1fr; }
    .gtrace { min-height: 190px; flex: none; height: 190px; }
  }
  @media (prefers-reduced-motion: reduce) { .tapsign i::after { animation: none; } }
  /* ================= Site nav ================= */
  .sitenav {
    position: fixed; z-index: 26; left: 0; right: 0; top: 0;
    background: rgba(236, 238, 233, .96); border-bottom: 1.5px solid var(--ink);
    transform: translateY(-110%); transition: transform .3s ease;
  }
  .sitenav.show { transform: none; }
  .sitenav .in { max-width: 1240px; margin: 0 auto; padding: 8px calc(var(--pad) + 22px) 8px var(--pad); display: flex; align-items: center; gap: 18px; }
  .sitenav .mark { font-size: 20px; padding: 3px 7px 1px; text-decoration: none; }
  .sitenav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex: 1; }
  .sitenav ul a { text-decoration: none; font-size: 14px; color: var(--ink-2); }
  .sitenav ul a:hover, .sitenav ul a.cur { color: var(--ink); }
  .sitenav ul a.cur { font-weight: 600; box-shadow: inset 0 -2px 0 var(--mech); }
  .sitenav .reg { margin-left: auto; background: var(--mech); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 14px; }

  .eq .b { color: var(--mech); }
  section[id] { scroll-margin-top: 54px; }

  /* ================= Section 3: Solution ================= */
  .solution { padding: 100px 0 110px; }
  .compiler { margin-top: 36px; display: grid; grid-template-columns: 250px minmax(0, 1fr) 190px; border: 2px solid var(--ink); background: rgba(255, 255, 255, .55); }
  .seats { border-right: 1.5px solid var(--ink); padding: 10px 0; }
  .seats h4 { margin: 10px 14px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
  .seat { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; text-align: left; padding: 6px 14px; font-size: 15px; }
  .seat i { width: 10px; height: 10px; flex: none; background: var(--tension); }
  .seat.done i { background: var(--mech); }
  .seat.done { color: var(--mech); }
  .seat[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .seat[aria-selected="true"] i { outline: 1.5px solid var(--paper); }
  .seat:hover:not([aria-selected="true"]) { background: rgba(20, 35, 43, .06); }
  .seat.origin { color: var(--mech); cursor: default; }
  .seat.origin i { background: var(--mech); }
  .console { padding: 22px 24px 24px; min-width: 0; }
  .con-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
  .con-head h3 { margin: 0; font-size: 26px; line-height: 1.15; }
  .con-head h3 .mw { color: var(--mech); }
  .con-head span { font-size: 13.5px; color: var(--ink-2); }
  .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 20px 0 6px; }
  .feel { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.8vw, 38px); line-height: 1; color: var(--tension); transition: opacity .4s; }
  .feel.struck { text-decoration: line-through; text-decoration-thickness: 3px; opacity: .45; }
  .code {
    list-style: none; margin: 0; padding: 12px 14px; min-height: 104px;
    background: #fff; border: 1.5px solid var(--ink);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6;
  }
  .code li { white-space: pre-wrap; }
  .code li::before { content: "\2713  "; color: var(--mech); font-weight: 700; }
  .code .kw { color: var(--mech); font-weight: 700; }
  .code .empty { color: var(--ink-2); font-family: var(--body); font-size: 14.5px; }
  .code .empty::before { content: none; }
  .result { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--mech); background: rgba(46, 74, 125, .07); min-height: 46px; }
  .result:empty { visibility: hidden; }
  .con-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
  .meter { border-left: 1.5px solid var(--ink); padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; }
  .meter .m-num { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: .85; color: var(--tension); font-variant-numeric: tabular-nums; transition: color .4s; }
  .meter .m-num.calm { color: var(--mech); }
  .meter .m-lab { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
  .m-bar { height: 160px; width: 26px; border: 1.5px solid var(--ink); position: relative; background: #fff; }
  .m-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--tension); transition: height .8s cubic-bezier(.2,.7,.2,1), background .4s; }
  .m-fill.calm { background: var(--mech); }
  .m-count { font-size: 14px; font-weight: 600; }
  .btn-line { background: none; border: 1.5px solid var(--ink); padding: 9px 14px; font-weight: 600; font-size: 14px; }
  .btn-line:hover { background: var(--ink); color: var(--paper); }
  .calm-banner {
    margin-top: 22px; background: var(--mech); color: #fff; padding: 22px 24px;
    display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  }
  .calm-banner[hidden] { display: none; }
  .calm-banner p { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.6vw, 46px); line-height: .95; }
  .calm-banner a { color: #fff; font-weight: 600; }
  .fine { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }

  /* ================= Section 4: Proof (dark band) ================= */
  .proof {
    --pi: #E8ECE6; --pi2: #A9B6BA; --pb: #AEBAD3;
    background-color: #0F1A20;
    background-image:
      linear-gradient(rgba(232, 236, 230, .06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232, 236, 230, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    color: var(--pi); padding: 100px 0 110px;
  }
  .proof :focus-visible { outline-color: var(--pb); }
  .part { display: inline-block; margin: 0 0 18px; padding: 5px 10px; border: 1.5px solid var(--pb); color: var(--pb); font-size: 13px; font-weight: 600; }
  .proof .eq span { color: var(--pb); }
  .ask-big { margin: 30px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(56px, 10vw, 150px); line-height: .85; }
  .answer { margin: 18px 0 0; font-size: clamp(20px, 2.2vw, 28px); color: var(--pi2); max-width: 36ch; opacity: 0; transform: translateY(10px); transition: opacity .6s .3s, transform .6s .3s; }
  .answer strong { color: var(--pi); }
  .proof.seen .answer { opacity: 1; transform: none; }
  .proof h3 { margin: 70px 0 6px; font-size: 26px; line-height: 1.2; }
  .proof .sub3 { margin: 0 0 18px; color: var(--pi2); }
  .themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1.5px solid rgba(232, 236, 230, .35); }
  .theme {
    width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(232, 236, 230, .18);
    color: var(--pi); text-align: left; padding: 14px 4px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  }
  .theme .ck { width: 22px; height: 22px; border: 1.5px solid var(--pb); display: grid; place-items: center; color: #0F1A20; font-weight: 800; font-size: 14px; transition: background .3s; }
  .proof.seen .theme .ck { background: var(--pb); }
  .theme .tx { font-size: 16.5px; line-height: 1.35; }
  .theme .faces { display: flex; }
  .theme .faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #0F1A20; margin-left: -8px; filter: grayscale(1); }
  .theme:hover { background: rgba(232, 236, 230, .04); }
  .theme[aria-pressed="true"] { background: rgba(174, 186, 211, .12); }
  .theme[aria-pressed="true"] .faces img { filter: none; }
  .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .card {
    background: #16242B; border: 1.5px solid rgba(232, 236, 230, .22); color: var(--pi);
    text-align: left; padding: 0; display: flex; flex-direction: column; transition: opacity .35s, border-color .2s, transform .2s;
  }
  .card:hover { border-color: var(--pb); transform: translateY(-3px); }
  .card .ph { aspect-ratio: 171 / 224; width: 100%; overflow: hidden; background: #0B1418; }
  .card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.85) contrast(1.05); transition: filter .3s; }
  .card:hover img, .card.lit img { filter: none; }
  .card .meta { padding: 12px 14px 14px; display: grid; gap: 2px; }
  .card .big { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 3.4vw, 46px); line-height: .9; color: var(--pb); }
  .card .bl { font-size: 13px; color: var(--pi2); line-height: 1.3; }
  .card .nm { font-weight: 600; font-size: 16px; margin-top: 8px; }
  .card .open { font-size: 13px; color: var(--pb); font-weight: 600; margin-top: 2px; }
  .gallery.filtering .card:not(.lit) { opacity: .25; }
  .traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 4px; border-top: 1.5px solid rgba(232, 236, 230, .35); }
  .trait { padding: 14px 0; border-bottom: 1px solid rgba(232, 236, 230, .18); }
  .trait b { display: block; font-size: 16.5px; }
  .trait span { color: var(--pi2); font-size: 15px; }
  .verdict { margin: 70px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 6vw, 84px); line-height: .9; max-width: 16ch; }
  .verdict em { font-style: normal; color: var(--pb); }

  dialog.tdlg {
    width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0;
    border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  }
  dialog.tdlg::backdrop { background: rgba(10, 16, 20, .72); }
  .tdlg .dh { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; padding: 18px; border-bottom: 1.5px solid var(--ink); align-items: end; }
  .tdlg .dh img { width: 110px; aspect-ratio: 171 / 224; object-fit: cover; display: block; border: 1.5px solid var(--ink); }
  .tdlg .dh h3 { margin: 0; font-size: 26px; line-height: 1.15; }
  .tdlg .dh .big { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .9; color: var(--mech); margin-top: 6px; }
  .tdlg .dh .bl { font-size: 13.5px; color: var(--ink-2); }
  .tdlg .x { align-self: start; background: none; border: 1.5px solid var(--ink); width: 38px; height: 38px; font-size: 20px; line-height: 1; }
  .tdlg .dtabs { display: flex; border-bottom: 1.5px solid var(--ink); }
  .tdlg .dtabs button { background: none; border: 0; border-right: 1.5px solid var(--ink); padding: 10px 20px; font-weight: 600; }
  .tdlg .dtabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .tdlg .db { padding: 20px 22px 26px; overflow: auto; max-height: calc(100vh - 260px); }
  .tdlg .db p { margin: 0 0 12px; }
  .tdlg .q { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.02; margin: 0; }
  .tdlg .q::before { content: "\201C"; color: var(--mech); }
  .tdlg .q::after { content: "\201D"; color: var(--mech); }
  .tdlg .qa { margin-top: 14px; font-weight: 600; color: var(--ink-2); }
  .tdlg .dn { display: flex; justify-content: space-between; padding: 0 22px 18px; gap: 10px; }

  /* ================= Section 5: Mad Trading Scientist ================= */
  .sci { padding: 100px 0 110px; }
  .years { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ink); }
  .yr { padding: 18px 18px 16px; border-right: 1.5px solid var(--ink); position: relative; overflow: hidden; background: rgba(255,255,255,.5); }
  .yr:last-child { border-right: 0; }
  .yr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--fill); transition: width 1s cubic-bezier(.3,.7,.2,1); transition-delay: var(--dl); z-index: 0; }
  .years.seen .yr::before { width: 100%; }
  .yr > * { position: relative; z-index: 1; }
  .yr b { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .9; display: block; }
  .yr span { font-size: 15px; }
  .years.seen .yr { color: #fff; transition: color .4s; transition-delay: calc(var(--dl) + .5s); }
  .hours { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
  .hours b { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 9vw, 128px); line-height: .85; font-variant-numeric: tabular-nums; }
  .hours span { font-size: 18px; color: var(--ink-2); max-width: 28ch; }
  .eureka { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
  .eureka .note { border: 2px solid var(--ink); background: #fff; padding: 22px 24px; position: relative; }
  .eureka .note .tag { position: absolute; top: -14px; left: 18px; background: var(--mech); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 10px; }
  .eureka .note p { margin: 0 0 10px; }
  .eureka .note p:last-child { margin: 0; }
  .eureka .bridge-claim { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 4.6vw, 64px); line-height: .92; }
  .eureka .bridge-claim em { font-style: normal; color: var(--mech); }
  .sci h3 { margin: 70px 0 6px; font-size: 26px; }
  .sci .sub3 { margin: 0 0 18px; color: var(--ink-2); }
  .ptable { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .legend-p { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }
  .legend-p i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--ink); }
  .eldetail-unused { margin-top: 16px; border: 2px solid var(--ink); background: #fff; padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
  .eldetail .sym { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: .85; color: var(--mech); min-width: 1.4em; }
  .eldetail h4 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
  .eldetail p { margin: 0; color: var(--ink-2); }
  .eldetail .who { color: var(--ink); font-weight: 600; margin-bottom: 4px; }

  /* ================= Section 6: My Trading Story ================= */
  .story { padding: 100px 0 110px; }
  .lab { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 2px solid var(--ink); background: rgba(255,255,255,.55); }
  .lab svg text.cap { paint-order: stroke; stroke: #F6F7F4; stroke-width: 4px; stroke-linejoin: round; }
  .lab svg { display: block; width: 100%; height: auto; border-right: 1.5px solid var(--ink); }
  .lab-side { padding: 24px; display: flex; flex-direction: column; }
  .lab-side .sn { font-family: var(--display); font-weight: 900; font-size: 96px; line-height: .8; color: var(--mech); font-variant-numeric: tabular-nums; }
  .lab-side .sn small { font-size: 30px; color: var(--ink-2); }
  .lab-side h3 { margin: 12px 0 6px; font-size: 24px; line-height: 1.2; }
  .lab-side p { margin: 0; color: var(--ink-2); min-height: 4.8em; }
  .stages { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
  .stages button { width: 100%; height: 32px; background: #fff; border: 1.5px solid var(--ink); font-weight: 700; font-size: 13px; padding: 0; }
  .stages button.done { background: var(--ink); color: var(--paper); }
  .stages button[aria-current="step"] { background: var(--mech); border-color: var(--mech); color: #fff; }
  .lab-nav { display: flex; gap: 8px; margin-top: 12px; }

  /* ================= Section 7: Join ================= */
  .join { padding: 100px 0 80px; }
  .ladder { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }
  .rung { border: 2px solid var(--ink); background: #fff; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
  .rung:nth-child(1) { min-height: 250px; }
  .rung:nth-child(2) { min-height: 280px; }
  .rung:nth-child(3) { min-height: 310px; }
  .rung:nth-child(4) { min-height: 340px; }
  .rung:nth-child(5) { min-height: 370px; background: var(--ink); color: var(--paper); }
  .rung .v { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: .85; }
  .rung .w { font-weight: 600; font-size: 16px; line-height: 1.25; }
  .rung .f { font-size: 14.5px; color: var(--ink-2); }
  .rung:nth-child(5) .f { color: rgba(236,238,233,.75); }
  .rung a { margin-top: auto; align-self: flex-start; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--mech); }
  .rung:nth-child(5) a { color: #fff; background: var(--mech); padding: 8px 12px; }
  .rung .lv { font-size: 12px; color: var(--ink-2); }
  .rung:nth-child(5) .lv { color: rgba(236,238,233,.7); }
  .course { margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
  .course h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 4.6vw, 64px); line-height: .9; }
  .course .facts-row { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 18px; }
  .course .facts-row div b { display: block; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: .9; }
  .course .facts-row div span { font-size: 13.5px; color: var(--ink-2); }
  .syl-tabs { display: flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-bottom: 0; }
  .syl-tabs button { background: none; border: 0; border-right: 1.5px solid var(--ink); padding: 9px 14px; font-size: 14px; font-weight: 600; }
  .syl-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .syl-body { border: 1.5px solid var(--ink); background: #fff; padding: 18px 20px; min-height: 140px; }
  .syl-body ul { margin: 0; padding-left: 18px; }
  .syl-body li { margin-bottom: 6px; }
  .syl-body .for { font-size: 13.5px; color: var(--ink-2); margin: 0 0 8px; }
  .tiers { display: grid; gap: 10px; align-content: start; }
  .tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 2px solid var(--ink); padding: 14px 16px; background: #fff; }
  .tier .tl { font-size: 14px; color: var(--ink-2); }
  .tier .tn { font-weight: 600; }
  .tier .tp { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: .9; }
  .tier.first { background: var(--mech); color: #fff; border-color: var(--mech); }
  .tier.first .tl { color: rgba(255,255,255,.8); }
  .tier.first .badge { display: inline-block; background: #fff; color: var(--mech); font-size: 12px; font-weight: 700; padding: 2px 8px; margin-top: 4px; }
  .batch { margin: 6px 0 0; font-weight: 600; }
  .batch .bdots { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
  .batch .bdots i { width: 10px; height: 10px; border: 1.5px solid var(--ink); }
  .register { margin-top: 56px; border: 2px solid var(--ink); background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .register .rl { background: var(--ink); color: var(--paper); padding: 26px; }
  .register .rl h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 4vw, 56px); line-height: .9; }
  .register .rl p { color: rgba(236,238,233,.8); }
  .register form { padding: 24px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .register label { display: grid; gap: 4px; min-width: 0; font-size: 13.5px; font-weight: 600; }
  .register input, .register select { width: 100%; min-width: 0; font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; }
  .register .full { grid-column: 1 / -1; }
  .register button[type="submit"] { background: var(--mech); color: #fff; border: 0; padding: 13px 18px; font-weight: 700; font-size: 16px; }
  .register .msg { grid-column: 1 / -1; margin: 0; font-size: 14.5px; min-height: 1.4em; }
  .register .msg.ok { color: var(--mech); font-weight: 600; }
  .spread { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .spread a, .spread button { background: none; border: 1.5px solid var(--paper); color: var(--paper); padding: 9px 14px; font-weight: 600; font-size: 14px; text-decoration: none; }
  .spread a:hover, .spread button:hover { background: var(--paper); color: var(--ink); }

  footer.foot { border-top: 2px solid var(--ink); padding: 34px 0 60px; font-size: 14px; color: var(--ink-2); }
  footer .frow { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
  footer .flinks { display: flex; gap: 14px; flex-wrap: wrap; }
  footer .flinks a { color: var(--ink); }
  footer .disc { margin: 18px 0 0; max-width: 90ch; }

  @media (max-width: 1000px) {
    .sitenav ul { display: none; }
    .compiler { grid-template-columns: 220px minmax(0, 1fr); }
    .meter { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--ink); flex-direction: row; align-items: center; flex-wrap: wrap; }
    .m-bar { height: 22px; width: 160px; }
    .m-fill { top: 0; bottom: 0; height: auto !important; width: var(--w, 100%); transition: width .8s cubic-bezier(.2,.7,.2,1), background .4s; }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ptable { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .rung { min-height: 0 !important; }
    .rung:nth-child(5) { grid-column: 1 / -1; }
  }
  @media (max-width: 860px) {
    .sitenav { top: 3px; }
    .sitenav .in { padding: 7px var(--pad); }
    .compiler { grid-template-columns: 1fr; }
    .seats { border-right: 0; border-bottom: 1.5px solid var(--ink); display: flex; overflow-x: auto; padding: 8px; gap: 4px; }
    .seats h4 { display: none; }
    .seat { width: auto; white-space: nowrap; border: 1.5px solid var(--ink); padding: 6px 10px; font-size: 14px; }
    .console { padding: 18px 16px 20px; }
    .themes { grid-template-columns: 1fr; }
    .traits { grid-template-columns: 1fr; }
    .tdlg .dh { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
    .tdlg .dh img { width: 80px; }
    .tdlg .dh .big { font-size: 34px; }
    .years { grid-template-columns: 1fr; }
    .yr { border-right: 0; border-bottom: 1.5px solid var(--ink); }
    .yr:last-child { border-bottom: 0; }
    .eureka { grid-template-columns: 1fr; }
    .ptable { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .eldetail-unused { grid-template-columns: auto minmax(0, 1fr); }
    .eldetail .btn { grid-column: 1 / -1; justify-self: start; }
    .lab { grid-template-columns: 1fr; }
    .lab svg { border-right: 0; border-bottom: 1.5px solid var(--ink); }
    .lab-side .sn { font-size: 64px; }
    .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .course { grid-template-columns: 1fr; }
    .register { grid-template-columns: 1fr; }
    .register form { grid-template-columns: 1fr; }
    .solution, .proof, .sci, .story, .join { padding: 70px 0 80px; }
    .proof h3, .sci h3 { margin-top: 54px; }
  }
  @media (max-width: 520px) {
    .ladder { grid-template-columns: 1fr; }
    .gallery { gap: 10px; }
    .card .meta { padding: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sitenav, .answer, .yr::before, .card, .el, .m-fill { transition: none !important; }
  }

  /* ================= Narration: "in simple words" boxes ================= */
  .narr { margin-top: 24px; max-width: 880px; border: 2px solid var(--ink); background: rgba(255, 255, 255, .78); padding: 18px 20px 18px; }
  .narr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
  .chap { font-weight: 700; font-size: 13.5px; color: var(--mech); }
  .listen { background: var(--mech); color: #fff; border: 0; padding: 9px 16px; font-weight: 700; font-size: 14.5px; display: inline-flex; gap: 8px; align-items: center; }
  .listen:hover { background: #233B66; }
  .listen.on, .story-btn.on { background: var(--tension); }
  .no-tts .listen, .no-tts .story-btn, .no-tts .navlisten { display: none !important; }
  .narr-text { margin: 0; font-size: clamp(17.5px, 1.65vw, 20.5px); line-height: 1.6; color: var(--ink); }
  .narr-text .sent { transition: background .2s; }
  .narr-text .sent.now { background: rgba(46, 74, 125, .10); box-shadow: 0 0 0 3px rgba(46, 74, 125, .10); }
  .narr-text .w.on { background: var(--mech); color: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--mech); }
  .hero .narr-text { color: var(--ink-2); }
  .hero .narr-text .sent.now { color: var(--ink); }
  .try { margin: 14px 0 0; padding: 10px 14px; background: #FFF2C2; border-left: 4px solid #D99A00; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
  .try b { color: #8A5A00; }
  .proof .narr { background: rgba(232, 236, 230, .07); border-color: rgba(232, 236, 230, .5); margin-top: 30px; }
  .proof .narr-text { color: var(--pi); }
  .proof .narr-text .sent.now { background: rgba(174, 186, 211, .16); box-shadow: 0 0 0 3px rgba(174, 186, 211, .16); }
  .proof .narr-text .w.on { background: var(--pb); color: #0F1A20; box-shadow: 0 0 0 2px var(--pb); }
  .proof .chap { color: var(--pb); }
  .proof .try { background: rgba(255, 242, 194, .12); color: var(--pi); border-left-color: #E8B640; }
  .proof .try b { color: #F2C55C; }

  .nextbar {
    margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center;
    padding: 18px 22px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none;
  }
  .nextbar span { font-size: 13.5px; font-weight: 600; color: #B3BDD2; }
  .nextbar b { grid-column: 1; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 38px); line-height: 1; }
  .nextbar i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 30px; width: 54px; height: 54px; display: grid; place-items: center; background: var(--mech); color: #fff; }
  .nextbar:hover i { background: #233B66; }
  .nextbar.dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .nextbar.dark span { color: var(--mech); }

  .navlisten { background: none; border: 1.5px solid var(--ink); padding: 6px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; }
  .navlisten.on { background: var(--tension); border-color: var(--tension); color: #fff; }
  .sitenav .reg { margin-left: 0; }
  .sitenav .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }

  /* ================= Section shades ================= */
  .shade { background-image: linear-gradient(rgba(20, 35, 43, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 35, 43, .07) 1px, transparent 1px); background-size: 48px 48px; border-top: 2px solid var(--ink); }
  .tension.shade { background-color: #EFEBE8; }
  #hourglass.shade { background-color: #E8EBEC; }
  .solution.shade { background-color: #E8EAED; }
  .sci.shade { background-color: #EEECE6; }
  .story.shade { background-color: #E7EAE7; }
  .join.shade { background-color: #EAE9EB; }
  .hg-intro { padding-top: 90px; padding-bottom: 24px; }
  .hg-out { padding-bottom: 90px; }

  /* ================= Periodic table: flip cards ================= */
  .ptable { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .el { aspect-ratio: 4 / 5; perspective: 1000px; cursor: pointer; border: 0; padding: 0; background: none; display: block; transform: none !important; outline: none; }
  .el:focus-visible .face { outline: 3px solid var(--tension); outline-offset: 2px; }
  .el-in { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
  .el.flipped .el-in { transform: rotateY(180deg); }
  .face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1.5px solid var(--ink); background: #fff; padding: 12px; display: flex; flex-direction: column; text-align: left; }
  .face .z { font-size: 12px; color: var(--ink-2); }
  .face .sym { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 4.6vw, 64px); line-height: .9; margin-top: auto; }
  .face .en { font-size: 14px; font-weight: 700; line-height: 1.2; margin-top: 4px; }
  .face .hint { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
  .el.fw .front { background: var(--mech); color: #fff; border-color: var(--mech); }
  .el.fw .front .z, .el.fw .front .hint { color: rgba(255, 255, 255, .8); }
  .el.rs .front { background: #E4E6E3; }
  .el.oc .front { background: var(--ink); color: var(--paper); }
  .el.oc .front .z, .el.oc .front .hint { color: rgba(236, 238, 233, .75); }
  .back { transform: rotateY(180deg); gap: 6px; border-width: 2px; }
  .back .bn { font-weight: 800; font-size: 15px; line-height: 1.2; }
  .back .bw { font-size: 12.5px; font-weight: 700; color: var(--mech); line-height: 1.25; }
  .back .bt { font-size: 13.5px; line-height: 1.4; color: var(--ink); }
  .back a { margin-top: auto; align-self: flex-start; background: var(--mech); color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 7px 10px; }

  @media (max-width: 1000px) {
    .ptable { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 860px) {
    .rec { display: none; }
    .narr { padding: 14px 14px 14px; }
    .narr-text { font-size: 17px; }
    .try { font-size: 15px; }
    .nextbar { margin-top: 48px; padding: 14px 16px; }
    .nextbar i { width: 44px; height: 44px; font-size: 24px; }
    .navlisten { padding: 6px 10px; font-size: 13px; }
    .hg-intro { padding-top: 64px; }
    /* Solution: keep the seat picker and the tension meter in view while working */
    .compiler { display: flex; flex-direction: column; }
    .seats { order: 1; position: sticky; top: 50px; z-index: 6; background: #ECEDEE; }
    .meter { order: 2; position: sticky; top: 104px; z-index: 5; background: #F4F5F5; border-top: 0; border-bottom: 1.5px solid var(--ink); padding: 8px 14px; gap: 6px 12px; flex-direction: row; align-items: center; }
    .meter .m-num { font-size: 34px; }
    .meter .m-lab { display: none; }
    .m-bar { height: 16px; width: auto; flex: 1; min-width: 90px; }
    .m-count { font-size: 13px; width: 100%; }
    .console { order: 3; }
    /* Story: buttons right under the molecule */
    .lab-side .lab-nav { order: -2; margin-top: 0; }
    .lab-side .stages { order: -1; margin: 10px 0 14px; padding: 0; }
    .lab-side .sn { font-size: 48px; }
    .ptable { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .el { aspect-ratio: 4 / 5.2; }
    .back { padding: 10px; }
    .back .bt { font-size: 12.5px; }
  }
  @media (prefers-reduced-motion: reduce) { .el-in { transition: none; } }

  .hero .narr-text { margin: 16px auto 0; max-width: 56ch; text-align: center; }
  .narr { scroll-margin-top: 66px; }

  .chap { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14.5px; }
  .chap .num { font-family: var(--display); font-weight: 800; font-size: 15px; padding: 1px 7px; border: 1.5px solid currentColor; color: var(--mech); }
  .proof .chap { color: var(--pi); }
  .proof .chap .num { color: var(--pb); }
  .nextbar span { letter-spacing: .01em; }

  /* ================= Guide bubbles: Purvang talking ================= */
  .say { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0; max-width: 760px; }
  .say .ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--ink); background: #ddd; }
  .say .bub { position: relative; background: #fff; border: 1.5px solid var(--ink); padding: 12px 16px; font-size: 17px; line-height: 1.5; }
  .say .bub::before { content: ""; position: absolute; left: -9px; top: 18px; width: 14px; height: 14px; background: #fff; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
  .say .bub p { margin: 0; }
  .say .bub b { font-weight: 700; color: var(--mech); }
  .say .who { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 2px; }
  .hero-say { margin: 34px auto 0; justify-content: center; max-width: 640px; }
  .hero-say .ava { width: 72px; height: 72px; }
  .hero-say .bub { font-size: 18px; text-align: left; }
  .proof .say .bub { background: #E8ECE6; color: #14232B; }
  .proof .say .bub::before { background: #E8ECE6; }
  .proof .say .ava { border-color: #E8ECE6; }

  .secnum { display: inline-block; margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 16px; padding: 2px 9px; border: 1.5px solid currentColor; color: var(--mech); }
  .proof .secnum { color: var(--pb); }
  section.shade, .proof { border-top: 3px solid var(--ink); }

  /* ================= Flip cards (problems and solutions) ================= */
  .fcard { perspective: 1100px; cursor: pointer; outline: none; }
  .fcard .fi { display: grid; transition: transform .6s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; height: 100%; }
  .fcard.flipped .fi { transform: rotateY(180deg); }
  .fcard .face { position: relative; inset: auto; grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #fff; border: 1.5px solid var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
  .fcard .b { transform: rotateY(180deg); }
  .fcard:focus-visible .face { outline: 3px solid var(--mech); outline-offset: 2px; }
  .fcard .hint { margin-top: auto; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
  .fcard .hint::after { content: " \21BB"; }
  .pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .pcard .nm { font-weight: 700; font-size: 17px; line-height: 1.2; }
  .pcard .nm.sm { font-size: 14px; color: var(--ink-2); }
  .pcard .sh { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .9; }
  .pcard .emo { align-self: flex-start; background: var(--tension); color: #fff; font-weight: 700; font-size: 13px; padding: 2px 8px; }
  .pcard .b { border-left: 4px solid var(--tension); }
  .pcard .bt { font-size: 15.5px; line-height: 1.35; }
  .pcard .bc { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
  .pcard .open-seg { margin-top: auto; align-self: flex-start; background: var(--ink); color: #fff; border: 0; padding: 8px 12px; font-weight: 600; font-size: 14px; }
  .pcard.calm .emo { background: var(--mech); }
  .pcard.calm .b { border-left-color: var(--mech); }
  .facts { margin-top: 22px; }
  .fact { padding: 12px 14px; }
  .fact .num { font-size: 40px; }
  .fact p { font-size: 14.5px; }
  .seg-zone { margin-top: 18px; }

  /* ================= 2. Hourglass ================= */
  .hg { padding: 90px 0 100px; }
  .hg-stage { margin-top: 26px; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px 28px; align-items: start; }
  .hg-stage > .say.live { grid-column: 1; grid-row: 1; margin: 0; position: sticky; top: 70px; }
  .hg-steps { grid-column: 1; grid-row: 2; display: grid; gap: 6px; }
  .hg-steps button { background: #fff; border: 1.5px solid var(--ink); text-align: left; padding: 9px 12px; font-weight: 600; font-size: 14.5px; }
  .hg-steps button.done { background: var(--ink); color: var(--paper); }
  .hg-steps button.next { border-color: var(--mech); color: var(--mech); box-shadow: inset 4px 0 0 var(--mech); }
  .hg-canvas { grid-column: 2; grid-row: 1 / span 3; position: relative; border: 2px solid var(--ink); background: rgba(255, 255, 255, .5); }
  .hg-canvas canvas { display: block; width: 100%; height: 640px; }
  .hg-hits { position: absolute; inset: 0; pointer-events: none; }
  .hg-hits button { position: absolute; pointer-events: auto; background: transparent; border: 0; padding: 0; cursor: pointer; }
  .hg-hits button:hover { background: rgba(46, 74, 125, .05); }
  .hg-stage > .fine { grid-column: 1; grid-row: 3; margin: 0; }
  .hg-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .hg-acts .btn { padding: 10px 16px; font-size: 15px; }
  .hg-acts .btn-line { padding: 9px 12px; }
  .say.live .bub { width: 100%; }

  /* ================= 3. Solution: problem / rule flip cards ================= */
  .sol-bar {
    margin-top: 26px; position: sticky; top: 54px; z-index: 6;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center;
    background: #F6F6F4; border: 2px solid var(--ink); padding: 10px 16px;
  }
  .sol-bar .m-num { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: .9; color: var(--tension); font-variant-numeric: tabular-nums; transition: color .4s; }
  .sol-bar .m-num.calm { color: var(--mech); }
  .sol-bar .m-lab { font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
  .sol-bar .m-bar { height: 14px; width: 100%; border: 1.5px solid var(--ink); background: #fff; position: relative; }
  .sol-bar .m-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 99%; height: auto; background: var(--tension); transition: width .7s cubic-bezier(.2,.7,.2,1), background .4s; }
  .sol-bar .m-fill.calm { background: var(--mech); }
  .sol-bar .m-count { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
  .sol-bar .m-acts { display: flex; gap: 6px; }
  .scards { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .scard .face { min-height: 210px; }
  .scard .grp { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
  .scard .nm { font-weight: 700; font-size: 17px; line-height: 1.2; }
  .scard .feel { font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1.02; color: var(--tension); }
  .scard .b { border-left: 4px solid var(--mech); background: #FBFBFA; }
  .scard .b .nm .mw { color: var(--mech); }
  .scard .rules { list-style: none; margin: 2px 0 0; padding: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
  .scard .rules li::before { content: "\2713 "; color: var(--mech); font-weight: 700; }
  .scard .rules .kw { color: var(--mech); font-weight: 700; }
  .scard .res { margin-top: auto; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
  .calm-banner { margin-top: 16px; }

  /* ================= 5. About me ================= */
  .me { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: start; }
  .me-photo { margin: 0; border: 2px solid var(--ink); background: #fff; padding: 10px 10px 8px; position: sticky; top: 72px; }
  .me-photo img { display: block; width: 100%; height: auto; }
  .me-photo figcaption { font-weight: 700; padding-top: 8px; }
  .me-text .say { margin-top: 0; }
  .me-text .years { margin-top: 22px; }
  .note-e { margin-top: 26px; border: 2px solid var(--ink); background: #fff; padding: 20px 20px 16px; position: relative; }
  .note-e .tag { position: absolute; top: -13px; left: 16px; background: var(--mech); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 10px; }
  .note-e p { margin: 0; }
  .me-text .bridge-claim { margin: 26px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(32px, 3.8vw, 54px); line-height: .92; }
  .me-text .bridge-claim em { font-style: normal; color: var(--mech); }

  .built { padding: 90px 0 100px; }
  .built.shade { background-color: #ECEAE6; }
  .built .ptable { margin-top: 24px; }

  /* ================= 8. Join: course details ================= */
  .course { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 24px; }
  .time-card { border: 2px solid var(--ink); background: #fff; padding: 22px; }
  .time-card h3 { margin: 0 0 14px; }
  .sched { display: flex; align-items: stretch; gap: 10px; }
  .slot { flex: 1; background: var(--mech); color: #fff; padding: 12px 14px; display: grid; gap: 2px; }
  .slot span { font-size: 13px; opacity: .85; }
  .slot b { font-family: var(--display); font-weight: 900; font-size: 32px; line-height: .9; }
  .slot em { font-style: normal; font-weight: 700; font-size: 16px; }
  .plus { display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 34px; }
  .weeks { margin-top: 14px; }
  .wk-lab { display: block; font-size: 16px; margin-bottom: 6px; }
  .wk-lab b { font-family: var(--display); font-weight: 900; font-size: 26px; }
  .wk-bar { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; }
  .wk-bar i { height: 16px; background: var(--ink); opacity: .85; }
  .what { margin: 16px 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; }
  .what li { padding-left: 22px; position: relative; }
  .what li::before { content: "\2713"; position: absolute; left: 0; color: var(--mech); font-weight: 800; }
  .side { display: grid; gap: 12px; align-content: start; }
  .mentor { background: var(--ink); color: var(--paper); padding: 20px; }
  .mentor h4 { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: .95; }
  .mentor p { margin: 0; color: rgba(236, 238, 233, .85); }
  .updates { border: 2px solid var(--ink); background: #fff; padding: 16px 18px; }
  .updates h4 { margin: 0 0 6px; font-size: 18px; }
  .updates ul { margin: 0; padding-left: 18px; columns: 2; }

  @media (max-width: 1000px) {
    .hg-stage { grid-template-columns: 1fr; }
    .hg-stage > .say.live { grid-column: 1; grid-row: 1; position: sticky; top: 52px; z-index: 6; }
    .hg-steps { display: none; }
    .hg-canvas { grid-column: 1; grid-row: 2; }
    .hg-stage > .fine { grid-row: 3; }
    .me { grid-template-columns: 1fr; }
    .me-photo { position: static; max-width: 300px; }
    .course { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .say { gap: 10px; margin-top: 20px; }
    .say .ava { width: 44px; height: 44px; }
    .say .bub { font-size: 15.5px; padding: 10px 12px; }
    .say .bub::before { top: 14px; }
    .hero-say .ava { width: 56px; height: 56px; }
    .hero-say .bub { font-size: 16px; }
    .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .fact { padding: 8px; }
    .fact .num { font-size: 24px; }
    .fact p { font-size: 11.5px; line-height: 1.3; margin-top: 4px; }
    .fact .src { font-size: 10px; }
    .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fcard .face { padding: 10px; min-height: 140px; }
    .pcard .nm { font-size: 15px; }
    .pcard .sh { font-size: 26px; }
    .pcard .bt { font-size: 13.5px; }
    .pcard .bc { font-size: 12.5px; }
    .hg { padding: 64px 0 70px; }
    .hg-stage > .say.live { margin: 0 -4px; background: var(--paper); padding: 8px 4px; }
    .hg-stage > .say.live .bub { font-size: 14.5px; }
    .hg-acts { margin-top: 8px; }
    .hg-acts .btn { padding: 8px 12px; font-size: 14px; }
    .sol-bar { top: 50px; grid-template-columns: auto minmax(0, 1fr); padding: 8px 12px; gap: 4px 12px; }
    .sol-bar .m-num { font-size: 32px; }
    .sol-bar .m-count { font-size: 12.5px; }
    .sol-bar .m-acts { grid-column: 1 / -1; }
    .sol-bar .m-acts .btn-line { padding: 5px 10px; font-size: 13px; }
    .scards { grid-template-columns: 1fr; gap: 10px; }
    .scard .face { min-height: 0; }
    .scard .feel { font-size: 22px; }
    .sched .slot b { font-size: 26px; }
    .updates ul { columns: 1; }
    .built { padding: 64px 0 70px; }
  }

  .seg-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .seg-switch button { background: #fff; border: 1.5px solid var(--ink); padding: 8px 14px; font-weight: 600; font-size: 14.5px; }
  .seg-switch button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .hg-acts .hg-back { background: none; border: 1.5px solid var(--ink); padding: 9px 12px; font-weight: 600; }
  @media (max-width: 1000px) {
    .hg-steps { display: flex; grid-row: 2; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
    .hg-steps button { white-space: nowrap; font-size: 13.5px; padding: 7px 10px; }
    .hg-canvas { grid-row: 3; }
    .hg-stage > .fine { grid-row: 4; }
  }
  @media (max-width: 860px) {
    .seg-switch { display: grid; grid-template-columns: 1fr 1fr; }
    .seg-switch button { padding: 8px 6px; font-size: 13.5px; }
  }

  .pcard { animation: cardIn .45s ease both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } }

  /* Hourglass call-outs */
  .hg-call {
    position: absolute; left: 50%; transform: translate(-50%, 0); z-index: 3;
    background: var(--mech); color: #fff; border: 0; text-align: center;
    padding: 16px 22px 14px; font-weight: 800; box-shadow: 0 0 0 6px rgba(46, 74, 125, .18);
    max-width: calc(100% - 24px); width: max-content;
  }
  .hg-call[hidden] { display: none; }
  .hg-call .big { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3.2vw, 40px); line-height: .95; }
  .hg-call .small { display: block; font-weight: 600; font-size: 14px; margin-top: 6px; opacity: .9; }
  button.hg-call { cursor: pointer; animation: callPulse 1.6s ease-in-out infinite; }
  button.hg-call:hover { background: #233B66; }
  @keyframes callPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(46, 74, 125, .18); } 50% { box-shadow: 0 0 0 14px rgba(46, 74, 125, .08); } }
  .hg-call.done { animation: popIn .5s cubic-bezier(.2,.9,.3,1.3) both; }
  @keyframes popIn { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }
  .hg-acts .btn.catchy { font-size: 16px; padding: 12px 18px; animation: callPulse 1.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { button.hg-call, .hg-acts .btn.catchy, .pcard { animation: none; } }

  .pcards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .grp-card .face { min-height: 190px; }
  .grp-card .pat { color: var(--tension); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
  .grp-card.active .f { box-shadow: inset 0 0 0 2px var(--mech); }
  .grp-card .b { gap: 8px; }
  .plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
  .plist b { color: var(--ink); font-size: 13.5px; }
  .plist .e { display: inline-block; background: var(--tension); color: #fff; font-weight: 700; font-size: 11px; padding: 0 5px; margin-left: 2px; vertical-align: 1px; }
  .plist .calm .e { background: var(--mech); }
  .uc { align-self: flex-start; background: #E9E3D2; color: #6B5523; border: 1px solid #B9A46E; font-size: 11.5px; font-weight: 800; padding: 2px 7px; letter-spacing: .02em; }
  .face.front .uc { margin-top: 6px; }
  @media (max-width: 1000px) { .pcards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .pcards.four { grid-template-columns: 1fr; } .grp-card .face { min-height: 0; } }

  .pcards.four { align-items: stretch; }
  .grp-card .fi { height: 100%; }
  .grp-card .face { height: 100%; }

  .hg .facts { margin-top: 14px; }
  .who-wins { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ww { border: 2px solid var(--ink); background: #fff; padding: 16px 18px; display: grid; gap: 4px; }
  .ww .wl { font-weight: 700; font-size: 15px; }
  .ww b { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4vw, 50px); line-height: .9; }
  .ww.win b { color: var(--mech); }
  .ww.lose b { color: var(--tension); }
  .ww .wa { font-size: 14.5px; color: var(--ink-2); }
  .ww .wa strong { color: var(--mech); font-size: 17px; }
  .ww.win { border-color: var(--mech); box-shadow: inset 0 4px 0 var(--mech); }
  .ww.lose { box-shadow: inset 0 4px 0 var(--tension); }
  .hg-stage { grid-template-columns: 320px minmax(0, 1fr); }
  .hg-stage > .fine { grid-row: 2; }
  @media (max-width: 860px) {
    .who-wins { grid-template-columns: 1fr; gap: 8px; }
    .ww { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; }
    .ww .wl { grid-column: 1; }
    .ww b { grid-column: 2; grid-row: 1 / span 2; font-size: 30px; }
    .ww .wa { grid-column: 1; font-size: 13px; }
  }
  @media (max-width: 1000px) { .hg-stage > .fine { grid-row: 3; } .hg-canvas { grid-row: 2; } }

  /* ================= Bridge scene ================= */
  #hourglass .hg-stage { display: block; margin-top: 18px; }
  #hourglass .hg-stage > .say.live { position: sticky; top: 62px; z-index: 6; margin: 0 0 12px; max-width: 760px; }
  #hourglass .hg-canvas { border: 2px solid var(--ink); position: relative; background: linear-gradient(#EEF0F1, #E3E7EA); }
  #hourglass .hg-canvas canvas { display: block; width: 100%; height: 470px; }
  #hourglass .hg-stage > .fine { margin-top: 8px; }
  .bgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
  .bg { border: 2px solid var(--ink); background: #fff; padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; transition: border-color .3s, background .3s; }
  .bg .bn { font-weight: 700; font-size: 15px; }
  .bg b { grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .9; }
  .bg .bs { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .bg.press { border-color: var(--tension); background: #FBF1EF; }
  .bg.press .bs, .bg.dead .bs { color: var(--tension); }
  .bg.dead { border-color: var(--tension); background: #F4E9E7; }
  .bg.dead b { color: var(--tension); }
  .bg.safe { border-color: var(--mech); background: #EEF1F7; }
  .bg.safe .bs, .bg.safe b { color: var(--mech); }
  @media (max-width: 860px) {
    #hourglass .hg-stage > .say.live { top: 50px; margin: 0 -4px 10px; background: var(--paper); padding: 8px 4px; }
    #hourglass .hg-canvas canvas { height: 320px; }
    .bgroups { gap: 6px; }
    .bg { grid-template-columns: 1fr; padding: 6px 8px; gap: 0; }
    .bg b { grid-column: 1; grid-row: auto; font-size: 22px; }
    .bg .bn { font-size: 12.5px; }
    .bg .bs { font-size: 11px; line-height: 1.25; }
  }
  #hgNext[hidden] { display: none; }
  #hgApplyCall { top: 26%; }
  #hgDoneCall { top: 30%; }

  .bg .bn::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: 0; }
  .bg[data-k="ext"] .bn::before { background: #70887C; }
  .bg[data-k="int"] .bn::before { background: #4E668C; }
  .bg[data-k="internal"] .bn::before { background: #74546C; }

  /* ================= Applied to all ================= */
  .applied { position: relative; margin-top: 22px; padding: 6px 0 4px; }
  .ap-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .ap-lines path { fill: none; stroke: var(--mech); stroke-width: 2.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
  .applied.seen .ap-lines path { transition: stroke-dashoffset .7s ease; transition-delay: calc(.5s + var(--i) * .45s); stroke-dashoffset: 0; }
  .ap-core { position: relative; z-index: 1; margin: 0 auto; width: max-content; max-width: 100%; background: var(--mech); color: #fff; text-align: center; padding: 16px 26px 14px; transform: scale(.85); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.3,1.3), opacity .4s; }
  .ap-core span { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: .95; }
  .ap-core small { display: block; font-weight: 700; font-size: 14px; margin-top: 4px; opacity: .9; }
  .applied.seen .ap-core { transform: none; opacity: 1; animation: corePulse 2.2s ease-in-out 3s infinite; }
  @keyframes corePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 74, 125, .25); } 50% { box-shadow: 0 0 0 14px rgba(46, 74, 125, 0); } }
  .ap-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 70px; }
  .ap-card { background: #fff; border: 2px solid var(--ink); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; opacity: .35; transform: translateY(10px); transition: opacity .4s, transform .4s, border-color .4s, box-shadow .4s; transition-delay: calc(1s + var(--i) * .45s); }
  .ap-card .ap-seg { font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .ap-card b { font-size: 18px; line-height: 1.2; }
  .ap-card .ap-txt { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
  .ap-card .ap-ok { margin-top: auto; align-self: flex-start; background: var(--mech); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 9px; opacity: 0; transition: opacity .3s; transition-delay: calc(1.3s + var(--i) * .45s); }
  .applied.seen .ap-card { opacity: 1; transform: none; border-color: var(--mech); box-shadow: inset 0 4px 0 var(--mech); }
  .applied.seen .ap-card .ap-ok { opacity: 1; }
  .ap-card:nth-child(1) { --i: 0; } .ap-card:nth-child(2) { --i: 1; } .ap-card:nth-child(3) { --i: 2; } .ap-card:nth-child(4) { --i: 3; }

  /* ================= Join: ways in, corporate pop-up ================= */
  .ladder.ways { align-items: stretch; }
  .ladder.ways .rung { min-height: 0 !important; background: #fff; color: var(--ink); }
  .ladder.ways .rung .lv { font-size: 13px; font-weight: 800; color: var(--mech); }
  .ladder.ways .rung.corp { background: var(--ink); color: var(--paper); cursor: pointer; }
  .ladder.ways .rung.corp .lv { color: #B3BDD2; }
  .ladder.ways .rung.corp .w { color: #fff; }
  .corp-list { margin: 2px 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.45; color: rgba(236, 238, 233, .88); }
  .corp-open { margin-top: auto; align-self: flex-start; background: var(--mech); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 12px; animation: callPulse 1.8s ease-in-out infinite; }
  .ladder.ways .rung.corp .corp-link { margin-top: 8px; color: #fff; background: none; padding: 0; font-weight: 600; text-decoration: underline; }
  .ladder.ways .rung.corp:focus-visible { outline: 3px solid var(--mech); outline-offset: 3px; }
  dialog.cdlg { width: min(1100px, calc(100vw - 20px)); max-height: calc(100vh - 30px); padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
  dialog.cdlg::backdrop { background: rgba(10, 16, 20, .7); }
  .cdlg-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ink); color: var(--paper); font-weight: 700; }
  .cdlg-head .x { background: none; border: 1.5px solid var(--paper); color: var(--paper); width: 36px; height: 36px; font-size: 20px; line-height: 1; }
  .cdlg-body { padding: 16px; }
  .cdlg-body .course { margin-top: 0; }
  .cdlg-foot { margin: 14px 0 0; font-size: 14.5px; }
  .fee-one { background: var(--mech); color: #fff; padding: 18px 20px; display: grid; gap: 2px; }
  .fee-one .fl { font-size: 13px; font-weight: 700; opacity: .85; }
  .fee-one b { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: .9; }
  .fee-one .fs { font-weight: 700; font-size: 16px; }

  @media (max-width: 1000px) {
    .ap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 860px) {
    .ap-cards { gap: 8px; margin-top: 54px; }
    .ap-card { padding: 10px 12px; }
    .ap-card b { font-size: 15.5px; }
    .ap-card .ap-txt { font-size: 12.5px; }
    .ap-core { padding: 12px 18px 10px; }
    .cdlg-body { padding: 10px; }
    .fee-one b { font-size: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-core, .ap-card, .ap-card .ap-ok, .ap-lines path { transition: none !important; }
    .applied.seen .ap-core, .corp-open { animation: none; }
  }

  .say .ava { display: block; background: #ddd url(/img/purvang-avatar.jpg) center / cover no-repeat; }

  /* ===== Mentoring programme section ===== */
  .mentor-hero { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .15s; }
  .mentor-hero:hover { transform: translateY(-2px); }
  .mentor-hero:focus-visible { outline: 3px solid var(--mech); outline-offset: 3px; }
  .mh-left { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 10px; }
  .mh-tag { font-size: 13px; font-weight: 800; color: #B3BDD2; }
  .mh-left h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 5vw, 68px); line-height: .88; }
  .mh-left p { margin: 0; color: rgba(236,238,233,.85); max-width: 46ch; }
  .mh-open { margin-top: 6px; align-self: flex-start; background: var(--mech); color: #fff; font-weight: 800; padding: 11px 16px; animation: callPulse 1.6s ease-in-out infinite; }
  .mh-facts { display: grid; grid-template-columns: 1fr 1fr; border-left: 2px solid rgba(236,238,233,.25); }
  .mh-facts div { padding: 18px; border-bottom: 1px solid rgba(236,238,233,.18); border-right: 1px solid rgba(236,238,233,.18); display: grid; gap: 2px; align-content: center; }
  .mh-facts b { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3vw, 40px); line-height: .9; color: #fff; }
  .mh-facts span { font-size: 13.5px; color: rgba(236,238,233,.78); }
  .grp-h { margin: 46px 0 2px; font-size: 24px; }
  .grp-s { margin: 0 0 14px; color: var(--ink-2); }
  .ladder.ways.four { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .svc { border: 2px solid var(--ink); background: #fff; padding: 16px; display: flex; gap: 12px; align-items: center; min-height: 86px; }
  .svc .sn2 { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--mech); color: #fff; font-family: var(--display); font-weight: 900; font-size: 20px; }
  .svc b { font-size: 16px; line-height: 1.25; }
  .svc-foot { margin: 12px 0 0; font-size: 15px; }
  .linkbtn { background: none; border: 0; padding: 0; color: var(--mech); font-weight: 700; text-decoration: underline; }
  .ptable { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  @media (max-width: 1000px) {
    .mentor-hero { grid-template-columns: 1fr; }
    .mh-facts { border-left: 0; border-top: 2px solid rgba(236,238,233,.25); }
    .ladder.ways.four, .svc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ptable { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 600px) {
    .ladder.ways.four, .svc4 { grid-template-columns: 1fr; }
    .ptable { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mh-left { padding: 20px 18px; }
    .mh-facts div { padding: 12px 14px; }
  }
  @media (prefers-reduced-motion: reduce) { .mh-open { animation: none; } }

  .corp-card { border: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding: 18px; cursor: pointer; display: grid; gap: 14px; transition: transform .15s; }
  .corp-card:hover { transform: translateY(-2px); }
  .corp-card:focus-visible { outline: 3px solid var(--mech); outline-offset: 3px; }
  .cc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
  .cc-tag { font-size: 13px; font-weight: 800; color: #B3BDD2; }
  .cc-head b { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: .95; }
  .corp-card .svc { border-color: transparent; color: var(--ink); }
  .cc-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
  .cc-foot .mh-open { margin: 0; }
  .cc-link { color: #fff; font-weight: 600; }

  /* ===== About me: experience generated services ===== */
  .years.gen3 { border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: none; }
  .gen3 .ycol { display: flex; flex-direction: column; align-items: stretch; }
  .gen3 .yr { border: 2px solid var(--ink); }
  .gen3 .yr:last-child { border-right: 2px solid var(--ink); }
  .garrow { display: block; align-self: center; width: 3px; height: 34px; background: var(--mech); transform-origin: top; transform: scaleY(0); position: relative; transition: transform .45s ease; transition-delay: var(--dl); }
  .garrow::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--mech); border-bottom: 0; }
  .gsvc { border: 2px solid var(--mech); background: #fff; padding: 12px 14px; display: grid; gap: 2px; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.3); transition-delay: var(--dl); margin-top: 8px; }
  .gsvc .gk { font-size: 11.5px; font-weight: 800; color: var(--mech); text-transform: uppercase; letter-spacing: .04em; }
  .gsvc b { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: .95; color: var(--mech); }
  .gsvc span:last-child { font-size: 13.5px; color: var(--ink-2); }
  .years.seen .garrow { transform: scaleY(1); }
  .years.seen .gsvc { opacity: 1; transform: none; }
  .note-e p + p { margin-top: 8px; font-weight: 600; }

  /* ===== Story: applied to all ===== */
  .ap-claim { margin: 22px 0 0; text-align: center; font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4.4vw, 58px); line-height: .95; opacity: 0; transform: scale(.92); transition: opacity .6s 1.8s, transform .6s 1.8s cubic-bezier(.2,.9,.3,1.3); }
  .ap-claim em { font-style: normal; color: var(--mech); }
  .applied.seen + .ap-claim { opacity: 1; transform: none; }

  /* ===== What I've built ===== */
  .prod4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .prod, .comm a, .svcx { border: 2px solid var(--ink); background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: transform .15s; }
  a.prod:hover, .comm a:hover, a.svcx:hover { transform: translateY(-3px); }
  .pk, .sx-seg { font-size: 12.5px; font-weight: 800; color: var(--mech); }
  .prod b, .svcx b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: .95; }
  .pt, .sx-t { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
  .pl { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--mech); }
  .svc3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .svcx.main { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .svcx.main .sx-seg { color: #B3BDD2; } .svcx.main .sx-t { color: rgba(236,238,233,.85); } .svcx.main .pl { color: #fff; }
  .comm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .comm b { font-size: 17px; line-height: 1.3; }

  /* ===== Mentoring programme ===== */
  .mentor-hero { cursor: default; }
  .mentor-hero:hover { transform: none; }
  .mh-open { text-decoration: none; }
  .ri-table { border: 2px solid var(--ink); background: #fff; }
  .ri-h, .ri-r { display: grid; grid-template-columns: 1fr 1fr; }
  .ri-h span { padding: 10px 14px; font-weight: 800; font-size: 14px; }
  .ri-h span:first-child { background: #F1E7E4; color: var(--tension); }
  .ri-h span:last-child { background: var(--mech); color: #fff; }
  .ri-r span { padding: 10px 14px; border-top: 1px solid rgba(20,35,43,.15); font-size: 15px; }
  .ri-r span:first-child { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(154,75,64,.5); }
  .ri-r span:last-child { font-weight: 600; border-left: 1px solid rgba(20,35,43,.15); }
  .cycle { display: grid; grid-template-columns: repeat(8, 1fr); border: 2px solid var(--ink); }
  .cycle i { font-style: normal; text-align: center; padding: 14px 4px; font-weight: 800; font-size: 14px; }
  .cycle i.l { background: #fff; color: var(--ink); }
  .cycle i.d { background: var(--mech); color: #fff; }
  .cyc-ax { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
  .phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .ph { padding: 10px 12px; border-top: 5px solid var(--c); background: #fff; border-left: 1px solid rgba(20,35,43,.15); border-right: 1px solid rgba(20,35,43,.15); border-bottom: 1px solid rgba(20,35,43,.15); display: grid; gap: 2px; }
  .ph b { font-size: 15px; } .ph span { font-size: 13px; color: var(--ink-2); }
  .p0 { --c: #9AA3A0; } .p1 { --c: #70887C; } .p2 { --c: #4E668C; } .p3 { --c: #74546C; } .p4 { --c: #2E4A7D; } .p5 { --c: #14232B; }
  .wkgrid { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; }
  .wk { aspect-ratio: 1; border: 0; background: var(--c); color: #fff; font-weight: 800; font-size: 13px; padding: 0; opacity: .78; }
  .wk:hover { opacity: 1; }
  .wk[aria-pressed="true"] { opacity: 1; outline: 3px solid var(--ink); outline-offset: 2px; }
  .wkcard { margin-top: 12px; border: 2px solid var(--ink); border-left: 8px solid var(--c); background: #fff; padding: 16px 18px; display: grid; gap: 4px; min-height: 108px; }
  .wkcard .wkn { font-size: 13px; font-weight: 800; color: var(--ink-2); }
  .wkcard b { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: .95; }
  .wkcard .wko em { font-style: normal; font-weight: 700; color: var(--mech); }
  .grad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .grad div { border: 2px solid var(--ink); background: #fff; padding: 14px 16px; display: grid; gap: 4px; }
  .grad b { font-size: 17px; } .grad span { font-size: 14px; color: var(--ink-2); }
  .tools-line { margin: 14px 0 0; }
  .mentor-rel { margin-top: 30px; background: var(--ink); color: var(--paper); padding: 22px 24px; }
  .mentor-rel h4 { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.4vw, 42px); line-height: .95; }
  .mentor-rel p { margin: 0; color: rgba(236,238,233,.85); max-width: 70ch; }
  .steal { border: 2px dashed var(--mech); background: #EEF1F7; padding: 14px 18px; font-size: 16.5px; margin-bottom: 12px; }
  .steal b { color: var(--mech); font-size: 19px; }
  .tiers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
  .t3 { border: 2px solid var(--ink); background: #fff; padding: 16px 18px; display: grid; gap: 4px; }
  .t3 .tl { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
  .t3 b { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 5vw, 60px); line-height: .9; }
  .t3 .tn { font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .t3:not(.now) b { color: var(--ink-2); }
  .t3.now { background: var(--mech); color: #fff; border-color: var(--mech); padding: 24px 18px; box-shadow: 0 0 0 6px rgba(46,74,125,.18); }
  .t3.now .tl, .t3.now .tn { color: rgba(255,255,255,.9); }
  .t3.now .tn { background: #fff; color: var(--mech); justify-self: start; padding: 2px 8px; }
  .incl { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
  .incl b { color: var(--ink); }

  @media (max-width: 1000px) {
    .prod4, .comm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc3, .grad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ph.p4 { grid-column: 1 / -1; }
    .wkgrid { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  }
  @media (max-width: 600px) {
    .years.gen3 { grid-template-columns: 1fr; gap: 14px; }
    .prod4, .comm, .svc3, .grad, .tiers3 { grid-template-columns: 1fr; }
    .ri-r span, .ri-h span { padding: 8px 10px; font-size: 13.5px; }
    .cycle i { font-size: 11px; padding: 10px 1px; }
    .wkgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .phases { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { .garrow, .gsvc, .ap-claim { transition: none !important; } }

  /* ===== About me: three arcs ===== */
  .arc3 { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .arc { border: 2px solid var(--ink); background: #fff; padding: 14px; display: grid; gap: 2px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.2); transition-delay: var(--d, 0s); }
  .arc b { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: .85; }
  .arc span { font-size: 14px; color: var(--ink-2); }
  .arc:nth-child(1) { box-shadow: inset 0 5px 0 #70887C; } .arc:nth-child(2) { box-shadow: inset 0 5px 0 #4E668C; } .arc:nth-child(3) { box-shadow: inset 0 5px 0 #14232B; }
  .arc3.in .arc { opacity: 1; transform: none; }

  /* ===== Story: the moment it clicked ===== */
  .clicked { margin: 30px 0 0; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding: 26px 26px 22px; text-align: center; position: relative; overflow: hidden; }
  .clicked::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(46,74,125,.9), transparent 60%); opacity: 0; transition: opacity .8s .3s; }
  .clicked > * { position: relative; }
  .ck-tag { display: inline-block; background: var(--mech); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 10px; }
  .ck-big { margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 6vw, 80px); line-height: .9; opacity: .15; transform: scale(.9); transition: opacity .6s, transform .7s cubic-bezier(.2,.9,.3,1.4); }
  .ck-big em { font-style: normal; color: #B3BDD2; display: inline-block; }
  .ck-sub { margin: 10px 0 0; color: rgba(236,238,233,.85); opacity: 0; transition: opacity .6s .6s; }
  .clicked.in::before { opacity: 1; }
  .clicked.in .ck-big { opacity: 1; transform: none; }
  .clicked.in .ck-big em { animation: clickPop .7s .45s both; }
  .clicked.in .ck-sub { opacity: 1; }
  @keyframes clickPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: #fff; } 100% { transform: scale(1); } }
  #story .years.gen3 { margin-top: 16px; }

  /* ===== Register: about you ===== */
  .who-am { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .who-am legend { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; padding: 0; }
  .register .who-am label { display: block; cursor: pointer; }
  .who-am input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .who-am span { display: grid; gap: 1px; border: 1.5px solid var(--ink); padding: 9px 12px; background: var(--paper); transition: background .2s, color .2s; }
  .who-am b { font-size: 15px; } .who-am small { font-size: 12.5px; color: var(--ink-2); font-weight: 400; }
  .who-am input:checked + span { background: var(--mech); color: #fff; border-color: var(--mech); }
  .who-am input:checked + span small { color: rgba(255,255,255,.85); }
  .who-am input:focus-visible + span { outline: 3px solid var(--mech); outline-offset: 2px; }
  @media (max-width: 600px) { .arc3 { grid-template-columns: 1fr; } .arc { grid-template-columns: auto 1fr; align-items: center; gap: 10px; } .who-am { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .arc, .ck-big, .ck-sub, .clicked::before { transition: none !important; } .clicked.in .ck-big em { animation: none; } }

  /* ===== Explore: cards deal in like a hand ===== */
  #prod4 { perspective: 1200px; }
  #prod4 .prod { opacity: 0; transform: translateY(40px) rotateX(35deg) rotate(calc((var(--k) - 1.5) * 4deg)); transform-origin: bottom center; transition: opacity .5s, transform .7s cubic-bezier(.2,.9,.3,1.25), box-shadow .2s; transition-delay: calc(var(--k) * .15s); position: relative; overflow: hidden; }
  #prod4.in .prod { opacity: 1; transform: none; }
  #prod4 .prod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(46,74,125,.14) 50%, transparent 60%); transform: translateX(-120%); }
  #prod4.in .prod::after { animation: shine 1.2s ease calc(.8s + var(--k) * .15s) both; }
  #prod4 .prod:hover { box-shadow: 6px 6px 0 var(--mech); transform: translate(-3px, -3px); }
  @keyframes shine { to { transform: translateX(120%); } }

  /* ===== Community work: achievement ===== */
  .achv { margin-top: 46px; position: relative; background: #101C22; color: #E8ECE6; border: 2px solid #101C22; padding: 30px 28px 28px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px 26px; overflow: hidden; }
  .achv::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(174,186,211,.10), transparent 30%); animation: spinGlow 9s linear infinite; }
  .achv > * { position: relative; }
  .seal { width: 150px; height: 150px; color: #D9C38C; opacity: 0; transform: scale(2.2) rotate(-40deg); transition: opacity .3s .2s, transform .7s cubic-bezier(.2,.9,.3,1.4) .2s; }
  .seal svg { width: 100%; height: 100%; display: block; animation: spin 24s linear infinite; }
  .achv.in .seal { opacity: 1; transform: none; }
  .achv-head { align-self: center; }
  .achv-tag { font-size: 13px; font-weight: 800; color: #D9C38C; text-transform: uppercase; letter-spacing: .05em; }
  .achv-head h3 { margin: 6px 0 8px; font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4.2vw, 56px); line-height: .92; color: #fff; opacity: 0; transform: translateY(14px); transition: all .6s .5s; }
  .achv-head p { margin: 0; font-size: 17px; color: rgba(232,236,230,.85); opacity: 0; transition: opacity .6s .8s; }
  .achv-head p b { color: #fff; }
  .achv.in .achv-head h3 { opacity: 1; transform: none; }
  .achv.in .achv-head p { opacity: 1; }
  .papers { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .paper { position: relative; background: #F7F5EE; color: var(--ink); text-decoration: none; padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid #D9C38C; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transition: opacity .6s, transform .8s cubic-bezier(.2,.9,.3,1.1); }
  .paper:nth-child(1) { transform: translateX(-60px) rotate(-3deg); transition-delay: 1s; }
  .paper:nth-child(2) { transform: translateX(60px) rotate(3deg); transition-delay: 1.2s; }
  .achv.in .paper { opacity: 1; transform: none; }
  .paper:hover { transform: translateY(-4px) !important; }
  .paper b { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.25; }
  .paper .pk { color: #8A6D2B; }
  .paper .pt { font-family: Georgia, serif; font-style: italic; }
  .stamp { position: absolute; top: 12px; right: 12px; border: 3px solid #2E7D4F; color: #2E7D4F; font-weight: 900; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; transform: rotate(-12deg) scale(3); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
  .paper:nth-child(1) .stamp { transition-delay: 2s; } .paper:nth-child(2) .stamp { transition-delay: 2.4s; }
  .achv.in .stamp { transform: rotate(-12deg) scale(1); opacity: .92; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes spinGlow { to { transform: rotate(360deg); } }
  @media (max-width: 760px) {
    .achv { grid-template-columns: 1fr; justify-items: start; padding: 22px 16px; }
    .seal { width: 110px; height: 110px; }
    .papers { grid-template-columns: 1fr; }
    .paper b { font-size: 18px; padding-right: 90px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #prod4 .prod, .seal, .achv-head h3, .achv-head p, .paper, .stamp { transition: none !important; }
    .seal svg, .achv::before, #prod4.in .prod::after { animation: none !important; }
  }
  .paper b { padding-right: 110px; }
  .paper .pk { padding-right: 110px; }

  .creds { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .creds div { border: 2px solid var(--ink); background: #fff; padding: 12px 14px; display: grid; gap: 2px; }
  .creds b { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .85; color: var(--mech); }
  .creds span { font-size: 13.5px; color: var(--ink-2); }
  .bridge-band { margin-top: 36px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; }
  .bb-l, .bb-r { font-weight: 800; font-size: 15px; white-space: nowrap; }
  .bb-l { color: var(--tension); } .bb-r { color: var(--mech); }
  .bb-line { height: 6px; background: rgba(20,35,43,.12); position: relative; overflow: hidden; }
  .bb-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--tension), var(--mech)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.3,.7,.2,1); }
  .bridge-band.in .bb-line i { transform: scaleX(1); }
  .bb-claim { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4.4vw, 60px); line-height: .95; opacity: 0; transform: translateY(14px); transition: opacity .7s 1.2s, transform .7s 1.2s; }
  .bb-claim em { font-style: normal; color: var(--mech); }
  .bridge-band.in .bb-claim { opacity: 1; transform: none; }
  .for4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .for4 div { border: 2px solid var(--ink); background: #fff; padding: 14px 16px; display: grid; gap: 4px; align-content: start; box-shadow: inset 0 4px 0 var(--mech); }
  .for4 b { font-size: 17px; } .for4 span { font-size: 14px; color: var(--ink-2); }
  .batch-go { margin: 10px 0 0; font-size: 16px; } .batch-go b { color: var(--mech); }
  @media (max-width: 1000px) { .for4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .for4 { grid-template-columns: 1fr; } .creds b { font-size: 34px; } .creds span { font-size: 12px; } .bb-l, .bb-r { font-size: 12px; } }
  @media (prefers-reduced-motion: reduce) { .bb-line i, .bb-claim { transition: none !important; } }

  /* ===== Demo lecture ===== */
  .demo { margin-top: 30px; background: #0E1519; color: #E8ECE6; border: 2px solid #0E1519; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 20px 26px; align-items: center; scroll-margin-top: 70px; }
  .demo-tag { display: inline-block; font-size: 13px; font-weight: 800; color: #0E1519; background: #E8B640; padding: 3px 10px; }
  .demo-head h3 { margin: 10px 0 8px; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.4vw, 46px); line-height: .95; color: #fff; }
  .demo-head p { margin: 0; color: rgba(232,236,230,.85); font-size: 15.5px; }
  .demo-head p b { color: #fff; }
  .demo-frame { position: relative; border: 2px solid rgba(232,182,64,.6); box-shadow: 0 0 0 6px rgba(232,182,64,.1); background: #000; aspect-ratio: 16 / 9; }
  .demo-frame video { display: block; width: 100%; height: 100%; background: #000; }
  .demo-end { position: absolute; inset: 0; background: rgba(14,21,25,.92); display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 16px; }
  .demo-end[hidden] { display: none; }
  .demo-end p { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 38px); line-height: 1; color: #fff; }
  .demo-end p b { color: #E8B640; }
  .demo-replay { background: none; border: 0; color: rgba(232,236,230,.85); font-weight: 600; text-decoration: underline; }
  .demo-notes { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .demo-notes li { border-top: 2px solid #E8B640; padding-top: 8px; font-size: 14.5px; color: rgba(232,236,230,.85); }
  .demo-notes b { color: #fff; }
  @media (max-width: 900px) {
    .demo { grid-template-columns: 1fr; padding: 16px; }
    .demo-notes { grid-template-columns: 1fr; gap: 6px; }
  }

/* ================= Multi page additions ================= */
.sitenav ul a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--mech); }
@media (max-width: 1000px) {
  .sitenav ul { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; }
  .sitenav ul::-webkit-scrollbar { display: none; }
  .sitenav ul a { white-space: nowrap; font-size: 13.5px; }
  .sitenav .in { gap: 12px; }
}
body.subpage .sitenav { transform: none; top: 0; }
body.subpage main { padding-top: 58px; }
body.subpage .join { padding-top: 56px; }
.crumbs { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
.page-lede { margin: 14px 0 0; max-width: 62ch; font-size: 18.5px; color: var(--ink-2); }
.prose { max-width: 70ch; }
.prose p { margin: 0 0 14px; }
.prose h2 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.6vw, 44px); line-height: .95; margin: 46px 0 12px; }
.prose h3 { font-size: 20px; margin: 30px 0 6px; }
.faq-list { margin-top: 24px; border-top: 2px solid var(--ink); max-width: 860px; }
.faq-item { border-bottom: 1px solid rgba(20,35,43,.2); padding: 18px 2px; }
.faq-item h2 { margin: 0 0 6px; font-family: var(--body); font-weight: 700; font-size: 19px; line-height: 1.3; }
.faq-item p { margin: 0; color: var(--ink); }
.faq-item p + p { margin-top: 8px; }
.go-links { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.go-links a { border: 2px solid var(--ink); background: #fff; padding: 16px; text-decoration: none; display: grid; gap: 4px; transition: transform .15s; }
.go-links a:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--mech); }
.go-links b { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: .95; }
.go-links span { font-size: 14.5px; color: var(--ink-2); }
.go-links a.main { background: var(--mech); border-color: var(--mech); color: #fff; }
.go-links a.main span { color: rgba(255,255,255,.85); }
.syl-table { width: 100%; border-collapse: collapse; margin-top: 18px; background: #fff; border: 2px solid var(--ink); font-size: 15px; }
.syl-table th, .syl-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(20,35,43,.15); vertical-align: top; }
.syl-table th { background: var(--ink); color: var(--paper); font-size: 13.5px; }
.syl-table td:first-child { font-family: var(--display); font-weight: 900; font-size: 20px; width: 56px; }
.syl-table tr.phase td { background: #EEF1F7; font-weight: 700; color: var(--mech); font-size: 14px; }
.readmore { margin-top: 18px; border: 2px solid var(--ink); background: rgba(255,255,255,.7); padding: 0; }
.readmore summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--mech); }
.readmore .rm-body { padding: 4px 18px 16px; }
.readmore ol { margin: 0; padding-left: 20px; }
.readmore li { margin-bottom: 8px; }
.proof .readmore { background: rgba(232,236,230,.06); border-color: rgba(232,236,230,.5); }
.proof .readmore summary { color: var(--pb); }
.proof .readmore h3 { margin: 18px 0 4px; font-size: 18px; }
.proof .readmore p { color: var(--pi2); margin: 0 0 8px; }
.pillar { gap: 10px !important; }
.pillar .pil-row { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid rgba(20,35,43,.15); }
.pillar .pil-k { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pillar a { color: var(--mech); font-weight: 700; text-decoration: none; line-height: 1.3; }
.pillar a:hover { text-decoration: underline; }
.pillar .here { justify-self: start; background: var(--mech); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; }
.pillar .soon { color: var(--ink-2); font-weight: 600; }
.pillars-foot { margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; font-size: 13.5px; }
.pillars-foot div { display: grid; gap: 2px; }
.pillars-foot b { color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pillars-foot a { color: var(--ink); }
.pillars-foot .here { color: var(--mech); font-weight: 700; }
@media (max-width: 860px) {
  .go-links { grid-template-columns: 1fr 1fr; }
  .pillars-foot { grid-template-columns: 1fr 1fr; }
  .syl-table { font-size: 13.5px; }
  .syl-table th, .syl-table td { padding: 7px 8px; }
}
@media (max-width: 560px) { .go-links { grid-template-columns: 1fr; } }
/* ===== Self study tabs, three ways, books, udemy, testimonials ===== */
.sitenav ul a.ss { color: var(--mech); font-weight: 600; }
.sitenav ul a.ss::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tension); margin-right: 6px; vertical-align: middle; }
@media (min-width: 1001px) and (max-width: 1240px) { .sitenav ul { gap: 11px; } .sitenav ul a { font-size: 13px; } }
.ways { margin-top: 46px; }
.ways-row { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.way { border: 2px solid var(--ink); background: #fff; padding: 18px; text-decoration: none; color: var(--ink); display: grid; gap: 6px; align-content: start; transition: transform .15s, box-shadow .15s; }
.way:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--mech); }
.way .way-k { justify-self: start; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #EEF1F7; color: var(--mech); padding: 2px 8px; }
.way b { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: .9; }
.way .way-n { font-weight: 700; }
.way .way-d { font-size: 14.5px; color: var(--ink-2); }
.way .way-c { margin-top: 6px; font-weight: 700; color: var(--mech); }
.way.live { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.way.live .way-k { background: var(--tension); color: #fff; }
.way.live .way-d { color: rgba(236,238,233,.8); }
.way.live .way-c { color: #fff; }
.way[aria-current="page"] { outline: 3px solid var(--tension); outline-offset: 3px; }
.ss-banner { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; border: 2px dashed var(--mech); background: rgba(255,255,255,.6); padding: 12px 16px; font-size: 15px; }
.ss-banner b { color: var(--mech); text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.skill-vs { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); }
.skill-vs > div { padding: 20px; background: #fff; }
.skill-vs > div + div { background: var(--ink); color: var(--paper); }
.skill-vs h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .95; }
.skill-vs p { margin: 0 0 8px; }
.skill-vs > div + div h3 { color: #fff; }
.mint-key { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mint-key div { border: 2px solid var(--ink); background: #fff; padding: 12px 14px; }
.mint-key b { display: block; font-family: var(--display); font-weight: 900; font-size: 52px; line-height: .85; color: var(--tension); }
.mint-key span { font-weight: 700; }
.shelf { margin-top: 22px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 22px 16px 0; background: #fff; border: 2px solid var(--ink); border-bottom-width: 12px; }
.shelf a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); text-align: center; font-size: 12px; font-weight: 700; padding-bottom: 12px; }
.shelf img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 4px 4px 0 rgba(20,35,43,.25); transition: transform .2s; background: #ddd; }
.shelf a:hover img { transform: translateY(-8px) rotate(-2deg); }
.books { margin-top: 26px; display: grid; gap: 16px; }
.book { display: grid; grid-template-columns: 150px 1fr; gap: 22px; border: 2px solid var(--ink); background: #fff; padding: 18px; }
.book img { width: 150px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 5px 5px 0 var(--mech); background: #ddd; }
.book .bk-step { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tension); }
.book h3 { margin: 4px 0 4px; font-size: 22px; line-height: 1.2; }
.book .bk-sub { margin: 0 0 10px; color: var(--ink-2); font-style: italic; }
.book .bk-hook { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; color: var(--mech); }
.book .bk-gain { margin: 0 0 12px; }
.btn-amz { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; padding: 9px 14px; }
.btn-amz:hover { background: var(--mech); }
.cta-band { margin-top: 30px; background: var(--mech); color: #fff; padding: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cta-band p { margin: 0; font-size: 18px; max-width: 60ch; }
.cta-band a { background: #fff; color: var(--mech); font-weight: 800; text-decoration: none; padding: 10px 16px; }
.ud-hero { margin-top: 24px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; border: 2px solid var(--ink); background: #fff; padding: 18px; }
.ud-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--ink); background: #ddd; }
.ud-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ud-stats div { border: 2px solid var(--ink); background: #fff; padding: 12px; }
.ud-stats b { display: block; font-family: var(--display); font-weight: 900; font-size: 38px; line-height: .9; color: var(--tension); }
.ud-stats span { font-size: 13.5px; color: var(--ink-2); }
.ticks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: var(--mech); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.ud-sec { margin-top: 12px; counter-reset: s; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ud-sec li { counter-increment: s; border: 1.5px solid var(--ink); background: #fff; padding: 10px 12px 10px 48px; position: relative; font-weight: 600; }
.ud-sec li::before { content: counter(s); position: absolute; left: 0; top: 0; bottom: 0; width: 36px; background: var(--ink); color: var(--paper); font-family: var(--display); font-weight: 900; font-size: 20px; display: grid; place-items: center; }
.t-hero { margin-top: 20px; background: var(--ink); color: var(--paper); padding: 28px; position: relative; }
.t-hero q { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; quotes: "\201C" "\201D"; }
.t-hero .who { margin-top: 12px; font-size: 15px; color: rgba(236,238,233,.8); }
.t-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.t-cards { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.t-card { border: 2px solid var(--ink); background: #fff; padding: 20px; display: grid; gap: 12px; align-content: start; position: relative; }
.t-card::before { content: "\201C"; position: absolute; top: -6px; right: 14px; font-family: var(--display); font-weight: 900; font-size: 96px; line-height: 1; color: rgba(46,74,125,.18); }
.t-card blockquote { margin: 0; font-size: 16.5px; }
.t-card .who { display: flex; gap: 12px; align-items: center; }
.t-card .who img, .t-card .who .ini { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); flex: none; }
.t-card .who .ini { display: grid; place-items: center; background: var(--mech); color: #fff; font-family: var(--display); font-weight: 900; font-size: 22px; }
.t-card .who b { display: block; }
.t-card .who span { font-size: 13.5px; color: var(--ink-2); }
.words { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.words span { border: 1.5px solid var(--ink); background: #fff; padding: 5px 12px; font-family: var(--display); font-weight: 800; font-size: 20px; }
.words span:nth-child(3n) { background: var(--ink); color: var(--paper); }
.words span:nth-child(4n) { background: #EEF1F7; color: var(--mech); border-color: var(--mech); }
.notes { margin-top: 14px; columns: 3 260px; column-gap: 14px; }
.note { break-inside: avoid; margin: 0 0 14px; background: #FFFBEA; border: 1.5px solid var(--ink); padding: 14px 16px; box-shadow: 4px 4px 0 rgba(20,35,43,.15); }
.note:nth-child(2n) { transform: rotate(.6deg); }
.note:nth-child(3n) { transform: rotate(-.6deg); background: #F4F7FB; }
.note p { margin: 0 0 8px; font-size: 15.5px; }
.note cite { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--mech); }
.t-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 860px) {
  .ways-row, .t-stats { grid-template-columns: 1fr; }
  .skill-vs, .ud-hero, .t-cards, .ud-sec { grid-template-columns: 1fr; }
  .mint-key, .ud-stats { grid-template-columns: 1fr 1fr; }
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .book { grid-template-columns: 96px 1fr; gap: 14px; }
  .book img { width: 96px; }
}
@media (max-width: 480px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } .book h3 { font-size: 19px; } }
.ud-hero > *, .book > *, .skill-vs > *, .t-card, .way { min-width: 0; }
.ud-hero img, .shelf img, .t-card img { max-width: 100%; height: auto; }
.book h3, .book .bk-sub { overflow-wrap: anywhere; }
.btn-amz { max-width: 100%; }
.t-card blockquote { padding-right: 34px; }
.book img, .shelf img { aspect-ratio: auto; height: auto; object-fit: contain; background: transparent; }
.book { align-items: start; }
/* ===== 31 Oct: nav tags, careers, corporate, free course, calculators, one pager, books series ===== */
.sitenav ul a.free { background: var(--tension); color: #fff !important; padding: 3px 8px; font-weight: 700; }
.sitenav ul a.hot { color: var(--tension); font-weight: 700; }
.series-jump { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.series-jump a { border: 2px solid var(--ink); background: #fff; padding: 12px 14px; text-decoration: none; color: var(--ink); display: grid; gap: 2px; }
.series-jump a:hover { box-shadow: 4px 4px 0 var(--mech); }
.series-jump b { font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1; }
.series-jump span { font-size: 13.5px; color: var(--ink-2); }
.bucket-key { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
.soon-band { margin-top: 16px; border: 2px dashed var(--tension); background: #fff; padding: 20px; display: grid; gap: 8px; justify-items: start; }
.soon-band .soon-tag { background: var(--tension); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; }
.soon-band b { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: .9; }
.soon-band p { margin: 0; max-width: 60ch; }
.soon-band a { font-weight: 700; color: var(--mech); }
.career-hero { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.career-hero div { background: var(--ink); color: var(--paper); padding: 16px; }
.career-hero b { display: block; font-family: var(--display); font-weight: 900; font-size: 54px; line-height: .9; color: #fff; }
.career-hero span { font-size: 14px; color: rgba(236,238,233,.85); }
.career-nav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.career-nav a { border: 1.5px solid var(--ink); background: #fff; padding: 6px 10px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); }
.career-nav a:hover { background: var(--ink); color: #fff; }
.careers { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.career { border: 2px solid var(--ink); background: #fff; padding: 20px; position: relative; scroll-margin-top: 80px; min-width: 0; }
.career .c-num { position: absolute; top: 12px; right: 16px; font-family: var(--display); font-weight: 900; font-size: 42px; line-height: 1; color: rgba(46,74,125,.2); }
.career h3 { margin: 0 46px 2px 0; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; }
.career .c-sub { margin: 0 0 10px; color: var(--tension); font-weight: 700; }
.career p { margin: 0 0 8px; font-size: 15.5px; }
.career .c-where { margin: 10px 0 0; font-size: 13.5px; color: var(--mech); font-weight: 700; }
.corp-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.corp-grid div { border: 2px solid var(--ink); background: #fff; padding: 16px 18px; }
.corp-grid b { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; }
.corp-grid p { margin: 6px 0 0; }
.lesson-index { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 4px; font-weight: 600; }
.lessons { margin-top: 18px; display: grid; gap: 14px; }
.lesson { border: 2px solid var(--ink); background: #fff; padding: 20px 22px; scroll-margin-top: 80px; max-width: 860px; }
.lesson .l-num { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tension); }
.lesson h3 { margin: 4px 0 10px; font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1; }
.lesson p { margin: 0 0 10px; }
.lesson p:last-child { margin: 0; background: #EEF1F7; padding: 10px 12px; font-weight: 600; }
.calc { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); background: #fff; }
.calc-in { padding: 18px; display: grid; gap: 12px; align-content: start; }
.calc-in label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.calc-in input { font: inherit; font-size: 18px; padding: 10px 12px; border: 2px solid var(--ink); background: var(--paper); min-height: 44px; box-sizing: border-box; width: 100%; }
.calc-in input:focus { outline: 3px solid var(--mech); outline-offset: 1px; }
.calc-out { background: var(--ink); color: var(--paper); padding: 18px; display: grid; gap: 12px; align-content: start; }
.calc-out span { display: block; font-size: 13.5px; color: rgba(236,238,233,.8); }
.calc-out b { display: block; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: #fff; overflow-wrap: anywhere; }
.calc-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc-grid a { border: 2px solid var(--ink); background: #fff; padding: 16px; text-decoration: none; color: var(--ink); display: grid; gap: 4px; }
.calc-grid a:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--mech); }
.calc-grid b { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; }
.calc-grid span { font-size: 14px; color: var(--ink-2); }
.onepager { margin-top: 40px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; border: 2px solid var(--ink); background: #fff; padding: 18px; }
.onepager .op-thumb img { width: 100%; height: auto; display: block; border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--mech); }
.onepager p { margin: 6px 0 12px; }
.op-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.op-btns .btn-amz { border: 0; cursor: pointer; font: inherit; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.op-btns .op-wa { background: #1F7A4D; }
.home-bands { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-bands a { text-decoration: none; padding: 20px; display: grid; gap: 6px; align-content: start; border: 2px solid var(--ink); color: var(--ink); background: #fff; }
.home-bands a:hover { box-shadow: 5px 5px 0 var(--mech); }
.home-bands a.hl { background: var(--tension); border-color: var(--tension); color: #fff; }
.home-bands a.dk { background: var(--ink); color: var(--paper); }
.home-bands .hb-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.home-bands b { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .95; }
.home-bands .hb-d { font-size: 15px; }
.home-bands .hb-c { font-weight: 800; margin-top: 4px; }
@media (max-width: 860px) {
  .series-jump, .careers, .corp-grid, .calc, .home-bands, .career-hero, .bucket-key { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr 1fr; }
  .onepager { grid-template-columns: 120px 1fr; }
}
@media (max-width: 480px) { .calc-grid { grid-template-columns: 1fr; } .onepager { grid-template-columns: 1fr; } .onepager .op-thumb { max-width: 220px; } }
.start-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.start-row span { color: var(--ink-2); font-size: 14.5px; }
.start-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; background: var(--tension); color: #fff; font-weight: 800; font-size: 19px; text-decoration: none; box-shadow: 5px 5px 0 var(--ink); }
.start-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
.lesson ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-weight: 600; }
.sitenav ul a.ss { position: relative; margin-left: 12px; }
.sitenav ul a.ss::before { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); margin: 0; }