/* DDA Design System — mobile-first base. Tablet/desktop refine via min-width queries below. */
:root{
  --navy-950:#060d17;--navy-900:#081426;--navy-800:#0B1B30;--navy-700:#0F2440;--navy-600:#15304F;
  --ink:#122F48;--line:#1E3854;--line-soft:#16283d;
  --ivory:#F6F3EC;--ivory-2:#ECE6D6;--paper:#FFFDF8;--white:#F8FAFC;
  --blue:#0B6FAE;--blue-2:#0DA6D9;--teal:#189B92;--gold:#D9A441;--gold-soft:#E8C685;
  --cta-blue:#0d4fb0;--cta-blue-2:#2f74d6;
  --muted:#93A6BA;--muted-2:#5B6B7E;--green:#4FBE85;--red:#D97373;
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;
  --shadow-sm:0 6px 18px rgba(3,8,18,.22);
  --shadow-md:0 18px 44px rgba(3,8,18,.32);
  --shadow-lg:0 30px 70px rgba(3,8,18,.4);
  --ease:cubic-bezier(.22,.68,0,1);
  --gap:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy-950);color:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.02em}
h1{font-size:clamp(30px,7vw,64px);line-height:1.06;margin-bottom:14px}
h2{font-size:clamp(24px,5.5vw,44px);line-height:1.12}
h3{font-size:19px;line-height:1.3;font-weight:700}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--gold);color:var(--navy-950)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:6px}

/* ---------- Editorial photography slot ----------
   Placeholder visual until licensed DDA photography is supplied — swap the
   inner content for an <img> without touching layout. Never a broken image. */
.photo-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.photo-frame .icon{width:15%;height:15%;min-width:22px;min-height:22px;max-width:38px;max-height:38px;opacity:.55}
.photo-frame span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;opacity:.6}
.photo-frame.light{background:linear-gradient(150deg,#efe6cf,#ddd0ab);color:#8a7346}
.photo-frame.dark{background:linear-gradient(150deg,var(--navy-700),var(--navy-900));color:var(--muted)}
.photo-frame.ratio-portrait{aspect-ratio:4/5}
.photo-frame.ratio-wide{aspect-ratio:16/10}
.photo-frame.ratio-square{aspect-ratio:1}

/* Real photography layer for .dda-aperture/.dda-community-visual/.terminal-lead-photo/
   .brvm-editorial-visual: the <img>+scrim are inserted as the FIRST children so they
   paint below every other (already-positioned) child in DOM order, without needing
   explicit z-index on the pre-existing decorative/text elements. */
.photo-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,15,.15),rgba(4,7,15,.85));pointer-events:none}
.photo-scrim.light{background:linear-gradient(180deg,rgba(255,252,244,.2),rgba(255,252,244,.86))}

/* "Faire vivre les pages" — a shared, subtle hover-lift for clickable card
   rows app-wide, echoing .journey-current's existing hover treatment instead
   of inventing a second motion language. */
.library-entry,.journal-entry-card,.broker-row,.plan-card{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.library-list:hover .library-entry:not(:hover){opacity:.82}
.broker-row:hover,.plan-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.journal-entry-card:hover{transform:translateX(2px)}
@media (prefers-reduced-motion: reduce){
  .library-entry,.journal-entry-card,.broker-row,.plan-card{transition:none}
  .broker-row:hover,.plan-card:hover{transform:none}
  .journal-entry-card:hover{transform:none}
}

/* ---------- Icons ---------- */
.icon{width:1.3em;height:1.3em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-fill{fill:currentColor;stroke:none}

/* ---------- Top banner ---------- */
/* Honest disclosure (no real market data, device-only persistence), reframed
   from an internal QA-style "PROTOTYPE" alert into a calm, permanent product
   fact — same truth, no longer looking like a test-build watermark. */
.prototype-banner{
  position:sticky;top:0;z-index:40;background:var(--paper,#F2ECDA);color:#6b5d34;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-align:center;
  padding:7px 10px;border-bottom:1px solid #DCD0AF;
}

/* ---------- App shell / layout ---------- */
.app-shell{min-height:100vh;display:block}
.sidebar{display:none}
main{min-width:0;padding-bottom:calc(84px + var(--safe-b))}
.academy-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1280px;margin:0 auto;padding:24px 18px calc(92px + var(--safe-b));border-top:1px solid var(--line-soft);color:var(--muted);font-size:12px}
.academy-footer-brand{display:grid;gap:3px;min-width:0}
.academy-footer-brand strong{color:var(--gold-soft);font-family:Georgia,serif;font-size:20px;letter-spacing:-.05em}
.academy-footer-brand span{color:var(--muted);font-size:11px}
.academy-footer-links{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.academy-footer a{color:var(--gold-soft);text-decoration:none;white-space:nowrap}
.academy-footer a:hover,.academy-footer a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.academy-footer small{max-width:34ch;color:var(--muted-2);line-height:1.45;text-align:right}
@media(max-width:720px){.academy-footer{display:grid;gap:14px;padding:22px 16px calc(92px + var(--safe-b));}.academy-footer-links{justify-content:flex-start;gap:8px 14px}.academy-footer small{text-align:left;max-width:48ch}}

/* Topbar (mobile default) */
.topbar{
  position:sticky;top:29px;z-index:30;display:flex;align-items:center;gap:14px;
  height:64px;padding:0 16px;background:rgba(5,11,20,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.mobile-brand{display:flex;text-align:left;line-height:1;gap:2px;flex-direction:column;border:0;background:none;padding:0;cursor:pointer;appearance:none}
.mobile-brand b{font-family:Georgia,serif;font-size:21px;letter-spacing:-.05em;background:linear-gradient(135deg,var(--cta-blue-2),var(--cta-blue) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.mobile-brand small{font-size:7px;letter-spacing:.22em;color:var(--muted)}
.context{display:none}
.network-state{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-left:auto}
.network-state i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(79,190,133,.14)}
.network-state.offline i{background:var(--gold);box-shadow:0 0 0 4px rgba(217,164,65,.14)}
.network-state span{display:none}
.icon-button{position:relative;border:1px solid var(--line);width:40px;height:40px;min-width:40px;border-radius:50%;display:grid;place-items:center;background:transparent;cursor:pointer}
/* Learning Focus Mode — toggled by showView() (app.js) purely via this body class, no
   new routing. Calms the topbar's one "leave/distract" affordance while inside a
   lesson (real exit stays available: sidebar nav + the lesson's own back-link);
   DDA's own identity — logo, context title — stays fully visible. */
body.lesson-focus .icon-button{display:none!important}

/* Acquisition V1 — #landing is a public marketing surface, not an app screen:
   hide every piece of authenticated chrome (sidebar/profile/plan, topbar,
   mobile nav, prototype banner) while it's active. Scoped via this body
   class only — no new routing concept, same pattern as lesson-focus above. */
body.public-shell .prototype-banner,
body.public-shell .topbar,
body.public-shell .sidebar,
body.public-shell .mobile-nav{display:none!important}
body.public-shell main{padding-bottom:0}
.notification-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);right:8px;top:8px;box-shadow:0 0 0 2px var(--navy-950)}

/* ---------- Views ---------- */
.view{display:none;max-width:1280px;margin:0 auto;padding:26px 18px 40px}
.view.active{display:block;animation:dda-enter .32s var(--ease) both}
@keyframes dda-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:var(--muted);margin:0 0 6px;font-weight:800;display:flex;align-items:center;gap:6px}
.gold{color:var(--gold-soft)}
.section-intro{margin-bottom:28px;max-width:640px}
.section-intro>p:last-child{color:var(--muted);font-size:15px}

/* ---------- Buttons ---------- */
.primary-action,.secondary-action{border:0;border-radius:var(--r-sm);padding:15px 18px;font-weight:800;cursor:pointer;min-height:50px;transition:transform .15s var(--ease),filter .15s var(--ease),background .15s}
.primary-action{background:linear-gradient(135deg,var(--cta-blue-2),var(--cta-blue));color:#fff;box-shadow:0 12px 28px rgba(13,79,176,.32);display:inline-flex;align-items:center;justify-content:center;gap:14px;width:100%}
.primary-action span{font-size:19px;transition:transform .2s var(--ease)}
.primary-action:hover span{transform:translateX(3px)}
.primary-action:active{transform:scale(.98)}
.secondary-action{background:transparent;color:var(--white);border:1px solid var(--line);width:100%}
.secondary-action:hover{border-color:var(--blue-2);color:var(--blue-2);transform:translateY(-1px)}
.secondary-action:active{transform:translateY(0)}
.text-action{border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0}
#access .dark-action{color:var(--ink);border-color:#8b8579}

/* ---------- Sidebar nav item / mobile nav shared look ---------- */
.nav-item{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:13px;color:var(--muted);text-align:left;background:none;border:0;font:inherit;cursor:pointer;width:100%}
.nav-item .icon{width:20px;height:20px}
.nav-item:hover,.nav-item.active{background:var(--navy-700);color:var(--white)}
.nav-item.active{box-shadow:inset 3px 0 var(--gold)}
.plan-label{display:inline-block;color:var(--gold);font-size:12px;margin:0 8px 15px}
.profile-chip{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.profile-chip b{font-weight:800}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ivory);color:var(--ink);font-weight:800}
.profile-chip small{color:var(--muted)}
/* ---------- Mobile bottom nav ---------- */
.mobile-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(68px + var(--safe-b));padding-bottom:var(--safe-b);
  background:rgba(6,12,22,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line-soft);
}
.mobile-nav button{border:0;background:none;color:var(--muted);font-size:10px;font-weight:700;display:grid;place-content:center;gap:3px;min-height:44px;cursor:pointer}
.mobile-nav button .icon{width:20px;height:20px;margin:0 auto}
.mobile-nav button.active{color:var(--gold)}

/* Fil de maîtrise — Learning: same bead-chain signature as the Terminal, same real
   state (updateLessonLoop() in app.js still just toggles .done/.now on these <li>s —
   nothing here changes what drives it), a rail of real steps instead of a decorative bar. */
.lesson-loop{display:flex;gap:0;flex-wrap:wrap;align-items:center;margin:18px 0 0;list-style:none;padding:0;font-size:11px;color:#8a7f6a;font-weight:700;letter-spacing:.03em}
.lesson-loop li{display:flex;align-items:center;gap:7px}
.lesson-loop li:not(:last-child):after{content:"";width:16px;height:1px;background:#DCD0AF;margin:0 10px;flex:none;transition:background-color .25s ease}
.lesson-loop li.done:not(:last-child):after{background:var(--teal)}
/* A real step marker (checkmark when done, filled ring when active) instead of a
   plain dot — the learner should be able to read "where am I, what's finished"
   from this rail alone, at a glance, the way a course-platform lesson tree does. */
.loop-bead{position:relative;width:16px;height:16px;border-radius:50%;background:transparent;border:1.5px solid #DCD0AF;flex:none;box-sizing:border-box;display:block;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.lesson-loop li.done .loop-bead{background:var(--teal);border-color:var(--teal)}
.lesson-loop li.done .loop-bead::after{content:"";position:absolute;left:4px;top:2px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}
.lesson-loop li.now .loop-bead{width:18px;height:18px;background:var(--ivory);border:2px solid var(--gold);transform:scale(1.05)}
.lesson-loop li.now{color:var(--ink)}
.lesson-loop li.done{color:#6b6250}
.pill{background:var(--navy-950);color:var(--white);padding:6px 11px;border-radius:100px}
.lesson-index{color:var(--gold-soft)!important;font-size:11px;font-weight:900;letter-spacing:.13em}
.progress-ring{
  --progress:0;position:relative;width:78px;aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle closest-side,var(--ivory) 76%,transparent 79% 99%),conic-gradient(var(--gold) calc(var(--progress)*1%),rgba(20,22,43,.16) 0);
  transition:background 1.1s var(--ease);
}
.progress-ring strong{font-family:Georgia,serif;font-size:18px;display:block;color:var(--ink);font-variant-numeric:tabular-nums}
.progress-ring span{font-size:10px;color:#6b6f80;display:none}
.panel{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--navy-800)}
.panel-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.panel-heading .icon{color:var(--gold-soft)}
.time{color:var(--muted);font-size:12px;white-space:nowrap}
.future-label{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--gold-soft);font-size:11px;display:flex;align-items:center;gap:6px}

/* ---------- Terminal Master — Institutional Intelligence (Design Gate #3 HYBRID) ----------
   Scoped to #dashboard only (mandat "Terminal Master Implementation"): the shared app
   chrome (.sidebar/.topbar) stays exactly as it is everywhere else — the same
   light-canvas-inside-dark-chrome pattern already used for #access, not a new one. */
#dashboard{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#dashboard .eyebrow.gold{color:var(--gold-soft)}

/* Signature 1 — the mastery thread: a bead chain, never a generic progress bar.
   Directly extends the reaction-dot language already shipped in Support & Résistance. */
.terminal-thread{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;margin:0 0 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px}
.terminal-thread-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(244,247,252,.6);min-width:0}
.terminal-thread-beads{display:flex;align-items:center;gap:5px}
.terminal-thread-beads i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);display:block;box-sizing:border-box}
.terminal-thread-beads i.on{background:var(--gold-soft)}
.terminal-thread-beads i.now{width:11px;height:11px;background:var(--navy-950);border:2px solid var(--gold-soft)}
.terminal-thread-next{margin-left:auto;font-size:11px;color:rgba(244,247,252,.6);max-width:100%}
.terminal-thread-next b{color:var(--gold-soft);font-weight:700}
/* No base rule existed for this child outside the <700px grid layout, so on
   desktop its <span>/<strong> rendered with browser-default inline spacing —
   "Preuve récenteÀ construire" glued together, no visible separation. */
.terminal-thread-proof{display:flex;flex-direction:column;gap:2px;margin-left:auto;text-align:right}
.terminal-thread-proof span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:rgba(244,247,252,.55)}
.terminal-thread-proof strong{font-family:Georgia,serif;font-size:13px;font-weight:700;color:#fff}

/* The "DDA / LEARNING OPERATING SYSTEM · Observation guidée · Preuve locale ·
   Sans signal" line had no CSS at all anywhere — plain default inline text
   with no separation between its parts. Turned into a small kicker plus
   distinct chips, reusing the existing .pill visual language (padding,
   radius) instead of inventing a new one. */
.dashboard-operating-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.dashboard-operating-kicker{font:700 10px/1 ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}
.dashboard-operating-separator{width:1px;height:12px;background:rgba(244,247,252,.18);flex:none}
.dashboard-operating-line span:not(.dashboard-operating-kicker):not(.dashboard-operating-separator){padding:4px 11px;border:1px solid rgba(244,247,252,.14);border-radius:100px;font-size:11px;color:rgba(244,247,252,.72);background:rgba(255,255,255,.04)}

.terminal-entry{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:24px}
.terminal-entry h1{font-size:clamp(22px,5vw,26px);color:#fff}
.terminal-entry #personalized-next{color:rgba(244,247,252,.68);font-size:14px;max-width:560px}
.terminal-entry-state{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(244,247,252,.55);margin:0}
.terminal-entry-state strong{color:#fff;font-family:Georgia,serif;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}

/* Signature-adjacent — the lead story: Primary Action as interactive editorial moment,
   not a card. Only #module-ring keeps its dark radial styling (reused as-is). */
.terminal-lead{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:28px}
/* Grid items default to min-width:auto, refusing to shrink below their content's
   intrinsic width — and .terminal-lead-photo/.terminal-family-photo also carry
   a min-height plus aspect-ratio, which grows the box's WIDTH to satisfy the
   ratio once min-height wins, past the narrow-phone grid track. width:100%
   pins them to the track so aspect-ratio derives height from that instead. */
.terminal-lead>*,.terminal-family>*{min-width:0}
.terminal-lead-photo,.terminal-family-photo{width:100%}
.terminal-lead-kicker{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.terminal-lead-kicker .lesson-index{color:rgba(244,247,252,.55)!important}
.terminal-lead h2{font-size:clamp(22px,5vw,28px);color:#fff;margin-bottom:10px;max-width:520px}
.terminal-lead>div>p:not(.terminal-lead-kicker){color:rgba(244,247,252,.68);font-size:14px;max-width:460px;margin-bottom:16px}
.terminal-lead-why{display:flex;align-items:flex-start;gap:8px;color:rgba(244,247,252,.6)!important;font-size:12.5px!important;max-width:440px!important;margin-bottom:14px!important;line-height:1.5}
.terminal-lead-why .icon{flex:none;width:15px;height:15px;margin-top:1px;color:var(--gold-soft)}
.terminal-lead-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.terminal-lead-go{background:none;border:0;border-bottom:2px solid var(--gold);color:#fff;font:inherit;font-weight:800;font-size:13.5px;padding:0 0 2px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
#terminal-lead-secondary{width:auto;align-self:flex-start;min-height:44px;padding:10px 16px}
.terminal-lead-meta{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap}
.terminal-lead-meta div{display:grid;gap:2px}
.terminal-lead-meta strong{font-family:Georgia,serif;font-size:16px;color:#fff}
.terminal-lead-meta span{font-size:10.5px;color:rgba(244,247,252,.55);text-transform:uppercase;letter-spacing:.04em}
.terminal-lead-photo{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--navy-700),var(--navy-900));display:flex;align-items:flex-end;padding:16px;color:var(--ivory)}
.terminal-lead-photo .progress-ring{position:absolute;top:14px;right:14px;width:58px}
.terminal-lead-photo span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;line-height:1.4}

/* The Home/Terminal seam: "Aujourd'hui" (thread + greeting + one lead action,
   above) answers today's question fast; everything below this line is the
   deeper Terminal console (market intelligence, journal, skillmap, family,
   Premium) — same route, same page, but the reconstruction gives it its own
   quiet identity instead of stacking every zone with equal weight. */
.terminal-divider{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-top:8px;margin-bottom:24px;border-top:1px solid rgba(255,255,255,.14)}
.terminal-divider-label{font-family:Georgia,serif;font-size:13px;color:var(--gold-soft);padding-top:14px;flex:none}
.terminal-divider p{margin:0;padding-top:14px;color:rgba(244,247,252,.55);font-size:12.5px}

/* Market Intelligence — deeper than a link, still no new data source */
.terminal-mi{padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:28px}
.terminal-mi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.terminal-mi-head h3{font-size:18px;color:#fff;margin:2px 0 0}
.terminal-mi-head .text-action{color:var(--gold-soft);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;min-height:44px}
.terminal-mi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.terminal-mi-idx{background:rgba(255,255,255,.03);padding:14px 16px}
.terminal-mi-idx .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.terminal-mi-idx b{font-size:13px;color:#fff}
.terminal-mi-idx .badge{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:rgba(244,247,252,.55);white-space:nowrap}
.terminal-mi-idx svg{width:100%;height:22px;display:block}
.terminal-mi-idx path{fill:none;stroke:var(--teal);stroke-width:1.6}

/* Journal (real note or honest empty state) + Competency profile — never a second card grid */
.terminal-two{display:grid;grid-template-columns:1fr;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:28px}
.terminal-two h4{font-size:16px;color:#fff;margin:2px 0 12px}
.terminal-journal-note{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.terminal-journal-note p{font-family:Georgia,serif;font-size:13.5px;font-style:italic;color:#fff;line-height:1.5;margin:0}
.terminal-journal-note small{display:block;margin-top:8px;color:rgba(244,247,252,.55);font-size:10.5px;font-style:normal;font-family:Inter,sans-serif}
.terminal-two .text-action{background:none;border:0;padding:0;font:inherit;font-weight:800;font-size:12px;color:#fff;border-bottom:1.5px solid var(--gold);cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.terminal-skillmap{display:grid;gap:10px}
.terminal-skillmap-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.terminal-skillmap-row span{font-size:13px;color:#fff}
.terminal-skillmap-row small{color:rgba(244,247,252,.55);font-size:11px}
.terminal-skillmap-row .terminal-thread-beads i{width:7px;height:7px}
.terminal-skillmap-row .terminal-thread-beads i.now{width:9px;height:9px}

/* DDA Family — the human moment. Honest preview only, never a fake member/count. */
.terminal-family{padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:28px;display:grid;grid-template-columns:1fr;gap:20px}
.terminal-family-photo{aspect-ratio:16/7}
.terminal-family-copy h2{font-size:clamp(20px,4.6vw,26px);color:#fff;margin-bottom:10px}
.terminal-family-copy p{color:rgba(244,247,252,.68);font-size:13.5px;margin-bottom:14px;max-width:420px}
.terminal-family .future-label{border-top:0;padding-top:0;margin-top:0;color:var(--gold-soft)}

/* Signature 2 — the DDA aperture: a gold-lit surface that pierces the dark canvas
   per screen, always asymmetric, reserved for real depth (Premium here). */
.terminal-aperture{background:linear-gradient(120deg,rgba(217,164,65,.16),rgba(217,164,65,.03));border:1px solid rgba(217,164,65,.28);border-radius:14px;padding:24px 22px;color:#EDE7D8;display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.terminal-aperture h3{font-size:17px;color:#F8F5EC;margin:6px 0 8px}
.terminal-aperture p{font-size:13px;color:#B9C2D2;margin:0}
.terminal-aperture-go{background:none;border:0;padding:0;font:inherit;font-weight:800;font-size:12.5px;color:#F3E7CE;border-bottom:1.5px solid var(--gold-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:44px}

.terminal-tools{display:grid;grid-template-columns:1fr;gap:10px}
.terminal-tools button{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;text-align:left;font:inherit;cursor:pointer;min-height:44px;color:#fff}
.terminal-tools strong{display:block;font-size:13px;font-weight:700}
.terminal-tools small{color:rgba(244,247,252,.55);font-size:11.5px}
#dashboard .chevron-row-icon{background:rgba(47,116,214,.08);border-color:rgba(47,116,214,.45);color:var(--cta-blue-2)}
#dashboard .chevron-row-arrow{color:rgba(244,247,252,.5)}

/* Chevron row — icon badge + title/description + chevron, reused wherever a
   row leads somewhere else (quick access, FAQ, library entries). */
.view-photo-band{position:relative;overflow:hidden;border-radius:18px;min-height:120px;max-height:150px;margin-bottom:22px;display:flex;align-items:flex-end;padding:16px}
.view-photo-band .photo-scrim{background:linear-gradient(180deg,rgba(5,11,20,.72),rgba(5,11,20,.95))}
.view-photo-band-copy{position:relative;z-index:1;margin:0;color:#fff;font-family:var(--dda-serif);font-size:clamp(15px,3.4vw,19px);font-weight:600;max-width:34ch;line-height:1.3}
@media(min-width:700px){.view-photo-band{min-height:160px;max-height:190px;padding:26px}}
#brokers .view-photo-band .photo-fill{object-position:50% 14%}

.chevron-row{display:flex;align-items:center;gap:14px;transition:border-color .15s,transform .15s}
.chevron-row:hover{border-color:var(--cta-blue-2);transform:translateX(2px)}
.chevron-row-icon{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(13,79,176,.06);border:1.5px solid rgba(13,79,176,.35);color:var(--cta-blue)}
.chevron-row-icon .icon{width:19px;height:19px}
.chevron-row-body{flex:1;min-width:0;display:grid;gap:2px}
.chevron-row-arrow{flex:none;width:16px;height:16px;color:#8a7f6a}
@media (prefers-reduced-motion: reduce){.chevron-row{transition:none}.chevron-row:hover{transform:none}}

/* ---------- Communauté (aperçu honnête, aucun backend réel) ---------- */
.community-view{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
.community-view .eyebrow{color:rgba(244,247,252,.5)}
.community-hero{position:relative;overflow:hidden;border-radius:20px;min-height:220px;display:flex;align-items:flex-end;padding:22px}
.community-hero-copy{position:relative;z-index:1}
.community-hero-copy h1{color:#fff;font-family:var(--dda-sans);font-weight:800;margin:6px 0;font-size:clamp(24px,5vw,34px)}
.community-hero-copy p{color:rgba(244,247,252,.72);max-width:44ch;margin:0}

.community-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.community-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border:1px solid rgba(255,255,255,.14);border-radius:14px;color:rgba(244,247,252,.85);font-size:11px;font-weight:700;text-align:center;background:rgba(255,255,255,.02)}
.community-tile .icon{color:var(--cta-blue-2);width:22px;height:22px}
.community-tiles-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;color:rgba(244,247,252,.55);font-size:12px}
.community-tiles-note .icon{flex:none;width:15px;height:15px;margin-top:1px}

.community-featured{margin-top:28px}
.community-featured-card{display:flex;align-items:center;gap:18px;margin-top:14px;padding:22px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(13,79,176,.16),rgba(13,79,176,.02))}
.community-featured-copy h2{color:#fff;font-size:19px;margin-bottom:6px}
.community-featured-copy p{color:rgba(244,247,252,.65);font-size:13.5px;margin-bottom:14px;max-width:40ch}
.community-featured-copy .primary-action{width:auto}
.community-featured-icon{flex:none;width:52px;height:52px;border-radius:14px;background:rgba(217,164,65,.14);color:var(--gold-soft);display:grid;place-items:center}
.community-featured-icon .icon{width:26px;height:26px}

.community-spaces{margin-top:28px}
.community-spaces-list{display:grid;gap:10px;margin-top:14px}
.community-spaces-list .chevron-row{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;color:#fff;width:100%;text-align:left;font:inherit;cursor:pointer;min-height:44px}
.community-spaces-list .chevron-row-body small{color:rgba(244,247,252,.55)}
.community-spaces-list .chevron-row-icon{background:rgba(13,79,176,.08);border-color:rgba(47,116,214,.45)}
.community-spaces-list .chevron-row:hover{border-color:var(--cta-blue-2)}

.community-cta{margin-top:30px;text-align:center;padding-bottom:8px}
.community-cta .primary-action{width:auto;min-width:240px}
.community-cta .disclosure{margin-top:10px;color:rgba(244,247,252,.5);font-size:12px}

.future-label-link{border:0;background:none;padding:0;font:inherit;text-align:left;cursor:pointer;width:100%;justify-content:space-between}
.future-label-link .chevron-row-arrow{color:var(--gold-soft)}
.future-label-link:hover{color:var(--gold)}

@media(min-width:700px){
  .community-hero{min-height:280px;padding:32px}
}

/* ---------- Path ---------- */
.path-number{font-family:Georgia,serif;font-size:24px;color:var(--gold-soft)}

/* ---------- Parcours journey (one real chapter + an honest rail of what's next, never repeated cards) ---------- */
.journey{display:grid;gap:30px}
.journey-current{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--gold);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--navy-800),var(--navy-900) 75%);padding:24px;display:grid;gap:10px;transition:border-color .2s,transform .2s}
.journey-current:hover{transform:translateY(-2px)}
.journey-current-eyebrow{display:flex;align-items:center;gap:14px}
.journey-current-eyebrow .path-number{font-size:20px}
.journey-current-eyebrow small{display:block;color:var(--gold-soft);font-weight:800;letter-spacing:.09em;font-size:11px;text-transform:uppercase}
.journey-current-eyebrow .journey-current-tag{color:var(--muted);font-size:12px;font-weight:700}
.journey-current h2{font-size:22px;margin:0}
.journey-current p{color:var(--muted);font-size:14px;margin:0}
.journey-current-why{display:flex;align-items:flex-start;gap:8px;color:var(--gold-soft)!important;font-size:12.5px!important;max-width:440px;margin-top:6px!important}
.journey-current-why .icon{flex:none;width:15px;height:15px;margin-top:1px}
.journey-meta{display:flex;gap:16px;color:var(--muted);font-size:12px;font-weight:700}
.journey-meta span{display:flex;align-items:center;gap:6px}
.journey-meta .icon{width:1.1em;height:1.1em}
.journey-current .primary-action{width:auto;justify-self:start;margin-top:4px;pointer-events:none}

.journey-rail{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:grid;gap:0}
.journey-rail:before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;background:var(--line)}
.journey-node{position:relative;padding:14px 0;display:flex;align-items:flex-start;gap:14px;border-bottom:1px solid var(--line-soft)}
.journey-node:last-child{border-bottom:0}
.journey-dot{position:absolute;left:-22px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--navy-700);border:2px solid var(--line)}
.journey-node.completed .journey-dot{background:var(--teal);border-color:var(--teal)}
.journey-node.in_progress .journey-dot,.journey-node.available .journey-dot{background:var(--gold);border-color:var(--gold)}
.journey-node .path-number{font-size:15px;color:var(--muted);min-width:24px}
.journey-node>div{display:grid;gap:2px}
.journey-node strong{font-size:14px;font-weight:800}
.journey-node small{color:var(--muted);font-weight:800;letter-spacing:.05em;font-size:10.5px;text-transform:uppercase}
.journey-node p{margin:2px 0 0;color:var(--muted);font-size:12.5px}

/* ---------- Lesson ---------- */
/* ---------- Learning Experience Integration — Design System Propagation #1 ----------
   Systemic Terminal elements imported (typography hierarchy, navy/ivory ratios, editorial
   rhythm, rail separators, CTA/focus discipline, Fil de maîtrise) — never the Terminal's
   own disposition or dashboard-specific blocks. #lesson/#lesson-m02 only. */
#lesson,#lesson-m02{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#lesson .eyebrow.gold,#lesson-m02 .eyebrow.gold{color:var(--gold-soft)}
.lesson-layout{display:grid;grid-template-columns:1fr;gap:0}
.back-link{color:rgba(244,247,252,.6);margin-bottom:22px;padding:8px 0;background:none;border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.lesson-lead{font-size:16px;color:rgba(244,247,252,.68)}
.video-stage{
  aspect-ratio:16/11;border:1px solid var(--line);border-radius:var(--r-lg);
  background:radial-gradient(circle at 50% 15%,#1c2f57,#070c17 68%);
  position:relative;display:grid;place-items:center;overflow:hidden;margin:22px 0;
}
.exchange-visual{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:0 20px}
.exchange-diagram{width:100%;max-width:340px;color:var(--gold-soft)}
.exchange-diagram .lane{stroke:var(--line);stroke-dasharray:4 6}
.exchange-diagram .flow{stroke:var(--blue-2);stroke-width:2;fill:none;stroke-dasharray:5 7;animation:dda-flow 4s linear infinite}
.exchange-diagram .buyer,.exchange-diagram .seller{stroke:currentColor}
.exchange-diagram .asset{fill:var(--gold);stroke:none}
@keyframes dda-flow{to{stroke-dashoffset:-48}}
.play-button{position:absolute;width:58px;height:58px;border-radius:50%;border:0;background:var(--ivory);color:var(--navy-950);font-size:19px;cursor:pointer;box-shadow:var(--shadow-md);display:grid;place-items:center;transition:transform .2s}
.play-button:hover{transform:scale(1.06)}
#video-caption{position:absolute;bottom:14px;margin:0;color:var(--muted);font-size:12px;text-align:center;padding:0 14px}
.lesson-copy{margin-top:30px}
.lesson-copy p{color:rgba(244,247,252,.68);font-size:16px}
.principle{margin:24px 0;padding:20px;border-left:3px solid var(--gold);background:#F2ECDA;border-radius:0 var(--r-sm) var(--r-sm) 0;display:flex;gap:14px;align-items:flex-start}
.principle .icon{color:var(--gold);flex:none;margin-top:2px}
.principle span{color:#8a6f2e;font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.1em;display:block;margin-bottom:4px}
.principle strong{color:var(--ink)}
/* A small tick before each narrative-beat eyebrow inside the lesson reader —
   a quiet echo of the step markers in .lesson-loop, DDA's own rhythm motif
   rather than a generic section label. */
.lesson-main > .eyebrow.gold:before,.lesson-copy > .eyebrow.gold:before,.comparison-block > .eyebrow.gold:before,.learning-check > .eyebrow.gold:before{content:"";width:14px;height:1px;background:var(--gold);flex:none}

.example-callout{margin:24px 0;padding:18px 20px;border-radius:var(--r-md);background:#EAF3F8;border:1px solid rgba(11,111,174,.2);display:flex;gap:14px;align-items:flex-start}
.example-callout .icon{color:var(--blue);flex:none;margin-top:2px}
.example-callout span{color:var(--blue);font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.1em;display:block;margin-bottom:4px}
.example-callout p{margin:0;font-style:italic;font-size:15px;color:var(--ink)}

.comparison-block{margin:26px 0}
.comparison-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.comparison-col{padding:16px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.14)}
.comparison-col span{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;margin-bottom:10px}
.comparison-col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.comparison-col li{font-size:13px;color:rgba(244,247,252,.68);padding-left:14px;position:relative}
.comparison-col li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:currentColor}
.comparison-col.bad{background:rgba(217,115,115,.08)}
.comparison-col.bad span{color:#b64a4a}
.comparison-col.good{background:rgba(24,155,146,.1)}
.comparison-col.good span{color:#0f6e64}
.learning-check{scroll-margin-top:80px;margin-top:26px;padding:22px;border:1px solid var(--line);border-left:3px solid var(--blue-2);border-radius:var(--r-md);background:var(--navy-800);transition:opacity .3s,border-left-color .3s,box-shadow .3s;box-shadow:0 10px 30px -18px rgba(5,11,20,.5)}
.learning-check.just-unlocked{animation:dda-unlock-flash .7s var(--ease)}
@keyframes dda-unlock-flash{0%{border-left-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.22),0 10px 30px -18px rgba(5,11,20,.5)}100%{border-left-color:var(--blue-2);box-shadow:0 10px 30px -18px rgba(5,11,20,.5)}}
.learning-check.locked-check{border-left-color:var(--line)}
.learning-check h2{font-size:22px}
.learning-check .eyebrow.gold{color:var(--gold-soft)!important}
.answer-grid{display:grid;gap:10px;margin-top:18px}
.answer-grid button{background:var(--navy-700);color:var(--white);border:1px solid var(--line);border-radius:12px;text-align:left;padding:15px;font:inherit;cursor:pointer;min-height:50px;transition:border-color .15s,transform .1s}
.answer-grid button:hover{border-color:var(--gold)}
.answer-grid button:disabled{cursor:not-allowed}
.answer-grid button:active{transform:scale(.99)}
.answer-grid button.correct{border-color:var(--green);background:rgba(79,190,133,.14);animation:dda-correct-pop .3s ease}
.answer-grid button.incorrect{border-color:var(--red);background:rgba(217,115,115,.12);animation:dda-shake .3s}
@keyframes dda-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes dda-correct-pop{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
.feedback{min-height:22px;margin:14px 0 0;font-weight:700;font-size:14px}
.feedback.success{color:var(--green)}
.feedback.error{color:#e3a1a1}
.locked-check{opacity:.45;position:relative}
.locked-check:after{content:"Termine d'abord l'exercice";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 20px;background:rgba(8,14,25,.75);border-radius:var(--r-md);font-weight:800;font-size:13px}
/* Proof of learning, not a game reward panel: paper-toned card, competency named
   before XP (data order unchanged — the stats already lead with competency), no
   confetti, no invented level, no victory language. */
.result-card{margin-top:26px;border:1px solid #cfc19a;border-radius:var(--r-md);padding:24px;display:flex;gap:16px;background:var(--paper,#FBF9F3)}
.result-card[hidden]{display:none}
.result-card.just-completed{animation:dda-pop .5s var(--ease)}
@keyframes dda-pop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
.result-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-size:22px;font-weight:900;flex:none}
.result-card .eyebrow{color:var(--muted-2)}
.result-card h2{font-size:23px;margin-bottom:8px;color:var(--ink)}
.result-card > div > p{color:var(--muted-2)}
.result-stats{display:grid;gap:12px;margin:16px 0;padding:14px 16px;border:1px solid #DCD0AF;border-radius:var(--r-sm);background:#F2ECDA}
.result-stats div{display:flex;flex-direction:column;gap:2px}
.result-stats dt{margin:0;color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.result-stats dd{margin:0;font-size:14px;font-weight:800;color:var(--ink)}
.result-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.result-actions .secondary-action{color:var(--ink);border-color:#cfc19a}
.result-feedback{color:var(--muted-2);font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.lesson-actions{position:sticky;bottom:calc(68px + var(--safe-b));display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:14px 0;margin-top:34px;background:var(--navy-950)}
.lesson-outline{display:none}
.saved-state{font-size:12px;padding:13px;border:1px dashed rgba(255,255,255,.2);border-radius:12px;color:rgba(244,247,252,.6);margin-top:20px}

/* ---------- Learning & Engagement System V1 — block types ---------- */
.competency-check-block{display:flex;align-items:center;gap:12px;margin:24px 0;padding:14px 18px;border-radius:var(--r-sm);font-size:13.5px}
.competency-check-block.targets{background:#EAF3F8;border:1px solid rgba(11,111,174,.2);color:var(--muted-2)}
.competency-check-block.targets .icon{color:var(--blue)}
.competency-check-block.confirms{background:rgba(24,155,146,.1);border:1px solid rgba(24,155,146,.3);color:var(--muted-2)}
.competency-check-block.confirms .icon{color:#0f6e64}
.competency-check-block .icon{flex:none;width:20px;height:20px}
.competency-check-block strong{color:var(--ink)}
.competency-check-block p{margin:0}

.journal-link-block{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--navy-800);box-shadow:0 10px 30px -18px rgba(5,11,20,.5)}
.journal-link-block .icon{color:var(--gold-soft);flex:none;width:22px;height:22px}
.journal-link-block p{flex:1;min-width:180px;margin:0;color:var(--muted);font-size:13.5px}
.journal-link-block .secondary-action{width:auto}

.image-explainer-block{margin:26px 0}
.image-explainer-block .photo-frame{height:auto}
.image-explainer-block .photo-frame:not(:has(img)){height:220px}
.image-explainer-block figcaption{color:rgba(244,247,252,.6);font-size:12.5px;margin-top:8px;text-align:center}

.video-explainer-block{margin:26px 0;min-width:0}
.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--navy-900);box-shadow:0 16px 34px -24px rgba(5,11,20,.8)}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain;background:#050b14}
.video-explainer-block .photo-frame{height:220px}
.video-fallback-panel{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center;background:radial-gradient(circle at 50% 15%,#1c2f57,#070c17 68%);color:var(--ivory)}
.video-fallback-panel[hidden]{display:none}
.video-fallback-panel .icon{width:28px;height:28px;color:var(--gold-soft)}
.video-fallback-panel strong{font-size:15px}
.video-fallback-panel span{max-width:440px;color:rgba(244,247,252,.68);font-size:12.5px;line-height:1.55}
.video-explainer-fallback .video-fallback-panel{position:relative;min-height:clamp(180px,28vw,280px);border:1px solid var(--line);border-radius:var(--r-lg)}
.video-explainer-caption{color:rgba(244,247,252,.6);font-size:12.5px;margin-top:8px;text-align:center}

.mini-simulation-block,.graphical-exercise-block,.decision-choice-block{margin:26px 0;padding:22px;border:1px solid var(--line);border-left:3px solid var(--blue-2);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--navy-800);box-shadow:0 10px 30px -18px rgba(5,11,20,.5)}
.mini-simulation-block .eyebrow.gold,.graphical-exercise-block .eyebrow.gold,.decision-choice-block .eyebrow.gold{color:var(--gold-soft)!important}
.mini-simulation-stage,.graphical-exercise-canvas{margin-top:16px;padding:28px 18px;border:1px dashed var(--line);border-radius:var(--r-sm);text-align:center;color:var(--muted);font-size:13px}
.decision-choice-options{display:grid;gap:10px;margin-top:16px}
.decision-option{background:var(--navy-700);color:var(--white);border:1px solid var(--line);border-radius:12px;text-align:left;padding:14px 15px;font:inherit;cursor:pointer;transition:border-color .15s;min-height:44px}
.decision-option:hover{border-color:var(--gold)}
.decision-choice-options[data-question] .decision-option.correct{border-color:var(--green);background:rgba(79,190,133,.14)}
.decision-choice-options[data-question] .decision-option.incorrect{border-color:var(--red);background:rgba(217,115,115,.12);animation:dda-shake .3s}
.decision-note{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);color:var(--muted);font-size:12.5px;background:var(--navy-700)}

/* ---------- Golden Lesson #2 — synthetic pedagogical chart + zone picker ----------
   Every chart here is hand-authored geometry (dda-core.js), never real market
   data — the caption on every chart says so explicitly, on purpose. */
.chart-observe-block,.zone-identify-block{margin:26px 0;padding:22px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--navy-800);box-shadow:0 10px 30px -18px rgba(5,11,20,.5)}
.chart-observe-block .eyebrow.gold,.zone-identify-block .eyebrow.gold{color:var(--gold-soft)!important}
.chart-prompt{color:var(--muted);margin-top:6px}
.chart-frame{margin-top:16px;border-radius:var(--r-md);background:var(--navy-900);padding:12px}
.price-chart{width:100%;height:auto;display:block}
.price-line{fill:none;stroke:var(--blue-2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.reaction-dot{fill:var(--gold);animation:dda-reaction-pulse 2.4s ease-in-out infinite}
.reaction-dot:nth-of-type(3){animation-delay:.3s}
.reaction-dot:nth-of-type(4){animation-delay:.6s}
.reaction-zone{fill:rgba(217,164,65,.16);stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 3;opacity:0;transition:opacity .5s ease}
.zone-identify-block.answered .reaction-zone{opacity:1}
.reaction-zone.flawed{fill:rgba(217,115,115,.14);stroke:var(--red);opacity:1}
.chart-caption{color:var(--muted);font-size:11.5px;margin-top:10px;letter-spacing:.02em}
@keyframes dda-reaction-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* Tappable bands over the chart, not SVG hit-areas — real <button>s so the
   interaction works by keyboard, with no pixel precision required (§7). */
.chart-zone-picker{position:relative;margin-top:16px;min-height:220px}
.chart-zone-picker .chart-frame{margin-top:0;position:absolute;inset:0}
.chart-zone-picker .price-chart{width:100%;height:100%}
/* Three (or more) full-width bands stacked in the same top-to-bottom order the
   chart's zones are authored in — flexbox guarantees they never overlap and
   each keeps a real ≥46px tap target, at any viewport width (§7). Same inset
   as .chart-frame's own padding, so the bands line up with the chart itself,
   not with empty space below it. */
.zone-band-options{position:absolute;inset:12px;display:flex;flex-direction:column;gap:8px}
.zone-band{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(11,18,33,.55);border:1.5px dashed var(--line);border-radius:10px;color:var(--white);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 10px;transition:border-color .15s,background .15s}
.zone-band:hover{border-color:var(--gold);background:rgba(217,164,65,.14)}
.zone-band.correct{border-style:solid;border-color:var(--green);background:rgba(79,190,133,.22)}
.zone-band.incorrect{border-style:solid;border-color:var(--red);background:rgba(217,115,115,.18);animation:dda-shake .3s}
.zone-band span{pointer-events:none}

.zone-reveal{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r-sm);background:rgba(79,190,133,.08)}
.zone-reveal .icon{flex:none;margin-top:2px;width:18px;height:18px;color:var(--green)}
.zone-reveal p{margin:0}

/* ---------- Progression — Design System Propagation #4 ----------
   Same institution as Terminal/Learning/Market Intelligence/Journal: ivory
   editorial canvas throughout, navy withheld entirely (Progression makes no
   claim urgent or "live" enough to earn a depth surface — it is the calm,
   explanatory deep view, not a cockpit). The Fil de maîtrise (bead chain) is
   reused verbatim from Terminal — same component, same competencyLevel() truth
   — never a second, disagreeing meter. No card grid: one continuous editorial
   list, one row per real competency, proof shown inline as the reason for its
   own state. ---------- */
#progress{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#progress .eyebrow.gold{color:var(--gold-soft)}
#progress .eyebrow{color:rgba(244,247,252,.65)}
#progress .panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#f4f7fc}
#progress .panel-heading .icon{color:var(--gold-soft)}
#progress .panel-heading h3{color:#f4f7fc}

.progress-hero{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;margin-bottom:20px}
.progress-stat{padding:18px 16px;background:rgba(255,255,255,.04);display:grid;gap:4px}
.progress-stat span{color:rgba(244,247,252,.65);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.progress-stat strong{font-family:Georgia,serif;font-size:24px;color:#f4f7fc;font-variant-numeric:tabular-nums}
.progress-stat.featured{grid-column:1/-1;background:linear-gradient(160deg,var(--navy-950),var(--navy-900));padding:22px 20px}
.progress-stat.featured span{color:var(--gold-soft)}
.progress-stat.featured strong{font-size:34px;color:var(--ivory)}

/* ---------- Fil de maîtrise (Progression's deep view) ---------- */
.mastery-panel{margin-top:16px}
.mastery-list{display:grid;gap:0;margin-top:18px}
.mastery-row{padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.mastery-row:first-child{border-top:0;padding-top:0}
.mastery-row-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.mastery-lesson{margin:0 0 3px;color:rgba(244,247,252,.65);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.mastery-row-head strong{font-family:Georgia,serif;font-size:19px;color:#fff;font-weight:400}
.mastery-level{display:flex;align-items:center;gap:10px}
.mastery-level span{font-size:12px;font-weight:800;color:var(--gold-soft);white-space:nowrap}
.mastery-row .terminal-thread-beads i{background:rgba(255,255,255,.14)}
.mastery-row .terminal-thread-beads i.on{background:var(--gold-soft)}
.mastery-row .terminal-thread-beads i.now{background:rgba(255,255,255,.04);border-color:var(--gold-soft)}
.mastery-row .proof-timeline{margin-top:16px}
.mastery-row-lesson-link{margin-top:14px;color:var(--gold-soft);text-decoration:none;border-bottom:1.5px solid var(--gold-soft);display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800}
.mastery-row.unmeasured{opacity:.75}
.mastery-row.unmeasured .mastery-level span{color:rgba(244,247,252,.65)}
.mastery-unmeasured-note{margin:10px 0 0;font-size:13px;color:rgba(244,247,252,.65)}
.mastery-next-step{margin:14px 0 0;font-size:13px;color:rgba(244,247,252,.65)}

.proof-timeline{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:0}
.proof-timeline li{display:flex;gap:14px;padding:0 0 18px;position:relative}
.proof-timeline li:last-child{padding-bottom:0}
.proof-timeline li:not(:last-child):before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.proof-timeline .proof-dot{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);display:grid;place-items:center;flex:none;color:rgba(244,247,252,.65)}
.proof-timeline li.done .proof-dot{background:var(--green);border-color:var(--green);color:rgba(255,255,255,.04)}
.proof-timeline .proof-dot .icon{width:14px;height:14px}
.proof-timeline strong{display:block;font-size:14px;color:#f4f7fc}
.proof-timeline li.pending strong{color:rgba(244,247,252,.65);font-weight:700}
.proof-timeline small{color:rgba(244,247,252,.65)}

.next-step-panel{margin-top:16px}
.next-step-panel p{margin:14px 0 0;font-size:15px;color:#f4f7fc}
.next-step-panel p:first-of-type{margin-top:14px}
.progress-journal-note{font-size:13px;color:rgba(244,247,252,.65)}

.badges-panel{margin-top:16px;background:transparent!important;border-style:dashed}
.badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.badge-slot{display:grid;justify-items:center;gap:8px;padding:18px 10px;border:1px dashed rgba(255,255,255,.14);border-radius:var(--r-md);text-align:center;opacity:.7}
.badge-slot .icon{color:rgba(244,247,252,.65);width:22px;height:22px}
.badge-slot span{font-size:11px;color:rgba(244,247,252,.65);font-weight:700}

.modules-track{margin-top:16px}
.modules-track ol{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.modules-track li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;min-width:0}
.modules-track .module-id{font-family:Georgia,serif;color:var(--gold-soft);font-size:13px;width:30px;flex:none}

/* ---------- Certification preview (Progression) ---------- */
.certificate-panel{margin-top:16px}
.certificate-locked,.certificate-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 16px;margin-top:16px;border:1px dashed rgba(255,255,255,.14);border-radius:var(--r-md);color:rgba(244,247,252,.65)}
.certificate-locked .icon{color:rgba(244,247,252,.65);width:24px;height:24px}
.certificate-locked p,.certificate-gate p{margin:0;font-size:13px;max-width:360px}
.certificate-gate .secondary-action{width:auto}
.certificate-preview{margin-top:16px;display:grid;gap:14px}
.certificate-mock{position:relative;overflow:hidden;padding:34px 24px;border-radius:var(--r-md);text-align:center;background:linear-gradient(160deg,var(--ivory),var(--ivory-2));color:var(--ink);border:1px solid var(--gold-soft)}
.certificate-mock:after{content:"";position:absolute;inset:8px;border:1px solid rgba(217,164,65,.4);border-radius:calc(var(--r-md) - 4px);pointer-events:none}
.certificate-watermark{position:absolute;top:16px;right:-38px;transform:rotate(35deg);background:var(--gold);color:var(--navy-950);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:4px 42px;z-index:1}
.certificate-seal{width:32px;height:32px;color:var(--gold);margin-bottom:6px}
.certificate-eyebrow{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:rgba(244,247,252,.65)}
.certificate-mock h4{margin:10px 0 6px;font-family:Georgia,serif;font-size:24px;color:#f4f7fc}
.certificate-line{margin:0;font-size:14px;color:rgba(244,247,252,.65)}
.certificate-date{margin:6px 0 0;font-size:12px;color:rgba(244,247,252,.65)}
.certificate-disclaimer{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:rgba(244,247,252,.65);margin:0}
.certificate-disclaimer .icon{flex:none;margin-top:1px}

/* ---------- Journal & Plan ---------- */
/* ---------- Journal & Plan — Design System Propagation #3 ----------
   A personal notebook, not a trading terminal: ivory canvas throughout, navy used
   only as a single depth accent (the active tab) — never as an omnipresent
   background the way Terminal/Learning's "doing" panels use it. The one genuine
   DDA-Journal-specific signature is temporal continuity: a discreet chronological
   spine connecting entries — never the Fil de maîtrise, which has no real
   progression meaning here. ---------- */
#journal{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#journal .eyebrow.gold{color:var(--gold-soft)}

.journal-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);margin-bottom:22px}
.journal-tab{border:0;background:transparent;color:rgba(244,247,252,.65);font:inherit;font-weight:800;font-size:13px;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;min-height:44px}
.journal-tab.active{background:var(--navy-950);color:var(--ivory)}
.journal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.journal-count{color:#fff;font-size:14px;font-weight:800;margin:0}
.journal-last-entry{color:rgba(244,247,252,.65);font-size:12px;margin:2px 0 0}
.journal-toolbar .primary-action{width:auto;display:inline-flex;align-items:center;gap:8px}

.journal-empty{text-align:center;max-width:460px;margin:36px auto;padding:36px 24px;border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-md)}
.journal-empty .icon{width:30px;height:30px;color:var(--gold-soft);margin-bottom:14px}
.journal-empty h2{font-size:19px;margin-bottom:8px;color:#f4f7fc}
.journal-empty p{color:rgba(244,247,252,.65);font-size:14px;margin:0}
.journal-empty[hidden]{display:none}

/* The temporal spine — a thin rail with a marker per entry, oldest to newest. Purely
   chronological (no done/now/pending states): it never claims a progression this
   screen doesn't have. */
.journal-list{list-style:none;margin:0;padding:0 0 0 30px;display:grid;gap:0;position:relative}
.journal-list:before{content:"";position:absolute;top:10px;bottom:10px;left:9px;width:1px;background:rgba(255,255,255,.14)}
.journal-entry-card{position:relative;border:0;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;background:transparent;overflow:visible}
.journal-entry-card:last-child{border-bottom:0}
.journal-entry-card summary{cursor:pointer;list-style:none;padding:16px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:44px}
.journal-entry-card summary::-webkit-details-marker{display:none}
.journal-entry-card summary:before{content:"+";color:var(--gold-soft);font-weight:900;width:14px;flex:none}
.journal-entry-card details[open] summary:before{content:"–"}
.journal-entry-index{position:absolute;left:-30px;top:19px;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.04);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;color:var(--gold-soft);font-size:9.5px;font-weight:700}
.journal-entry-market{font-weight:800;font-size:14px;color:#f4f7fc}
.journal-entry-date{color:rgba(244,247,252,.65);font-size:12px;font-weight:700}
.journal-entry-snippet{color:rgba(244,247,252,.65);font-size:13px;flex-basis:100%;padding-left:26px}
.journal-entry-detail{padding:0 0 18px 26px;display:grid;gap:14px}
.journal-entry-detail dl{display:grid;gap:10px;margin:0}
.journal-entry-detail dt{color:var(--gold-soft);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;margin-bottom:2px}
.journal-entry-detail dd{margin:0;color:#fff;font-size:14px;white-space:pre-wrap}
.journal-entry-actions{display:flex;gap:16px;align-items:center}
.journal-entry-actions .text-action{color:rgba(244,247,252,.65);min-height:44px;display:inline-flex;align-items:center}
.journal-entry-actions .secondary-action{width:auto}

.journal-composer{max-width:640px}
.journal-step-indicator{margin:18px 0 26px}
.journal-step{display:none;flex-direction:column;gap:16px}
.journal-step.active{display:flex}
.journal-step-label{color:var(--gold-soft);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin:0}
.journal-composer label{display:grid;gap:7px;color:rgba(244,247,252,.65);font-size:13px;font-weight:700}
.journal-composer input,.journal-composer textarea{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.04);color:#fff;font:inherit;resize:vertical}
.journal-composer textarea{min-height:88px}
.journal-composer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.journal-composer-actions .primary-action,.journal-composer-actions .secondary-action{width:auto}

.journal-plan-intro{color:rgba(244,247,252,.65);font-size:14px;max-width:600px;margin-bottom:20px}
#journal-plan-form{display:grid;gap:0;max-width:640px}
.plan-group{border:0;border-top:1px solid rgba(255,255,255,.14);margin:0;padding:22px 0 0;display:grid;gap:16px}
.plan-group:first-of-type{border-top:0;padding-top:0}
.plan-group+.plan-group{margin-top:22px}
.plan-group legend{padding:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:var(--gold-soft)}
#journal-plan-form label{display:grid;gap:7px;color:rgba(244,247,252,.65);font-size:13px;font-weight:700}
#journal-plan-form textarea{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.04);color:#fff;font:inherit;resize:vertical;min-height:70px}
#journal-plan-form .form-note{color:rgba(244,247,252,.65);font-size:12px;margin:22px 0 0}
#journal-plan-form .primary-action{width:auto;margin-top:14px}
.modules-track strong{flex:1;font-size:14px;font-weight:700;min-width:0}
.module-pill{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:rgba(244,247,252,.65);white-space:nowrap;flex:none}
.module-pill.completed{border-color:var(--teal);color:var(--teal)}
.module-pill.in_progress,.module-pill.available{border-color:var(--gold);color:var(--gold-soft)}

/* ---------- Resources — Design System Propagation #7 ----------
   Editorial library, not a SaaS feature grid: the Free shelf stays the
   continuous hairline-separated list it already was (never converted into
   cards), and the single Premium atelier becomes this screen's one
   deliberate "Ouverture DDA" dark anchor — the same depth signature Terminal/
   Progression/Premium already use for a genuine Premium moment, never a new
   surface invented for this tranche. ---------- */
#resources{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#resources .eyebrow.gold{color:var(--gold-soft)}
#resources .eyebrow{color:rgba(244,247,252,.65)}

.resource-type{color:var(--gold-soft);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.resource-icon{width:44px;height:44px;border:1px solid var(--gold);border-radius:14px;display:grid;place-items:center;color:var(--gold-soft);flex:none}
.resource-icon .icon{width:20px;height:20px}

.library-shelf{margin-bottom:18px}
.library-shelf-label{margin-bottom:14px}
.library-list{list-style:none;margin:0;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.04)}
.library-entry{display:flex;gap:16px;align-items:flex-start;padding:22px}
.library-entry+.library-entry{border-top:1px solid rgba(255,255,255,.14)}
.library-entry-body{display:grid;gap:2px;min-width:0}
.library-entry-body h2{font-size:20px;margin:2px 0 6px;color:#fff;font-weight:400}
.library-entry-body p{color:rgba(244,247,252,.65);font-size:14px;margin:0 0 14px}
.library-entry-body .secondary-action{width:auto;justify-self:start}

/* Premium atelier: the one dark surface on this screen — same gradient as
   Terminal's .terminal-aperture, never a new one. */
.resource-feature{margin-top:18px;padding:28px 24px;border:1px solid var(--navy-900);border-radius:var(--r-lg);background:linear-gradient(150deg,var(--navy-900),var(--navy-950));color:#EDE7D8}
.resource-feature-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.resource-feature h2{font-size:25px;margin:0 0 10px;color:var(--ivory)}
.resource-feature p{color:#B9C2D2;font-size:14px;max-width:520px}
.resource-feature .secondary-action{width:auto;margin-top:8px;color:#EDE7D8;border-color:rgba(237,231,216,.4)}
.resource-feature .resource-type{color:var(--gold-soft)}
.resource-feature .resource-icon{border-color:var(--gold-soft);color:var(--gold-soft)}

.resource-reader{position:relative;margin-top:18px;padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.04);color:#fff;scroll-margin-top:80px}
.reader-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:inherit;font-size:26px;cursor:pointer;width:44px;height:44px;min-width:44px;min-height:44px}
.resource-reader h2{font-size:26px}
.resource-reader ol{display:grid;gap:11px;padding-left:22px}
.resource-reader dt{font-weight:900;margin-top:14px;color:#f4f7fc}
.resource-reader dd{margin:3px 0;color:rgba(244,247,252,.65)}

/* ---------- Membership ---------- */
/* ---------- Premium / DDA Family — Design System Propagation #5 ----------
   Same ivory editorial canvas as Learning/Market Intelligence/Journal/
   Progression. Premium becomes this screen's one deliberate "Ouverture DDA"
   dark anchor (depth, continuity, institution) instead of the old light card
   sitting inside a dark screen — Free stays the plain paper card ("what you
   have"). DDA Family gets its own warm, human, non-dark block (photo + text),
   never the dark register — it is belonging, not a cockpit surface. ---------- */
#membership{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#membership .eyebrow.gold{color:var(--gold-soft)}
#membership .eyebrow{color:rgba(244,247,252,.65)}
#membership .panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#f4f7fc}
#membership .panel-heading .icon{color:var(--gold-soft)}
#membership .panel-heading h3{color:#f4f7fc}

.membership-status-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:24px}
.membership-status-line span{color:rgba(244,247,252,.65);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.membership-status-line strong{font-family:Georgia,serif;font-size:19px;color:#f4f7fc}
.membership-status-line small{color:rgba(244,247,252,.65);font-size:12px}

.plan-grid{display:grid;grid-template-columns:1fr;gap:16px}
.plan-card{padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);background:rgba(255,255,255,.04)}
.plan-card h2{font-size:30px;color:#f4f7fc}
.plan-tagline{color:rgba(244,247,252,.65);font-size:14px;margin:8px 0 0}
.plan-card ul{list-style:none;padding:0;margin:22px 0;display:grid;gap:11px}
.plan-card li{display:flex;align-items:center;gap:10px;color:#f4f7fc}
.plan-card li:before{content:'';width:16px;height:16px;flex:none;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
.plan-state{display:inline-block;border:1px solid var(--teal);color:var(--teal);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800}
.current-plan.is-included{opacity:.72}
/* Premium: the one deliberate dark anchor on this screen — reuses the exact
   "Ouverture DDA" gradient Terminal already uses for its own Premium teaser,
   never a new dark surface invented for this tranche. */
.premium-plan{background:linear-gradient(150deg,var(--navy-900),var(--navy-950));color:#EDE7D8;border-color:var(--navy-900)}
.premium-plan h2{color:var(--ivory)}
.premium-plan .eyebrow.gold{color:var(--gold-soft)}
.premium-plan .plan-tagline{color:#B9C2D2}
.premium-plan li{color:#EDE7D8}
.premium-plan .demo-note{display:block;color:#B9C2D2;margin-top:14px;font-size:12px}
.premium-plan .plan-revert{display:block;margin-top:14px;color:#EDE7D8;border-color:rgba(237,231,216,.4)}
.premium-plan.is-active{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- DDA Family: belonging, not a cockpit surface ---------- */
.family-panel{display:grid;grid-template-columns:1fr;gap:20px}
.family-photo{aspect-ratio:16/10}
.family-panel .family-photo{min-height:0}
.family-copy h2{font-size:clamp(20px,4.6vw,26px);color:#fff;margin-bottom:10px}
.family-copy p{color:rgba(244,247,252,.65);font-size:14px;margin-bottom:14px;max-width:460px}
.family-panel .future-label{color:var(--gold-soft)}
.gate-layer{position:fixed;inset:0;z-index:120;background:rgba(4,7,14,.9);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px}
.gate-card{position:relative;max-width:460px;width:100%;padding:30px 24px;border:1px solid var(--gold);border-radius:var(--r-lg);background:var(--navy-800);box-shadow:var(--shadow-lg);text-align:center;animation:dda-pop .3s var(--ease)}
.gate-symbol{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:16px;background:var(--gold);color:var(--navy-950)}
.gate-card h2{font-size:26px}
.gate-card>p:not(.eyebrow){color:var(--muted)}
.gate-card .primary-action{margin-top:14px}
.membership-roadmap,.membership-guardrails,.next-step-panel,.family-panel{margin-top:16px}
.membership-roadmap p{color:rgba(244,247,252,.65);font-size:14px;max-width:680px}
.roadmap-track{list-style:none;padding:0;margin:18px 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.roadmap-track li{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;color:rgba(244,247,252,.65);display:inline-flex;align-items:center;gap:7px}
.roadmap-track li small{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:rgba(244,247,252,.65)}
.roadmap-track li.status-partial{border-color:var(--teal);color:#f4f7fc}
.roadmap-track li.status-partial small{color:var(--teal);border-color:var(--teal)}
.roadmap-track li.status-demo{border-color:var(--gold);color:#f4f7fc}
.roadmap-track li.status-demo small{color:var(--gold-soft);border-color:var(--gold)}
.guardrail-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.guardrail-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(244,247,252,.65)}
.guardrail-list .icon{color:var(--red);flex:none;width:18px;height:18px}

/* ---------- Markets & BRVM — Design System Propagation #2 (Institutional Intelligence
   base; density imported from the Financial Operating System only where it earns its
   place — the index rail and calendar). Five editorial zones: ce qui bouge / pourquoi
   cela compte / BRVM / (comprendre — folded into the brief's own real CTA) / réfléchir.
   Same ivory-on-dark-chrome pattern as #access/#dashboard/#lesson; the single dark
   surface here is the featured index card — one real "Ouverture DDA" anchor for
   "what actually moves today", not a leftover dark panel. ---------- */
#markets{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#markets .eyebrow.gold{color:var(--gold-soft)}

.market-visit-cue{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(244,247,252,.65);font-size:12.5px;width:fit-content;background:rgba(255,255,255,.04)}
.market-visit-cue .icon{color:var(--gold-soft);flex:none;width:16px;height:16px}
.market-visit-cue strong{color:#f4f7fc}

.market-zone{margin-top:36px}
.market-zone:first-of-type{margin-top:22px}
.zone-label{margin-bottom:14px}

.index-grid{display:grid;grid-template-columns:1fr;gap:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.04)}
.index-card{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;background:transparent;display:grid;gap:8px}
.index-card:last-child{border-bottom:0}
/* The one real financial-data anchor on this screen — deliberately dark, everything
   else on the screen is deliberately not. */
.index-card:first-child{background:linear-gradient(160deg,#1b2452,#0d1330);padding:28px 24px;gap:12px}
.index-card:first-child .index-card-head strong{font-family:Georgia,serif;font-size:21px;color:var(--ivory)}
.index-card:first-child .index-sparkline{height:42px;stroke:rgba(232,198,133,.55)}
.index-card:first-child p{font-size:14px;color:var(--muted)}
.index-card:first-child .data-badge{color:var(--muted);border-color:var(--line)}
.index-card:last-child .index-card-head strong{font-size:14px}
.index-card:last-child .index-sparkline{height:20px;opacity:.7}
.index-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.index-card-head strong{font-size:15px}
.index-sparkline{width:100%;height:30px;stroke:rgba(255,255,255,.2);stroke-width:2;stroke-dasharray:3 4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.index-card p{color:rgba(244,247,252,.65);font-size:13px;margin:0}
.data-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:rgba(244,247,252,.65);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 9px;white-space:nowrap}
.data-badge .icon{width:11px;height:11px}

.market-brief,.market-calendar{padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.04)}
.market-brief h2,.market-calendar h2{font-size:26px;color:#f4f7fc}
.market-calendar{margin-top:16px}
.market-calendar p{color:rgba(244,247,252,.65);font-size:14px}
#market-calendar-list{list-style:none;padding:0;margin:18px 0 0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden}
#market-calendar-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0}
#market-calendar-list li:last-child{border-bottom:0}
#market-calendar-list strong{font-size:14px;display:block;color:#f4f7fc}
#market-calendar-list small{color:rgba(244,247,252,.65)}
.market-zone-publications{margin-top:18px;padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.035)}
.brvm-publications-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.brvm-publications-head h2{font-size:26px;color:#f4f7fc;margin-bottom:8px}
.brvm-publications-head p{max-width:650px;color:rgba(244,247,252,.65);font-size:14px}
.brvm-publications-empty{border:1px dashed rgba(244,247,252,.28);border-radius:var(--r-md);background:rgba(0,0,0,.12)}
.brvm-publications-empty-copy{display:flex;align-items:flex-start;gap:16px;padding:22px}
.brvm-empty-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);border-radius:14px;color:var(--gold-soft);font:700 24px Georgia,serif;flex:none}
.brvm-publications-empty-copy strong{display:block;color:#f4f7fc;font-size:16px;margin-bottom:6px}
.brvm-publications-empty-copy p{color:rgba(244,247,252,.65);font-size:14px;max-width:680px;margin-bottom:8px}
.brvm-publications-empty-copy small{color:var(--gold-soft);font-size:12px}
.brvm-publication-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.brvm-publication-row:last-child{border-bottom:0}
.brvm-publication-row>div{min-width:0}
.brvm-publication-row strong{display:block;color:#f4f7fc}
.brvm-publication-row a{color:inherit;text-decoration-color:rgba(220,183,107,.5);text-underline-offset:3px;overflow-wrap:anywhere}
.brvm-publication-row small{color:rgba(244,247,252,.65)}
.brvm-publication-requirements{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:18px 0 0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.14)}
.brvm-publication-requirements>div{padding:14px;background:rgba(0,0,0,.12)}
.brvm-publication-requirements dt{color:var(--gold-soft);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.brvm-publication-requirements dd{color:rgba(244,247,252,.68);font-size:13px}
.brvm-publications-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;color:rgba(244,247,252,.6);font-size:13px}
.brvm-publications-note .icon{color:var(--gold-soft);flex:none;margin-top:2px}
.brvm-publications-head .data-badge{flex:none}
@media(max-width:760px){
  .market-zone-publications{padding:18px}
  .brvm-publications-head{display:grid;gap:12px}
  .brvm-publications-head .data-badge{justify-self:start}
  .brvm-publication-requirements{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .brvm-publication-requirements{grid-template-columns:1fr}
  .brvm-publications-empty-copy{padding:18px;gap:12px}
  .brvm-publication-row{display:grid;gap:8px;padding:14px}
}
.brief-step{display:grid;grid-template-columns:36px 1fr;gap:13px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.brief-step:first-of-type{border-top:0}
.brief-step>span{color:var(--gold-soft);font-family:Georgia,serif;font-size:19px}
.brief-step p{color:rgba(244,247,252,.65);font-size:14px}

.brvm-intro{display:grid;gap:16px;margin-bottom:16px}
.brvm-intro>*{min-width:0}
.brvm-photo{height:170px}
/* BRVM belongs to the same system as everything else on this screen — a warmer
   parchment tone gives it a regional identity without becoming a separate dark
   "widget bolted on for authenticity" (explicit mandate). */
.brvm-panel{padding:22px;border:1px solid #DCD0AF;border-radius:var(--r-md);background:#F2ECDA}
.brvm-panel h2{font-size:26px;color:var(--ink)}
.brvm-panel p,.brvm-panel li{color:var(--muted-2);font-size:14px}
.brvm-panel ul{padding-left:0;list-style:none;display:grid;gap:10px;margin-top:14px}
.brvm-panel li{display:flex;align-items:flex-start;gap:9px}
.brvm-panel li .icon{color:#8a6f2e;flex:none;width:16px;height:16px;margin-top:2px}
.market-zone-brvm .future-label{margin-top:16px}
#markets .future-label{color:var(--gold-soft);border-top-color:rgba(255,255,255,.14)}
.market-zone-reflect .journal-link-block{margin:0}

/* ---------- Broker Hub — Design System Propagation #6 ----------
   Same ivory editorial canvas as the rest of the propagated screens. Navy is
   withheld entirely — an orientation tool has no reason to feel urgent or
   "live". The two demo profiles move from a generic marketplace card grid
   (the exact anti-pattern the mandate calls out) into one continuous
   editorial list, matching Progression's mastery-list / Journal's temporal
   spine — comparison by reading, never a ranked showcase. ---------- */
#brokers{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#brokers .eyebrow.gold{color:var(--gold-soft)}
#brokers .eyebrow{color:rgba(244,247,252,.65)}
#brokers .panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#f4f7fc}
#brokers .panel-heading .icon{color:var(--gold-soft)}
#brokers .panel-heading h3{color:#f4f7fc}

.broker-criteria-panel,.broker-list-panel{margin-top:16px}
.broker-read-guide{display:grid;grid-template-columns:1fr;gap:0;margin:18px 0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.04)}
.broker-read-guide>div{display:flex;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;background:transparent}
.broker-read-guide>div:last-child{border-bottom:0}
.broker-read-guide .icon{color:var(--gold-soft);flex:none;margin-top:2px}
.broker-read-guide strong{display:block;margin-bottom:4px;font-size:14px;color:#f4f7fc}
.broker-read-guide p{color:rgba(244,247,252,.65);font-size:13px;margin:0}
.broker-orient-cue{color:rgba(244,247,252,.65);font-size:13px;margin:0 0 14px}
.broker-controls{display:grid;gap:12px}
.broker-controls label{display:grid;gap:6px;color:rgba(244,247,252,.65);font-size:13px}
.broker-control-label{display:flex;align-items:center;gap:7px;font-weight:700}
.broker-control-label .icon{color:var(--gold-soft);width:15px;height:15px}
.broker-controls select{width:100%;min-height:48px;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.14);padding:12px;border-radius:11px;font:inherit;transition:border-color .15s}
.broker-controls select.is-filtered{border-color:var(--gold)}

.broker-list{display:grid;gap:0;margin-top:18px}
.broker-row{padding:22px 0;border-top:1px solid rgba(255,255,255,.14);transition:opacity .2s}
.broker-row:first-child{border-top:0;padding-top:0}
.broker-row-head{display:flex;align-items:center;gap:14px}
.broker-monogram{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--navy-950);color:var(--ivory);font-family:Georgia,serif;font-weight:900;font-size:21px;flex:none}
.broker-row-heading h2{font-size:22px;margin-bottom:4px;color:#fff;font-weight:400}
.broker-row-heading p{color:rgba(244,247,252,.65);font-size:13.5px;margin:0}
.broker-photo{margin:18px 0;height:130px}
.broker-row dl{display:grid;gap:1px;background:rgba(255,255,255,.14);margin:18px 0;border-radius:10px;overflow:hidden}
.broker-row dl div{background:rgba(255,255,255,.04);padding:12px;display:flex;justify-content:space-between;gap:15px;font-size:13px}
.broker-row dl div:nth-child(-n+2) dt{color:var(--gold-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.broker-row dl div:nth-child(-n+2) dd{color:#fff;font-weight:700}
.broker-row dt{color:rgba(244,247,252,.65)}
.broker-row dd{margin:0;text-align:right;color:#f4f7fc}
.broker-row-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.verification{color:var(--gold-soft);font-size:10px;text-transform:uppercase;font-weight:900;display:flex;align-items:center;gap:5px}
.verification .icon{width:13px;height:13px}
.broker-row-foot .broker-detail{width:auto;margin:0}
.disclosure{margin-top:18px;padding:16px 18px;border-left:2px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);color:rgba(244,247,252,.65);font-size:13px;display:flex;align-items:flex-start;gap:10px}
.disclosure .icon{color:var(--gold-soft);flex:none;margin-top:2px}
.broker-empty{padding:34px 20px;text-align:center;border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-md);margin-top:18px;color:rgba(244,247,252,.65)}
.broker-empty h2{color:#fff;font-size:19px;margin-bottom:8px}

/* ---------- Support — Design System Propagation #7 ----------
   Sober and reassuring, deliberately NOT a mirror of Resources' list+feature
   composition: the FAQ stays a bordered panel (a "read" surface, reusing the
   generic .panel already used across Progression/Membership/Broker Hub), the
   contact form sits directly on the open canvas with no card border of its
   own — asymmetric on purpose so the two zones (and the two screens) never
   read as the same repeated box. ---------- */
#support{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#support .eyebrow.gold{color:var(--gold-soft)}
#support .eyebrow{color:rgba(244,247,252,.65)}
#support .panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#f4f7fc}
#support .panel-heading .icon{color:var(--gold-soft)}

.support-faq-panel details{border-top:1px solid rgba(255,255,255,.14);padding:15px 0}
.support-faq-panel details:first-of-type{border-top:0;padding-top:0}
.support-faq-panel summary{cursor:pointer;font-weight:800;list-style:none;color:#fff;min-height:44px;display:flex;align-items:center}
.support-faq-panel summary::-webkit-details-marker{display:none}
.support-faq-panel summary:before{content:"+";display:inline-block;width:16px;color:var(--gold-soft);font-weight:900}
.support-faq-panel details[open] summary:before{content:"–"}
.support-faq-panel details p{color:rgba(244,247,252,.65);margin:10px 0 0;padding-left:16px}

.support-contact{margin-top:22px}
.support-contact h2{font-size:24px;margin:8px 0 18px;color:#fff;font-weight:400}
.support-contact form{display:grid;gap:15px;max-width:480px}
.support-contact label{display:grid;gap:7px;color:rgba(244,247,252,.65);font-size:14px;font-weight:700}
.support-contact select,.support-contact textarea{width:100%;padding:13px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.04);color:#fff;font:inherit}
.support-contact textarea{min-height:120px;resize:vertical}
.support-contact .primary-action{width:auto}
.support-note{margin-top:18px;max-width:480px;font-size:13px}

/* ---------- Profile — Design System Propagation #8 ---------- */
#profile{background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%);color:#f4f7fc}
#profile .eyebrow.gold{color:var(--gold-soft)}
#profile .eyebrow{color:rgba(244,247,252,.65)}

.profile-layout{display:grid;grid-template-columns:1fr;gap:14px}
.profile-panel,.preference-panel{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:22px;background:rgba(255,255,255,.04);color:#f4f7fc}
.profile-identity{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.profile-large-avatar{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,var(--ivory),#d8c18c);color:var(--navy-950);font-family:Georgia,serif;font-size:22px;font-weight:900;flex:none}
.profile-identity h2{font-size:24px;margin-bottom:3px}
.profile-identity p:last-child{color:rgba(244,247,252,.65);margin:0;font-size:13px}
#profile-plan-badge{margin-left:auto;flex:none}
.profile-progress-strip{display:flex;flex-wrap:wrap;gap:22px;padding:18px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:8px}
.profile-progress-strip>div{display:grid;gap:3px;min-width:84px}
.profile-progress-strip span{color:rgba(244,247,252,.65);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.profile-progress-strip strong{font-family:Georgia,serif;font-size:20px;color:#f4f7fc;font-variant-numeric:tabular-nums}
.profile-progress-link{color:var(--gold-soft);font-weight:800;text-decoration:none;border-bottom:1.5px solid var(--gold-soft);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 0 2px;margin-bottom:14px}
.profile-fields{display:grid;grid-template-columns:1fr;gap:16px}
.profile-fields label{display:grid;gap:7px;color:rgba(244,247,252,.65);font-size:13px;font-weight:700}
.profile-fields input,.profile-fields select{width:100%;padding:13px 14px;min-height:48px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.04);color:#fff;font:inherit}
.field-wide{grid-column:1/-1}
.profile-actions{display:grid;gap:12px;margin-top:18px}
.preference-panel h3{margin-bottom:6px}
.preference-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);cursor:pointer}
.preference-row:first-of-type{border-top:none;padding-top:20px}
.preference-row span{display:grid;gap:4px}
.preference-row small{color:rgba(244,247,252,.65)}
.preference-row input{width:20px;height:20px;accent-color:var(--gold);flex:none}
.privacy-note{margin-top:20px}
.activity-summary{display:grid;gap:3px;margin-top:20px}
.activity-summary span,.activity-summary small{color:rgba(244,247,252,.65);font-size:12px}
.activity-summary strong{font-size:19px;color:#f4f7fc}
.empty-profile{text-align:center;max-width:520px;margin:50px auto;padding:36px 24px;border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-md)}
.empty-profile>span{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-soft)}
.empty-profile h2{color:#f4f7fc}
.empty-profile p{color:rgba(244,247,252,.65)}

/* ---------- Access / onboarding ----------
   The only public-facing entry point today (there is no separate marketing
   landing page yet). Direction: public/learning reads lighter, warmer and
   more editorial than the dark, technical Terminal — same DDA identity,
   different register. Scoped to #access only; the app chrome stays dark. */
#access{background:linear-gradient(165deg,var(--ivory),var(--ivory-2) 85%);color:var(--ink)}
#access .eyebrow.gold{color:var(--blue)}
#access .trust-list{color:var(--ink)}
#access .text-action{color:var(--muted-2)}
.access-shell{display:grid;grid-template-columns:1fr;gap:28px}
.access-illustration{display:none}
.access-photo{height:clamp(150px,32vw,220px);aspect-ratio:auto;margin-bottom:22px}
#access-title{color:var(--ink)}
.access-copy>p{color:var(--muted-2);font-size:15px;max-width:560px}
.trust-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.trust-list li{display:flex;align-items:center;gap:10px;font-size:14px}
.trust-list .icon{color:var(--blue);flex:none}
.access-card{background:var(--paper);color:var(--ink);padding:24px;border-radius:var(--r-lg);box-shadow:var(--shadow-md);border:1px solid var(--ivory-2)}
.access-card h2{font-size:27px}
.step-indicator{display:flex;align-items:center;margin-bottom:24px}
.step-indicator span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #bbb4a6;color:#777;font-size:13px;font-weight:700;flex:none}
.step-indicator span.active{background:var(--navy-950);color:var(--white);border-color:var(--navy-950)}
.step-indicator i{height:1px;background:#cfc6b5;flex:1}
.access-card form{display:grid;gap:16px}
.access-card label{display:grid;gap:7px;font-weight:750;font-size:13px}
.access-card input,.access-card select{width:100%;min-height:48px;border:1px solid #c9c1b4;background:var(--paper);color:var(--ink);border-radius:11px;padding:13px;font:inherit}
.access-card .consent{grid-template-columns:auto 1fr;align-items:start;font-weight:500;color:#5f6170;display:grid}
.access-card .consent input{width:18px;height:18px;margin-top:2px}
.form-error{min-height:20px;color:#a33;font-size:13px;margin:0}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red)!important}
.resume-device{border-top:1px solid #cec5b4;margin-top:8px;padding-top:18px;display:grid;gap:10px}
.resume-device p{color:#5f6170;margin:0;font-size:13px}

/* ---------- Utility states ---------- */
.low-data *{animation:none!important;transition:none!important}
.low-data .video-stage{background:var(--navy-700)}
.loading-layer{position:fixed;inset:0;z-index:100;display:grid;place-content:center;text-align:center;background:rgba(4,7,14,.92);backdrop-filter:blur(8px)}
.loading-layer[hidden]{display:none}
.loading-spinner{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:dda-spin 1s linear infinite}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;border-top-color:var(--line)}}
@keyframes dda-spin{to{transform:rotate(360deg)}}
.loading-mark{font-family:Georgia,serif;color:var(--gold-soft);font-size:26px;font-weight:900;letter-spacing:-.05em;display:block;margin-bottom:4px}
.loading-layer p{color:var(--muted);margin-top:4px;font-size:13px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(80px + var(--safe-b));z-index:110;padding:14px 18px;border:1px solid var(--gold);border-radius:12px;background:var(--ivory);color:var(--navy-950);font-weight:800;font-size:14px;box-shadow:var(--shadow-md);text-align:center;animation:dda-toast-in .25s var(--ease)}
.toast[hidden]{display:none}
.storage-warning{position:fixed;left:16px;right:16px;bottom:calc(150px + var(--safe-b));z-index:105;display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid var(--red);border-radius:12px;background:rgba(217,115,115,.14);backdrop-filter:blur(10px);color:var(--white);font-weight:700;font-size:13px;box-shadow:var(--shadow-md)}
.storage-warning .icon{flex:none;color:var(--red)}
.storage-warning[hidden]{display:none}
@keyframes dda-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   TABLET — from 700px
   ========================================================= */
@media(min-width:700px){
  .terminal-lead{grid-template-columns:1.35fr .65fr;align-items:center}
  .terminal-lead-actions{flex-direction:row;align-items:center;gap:24px}
  .terminal-two{grid-template-columns:1fr 1fr}
  .terminal-family{grid-template-columns:.9fr 1.1fr;align-items:center}
  .terminal-tools{grid-template-columns:repeat(3,1fr)}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .broker-controls{grid-template-columns:1fr 1fr}
  .broker-read-guide{grid-template-columns:repeat(3,1fr)}
  .broker-read-guide>div{border-bottom:0;border-right:1px solid rgba(255,255,255,.14)}
  .broker-read-guide>div:last-child{border-right:0}
  .comparison-grid{grid-template-columns:1fr 1fr}
  .profile-fields{grid-template-columns:1fr 1fr}
  .access-shell{grid-template-columns:1fr}
}

/* =========================================================
   DESKTOP — from 860px  (sidebar layout takes over)
   ========================================================= */
@media(min-width:860px){
  .app-shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 29px)}
  /* Public pages (#landing, #access) hide .sidebar via display:none, which
     removes it from grid auto-placement — without this, main becomes the
     sole grid item and is auto-placed into the sidebar's leftover 260px
     track instead of spanning the row, collapsing the whole page width. */
  body.public-shell .app-shell{grid-template-columns:1fr}
  .sidebar{
    display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 29px);overflow-y:auto;
    padding:32px 20px 22px;border-right:1px solid var(--line-soft);background:var(--navy-900);
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin:0 8px 38px;color:inherit}
  .brand-mark{font-family:Georgia,serif;font-weight:800;letter-spacing:-.06em;font-size:26px;background:linear-gradient(135deg,var(--cta-blue-2),var(--cta-blue) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand-name{font-size:10px;line-height:1.25;max-width:88px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
  .sidebar nav{display:grid;gap:6px}
  .sidebar-foot{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:18px}
  main{padding-bottom:0}
  .topbar{top:0;height:84px;padding:0 clamp(24px,4vw,56px);background:rgba(5,11,20,.85)}
  .mobile-brand{display:none}
  .context{display:grid}
  .context strong{font-size:17px}
  .network-state span{display:inline}
  .mobile-nav{display:none}
  .view{padding:44px clamp(24px,4vw,56px) 90px}
  h1{margin-bottom:15px}
  .section-intro{margin-bottom:40px}

  .primary-action,.secondary-action{width:auto}
  .panel{padding:26px}

  .terminal-entry{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px}
  .terminal-lead{grid-template-columns:1.5fr .5fr;gap:40px}
  .terminal-lead-photo{aspect-ratio:4/3}
  .terminal-lead-photo .progress-ring{width:72px}
  .terminal-aperture{flex-direction:row;justify-content:space-between;align-items:center;padding:28px 32px}
  .terminal-aperture>div:first-child{max-width:560px}

  .progress-hero{grid-template-columns:1.4fr 1fr 1fr}
  .progress-stat.featured{grid-column:auto}

  .path-number{font-size:28px}
  .journey-current{padding:34px}
  .journey-current-eyebrow .path-number{font-size:26px}
  .journey-current h2{font-size:27px}
  .journey-node{padding:16px 0}

  .lesson-layout{grid-template-columns:minmax(0,1fr) 280px;gap:36px}
  .lesson-outline{display:block;position:sticky;top:110px;align-self:start;border-left:1px solid var(--line);padding-left:22px}
  .lesson-outline ol{padding-left:18px;color:var(--muted);margin:0}
  .lesson-outline li{padding:7px 4px}
  .lesson-outline li.active{color:var(--gold-soft);font-weight:800}
  .result-stats{grid-template-columns:repeat(3,1fr)}
  .lesson-actions{position:static;background:transparent;padding:22px 0 0}
  .video-stage{aspect-ratio:16/9}
  .lesson-lead{font-size:19px}
  .lesson-copy p{font-size:17px}

  .library-list,.resource-feature{max-width:760px}
  .library-entry{padding:26px 28px}

  .plan-card h2{font-size:36px}
  .family-panel{grid-template-columns:.9fr 1.1fr;align-items:center}

  .brvm-intro{grid-template-columns:.85fr 1.15fr;align-items:stretch}
  .brvm-photo{width:100%;height:100%;min-height:280px}

  .broker-controls{display:flex;gap:14px}
  .broker-controls select{min-width:220px}

  .profile-layout{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr)}
  .profile-actions{display:flex}

  .access-shell{grid-template-columns:1fr minmax(340px,460px);gap:clamp(36px,5vw,80px);align-items:center;min-height:600px}
  .access-illustration{display:block;margin-bottom:24px;max-width:380px;color:var(--gold-soft)}
}

/* =========================================================
   LARGE DESKTOP — from 1200px
   ========================================================= */
@media(min-width:1200px){
  .view{padding-left:clamp(24px,6vw,80px);padding-right:clamp(24px,6vw,80px)}
  h1{font-size:clamp(44px,4.4vw,64px)}
  .lesson-layout{gap:48px}
}


/* ======================================================================
   UX Focus V1 — reduce static density and make the active learning state
   visually dominant without inventing content or fake live data.
   ====================================================================== */
.journey-current {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(197, 157, 89, .34);
  box-shadow: 0 18px 48px rgba(9, 18, 34, .10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.journey-current::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #c9a45f, rgba(201, 164, 95, .22));
}
.journey-current:hover,
.journey-current:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(9, 18, 34, .15);
  border-color: rgba(197, 157, 89, .58);
}
.journey-current h2 {
  max-width: 16ch;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.02;
}
.journey-current > p:not(.journey-current-why) { max-width: 62ch; }

.journey-rail {
  margin-top: 18px;
  gap: 0;
}
.journey-node {
  opacity: .82;
  padding-block: 16px;
  transition: opacity .2s ease, transform .2s ease;
}
.journey-node:hover { opacity: 1; transform: translateX(2px); }
.journey-node.coming_soon strong { opacity: .78; }

.journey-future-note,
.mastery-context-note {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px dashed rgba(30, 55, 94, .18);
  border-radius: 14px;
  background: rgba(245, 242, 234, .54);
  color: var(--muted, #667085);
  font-size: .9rem;
}
.mastery-context-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex-direction: column;
}
.mastery-context-note strong { color: var(--ink, #17243b); }

.mastery-row-focused {
  border-color: rgba(197, 157, 89, .30);
  box-shadow: 0 14px 36px rgba(9, 18, 34, .08);
}
.mastery-row-focused .proof-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mastery-row-focused .proof-timeline li {
  min-width: 0;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(245, 242, 234, .64);
}
.mastery-row-focused .proof-timeline small { display: block; margin-top: 2px; }

.index-card {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.index-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(9, 18, 34, .10); }
.index-sparkline path {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: dda-line-reveal 1.1s ease forwards;
}
@keyframes dda-line-reveal { to { stroke-dashoffset: 0; } }

.data-badge {
  letter-spacing: .01em;
}
.modules-recap-more {
  opacity: .62;
}

@media (max-width: 720px) {
  .journey-current { min-height: 220px; padding: 22px 18px 24px; }
  .journey-current h2 { max-width: none; font-size: clamp(1.7rem, 9vw, 2.35rem); }
  .mastery-row-focused .proof-timeline {
    grid-template-columns: 1fr 1fr;
  }
  .journey-node p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-current,
  .journey-node,
  .index-card { transition: none; }
  .index-sparkline path { animation: none; stroke-dashoffset: 0; }
}


/* ======================================================================
   DDA Visual System V2 — Institutional Human Intelligence
   Editorial public surfaces + institutional learner app.
   No external font dependency: premium native serif + modern system sans.
   ====================================================================== */
:root {
  --dda-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Baskerville, Georgia, serif;
  --dda-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { font-family: var(--dda-sans); }

#landing h1,
#access h1,
.view > .section-heading h1,
.journey-current h2,
.terminal-lead h1,
.terminal-family h2,
.family-panel h2,
.market-zone h2,
.membership-hero h1 {
  font-family: var(--dda-serif);
  font-weight: 600;
  letter-spacing: -.025em;
}

#landing h1 {
  max-width: 12ch;
  font-size: clamp(2.65rem, 7vw, 5.5rem);
  line-height: .94;
}

.eyebrow {
  letter-spacing: .11em;
  font-weight: 700;
}

.primary-action,
.secondary-action,
.text-action,
button {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.primary-action:hover,
.primary-action:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(13, 79, 176, .4);
}
.primary-action:active { transform: translateY(0) scale(.985); }
.text-action:hover span { transform: translateX(3px); }
.text-action span { display: inline-block; transition: transform .18s ease; }

/* DDA Aperture — the brand's editorial visual signature. It deliberately
   replaces explicit "photography coming soon" placeholders until real,
   licensed DDA photography is available. */
.dda-aperture {
  position: relative;
  min-height: clamp(260px, 38vw, 460px);
  border-radius: 12px;
  overflow: hidden;
  padding: clamp(22px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #f8f3e8;
  background:
    radial-gradient(circle at 77% 18%, rgba(62, 148, 202, .28), transparent 26%),
    linear-gradient(135deg, #07111f 0%, #10274a 58%, #0b6fae 135%);
  box-shadow: 0 24px 70px rgba(7, 17, 31, .22);
}
.dda-aperture::after {
  content: "";
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  right: -22%;
  top: -34%;
  border: 1px solid rgba(226, 190, 118, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(226, 190, 118, .025), 0 0 0 86px rgba(226, 190, 118, .018);
}
.aperture-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 80%);
}
.aperture-kicker,
.dda-aperture strong,
.dda-aperture em { position: relative; z-index: 1; }
.aperture-kicker { font-size: .72rem; letter-spacing: .18em; color: #dfbc79; font-weight: 800; }
.dda-aperture strong {
  margin-top: 10px;
  font-family: var(--dda-serif);
  font-size: clamp(2.1rem, 6vw, 4.8rem);
  line-height: .94;
  font-weight: 600;
}
.dda-aperture em {
  margin-top: 6px;
  font-style: normal;
  color: rgba(248,243,232,.7);
  font-size: clamp(1rem, 2vw, 1.25rem);
}
.aperture-thread {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.aperture-thread i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(248,243,232,.25);
  border: 1px solid rgba(248,243,232,.45);
}
.aperture-thread i:nth-child(-n+2) { background: #d9a441; border-color: #d9a441; }

/* Terminal visual: progress is the image. */
.terminal-lead-photo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 25%, rgba(41, 147, 210, .18), transparent 32%),
    linear-gradient(145deg, #0b1628, #172c4c);
}
.terminal-lead-photo::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(217,164,65,.16);
  border-radius: 10px;
}
.terminal-visual-copy {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: rgba(255,255,255,.82);
}
.terminal-visual-copy small { letter-spacing: .12em; color: #d9a441; font-weight: 700; }
.terminal-visual-copy strong { font-family: var(--dda-serif); font-size: 1.2rem; font-weight: 500; }

/* DDA Family visual: connected learners, not a stock-photo placeholder. */
.dda-community-visual {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(150deg, #0b1628, #18375b);
  color: #fff;
}
.dda-community-visual.light {
  background: linear-gradient(145deg, #eee8db, #f8f5ed);
  color: #16223a;
  border: 1px solid rgba(22,34,58,.09);
}
.community-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  font-family: var(--dda-serif);
  font-size: 1.4rem;
  background: #d9a441;
  color: #0b1628;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.node-a { left: 18%; top: 22%; }
.node-b { right: 16%; bottom: 20%; background: #0b6fae; color: #fff; }
.community-line {
  position: absolute;
  left: 26%; top: 36%;
  width: 54%;
  height: 1px;
  background: linear-gradient(90deg, rgba(217,164,65,.8), rgba(11,111,174,.8));
  transform: rotate(21deg);
  transform-origin: left center;
}
.line-b { top: 54%; transform: rotate(-13deg); opacity: .36; }
.dda-community-visual > strong {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: 70%;
  font-family: var(--dda-serif);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  line-height: 1.05;
}
.dda-community-visual > strong small {
  font-family: var(--dda-sans);
  font-size: .72rem;
  letter-spacing: .05em;
  opacity: .68;
}

/* Regional BRVM visual — factual, editorial, zero fake live data. */
.brvm-editorial-visual {
  position: relative;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(120deg, rgba(217,164,65,.12), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(24,155,146,.22), transparent 26%),
    #0b1628;
  color: #f8f3e8;
}
.brvm-editorial-visual::before {
  content: "ABIDJAN";
  position: absolute;
  top: 24px; right: 24px;
  font-size: .68rem;
  letter-spacing: .18em;
  color: rgba(248,243,232,.48);
}
.brvm-map-word {
  position: absolute;
  top: 12%;
  left: 5%;
  font-family: var(--dda-serif);
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  color: rgba(248,243,232,.07);
}
.brvm-editorial-visual strong { position: relative; font-family: var(--dda-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.brvm-editorial-visual small { position: relative; margin-top: 8px; color: rgba(248,243,232,.62); }

/* Editorial reveal: subtle, fast, never theatrical. */
.view.active .panel,
.view.active .terminal-mi,
.view.active .terminal-two,
.view.active .terminal-family,
.view.active .terminal-aperture,
.view.active .market-zone,
.view.active .journey-current {
  animation: dda-reveal .42s cubic-bezier(.2,.75,.2,1) both;
}
.view.active .panel:nth-of-type(2),
.view.active .terminal-two { animation-delay: .035s; }
.view.active .panel:nth-of-type(3),
.view.active .terminal-family { animation-delay: .07s; }
@keyframes dda-reveal {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-ring,
.terminal-thread-bead,
.proof-dot {
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.proof-timeline .done .proof-dot {
  box-shadow: 0 0 0 4px rgba(217,164,65,.09);
}

/* Broker pages should lead with verified criteria, never empty media shells. */
.broker-row { padding-top: 22px; }
.broker-photo { display: none !important; }

@media (max-width: 720px) {
  #landing h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .dda-aperture { min-height: 260px; }
  .dda-community-visual { min-height: 210px; }
  .brvm-editorial-visual { min-height: 235px; }
}

@media (prefers-reduced-motion: reduce) {
  .view.active .panel,
  .view.active .terminal-mi,
  .view.active .terminal-two,
  .view.active .terminal-family,
  .view.active .terminal-aperture,
  .view.active .market-zone,
  .view.active .journey-current {
    animation: none;
  }
}


/* ======================================================================
   DDA VISUAL IDENTITY V2 — editorial institution, not generic SaaS.
   Public surfaces: ivory/editorial. Learner app: deep navy/precision.
   ====================================================================== */
:root{
  --dda-serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Baskerville, Georgia, "Times New Roman", serif;
  --dda-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dda-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --dda-void:#040912;
  --dda-navy-950:#060d17;
  --dda-navy-900:#081426;
  --dda-navy-850:#0a1728;
  --dda-navy-800:#0b1b30;
  --dda-navy-700:#0f2440;
  --dda-navy-600:#15304f;
  --dda-ivory:#f5f0e6;
  --dda-paper:#fbf8f1;
  --dda-navy:#07111f;
  --dda-navy-2:#0d1e34;
  --dda-gold:#c99a45;
  --dda-gold-soft:#e3c27f;
  --dda-brass:var(--dda-gold);
  --dda-brass-soft:var(--dda-gold-soft);
  --dda-ink:#122f48;
  --dda-white:#f8fafc;
  --dda-muted:#93a6ba;
  --dda-muted-strong:#c4d0de;
  --dda-cyan:#54c5e8;
  --dda-teal:#189b92;
  --dda-line-subtle:rgba(174,191,213,.10);
  --dda-line:rgba(174,191,213,.16);
  --dda-line-strong:rgba(217,164,65,.34);
  --dda-glass:rgba(255,255,255,.045);
  --dda-glass-strong:rgba(255,255,255,.075);
  --dda-surface-base:linear-gradient(155deg,rgba(15,36,64,.92),rgba(6,13,23,.98));
  --dda-surface-raised:linear-gradient(145deg,rgba(20,43,72,.96),rgba(9,22,39,.98));
  --dda-surface-inset:linear-gradient(180deg,rgba(4,9,18,.72),rgba(11,27,48,.58));
  --dda-texture-grid:linear-gradient(rgba(174,191,213,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(174,191,213,.035) 1px,transparent 1px);
  --dda-texture-grid-size:32px 32px;
  --dda-texture-halo:radial-gradient(circle at 78% 8%,rgba(217,164,65,.13),transparent 30%),radial-gradient(circle at 12% 18%,rgba(84,197,232,.08),transparent 26%);
  --dda-shadow-card:0 20px 55px rgba(0,0,0,.22);
  --dda-shadow-deep:0 30px 80px rgba(0,0,0,.34);
  --dda-shadow-brass:0 12px 34px rgba(201,154,69,.16);
  --dda-ease:cubic-bezier(.22,.68,0,1);
  --dda-duration-fast:160ms;
  --dda-duration-base:260ms;
  --dda-duration-slow:480ms;
}
body{font-family:var(--dda-sans)}
h1,h2{font-family:var(--dda-serif)}
body.public-shell{background:var(--dda-ivory);color:#15243a}
#landing{
  --lp-blue:#0d4fb0;
  --lp-blue-2:#2f74d6;
  --lp-bg:#04070f;
  --lp-card:#0c1524;
  --lp-card-2:#0f1c30;
  --lp-line:rgba(255,255,255,.09);
  --lp-heading:#f4f7fc;
  --lp-body:rgba(226,233,245,.68);
  --lp-body-soft:rgba(226,233,245,.5);
  max-width:none;
  min-height:100vh;
  padding:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 82% 0%, rgba(13,79,176,.16), transparent 38%),
    radial-gradient(circle at 8% 30%, rgba(217,164,65,.08), transparent 32%),
    var(--lp-bg);
  color:var(--lp-heading);
}
.landing-editorial-shell{
  max-width:1440px;
  margin:0 auto;
  padding:clamp(28px,5vw,74px) clamp(20px,5vw,72px) 44px;
  display:grid;
  gap:34px;
  align-items:end;
}
.landing-main-copy{max-width:760px;min-width:0}
.landing-masthead{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  margin-bottom:clamp(36px,8vw,86px);
  border-bottom:1px solid rgba(21,36,58,.18);
  color:#213653;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.11em;
}
.landing-masthead{color:rgba(226,233,245,.55)}
.landing-masthead span{color:var(--gold-soft);font-weight:600}
#landing .eyebrow.gold{color:var(--gold-soft)}
#landing h1{
  max-width:min(13ch,100%);
  margin-bottom:20px;
  color:var(--lp-heading);
  font-family:var(--dda-sans);
  font-size:clamp(2.6rem,7.5vw,6.2rem);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.03em;
}
#landing h1 em{
  display:block;
  margin-top:.12em;
  background:linear-gradient(100deg,var(--lp-blue-2),var(--lp-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-style:normal;
  font-weight:800;
}
.landing-deck{
  max-width:700px;
  color:var(--lp-body);
  font-size:clamp(1rem,2vw,1.22rem);
  line-height:1.65;
}
.landing-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:30px 0 24px}
.landing-actions .primary-action{width:auto;min-width:190px;padding-inline:24px}
#landing .primary-action{
  background:linear-gradient(135deg,var(--lp-blue-2),var(--lp-blue));
  border:0;
  box-shadow:0 14px 34px rgba(13,79,176,.38),0 2px 0 rgba(255,255,255,.12) inset;
  color:#fff;
}
#landing .primary-action:hover{box-shadow:0 18px 40px rgba(13,79,176,.48),0 2px 0 rgba(255,255,255,.16) inset}
.landing-secondary{color:var(--lp-heading)!important;text-decoration:none!important;font-weight:700}
.landing-trust{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  margin:24px 0 0;
}
.landing-trust li{font-size:.82rem;color:var(--lp-body-soft)}
.landing-trust .icon{color:var(--gold-soft)}

.landing-aperture{
  min-height:520px;
  min-width:0;
  justify-content:space-between;
  padding:30px;
  border-radius:2px;
  background:
    radial-gradient(circle at 75% 13%, rgba(64,156,217,.30), transparent 20%),
    radial-gradient(circle at 15% 88%, rgba(201,154,69,.18), transparent 25%),
    linear-gradient(145deg,#06101c 0%,#112a49 63%,#0b6fae 145%);
  box-shadow:0 30px 80px rgba(6,16,28,.22);
}
.landing-aperture-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:18px;align-items:center}
.landing-edition{font-size:.66rem;letter-spacing:.13em;color:rgba(255,255,255,.48)}
.landing-aperture-copy{position:relative;z-index:2;margin-top:auto}
.landing-aperture-copy strong{display:block;font-size:clamp(3rem,6vw,5.6rem);line-height:.88}
.landing-aperture-copy em{display:block;margin-top:16px;font-style:normal;font-weight:700;font-size:clamp(1.35rem,3vw,2.4rem);line-height:1.04;color:rgba(248,243,232,.7)}
.landing-signal{
  position:absolute;
  left:0;right:0;bottom:110px;
  height:120px;
  display:flex;
  align-items:flex-end;
  gap:1px;
  padding:0 30px;
  opacity:.44;
}
.landing-signal span{flex:1;background:linear-gradient(180deg,rgba(227,194,127,.1),rgba(227,194,127,.85));transform-origin:bottom;animation:dda-signal 2.8s ease-in-out infinite alternate}
.landing-signal span:nth-child(1){height:34%}.landing-signal span:nth-child(2){height:66%;animation-delay:.2s}.landing-signal span:nth-child(3){height:42%;animation-delay:.35s}.landing-signal span:nth-child(4){height:84%;animation-delay:.5s}.landing-signal span:nth-child(5){height:58%;animation-delay:.65s}
@keyframes dda-signal{from{transform:scaleY(.78);opacity:.45}to{transform:scaleY(1);opacity:1}}

.landing-method{
  max-width:1440px;
  margin:0 auto;
  padding:18px clamp(20px,5vw,72px) 70px;
  display:grid;
  gap:14px;
  border-top:1px solid var(--lp-line);
}
.landing-method article{
  position:relative;
  padding:26px 24px;
  background:var(--lp-card);
  border:1px solid var(--lp-line);
  border-radius:20px;
}
.method-index{
  display:block;
  margin-bottom:22px;
  color:var(--lp-blue-2);
  font-family:var(--dda-sans);
  font-weight:800;
  font-size:1.7rem;
}
.landing-method h2{
  max-width:11ch;
  margin-bottom:12px;
  color:var(--lp-heading);
  font-family:var(--dda-sans);
  font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  line-height:1.05;
}
.landing-method p:last-child{max-width:460px;color:var(--lp-body);font-size:.92rem}

.landing-institution{
  margin:0;
  padding:clamp(34px,6vw,72px) clamp(20px,5vw,72px);
  background:linear-gradient(165deg,var(--lp-card-2),var(--lp-bg) 120%);
  color:#f4ecdd;
  display:grid;
  gap:34px;
  border-top:1px solid var(--lp-line);
  border-bottom:1px solid var(--lp-line);
}
.landing-institution>div:first-child{max-width:1000px}
.landing-institution h2{max-width:17ch;font-family:var(--dda-sans);font-size:clamp(1.9rem,4.6vw,3.8rem);line-height:1.02;font-weight:800;color:var(--lp-heading)}
.institution-proof{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#9fb0c2;font-size:.67rem;font-weight:700;letter-spacing:.11em}
.institution-proof i{width:22px;height:1px;background:var(--lp-blue-2)}
.landing-institution-photo{position:relative;overflow:hidden;border-radius:18px;min-height:220px;border:1px solid var(--lp-line)}

.landing-section-head{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.landing-section-head h2{max-width:26ch;margin-top:8px;color:var(--lp-heading);font-family:var(--dda-sans);font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.12;font-weight:800}

.landing-demo,
.landing-problem,
.landing-steps,
.landing-plans{max-width:1440px;margin:0 auto;padding:50px clamp(20px,5vw,72px) 8px;border-top:1px solid var(--lp-line)}

.landing-demo-grid{margin-top:28px;display:grid;gap:14px}
.landing-demo-grid article{padding:22px;background:var(--lp-card);border:1px solid var(--lp-line);border-radius:18px}
.landing-demo-grid .icon{width:22px;height:22px;color:var(--lp-blue-2);margin-bottom:14px;padding:10px;background:rgba(13,79,176,.14);border-radius:12px;box-sizing:content-box}
.landing-demo-grid h3{color:var(--lp-heading);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.landing-demo-grid p{color:var(--lp-body);font-size:.9rem;max-width:38ch}

.landing-problem-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.landing-problem-list li{display:flex;gap:14px;align-items:flex-start;padding:18px;background:var(--lp-card);border:1px solid var(--lp-line);border-radius:16px}
.landing-problem-list .icon{flex:none;width:18px;height:18px;margin-top:3px;padding:8px;color:#ff8a72;background:rgba(217,115,115,.14);border-radius:10px;box-sizing:content-box}
.landing-problem-list strong{display:block;color:var(--lp-heading);font-size:1rem;margin-bottom:4px;font-weight:700}
.landing-problem-list p{margin:0;color:var(--lp-body);font-size:.9rem;max-width:52ch}

.landing-steps-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.landing-steps-list li{display:flex;gap:20px;align-items:flex-start;padding:20px;background:var(--lp-card);border:1px solid var(--lp-line);border-radius:16px}
.landing-steps-list .method-index{margin-bottom:0;flex:none;min-width:2.2ch;color:var(--lp-blue-2);font-family:var(--dda-sans);font-weight:800}
.landing-steps-list h3{color:var(--lp-heading);font-weight:700;font-size:1.02rem;margin-bottom:6px}
.landing-steps-list p{margin:0;color:var(--lp-body);font-size:.9rem;max-width:46ch}

.landing-plans-grid{margin-top:28px;display:grid;gap:18px}
.landing-plan-card{padding:26px 24px 30px;border:1px solid var(--lp-line);border-radius:20px;background:var(--lp-card)}
.landing-plan-card h3{margin:4px 0 10px;color:var(--lp-heading);font-size:1.5rem;font-family:var(--dda-sans);font-weight:800}
.landing-plan-card .plan-tagline{color:var(--lp-body);font-size:.88rem;margin-bottom:18px;max-width:34ch}
.landing-plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.landing-plan-card ul li{position:relative;padding-left:18px;color:var(--lp-body);font-size:.9rem}
.landing-plan-card ul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--lp-blue-2)}
.landing-plan-card-gold{border-color:rgba(217,164,65,.4);background:linear-gradient(165deg,var(--lp-card-2),rgba(217,164,65,.06) 120%)}
.landing-plans-note{max-width:1440px;margin:18px auto 0;padding:0 clamp(20px,5vw,72px) 50px;color:var(--lp-body-soft);font-size:.8rem}

.landing-guardrails{max-width:1440px;margin:0 auto;padding:50px clamp(20px,5vw,72px) 56px;border-top:1px solid var(--lp-line)}
.landing-guardrail-list{margin-top:24px}
.landing-guardrail-list li{color:var(--lp-body)}

.landing-final-cta{margin:0;padding:clamp(48px,10vw,96px) clamp(20px,5vw,72px);background:radial-gradient(circle at 50% 0%,rgba(13,79,176,.18),transparent 55%),var(--lp-bg);color:var(--lp-heading);text-align:center;display:grid;gap:16px;justify-items:center;border-top:1px solid var(--lp-line)}
.landing-final-cta h2{max-width:20ch;font-family:var(--dda-sans);font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.08;font-weight:800}
.landing-final-cta p{margin:0;max-width:52ch;color:var(--lp-body);font-size:1rem}
.landing-final-cta .primary-action{width:auto;min-width:220px;padding-inline:26px;margin-top:6px}

#dashboard .terminal-entry h1,
#dashboard .terminal-lead h2,
#path .journey-current h2,
#progress .section-intro h1,
.lesson-main h1,
.lesson-main h2{font-family:var(--dda-serif)}

.terminal-lead{
  position:relative;
  overflow:hidden;
}
.terminal-lead::after{
  content:"";
  position:absolute;
  inset:auto 0 0 auto;
  width:30%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.terminal-lead-photo{
  min-height:230px;
  border-radius:18px!important;
}
.terminal-lead-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(135deg,rgba(0,0,0,.9),transparent 72%);
  pointer-events:none;
}
.terminal-lead-go{transition:gap .2s ease,color .2s ease}
.terminal-lead-go:hover{gap:12px;color:var(--gold-soft)}

.lesson-layout{align-items:start}
.lesson-main{
  max-width:900px;
}
.lesson-main>p,
.lesson-copy p,
.example-callout p{max-width:68ch}
.lesson-outline{
  position:sticky;
  top:110px;
  max-height:calc(100vh - 140px);
  overflow:auto;
}
.lesson-main .learning-check,
.lesson-main .principle,
.lesson-main .example-callout,
.lesson-main .comparison-block,
.lesson-main .chart-observe,
.lesson-main .zone-identify{
  scroll-margin-top:110px;
}
.learning-check{
  border-radius:2px;
  box-shadow:none;
}
.answer-grid button{
  border-radius:8px;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.answer-grid button:hover{transform:translateX(3px)}
.answer-grid button.correct{box-shadow:inset 3px 0 var(--green)}
.answer-grid button.incorrect{box-shadow:inset 3px 0 var(--red)}

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
[data-reveal].revealed{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}

@media(min-width:640px){
  .landing-plans-grid{grid-template-columns:1fr 1fr}
  .landing-demo-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .landing-editorial-shell{grid-template-columns:minmax(0,1.08fr) minmax(430px,.72fr);min-height:760px}
  .landing-method{grid-template-columns:repeat(3,1fr)}
  .landing-institution{grid-template-columns:1.3fr .8fr;grid-template-areas:"text photo" "proof photo";align-items:end}
  .landing-institution>div:first-child{grid-area:text}
  .institution-proof{grid-area:proof}
  .landing-institution-photo{grid-area:photo;min-height:100%}
  .landing-demo-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .landing-demo-grid article{padding:24px}
  .landing-problem-list{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:16px}
  .landing-steps-list{grid-template-columns:repeat(5,1fr);gap:14px}
  .landing-steps-list li{flex-direction:column;gap:14px;padding:22px 20px}
}
@media(max-width:899px){
  .landing-masthead{margin-bottom:38px;flex-direction:column;gap:4px}
  .landing-aperture{min-height:410px}
  #landing h1{font-size:clamp(3rem,14vw,5rem)}
}
@media(prefers-reduced-motion:reduce){
  .landing-signal span{animation:none}
}


/* ======================================================================
   Lesson Experience V2 — DDA learning should feel like a guided studio,
   not a document with buttons. One authored beat at a time, one visual
   grammar across M0 and M1.1.
   ====================================================================== */
.lesson-layout{
  align-items:start;
}
.lesson-main{
  counter-reset:dda-beat;
  position:relative;
}
.lesson-main > .eyebrow:first-of-type{
  margin-top:4px;
  letter-spacing:.16em;
}
.lesson-main > h1{
  max-width:14ch;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.1rem,7vw,4.5rem);
  line-height:.98;
  letter-spacing:-.045em;
}
.lesson-lead{
  max-width:66ch;
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.65;
  color:rgba(246,243,236,.74);
  margin-bottom:18px;
}
.lesson-loop{
  padding:14px 0 22px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(232,198,133,.16);
}
.lesson-beat{
  counter-increment:dda-beat;
  position:relative;
  margin:0;
  padding:clamp(26px,5vw,48px) 0;
  border-bottom:1px solid rgba(147,166,186,.13);
}
.lesson-beat:not(.lesson-beat-quiet)::before{
  content:counter(dda-beat, decimal-leading-zero);
  position:absolute;
  top:30px;
  right:0;
  font:600 11px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.16em;
  color:rgba(232,198,133,.54);
}
.lesson-beat h2{
  max-width:18ch;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.7rem,4.8vw,2.7rem);
  line-height:1.04;
  letter-spacing:-.035em;
}
.lesson-beat p{
  max-width:64ch;
}
.lesson-beat-case_study .example-callout{
  margin:0;
  padding:22px 0 22px 20px;
  border:0;
  border-left:3px solid var(--gold);
  border-radius:0;
  background:transparent;
}
.lesson-beat-case_study .example-callout > .icon{
  color:var(--gold-soft);
}
.lesson-beat-decision_choice,
.lesson-beat-quiz{
  margin-inline:clamp(-18px,-3vw,-44px);
  padding-inline:clamp(18px,3vw,44px);
  background:
    radial-gradient(circle at 88% 12%,rgba(217,164,65,.10),transparent 30%),
    linear-gradient(145deg,rgba(11,27,48,.96),rgba(5,11,20,.98));
  border-bottom:0;
  border-radius:22px;
  box-shadow:0 22px 60px rgba(0,0,0,.18);
}
.lesson-beat-decision_choice + .lesson-beat-case_study{
  margin-top:16px;
}
.decision-choice-options,
.answer-grid{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.decision-option,
.answer-grid button{
  min-height:56px;
  padding:15px 16px;
  text-align:left;
  border:1px solid rgba(147,166,186,.22);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.decision-option:hover,
.answer-grid button:hover{
  transform:translateY(-2px);
  border-color:rgba(232,198,133,.56);
  background:rgba(232,198,133,.06);
}
.decision-option:active,
.answer-grid button:active{
  transform:translateY(0) scale(.99);
}
.feedback:not(:empty){
  margin-top:14px;
  padding:13px 15px;
  border-left:3px solid var(--gold);
  background:rgba(217,164,65,.07);
  border-radius:0 10px 10px 0;
}
.lesson-beat-chart_observe,
.lesson-beat-zone_identify,
.lesson-beat-graphical_exercise{
  padding-top:36px;
}
.chart-frame,
.graphical-exercise-canvas{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(232,198,133,.18);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    rgba(8,20,38,.78);
  background-size:24px 24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}
.price-chart{
  min-height:220px;
}
.lesson-beat-text_short .lesson-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.principle{
  margin-top:22px;
  max-width:720px;
  border:0;
  border-top:1px solid rgba(232,198,133,.30);
  border-bottom:1px solid rgba(232,198,133,.30);
  border-radius:0;
  background:transparent;
  padding:18px 0;
}
.lesson-beat-competency_check{
  padding:12px 0 18px;
  border-bottom:0;
}
.competency-check-block{
  background:transparent;
  border:1px solid rgba(232,198,133,.22);
}
.lesson-beat-journal_link .journal-link-block{
  background:linear-gradient(135deg,rgba(232,198,133,.08),rgba(11,27,48,.10));
  border:1px solid rgba(232,198,133,.18);
}
/* Scoped below the 860px desktop breakpoint only: the unscoped version of
   this rule used to override the ".lesson-actions{position:static}" desktop
   declaration at line ~1185 (same specificity, later in source order), so
   on desktop this bar stayed sticky and overlapped the lesson text below
   it instead of sitting in the normal flow. Mobile keeps the sticky,
   blurred action bar; desktop goes back to static, as originally intended. */
@media(max-width:859px){
  .lesson-actions{
    position:sticky;
    bottom:calc(70px + var(--safe-b));
    z-index:12;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    padding:12px;
    margin:28px -12px 0;
    border:1px solid rgba(147,166,186,.18);
    border-radius:16px;
    background:rgba(5,11,20,.90);
    backdrop-filter:blur(18px);
    box-shadow:0 12px 38px rgba(0,0,0,.25);
  }
  .lesson-actions .secondary-action{
    width:auto;
  }
}
.lesson-outline{
  position:sticky;
  top:112px;
  max-height:calc(100vh - 140px);
  overflow:auto;
}
.lesson-outline li{
  transition:color .18s ease,transform .18s ease,border-color .18s ease;
}
.lesson-outline li.active{
  transform:translateX(4px);
}
.lesson-layout-m1 .lesson-main > h1{
  max-width:12ch;
}
.lesson-layout-m1 .lesson-beat-decision_choice{
  background:
    radial-gradient(circle at 82% 14%,rgba(13,166,217,.08),transparent 28%),
    radial-gradient(circle at 15% 85%,rgba(217,164,65,.07),transparent 30%),
    linear-gradient(145deg,rgba(8,20,38,.98),rgba(5,11,20,.99));
}

@media (min-width:900px){
  .lesson-layout{
    grid-template-columns:minmax(0,760px) minmax(220px,280px);
    gap:clamp(42px,6vw,88px);
  }
  .lesson-beat-text_short .lesson-copy{
    grid-template-columns:minmax(0,1fr) minmax(180px,.42fr);
    column-gap:36px;
    align-items:start;
  }
  .lesson-beat-text_short .lesson-copy .eyebrow,
  .lesson-beat-text_short .lesson-copy h2,
  .lesson-beat-text_short .lesson-copy > p{
    grid-column:1;
  }
  .lesson-beat-text_short .principle{
    grid-column:2;
    grid-row:1 / span 3;
    margin-top:22px;
  }
}
@media (max-width:720px){
  .lesson-main > h1{max-width:none}
  .lesson-beat:not(.lesson-beat-quiet)::before{top:20px}
  .lesson-beat{padding:28px 0}
  .lesson-beat-decision_choice,
  .lesson-beat-quiz{
    margin-inline:-16px;
    padding-inline:16px;
    border-radius:0;
  }
  .price-chart{min-height:180px}
  .lesson-actions{
    grid-template-columns:1fr;
  }
  .lesson-actions .secondary-action{width:100%}
}
body.low-data .decision-option,
body.low-data .answer-grid button,
body.low-data .lesson-outline li{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .decision-option,
  .answer-grid button,
  .lesson-outline li{transition:none!important}
}


/* Lesson Experience V2 — mobile step rail
   Keep the four real lesson stages on one readable rail on narrow screens.
   Wrapping turns the progression indicator into two unrelated rows and weakens
   the learner's sense of where they are. Horizontal scrolling preserves the
   complete sequence without shrinking labels or changing the underlying state. */
@media (max-width:720px){
  .lesson-loop{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-inline:2px;
  }
  .lesson-loop::-webkit-scrollbar{display:none}
  .lesson-loop li{flex:none}
}


/* Lesson Experience V2 — mobile QA fixes
   1) prevent the outline rail from competing with lesson content in the
      860–899px transition range;
   2) make local-saved/privacy proof wrap instead of producing horizontal
      scrolling or clipped text;
   3) keep every lesson child shrinkable inside narrow grids. */
.lesson-main,
.lesson-outline,
.saved-state{min-width:0}
.saved-state{
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  overflow-x:hidden;
  line-height:1.45;
}
@media (min-width:860px) and (max-width:899px){
  .lesson-layout{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  .lesson-outline{
    display:none!important;
    position:static!important;
    max-height:none!important;
    overflow:visible!important;
  }
}
@media (max-width:720px){
  .saved-state{
    padding:12px 13px;
    font-size:11.5px;
  }
}


/* M1.2 — Order execution studio */
.dda-order-ladder{
  display:grid;
  gap:10px;
  width:min(100%,640px);
  margin-inline:auto;
  color:var(--white);
}
.dda-order-ladder .ladder-side{
  display:grid;
  gap:6px;
  padding:14px 16px;
  border:1px solid rgba(147,166,186,.18);
  background:rgba(255,255,255,.025);
}
.dda-order-ladder .ladder-side.ask{border-left:3px solid rgba(217,115,115,.72)}
.dda-order-ladder .ladder-side.bid{border-left:3px solid rgba(79,190,133,.72)}
.dda-order-ladder .ladder-side span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.dda-order-ladder .ladder-side strong{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
.dda-order-ladder .ladder-side strong.best{
  border:1px solid rgba(232,198,133,.38);
  background:rgba(232,198,133,.08);
}
.dda-order-ladder .ladder-spread{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  color:var(--gold-soft);
}
.dda-order-ladder .ladder-spread small{
  letter-spacing:.12em;
  font-weight:900;
}
.dda-order-ladder .ladder-spread b{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:600;
}
.dda-order-ladder > p{
  margin:4px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:11px;
}
.lesson-layout-m12 .mini-simulation-block{
  background:
    radial-gradient(circle at 86% 14%,rgba(13,166,217,.08),transparent 30%),
    linear-gradient(145deg,rgba(8,20,38,.98),rgba(5,11,20,.99));
}
@media(max-width:520px){
  .dda-order-ladder .ladder-side{padding:12px}
  .dda-order-ladder .ladder-side strong{font-size:12.5px}
}


.dda-order-compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  text-align:left;
}
.dda-order-compare article{
  padding:16px;
  border:1px solid rgba(147,166,186,.18);
  background:rgba(255,255,255,.025);
  border-radius:14px;
}
.dda-order-compare span{
  display:block;
  margin-bottom:8px;
  color:var(--gold-soft);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.11em;
}
.dda-order-compare strong{
  display:block;
  margin-bottom:8px;
  color:var(--white);
}
.dda-order-compare p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
@media(max-width:620px){
  .dda-order-compare{grid-template-columns:1fr}
}

/* ---------- Darius Analysis Terminal P0.4 ---------- */
.analysis-terminal{margin:22px 0;padding:22px;background:linear-gradient(145deg,#101b2a,#0b1320);border:1px solid rgba(255,255,255,.14);border-radius:18px;color:#f4f7fc;box-shadow:0 18px 44px rgba(5,12,22,.18)}
.analysis-terminal-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px}.analysis-terminal-head h2{margin:5px 0 8px;color:#fff;font:400 28px/1.15 Georgia,serif}.analysis-terminal-head p:not(.eyebrow){max-width:650px;margin:0;color:rgba(244,247,252,.7);font-size:14px;line-height:1.6}.demo-data-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(217,164,65,.35);border-radius:999px;color:#f1d38c;font-size:11px;font-weight:800;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:#58b88a;box-shadow:0 0 0 3px rgba(88,184,138,.16)}
.analysis-terminal-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:12px}.analysis-terminal-toolbar label{display:grid;gap:6px;color:rgba(244,247,252,.66);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.analysis-terminal-toolbar select,.analysis-terminal-toolbar input{min-height:38px;color:#fff;background:#17283b;border:1px solid rgba(255,255,255,.18);border-radius:8px;font:inherit;padding:0 10px}.analysis-terminal-toolbar select{min-width:160px}.terminal-zoom-control{min-width:170px}.terminal-zoom-control input{accent-color:#d9a441;padding:0}.terminal-pan-controls{display:flex;gap:6px;margin-left:auto}.terminal-icon-button{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#17283b;color:#fff;font-size:18px;cursor:pointer}.terminal-icon-button:hover,.terminal-icon-button:focus-visible{border-color:#d9a441;color:#f1d38c}
.analysis-terminal-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}.terminal-tool{min-height:36px;padding:0 11px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:transparent;color:rgba(244,247,252,.78);font:700 12px/1 inherit;cursor:pointer}.terminal-tool:hover,.terminal-tool:focus-visible,.terminal-tool.active{border-color:#d9a441;background:rgba(217,164,65,.14);color:#f1d38c}.terminal-tool-hint{margin-left:auto;color:rgba(244,247,252,.58);font-size:12px}
.analysis-chart-shell{position:relative;min-height:320px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0b1420;overflow:hidden}.analysis-chart{display:block;width:100%;height:auto;min-height:320px;touch-action:none;cursor:crosshair}.analysis-chart .grid{stroke:rgba(255,255,255,.08);stroke-width:1}.analysis-chart .wick{stroke:#b9c9d8;stroke-width:1.4}.analysis-chart .candle-up{fill:#58b88a;stroke:#7bd0a5}.analysis-chart .candle-down{fill:#d87575;stroke:#ec9b9b}.analysis-chart .crosshair{stroke:#f1d38c;stroke-width:1;stroke-dasharray:5 5;pointer-events:none}.analysis-chart .crosshair-label{fill:#0b1420;stroke:#d9a441;stroke-width:1}.analysis-chart text{fill:rgba(244,247,252,.62);font:11px Inter,Arial,sans-serif}.analysis-chart .sr-zone{fill:rgba(217,164,65,.18);stroke:#d9a441;stroke-dasharray:5 4}.analysis-chart .draw-line{stroke:#58b8b0;stroke-width:2}.analysis-chart .fib-line{stroke:rgba(123,208,165,.75);stroke-width:1;stroke-dasharray:4 3}.analysis-chart .fib-label{fill:#7bd0a5;font-size:10px}.analysis-chart-y-labels{position:absolute;right:7px;top:12px;bottom:28px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:rgba(244,247,252,.42);font-size:10px}.analysis-chart-caption{margin:8px 0 0;color:rgba(244,247,252,.5);font-size:11px}
.analysis-terminal-bottom{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:14px;margin-top:16px}.analysis-observation,.analysis-terminal-legend{padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035)}.analysis-observation .panel-heading{margin:0 0 10px}.analysis-observation .panel-heading h3{color:#fff}.analysis-observation textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:112px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:#0b1420;color:#fff;padding:12px;font:14px/1.5 inherit}.analysis-observation textarea:focus{outline:2px solid rgba(217,164,65,.7);outline-offset:1px}.analysis-observation-actions{display:flex;align-items:center;gap:12px;margin-top:10px}.analysis-observation-actions .primary-action{min-height:38px}.analysis-observation-actions span{color:#58b88a;font-size:11px}.analysis-terminal-legend ol{display:grid;gap:12px;margin:14px 0;padding:0;list-style:none}.analysis-terminal-legend li{display:grid;gap:3px;padding-left:26px;position:relative}.analysis-terminal-legend li::before{content:counter(list-item);position:absolute;left:0;top:0;color:#f1d38c;font-weight:800}.analysis-terminal-legend li b{color:#fff;font-size:13px}.analysis-terminal-legend li span{color:rgba(244,247,252,.6);font-size:12px;line-height:1.4}.analysis-terminal-legend .text-action{color:#f1d38c}
@media(max-width:700px){.analysis-terminal{padding:16px;margin-left:-4px;margin-right:-4px}.analysis-terminal-head{display:block}.demo-data-badge{margin-top:12px}.analysis-terminal-toolbar{align-items:stretch}.analysis-terminal-toolbar label,.analysis-terminal-toolbar select{width:100%}.terminal-zoom-control{min-width:0}.terminal-pan-controls{margin-left:0}.terminal-tool-hint{width:100%;margin-left:0}.analysis-chart-shell,.analysis-chart{min-height:260px}.analysis-terminal-bottom{grid-template-columns:1fr}.analysis-observation-actions{align-items:flex-start;flex-direction:column}}
.journal-source-context{margin:-2px 0 16px;padding:10px 12px;border-left:3px solid var(--gold);background:rgba(217,164,65,.1);color:var(--ink);font-size:12px;line-height:1.5}
.terminal-practice-mission{margin-top:14px;padding:16px;border:1px solid rgba(217,164,65,.35);border-radius:12px;background:rgba(217,164,65,.06)}.terminal-practice-mission h3{margin:0;color:#fff;font-size:18px}.terminal-practice-mission>p{margin:10px 0 14px;color:rgba(244,247,252,.7);font-size:13px;line-height:1.55}.practice-proof-badge{padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#f1d38c;font-size:10px;font-weight:800;white-space:nowrap}.terminal-practice-actions{display:flex;align-items:center;gap:12px}.terminal-practice-actions .secondary-action{width:auto;min-height:40px;padding:10px 14px}.terminal-practice-actions span{color:rgba(244,247,252,.65);font-size:12px;line-height:1.4}@media(max-width:700px){.terminal-practice-actions{align-items:flex-start;flex-direction:column}.terminal-practice-actions .secondary-action{width:100%}}
.practice-proof-empty{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.practice-proof-row{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid rgba(25,43,61,.14);border-radius:10px;background:rgba(255,255,255,.42)}.practice-proof-row.is-validated{border-color:rgba(50,145,105,.35)}.practice-proof-row.is-retry{border-color:rgba(217,164,65,.35)}.practice-proof-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#e7f5ed;color:#227851;font-weight:800}.is-retry .practice-proof-icon{background:#fff4db;color:#9a6a0b}.practice-proof-row strong{color:var(--ink);font-size:14px}.practice-proof-row p{margin:4px 0;color:var(--muted);font-size:13px;line-height:1.45}.practice-proof-row small{color:var(--muted);font-size:11px}
.lesson-practice-handoff{margin:28px 0;padding:20px;border:1px solid rgba(217,164,65,.4);border-radius:12px;background:rgba(217,164,65,.08)}.lesson-practice-handoff h3{margin:0;color:var(--ink);font-size:20px}.lesson-practice-handoff p:not(.eyebrow){max-width:620px;color:var(--muted);font-size:14px;line-height:1.55}.lesson-practice-handoff .secondary-action{width:auto;min-height:42px;padding:10px 16px}@media(max-width:700px){.lesson-practice-handoff .secondary-action{width:100%}}
.journal-proof-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;padding:9px 11px;border-left:3px solid var(--gold);background:rgba(217,164,65,.08);font-size:11px}.journal-proof-meta strong{color:var(--ink)}.journal-proof-meta span{color:var(--muted)}.journal-proof-source{margin-left:auto;font-size:11px}

/* Terminal touch-target hardening: preserve desktop density while meeting the 44px mobile target. */
@media (max-width: 700px) {
  .analysis-terminal .terminal-pan-controls .terminal-icon-button,
  .analysis-terminal [data-terminal-tool] {
    min-width: 44px;
    min-height: 44px;
  }

  .analysis-terminal .analysis-observation-actions .primary-action,
  .analysis-terminal .terminal-practice-actions .secondary-action,
  .analysis-terminal .analysis-terminal-legend .text-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .analysis-terminal .analysis-terminal-legend .text-action {
    padding: 8px 0;
  }
}


/* Fail-closed local forms stay visibly inactive until app.js binds handlers. */
form[data-js-submit] button[type="submit"]:disabled{cursor:not-allowed;opacity:.62}

/* Darius Analysis Terminal — Pro workspace, desktop + touch */
.analysis-terminal{margin:24px 0;padding:clamp(14px,2.2vw,26px);background:radial-gradient(1100px 520px at 52% -8%,rgba(31,54,81,.58),transparent 60%),linear-gradient(155deg,#0a1424 0%,#060d17 78%);border:1px solid rgba(204,220,241,.13);border-radius:22px;color:#f4f7fc;box-shadow:0 22px 60px rgba(0,0,0,.28)}
.analysis-terminal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.analysis-terminal-head>div{max-width:760px}.analysis-terminal-head h2{margin:4px 0 8px;color:#fff;font-family:var(--dda-serif,Georgia,serif);font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.025em}.analysis-terminal-head>div>p:last-child{max-width:720px;margin:0;color:rgba(230,238,248,.68);font-size:13px;line-height:1.55}.analysis-terminal-head .demo-data-badge{flex:none;margin-top:6px}
.analysis-terminal-toolbar{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(142px,.65fr) auto;align-items:end;gap:10px;padding:10px;background:#0a1424;border:1px solid rgba(217,164,65,.24);border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.025)}.analysis-terminal-toolbar .terminal-selector{display:grid;gap:5px;min-width:0;color:rgba(222,232,245,.62);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.analysis-terminal-toolbar .terminal-selector select{width:100%;min-width:0;height:42px;padding:0 36px 0 12px;border:1px solid rgba(187,204,226,.17);border-radius:9px;background-color:#0a1424;color:#f6f8fc;font:600 13px/1 inherit;color-scheme:dark;cursor:pointer;transition:border-color .16s,box-shadow .16s}.analysis-terminal-toolbar .terminal-selector select:hover,.analysis-terminal-toolbar .terminal-selector select:focus-visible{border-color:rgba(217,164,65,.76);outline:0;box-shadow:0 0 0 3px rgba(217,164,65,.12)}.terminal-data-mark{display:flex;align-items:center;justify-self:end;gap:8px;min-height:42px;padding:0 8px;color:rgba(226,235,247,.62);font-size:10px;font-weight:700;letter-spacing:.045em;white-space:nowrap}.terminal-data-mark .status-dot{width:7px;height:7px;flex:none;background:#d9a441;box-shadow:0 0 0 3px rgba(217,164,65,.12)}
.analysis-chart-workspace{display:grid;gap:9px;margin-top:10px;min-width:0}.analysis-terminal-tools{display:flex;align-items:center;gap:5px;max-width:100%;min-height:56px;margin:0;padding:6px 8px;overflow-x:auto;border:1px solid rgba(202,217,236,.13);border-radius:14px;background:rgba(10,20,36,.94);box-shadow:0 8px 24px rgba(0,0,0,.18);scrollbar-width:thin;scrollbar-color:rgba(217,164,65,.35) transparent}.terminal-tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:42px;padding:0 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:rgba(231,239,249,.72);font:700 11px/1 inherit;white-space:nowrap;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s}.terminal-tool:hover{background:rgba(255,255,255,.055);color:#fff}.terminal-tool:active{transform:scale(.97)}.terminal-tool:focus-visible,.terminal-icon-button:focus-visible{outline:2px solid #e3b85c;outline-offset:2px}.terminal-tool.active{border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.13);color:#f3d58f;box-shadow:inset 0 0 0 1px rgba(217,164,65,.06)}.terminal-tool svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.terminal-tool-label{white-space:nowrap}.terminal-tool-divider{width:1px;height:26px;flex:none;margin:0 3px;background:rgba(213,226,243,.15)}.terminal-zoom-dock{display:flex;align-items:center;gap:5px;flex:none;padding:0 3px}.terminal-icon-button{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid rgba(187,204,226,.17);border-radius:9px;background:#0a1424;color:#e8eef7;font-size:16px;font-weight:600;line-height:1;cursor:pointer;transition:background .16s,border-color .16s,color .16s}.terminal-icon-button:hover:not(:disabled){border-color:rgba(217,164,65,.54);background:rgba(217,164,65,.1);color:#f5d991}.terminal-icon-button:disabled{opacity:.36;cursor:not-allowed}.terminal-zoom-value{min-width:24px;color:#f2d28b;font-size:11px;font-variant-numeric:tabular-nums;font-weight:800;text-align:center}.terminal-zoom-dock input[type=range]{width:66px;height:18px;margin:0 2px;accent-color:#d9a441;cursor:pointer}.terminal-pan-controls{display:flex;align-items:center;gap:4px;flex:none}.terminal-edit-action{font-size:17px}.terminal-tool-hint{display:block;min-width:0;color:rgba(223,233,246,.58);font-size:10px;line-height:1.45}
.analysis-chart-frame{min-width:0;overflow:hidden;border:1px solid rgba(198,216,238,.15);border-radius:16px;background:#0a1424;box-shadow:0 14px 36px rgba(0,0,0,.19)}.analysis-chart-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:9px 15px;border-bottom:1px solid rgba(198,216,238,.11);background:linear-gradient(90deg,rgba(16,30,49,.92),rgba(10,20,36,.96))}.terminal-chart-identity{display:flex;align-items:center;gap:10px;min-width:0}.terminal-chart-identity strong{overflow:hidden;color:#fff;font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.terminal-chart-market-tag{flex:none;padding:5px 7px;border:1px solid rgba(217,164,65,.22);border-radius:5px;color:#e6c779;font-size:8px;font-weight:800;letter-spacing:.095em}.terminal-chart-readout{overflow:hidden;color:rgba(222,233,247,.67);font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.analysis-chart-shell{position:relative;min-height:260px;overflow:hidden;border:0;border-radius:0;background:radial-gradient(ellipse at 52% 48%,rgba(16,32,51,.42),transparent 72%),#060d17}.analysis-chart-axis-label{position:absolute;top:10px;left:14px;z-index:1;color:rgba(198,214,234,.34);font-size:8px;font-weight:800;letter-spacing:.13em;pointer-events:none}.analysis-chart{display:block;width:100%;height:clamp(270px,37vw,430px);min-height:260px;touch-action:none;cursor:crosshair;outline:none}.analysis-chart:focus-visible{box-shadow:inset 0 0 0 2px rgba(217,164,65,.72)}#terminal-chart .chart-canvas{fill:transparent}#terminal-chart .grid{fill:none;stroke:rgba(150,174,204,.12);stroke-width:1;vector-effect:non-scaling-stroke}#terminal-chart .grid-vertical{stroke:rgba(150,174,204,.075)}#terminal-chart .axis-value,#terminal-chart .axis-sequence{fill:rgba(197,213,234,.42);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}#terminal-chart .axis-value{text-anchor:start}#terminal-chart .axis-sequence{text-anchor:middle;fill:rgba(197,213,234,.35);font-size:9px}#terminal-chart .wick{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}#terminal-chart .candle-up .wick{stroke:#52c6a1}#terminal-chart .candle-down .wick{stroke:#e17d82}#terminal-chart .candle-body{stroke-width:1;vector-effect:non-scaling-stroke}#terminal-chart .candle-up .candle-body{fill:rgba(61,186,143,.78);stroke:#63d3ac}#terminal-chart .candle-down .candle-body{fill:rgba(205,91,102,.8);stroke:#e88c91}#terminal-chart .sr-zone{fill:rgba(217,164,65,.16);stroke:rgba(231,190,103,.9);stroke-width:1.25;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}#terminal-chart .draw-line{fill:none;stroke:#e4bd65;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}#terminal-chart .fib-line{stroke:rgba(115,188,220,.88);stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}#terminal-chart .fib-label{fill:#9ed7ea;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}#terminal-chart .is-preview{opacity:.72;stroke-dasharray:5 4}#terminal-chart .crosshair{stroke:rgba(239,241,247,.64);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;pointer-events:none}#terminal-chart .crosshair-label-x rect,#terminal-chart .crosshair-value-label rect{fill:#d9a441;stroke:#f4d58c;stroke-width:.5}#terminal-chart .crosshair-x-label,#terminal-chart .crosshair-y-label{fill:#101723;font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;text-anchor:middle}#terminal-chart .crosshair-value-label{pointer-events:none}
.analysis-chart-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:7px 13px;border-top:1px solid rgba(198,216,238,.1);background:#0a1424}.analysis-chart-caption{margin:0;color:rgba(210,223,240,.52);font-size:10px;line-height:1.45}.analysis-chart-footer .terminal-tool-hint{flex:0 1 auto;text-align:right}.terminal-practice-mission{margin-top:14px;padding:17px;border:1px solid rgba(217,164,65,.3);border-radius:14px;background:linear-gradient(135deg,rgba(217,164,65,.075),rgba(10,20,36,.42))}.terminal-practice-mission h3{margin:0;color:#fff;font-size:18px}.terminal-practice-mission>p{color:rgba(223,233,246,.7)}.terminal-practice-actions span{color:rgba(223,233,246,.67)}.analysis-terminal-bottom{gap:16px;margin-top:16px}.analysis-observation textarea{width:100%;min-height:128px;padding:12px;border:1px solid rgba(187,204,226,.19);border-radius:11px;background:#08111e;color:#f4f7fc;font:500 13px/1.55 inherit;resize:vertical}.analysis-observation textarea:focus-visible{outline:2px solid rgba(217,164,65,.8);outline-offset:2px}.analysis-observation-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.analysis-observation-actions #terminal-observation-state{color:rgba(223,233,246,.58);font-size:11px}
@media(min-width:1100px){.analysis-chart-shell{min-height:360px}.analysis-chart{height:clamp(360px,34vw,460px)}.analysis-terminal-tools{position:relative;top:auto}}
@media(max-width:700px){.analysis-terminal{margin:18px 0;padding:13px;border-radius:18px}.analysis-terminal-head{display:grid;gap:10px;margin-bottom:14px}.analysis-terminal-head .demo-data-badge{justify-self:start;margin:0}.analysis-terminal-toolbar{grid-template-columns:minmax(0,1.35fr) minmax(88px,.65fr);gap:8px;padding:8px}.analysis-terminal-toolbar .terminal-selector select{height:44px;padding-left:9px;font-size:12px}.terminal-data-mark{grid-column:1/-1;justify-self:start;min-height:24px;padding:0 2px}.analysis-terminal-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px;overflow:visible}.terminal-tool{display:grid;justify-items:center;align-content:center;gap:4px;width:100%;min-width:0;min-height:48px;padding:4px 2px}.terminal-tool svg{width:18px;height:18px}.terminal-tool-label{font-size:9px;line-height:1.1}.terminal-tool-divider{display:none}.terminal-zoom-dock{grid-column:span 2;justify-content:center;gap:5px;min-height:44px;padding:2px 6px;border:1px solid rgba(187,204,226,.12);border-radius:10px}.terminal-zoom-dock input[type=range]{width:52px}.terminal-icon-button{width:42px;height:42px;min-width:42px;min-height:42px}.terminal-pan-controls{grid-column:span 2;justify-content:center;gap:7px}.terminal-pan-controls .terminal-icon-button{width:52px}.terminal-edit-action{width:46px;height:46px;justify-self:center}.analysis-chart-meta{align-items:flex-start;flex-direction:column;gap:5px;padding:10px 11px}.terminal-chart-readout{width:100%;text-align:left}.terminal-chart-market-tag{font-size:7px}.analysis-chart-shell{min-height:260px}.analysis-chart{height:clamp(265px,72vw,340px);min-height:260px}.analysis-chart-axis-label{top:7px;left:9px;font-size:7px}.analysis-chart-footer{align-items:flex-start;flex-direction:column;gap:5px;padding:8px 10px}.analysis-chart-footer .terminal-tool-hint{text-align:left}.analysis-chart-caption{font-size:9px}.analysis-terminal-bottom{grid-template-columns:1fr}.analysis-observation-actions{align-items:stretch;flex-direction:column}.analysis-observation-actions .primary-action{width:100%}.terminal-practice-actions{align-items:stretch;flex-direction:column}.terminal-practice-actions .secondary-action{width:100%;min-height:46px}}
@media(prefers-reduced-motion:reduce){.terminal-tool,.terminal-icon-button,.analysis-terminal-toolbar select{transition:none}}
#terminal-chart .crosshair-label-x{fill:#d9a441;stroke:#f4d58c;stroke-width:.5}#terminal-chart .crosshair-x-label{fill:#101723;font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;text-anchor:middle}.analysis-terminal-toolbar .terminal-selector select{font-family:inherit;font-size:13px;font-weight:600;line-height:1}.terminal-tool{font-family:inherit;font-size:11px;font-weight:700;line-height:1}.analysis-observation textarea{font-family:inherit;font-size:13px;font-weight:500;line-height:1.55}
@media(max-width:700px){.terminal-icon-button{width:44px;height:44px;min-width:44px;min-height:44px}}
#dashboard .analysis-terminal .analysis-terminal-head h2{color:#fff}.analysis-terminal-legend ol{list-style:none;padding-left:0;counter-reset:terminalStep}.analysis-terminal-legend li{counter-increment:terminalStep}.analysis-terminal-legend li::before{content:counter(terminalStep,decimal-leading-zero);font-variant-numeric:tabular-nums}


/* ================================================================
   2026-09 Content Depth tranche — hierarchy without removing value
   ================================================================ */
.dashboard-supporting {
  margin-top: 28px;
  padding: 30px 0 4px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.dashboard-supporting-intro {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin-bottom: 20px;
}
.dashboard-supporting-intro h2 {
  margin: 0;
  color: #f4f7fc;
  font-family: Georgia, serif;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 400;
  letter-spacing: -.02em;
}
.dashboard-supporting-intro p:last-child {
  margin: 0;
  color: rgba(244,247,252,.65);
  font-size: 14px;
  line-height: 1.65;
}
.dashboard-supporting > .terminal-mi,
.dashboard-supporting > .terminal-two,
.dashboard-supporting > .terminal-family,
.dashboard-supporting > .terminal-aperture,
.dashboard-supporting > .terminal-tools {
  position: relative;
}
.path-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 26px;
}
.path-context-grid article {
  min-height: 172px;
  padding: 20px;
  border: 1px solid var(--line, rgba(20,36,61,.14));
  border-radius: var(--r-md, 16px);
  background: rgba(255,255,255,.52);
}
.path-context-index {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--gold, #b8892e);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}
.path-context-grid h2 {
  margin: 0 0 8px;
  color: var(--ink, #16263b);
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}
.path-context-grid p {
  margin: 0;
  color: var(--muted-2, #647086);
  font-size: 13px;
  line-height: 1.6;
}
.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.resource-meta li {
  padding: 5px 9px;
  border: 1px solid rgba(20,36,61,.14);
  border-radius: 999px;
  color: var(--muted-2, #647086);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.resource-meta-dark li {
  border-color: rgba(237,231,216,.24);
  color: #c6cedb;
}
.resource-use-note {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(20,36,61,.14);
  border-radius: var(--r-md, 16px);
  background: linear-gradient(135deg, rgba(242,236,218,.72), rgba(255,255,255,.72));
}
.resource-use-note h2 {
  margin: 0;
  color: var(--ink, #16263b);
  font-family: Georgia, serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 400;
}
.resource-use-note p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted-2, #647086);
  font-size: 14px;
  line-height: 1.65;
}
@media (max-width: 760px) {
  .path-context-grid { grid-template-columns: 1fr; }
  .path-context-grid article { min-height: 0; }
  .path-context-index { margin-bottom: 14px; }
  .dashboard-supporting { padding-top: 24px; }
}


/* ======================================================================
   DDA Phase 3 — Dashboard + Analysis Terminal
   Applied as a scoped visual layer: no route, ID, state or interaction changes.
   ====================================================================== */
#dashboard{
  position:relative;
  isolation:isolate;
  background:var(--dda-texture-halo),var(--dda-texture-grid),var(--dda-navy-950);
  background-size:auto,var(--dda-texture-grid-size),auto;
  color:var(--dda-white);
}
#dashboard > *{position:relative;z-index:1}
#dashboard .terminal-thread{
  background:linear-gradient(100deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:var(--dda-line);
  box-shadow:inset 0 1px rgba(255,255,255,.06),var(--dda-shadow-card);
  transition:border-color var(--dda-duration-base) var(--dda-ease),box-shadow var(--dda-duration-base) var(--dda-ease);
}
#dashboard .terminal-thread:hover{border-color:var(--dda-line-strong);box-shadow:inset 0 1px rgba(255,255,255,.08),var(--dda-shadow-brass)}
#dashboard .terminal-entry{border-bottom-color:var(--dda-line);}
#dashboard .terminal-entry h1,#dashboard .terminal-lead h2,#dashboard .terminal-lead-meta strong{font-family:var(--dda-serif);}
#dashboard .terminal-entry #personalized-next,#dashboard .terminal-lead>div>p:not(.terminal-lead-kicker){color:rgba(230,238,248,.74)}
#dashboard .terminal-lead{position:relative;padding:clamp(22px,3vw,34px);border:1px solid var(--dda-line);border-radius:var(--r-lg);background:var(--dda-surface-raised);box-shadow:var(--dda-shadow-card);overflow:hidden}
#dashboard .terminal-lead::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--dda-texture-halo);opacity:.62}
#dashboard .terminal-lead>*{position:relative;z-index:1}
#dashboard .terminal-lead-photo{border:1px solid var(--dda-line-strong);background:var(--dda-surface-inset);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),var(--dda-shadow-deep)}
#dashboard .terminal-lead-photo .progress-ring{box-shadow:0 0 0 1px rgba(217,164,65,.24),0 12px 30px rgba(0,0,0,.3)}
#dashboard .terminal-lead-go{border-bottom-color:var(--dda-brass-soft);transition:color var(--dda-duration-fast) var(--dda-ease),gap var(--dda-duration-fast) var(--dda-ease)}
#dashboard .terminal-lead-go:hover{color:var(--dda-brass-soft);gap:10px}
#dashboard .terminal-divider{border-top-color:var(--dda-line);}
#dashboard .terminal-divider-label{color:var(--dda-brass-soft)}
#dashboard .terminal-mi-row,#dashboard .terminal-journal-note,#dashboard .terminal-tools button{border-color:var(--dda-line);background:var(--dda-glass)}
#dashboard .terminal-mi-row{box-shadow:var(--dda-shadow-card)}
#dashboard .terminal-mi-idx{background:rgba(255,255,255,.025);transition:background var(--dda-duration-fast) var(--dda-ease)}
#dashboard .terminal-mi-idx:hover{background:rgba(217,164,65,.07)}
#dashboard .terminal-two,#dashboard .terminal-family{border-bottom-color:var(--dda-line)}
#dashboard .terminal-aperture{border-color:var(--dda-line-strong);background:linear-gradient(120deg,rgba(217,164,65,.16),rgba(255,255,255,.025) 55%,rgba(6,13,23,.5));box-shadow:var(--dda-shadow-brass)}
#dashboard .dashboard-supporting{border-top-color:var(--dda-line);}
#dashboard .dashboard-supporting-intro h2{font-family:var(--dda-serif);}

#dashboard .analysis-terminal{
  border-color:var(--dda-line-strong);
  background:var(--dda-texture-halo),var(--dda-surface-base);
  background-size:auto,auto;
  box-shadow:var(--dda-shadow-deep),inset 0 1px rgba(255,255,255,.06);
}
#dashboard .analysis-terminal-head h2{font-family:var(--dda-serif);}
#dashboard .analysis-terminal-toolbar{border-color:var(--dda-line-strong);background:var(--dda-surface-inset);box-shadow:inset 0 1px rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.16)}
#dashboard .analysis-terminal-toolbar .terminal-selector select{border-color:var(--dda-line);background:var(--dda-navy-850);transition:border-color var(--dda-duration-fast) var(--dda-ease),box-shadow var(--dda-duration-fast) var(--dda-ease)}
#dashboard .analysis-terminal-toolbar .terminal-selector select:hover,#dashboard .analysis-terminal-toolbar .terminal-selector select:focus-visible{border-color:var(--dda-line-strong);box-shadow:0 0 0 3px rgba(217,164,65,.12)}
#dashboard .analysis-terminal-tools{border-color:var(--dda-line);background:rgba(4,9,18,.76);box-shadow:0 10px 26px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04)}
#dashboard .terminal-tool{transition:background var(--dda-duration-fast) var(--dda-ease),border-color var(--dda-duration-fast) var(--dda-ease),color var(--dda-duration-fast) var(--dda-ease),transform var(--dda-duration-fast) var(--dda-ease)}
#dashboard .terminal-tool:hover{border-color:var(--dda-line);background:var(--dda-glass-strong);color:var(--dda-white)}
#dashboard .terminal-tool.active{border-color:var(--dda-line-strong);background:rgba(217,164,65,.15);color:var(--dda-brass-soft);box-shadow:inset 0 0 0 1px rgba(217,164,65,.08),var(--dda-shadow-brass)}
#dashboard .terminal-icon-button{border-color:var(--dda-line);background:var(--dda-navy-850);transition:background var(--dda-duration-fast) var(--dda-ease),border-color var(--dda-duration-fast) var(--dda-ease),color var(--dda-duration-fast) var(--dda-ease)}
#dashboard .terminal-icon-button:hover:not(:disabled),#dashboard .terminal-icon-button:focus-visible{border-color:var(--dda-line-strong);background:rgba(217,164,65,.11);color:var(--dda-brass-soft)}
#dashboard .analysis-chart-frame{border-color:var(--dda-line);background:var(--dda-navy-850);box-shadow:var(--dda-shadow-card),inset 0 1px rgba(255,255,255,.04)}
#dashboard .analysis-chart-meta{border-bottom-color:var(--dda-line);background:linear-gradient(90deg,rgba(20,43,72,.86),rgba(6,13,23,.96))}
#dashboard .terminal-chart-market-tag{border-color:var(--dda-line-strong);color:var(--dda-brass-soft);background:rgba(217,164,65,.04)}
#dashboard .analysis-chart-shell{background:var(--dda-texture-grid),radial-gradient(ellipse at 52% 45%,rgba(20,43,72,.48),transparent 72%),var(--dda-void);background-size:var(--dda-texture-grid-size),auto,auto}
#dashboard .analysis-chart .grid{stroke:rgba(174,191,213,.14)}
#dashboard .analysis-chart .crosshair{stroke:var(--dda-brass-soft)}
#dashboard .analysis-chart-footer{border-top-color:var(--dda-line);background:var(--dda-surface-inset)}
#dashboard .terminal-practice-mission{border-color:var(--dda-line-strong);background:linear-gradient(135deg,rgba(217,164,65,.11),rgba(10,23,40,.62));box-shadow:var(--dda-shadow-brass)}
#dashboard .analysis-observation,#dashboard .analysis-terminal-legend{border-color:var(--dda-line);background:var(--dda-glass);box-shadow:inset 0 1px rgba(255,255,255,.035)}
#dashboard .analysis-observation textarea{border-color:var(--dda-line);background:var(--dda-void);transition:border-color var(--dda-duration-fast) var(--dda-ease),box-shadow var(--dda-duration-fast) var(--dda-ease)}
#dashboard .analysis-observation textarea:focus-visible{outline:0;border-color:var(--dda-line-strong);box-shadow:0 0 0 3px rgba(217,164,65,.12)}
#dashboard .analysis-observation-actions #terminal-observation-state{color:rgba(230,238,248,.66)}

@media(max-width:700px){
  #dashboard .terminal-lead{padding:20px 16px;border-radius:var(--r-md)}
  #dashboard .analysis-terminal{border-radius:var(--r-lg);box-shadow:0 20px 46px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05)}
  #dashboard .analysis-chart-shell{background-size:var(--dda-texture-grid-size),auto,auto}
}
@media(prefers-reduced-motion:reduce){
  #dashboard .terminal-thread,#dashboard .terminal-tool,#dashboard .terminal-icon-button,#dashboard .analysis-terminal-toolbar .terminal-selector select,#dashboard .analysis-observation textarea{transition:none}
}

/* Main Dashboard evidence refinements retained during the P3 merge. */
@media(max-width:700px){
  #dashboard .dashboard-mastery-thread{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 15px}
  #dashboard .dashboard-mastery-thread .terminal-thread-beads{grid-column:2;grid-row:1;align-self:start;margin-top:3px}
  #dashboard .dashboard-mastery-thread .terminal-thread-proof{grid-column:1 / -1;grid-row:2;display:flex;justify-content:space-between;align-items:center;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:10px 0 0;text-align:left}
  #dashboard .dashboard-mastery-thread .terminal-thread-next{display:block}
  #dashboard .terminal-entry-state{gap:8px 14px}
  #dashboard .terminal-entry-state span{flex:1 1 40%;min-width:120px}
  .dashboard-proof-strip{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:15px}
  .dashboard-proof-status{grid-column:2;justify-self:start}
}


/* Journal refinement recovered from the unmerged product-quality pass. */
.journal-tab:hover,.journal-tab:focus-visible{color:#fff;background:rgba(255,255,255,.08)}
.journal-tab:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.journal-tab.active{box-shadow:0 4px 14px rgba(0,0,0,.18)}
.journal-toolbar{gap:18px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035)}
.journal-toolbar>div:first-child{display:grid;gap:3px;min-width:0}
.journal-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.journal-toolbar-actions .secondary-action,.journal-toolbar-actions .primary-action{width:auto;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.journal-entry-card{border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035);margin-bottom:12px;box-shadow:0 10px 28px -22px rgba(0,0,0,.5)}
.journal-entry-card:last-child{margin-bottom:0}
.journal-entry-card summary{padding:16px 16px 16px 0}
.journal-entry-card summary:before{margin-left:14px}
.journal-entry-index{background:var(--navy-950);box-shadow:0 0 0 5px var(--navy-900)}
.journal-entry-detail{margin:0 16px 16px 26px;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.journal-composer{max-width:680px;padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.035)}
.journal-composer .journal-step-label{display:flex;align-items:center;gap:10px}
.journal-composer .journal-step-label:after{content:'— contexte, hypothèse et trace';color:rgba(244,247,252,.5);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
@media (max-width:700px){
  #journal .journal-tabs{display:flex;width:100%;box-sizing:border-box;margin-bottom:18px}
  #journal .journal-tab{flex:1;padding-left:10px;padding-right:10px}
  #journal .journal-toolbar{align-items:stretch;flex-direction:column;gap:14px;padding:14px}
  #journal .journal-toolbar-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #journal .journal-toolbar-actions .secondary-action,#journal .journal-toolbar-actions .primary-action{width:100%;padding-left:10px;padding-right:10px}
  #journal .journal-entry-card summary{padding-right:12px}
  #journal .journal-entry-index{left:-25px}
  #journal .journal-list{padding-left:25px}
  #journal .journal-entry-detail{margin-left:16px}
  #journal .journal-composer{padding:16px}
  #journal .journal-composer .journal-step-label{display:block}
  #journal .journal-composer .journal-step-label:after{display:block;margin-top:4px}
  #journal .journal-composer-actions{align-items:stretch;flex-direction:column}
  #journal .journal-composer-actions .primary-action,#journal .journal-composer-actions .secondary-action{width:100%}
}

/* BRVM pole structure — provenance first, roadmap second. The cards are
   status communication, not a fake market dashboard. */
.brvm-data-register,.brvm-pole-roadmap{margin-top:18px;padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.035)}
.brvm-data-register-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.brvm-data-register h2,.brvm-pole-roadmap h2{margin:4px 0 10px;color:#f4f7fc;font-size:clamp(1.35rem,2.6vw,2rem)}
.brvm-data-register>p{max-width:70ch;color:rgba(244,247,252,.7);font-size:14px;line-height:1.65}
.brvm-data-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:20px 0 0;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.12)}
.brvm-data-facts div{padding:14px;background:rgba(7,17,31,.72)}
.brvm-data-facts dt{color:var(--gold-soft);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.brvm-data-facts dd{margin:7px 0 0;color:#f4f7fc;font-size:13px;line-height:1.45}
.brvm-pole-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.brvm-pole-item{display:flex;gap:12px;align-items:flex-start;min-height:76px;padding:14px;border:1px solid rgba(255,255,255,.12);background:rgba(7,17,31,.52)}
.brvm-pole-item>span{color:var(--gold-soft);font:700 11px/1 ui-monospace,monospace;letter-spacing:.08em}
.brvm-pole-item strong{display:block;color:#f4f7fc;font-size:13px}
.brvm-pole-item small{display:block;margin-top:5px;color:rgba(244,247,252,.58);font-size:11px;line-height:1.4}
.brvm-pole-item.is-active{border-color:rgba(79,190,133,.45);box-shadow:inset 3px 0 var(--green)}
.brvm-pole-item.is-planned{border-style:dashed}
.brvm-pole-item.is-locked{opacity:.78;border-color:rgba(217,164,65,.38);box-shadow:inset 3px 0 var(--gold)}
.brvm-roadmap-note{display:flex;gap:9px;align-items:flex-start;margin:18px 0 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.12);color:rgba(244,247,252,.65);font-size:12px;line-height:1.55}
.brvm-roadmap-note .icon{flex:none;color:var(--gold-soft);width:17px;height:17px}
@media(max-width:760px){
  .brvm-data-register,.brvm-pole-roadmap{padding:18px}
  .brvm-data-facts{grid-template-columns:1fr 1fr}
  .brvm-pole-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .brvm-data-facts,.brvm-pole-grid{grid-template-columns:1fr}
}