:root{
  /* PRIMARY accent — single swap point. Change --accent-rgb to re-theme. */
  --accent-rgb: 205,162,80;
  --accent: rgb(var(--accent-rgb));
  --accent-bright:#ECC976;
  --accent-deep:#8A6A2E;
  /* Legacy aliases kept so any older rules still resolve */
  --primary: var(--accent); --primary-rgb: var(--accent-rgb); --gold: var(--accent); --gold-light: var(--accent-bright); --gold-bright: var(--accent-bright);

  /* Warm-charcoal surfaces */
  --bg:#0E0D0B; --bg-2:#15130E; --panel:#17140E; --panel-2:#1E1A12;
  --bg-card: rgba(255,255,255,.012); --bg-card-hover: rgba(205,162,80,.05);
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --border: var(--line); --border-gold: rgba(var(--accent-rgb),.30);

  /* Text on dark */
  --text:#F4F0E8; --text-dim:#B4ADA0; --text-muted:#9A9384;
  --dim: var(--text-dim); --muted: var(--text-muted);

  /* Status (AA on dark) */
  --green:#4FB477; --red:#E0685F;

  /* Type */
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --measure: 64ch;

  /* Radius */
  --radius:18px; --radius-sm:14px; --radius-xs:10px;
  --r-lg:18px; --r:14px; --r-sm:10px; --r-pill:999px;

  /* Motion */
  --dur-fast:220ms; --dur:400ms; --dur-slow:800ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  font-family: var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* warm radial glow backdrop */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 80% -8%, rgba(var(--accent-rgb),.15), transparent 60%),
    radial-gradient(700px 480px at 6% 10%, rgba(var(--accent-rgb),.05), transparent 55%);
}

/* keep real content above the glow */
.site-header, main, .site-footer, .reading-progress{position:relative; z-index:1}

a{color:var(--accent-bright); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}

::selection{background:rgba(var(--accent-rgb),.35); color:#fff}

:focus-visible{outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:3px}

img,svg{max-width:100%; height:auto}

/* prose measure helper */
main p{max-width:var(--measure)}

/* scroll-reveal base state (JS adds .is-visible; hidden only when .js present) */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
  [data-reveal].is-visible{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none}
}

/* =============================================================
   components.css — dark editorial chrome + components.
   Covers: reading-progress, nav (desktop + mobile hamburger),
   lang-switcher, breadcrumbs, footer, CTA pill, hero-landing,
   stat strip, card-grid, cta-band, 404, article layout, TOC,
   byline, hero entrance animations.
   NO legacy light-mode rules. NO duplicate selectors.
   ============================================================= */

/* =============================================================
   Reading progress bar
   ============================================================= */

.reading-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent}
.reading-progress span{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright));
  box-shadow:0 0 14px rgba(var(--accent-rgb),.5)}

/* =============================================================
   Container / wrapper
   ============================================================= */

.container,.wrap{max-width:1120px; margin:0 auto; padding:0 40px}
@media (max-width:760px){.container,.wrap{padding:0 22px}}

/* =============================================================
   Site nav — fixed top, dark translucent bg, blur
   ============================================================= */

.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(14,13,11,.88);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border-bottom:1px solid var(--line)
}

/* .nav-inner is the flex row: logo left, toggle + menu right */
.nav-inner{
  max-width:1100px; margin-inline:auto; padding:0 24px;
  height:64px; display:flex; align-items:center; gap:16px
}

.nav-logo{
  display:inline-flex; align-items:center; color:var(--text);
  text-decoration:none; flex-shrink:0; margin-right:auto;
  font-weight:700; font-size:20px
}
.nav-logo-mark{height:24px; width:auto; display:block}
.nav-logo:hover{color:var(--text); text-decoration:none}

/* Desktop: nav-menu is a transparent layout wrapper (display:contents) */
.nav-menu{display:contents}

/* Nav links — horizontal row on desktop */
.nav-links{
  display:flex; align-items:center; gap:2px;
  list-style:none; padding:0; margin:0
}
.nav-links li{margin:0}
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--dim);
  text-decoration:none; padding:6px 10px; border-radius:var(--r-sm);
  position:relative; transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space:nowrap
}
.nav-links a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px;
  height:1.5px; background:var(--accent); width:0;
  transition:width var(--dur) var(--ease)
}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.05); text-decoration:none}
.nav-links a:hover::after{width:calc(100% - 20px)}
.nav-links a.is-active{color:var(--text); font-weight:600}
.nav-links a.is-active::after{width:calc(100% - 20px)}

/* CTA pill — gold gradient, applies to nav-cta, hero-cta, cta-btn, btn-primary alias */
.cta-btn,.hero-cta,.nav-cta,.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:14px;
  color:#1a1304; background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  border:none; border-radius:var(--r-pill); padding:11px 20px; cursor:pointer;
  text-decoration:none;
  box-shadow:0 6px 26px rgba(var(--accent-rgb),.30);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease)
}
.cta-btn:hover,.hero-cta:hover,.nav-cta:hover,.btn-primary:hover{
  transform:translateY(-2px); text-decoration:none; color:#1a1304;
  box-shadow:0 10px 32px rgba(var(--accent-rgb),.42)
}
.cta-btn:focus-visible,.hero-cta:focus-visible,.nav-cta:focus-visible,.btn-primary:focus-visible{
  outline:2px solid var(--accent-bright); outline-offset:3px
}

/* Nav CTA — smaller in the nav bar */
.nav-cta{padding:9px 20px; font-size:13px; flex-shrink:0}

/* Hamburger toggle — hidden on desktop */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; flex-shrink:0
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--text);
  border-radius:2px; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease)
}

/* Push page content below fixed nav; constrain to the shared content column */
.page-main{max-width:1100px; margin-inline:auto; padding:64px 24px 0}
/* On article pages, .article-layout already provides the column → don't double-constrain */
.article-layout .page-main{max-width:none; margin-inline:0; padding:0}

/* =============================================================
   Mobile nav  (≤640px)
   ============================================================= */

@media (max-width:640px){
  .nav-inner{justify-content:space-between; gap:12px}
  .nav-logo{margin-right:auto}

  /* Show hamburger */
  .nav-toggle{display:flex}

  /* Collapsed panel — hidden by default */
  .nav-menu{
    display:flex; position:absolute; top:64px; left:0; right:0;
    background:rgba(14,13,11,.97);
    border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(0,0,0,.4);
    padding:16px 24px 20px;
    flex-direction:column; gap:8px;
    /* Hidden state */
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)
  }

  /* Visible when parent .site-nav has .open */
  .site-nav.open .nav-menu{opacity:1; pointer-events:auto; transform:translateY(0)}

  /* Stacked links */
  .nav-links{flex-direction:column; align-items:stretch; gap:2px; width:100%}
  .nav-links a{font-size:15px; padding:10px 12px; border-radius:var(--r-sm)}
  .nav-links a::after{display:none}

  /* Full-width CTA on mobile */
  .nav-cta{width:100%; padding:12px 20px; font-size:15px; text-align:center; justify-content:center}

  /* Hamburger → X animation */
  .site-nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-nav.open .nav-toggle span:nth-child(2){opacity:0}
  .site-nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* =============================================================
   Language switcher (.lang-switch with <details>/<summary>)
   ============================================================= */

.lang-switch{position:relative; flex-shrink:0; font-size:13px}
.lang-switch > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:6px; color:var(--dim); padding:6px 8px; border-radius:var(--r-sm);
  transition:color var(--dur-fast) var(--ease)
}
.lang-switch > summary::-webkit-details-marker{display:none}
.lang-switch > summary::after{content:'▾'; font-size:10px; opacity:.7}
.lang-switch > summary:hover,.lang-switch[open] > summary{color:var(--text)}
/* Single-locale fallback */
.lang-switch > span[aria-current="true"]{color:var(--text); font-weight:600}

.lang-menu{
  position:absolute; top:100%; right:0; margin-top:6px;
  min-width:150px; list-style:none; margin-bottom:0; padding:6px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:0 14px 28px rgba(0,0,0,.4); z-index:1100
}
.lang-menu li{margin:0}
.lang-menu a,.lang-menu span{
  display:block; padding:8px 12px; border-radius:var(--r-sm);
  color:var(--dim); text-decoration:none
}
.lang-menu a:hover{background:rgba(255,255,255,.06); color:var(--text); text-decoration:none}
.lang-menu [aria-current="true"]{color:var(--accent-bright); font-weight:600}

@media (max-width:640px){
  .lang-switch{width:100%}
  .lang-switch > summary{font-size:15px; padding:10px 12px; width:100%}
  .lang-menu{position:static; margin-top:4px; box-shadow:none; border:none; padding:0 0 0 8px; min-width:0}
  .lang-menu a,.lang-menu span{font-size:15px}
}

/* =============================================================
   Breadcrumbs
   ============================================================= */

.breadcrumbs{padding:80px 24px 0; max-width:1100px; margin-inline:auto}
.breadcrumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  list-style:none; padding:0; margin:0
}
.breadcrumbs li{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--muted); margin:0
}
.breadcrumbs li + li::before{content:'›'; color:var(--muted); font-size:14px}
.breadcrumbs a{color:var(--accent); text-decoration:none; transition:color var(--dur-fast) var(--ease)}
.breadcrumbs a:hover{color:var(--accent-bright); text-decoration:none}
.breadcrumbs li[aria-current="page"]{color:var(--dim)}

/* =============================================================
   Site footer
   ============================================================= */

.site-footer{
  margin-top:80px; border-top:1px solid var(--line);
  background:rgba(14,13,11,.6); padding-block:40px;
  color:var(--muted); font-size:13.5px
}
.footer-inner{
  max-width:1100px; margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px
}
.footer-nav ul{display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0; margin:0}
.footer-nav li{margin:0}
.footer-nav a{
  font-size:13px; font-weight:500; color:var(--dim);
  text-decoration:none; padding:4px 10px; border-radius:var(--r-sm);
  transition:color var(--dur-fast) var(--ease)
}
.footer-nav a:hover{color:var(--accent-bright); text-decoration:none}
.footer-legal{font-size:12px; color:var(--muted); line-height:1.5}

@media (max-width:640px){
  .footer-inner{flex-direction:column; align-items:flex-start}
}

/* =============================================================
   Kicker (reused across blocks)
   ============================================================= */

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-bright); font-weight:600; margin-bottom:22px
}

/* =============================================================
   Hero — landing (block--hero-landing)
   ============================================================= */

.block--hero-landing{
  max-width:1100px; margin-inline:auto;
  padding:70px 24px 30px;
  min-height:auto
}
.block--hero-landing h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(46px,7vw,90px); line-height:.99;
  letter-spacing:-.02em; margin:0 0 26px; max-width:15ch
}
.block--hero-landing .hero-sub{
  font-size:clamp(17px,2vw,20px); color:var(--dim);
  max-width:54ch; margin:0 0 34px; line-height:1.7
}
.block--hero-landing .hero-cta{margin-top:6px; padding:13px 32px; font-size:15px}

@media (max-width:640px){
  .block--hero-landing{padding:50px 0 20px}
  .block--hero-landing h1{letter-spacing:-.015em}
}

/* =============================================================
   Stat strip (.hero-stats > .stat)
   Pre-defined here so Task 6 just injects the markup.
   ============================================================= */

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:1100px; margin:56px auto 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)
}
.hero-stats .stat{padding:22px 20px; border-left:1px solid var(--line)}
.hero-stats .stat:first-child{border-left:none}
.hero-stats .n{font-family:var(--serif); font-weight:500; font-size:36px; line-height:1; letter-spacing:-.02em}
.hero-stats .n b{color:var(--accent-bright); font-weight:500}
.hero-stats .l{font-size:13px; color:var(--muted); margin-top:8px}
.hero-stats .spark{margin-top:12px; display:block}
@media (max-width:760px){.hero-stats{grid-template-columns:1fr 1fr}}

/* =============================================================
   Card grid (.block--card-grid > .card-grid > .card)
   ============================================================= */

.block--card-grid{
  padding-block:64px
}
.block--card-grid h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,3.4vw,38px); margin:0 0 24px; text-align:center
}
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;
  counter-reset:card
}
.card{
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 22px 24px; background:var(--bg-card);
  counter-increment:card; position:relative; overflow:hidden;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease)
}
.card:hover{transform:translateY(-4px); border-color:var(--line-2); background:var(--bg-card-hover)}
.card::before{
  content:counter(card,decimal-leading-zero);
  font-family:var(--serif); color:var(--accent); font-size:15px;
  display:block; margin-bottom:12px
}
.card h3{font-family:var(--sans); font-weight:600; font-size:16.5px; margin:0 0 7px}
.card h3 a{color:var(--text); text-decoration:none}
.card h3 a:hover{color:var(--accent-bright); text-decoration:none}
.card a{
  text-decoration:none; color:var(--text); font-weight:700;
  font-size:17px; letter-spacing:-.3px; display:block; margin-bottom:10px
}
.card a::after{content:''; position:absolute; inset:0}
.card a:hover{color:var(--accent-bright)}
.card p{color:var(--dim); font-size:14.5px; margin:0; line-height:1.55; position:relative; z-index:1}

@media (max-width:640px){
  .card-grid{grid-template-columns:1fr}
}

/* =============================================================
   CTA band (.block--cta-band)
   ============================================================= */

.block--cta-band{
  max-width:1100px; margin:70px auto 0;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  padding:48px 40px; text-align:center; position:relative; overflow:hidden
}
.block--cta-band h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,4vw,44px); margin:0 0 14px; letter-spacing:-.01em
}
.block--cta-band > p:not(.disclaimer){
  color:var(--dim); max-width:50ch; margin:0 auto 24px; font-size:17px; line-height:1.7
}
.block--cta-band > p{color:var(--dim); max-width:50ch; margin:0 auto 24px}

/* Larger CTA button inside the band */
.block--cta-band .cta-btn{padding:15px 40px; font-size:16px}

/* Market-motif ornament — sits behind the band's text content */
.block--cta-band .motif-grid{
  position:absolute; left:0; right:0; bottom:0; opacity:.16;
  pointer-events:none;
  mask-image:radial-gradient(circle at 50% 120%, #000, transparent 70%)
}
/* Keep text/heading/cta above the decorative layer */
.block--cta-band h2,
.block--cta-band > p,
.block--cta-band .cta-btn,
.block--cta-band .disclaimer{position:relative; z-index:1}
/* Draw-in animation, only for users who haven't requested reduced motion */
@media (prefers-reduced-motion: no-preference){
  .block--cta-band.is-visible .motif-grid path{
    stroke-dasharray:1400; stroke-dashoffset:1400;
    animation:draw 1.6s var(--ease) forwards
  }
}
@keyframes draw{to{stroke-dashoffset:0}}

/* =============================================================
   Disclaimer
   ============================================================= */

.disclaimer{
  display:block; margin-top:26px; padding:14px 24px;
  background:rgba(0,0,0,.15); border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:12.5px; color:var(--muted);
  line-height:1.6; max-width:64ch; margin-inline:auto; text-align:center
}
.block--cta-band > .disclaimer:only-child,
.block--cta-band > .disclaimer:first-child{margin-top:0}

@media (max-width:640px){
  .block--cta-band{padding:40px 20px}
}

/* =============================================================
   Secondary button (alias, no conflicts)
   ============================================================= */

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px; background:transparent; color:var(--dim);
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--sans); font-weight:600; font-size:14px;
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)
}
.btn-secondary:hover{
  background:rgba(255,255,255,.06); border-color:var(--line-2); color:var(--text)
}

/* =============================================================
   404 page
   ============================================================= */

.notfound{display:grid; place-items:center; min-height:72vh; text-align:center; padding:80px 24px}
.notfound-inner{max-width:480px}
.notfound-logo{
  display:inline-block; font-weight:800; font-size:20px;
  letter-spacing:-.5px; color:var(--text); text-decoration:none; margin-bottom:44px
}
.notfound-code{
  font-size:clamp(64px,12vw,96px); font-weight:800;
  letter-spacing:-3px; line-height:1; margin:0; color:var(--accent-bright)
}
.notfound h1{font-size:28px; font-weight:700; margin:10px 0 12px}
.notfound-sub{color:var(--dim); margin-bottom:28px}

/* =============================================================
   Article layout — TOC + content (≥1024px)
   ============================================================= */

.article-layout{
  max-width:1100px; margin-inline:auto; padding-inline:24px
}
.toc-aside{display:none}

@media (min-width:1024px){
  .article-layout{
    display:grid; grid-template-columns:220px minmax(0,1fr);
    gap:48px; padding-inline:24px
  }
  .toc-aside{display:block; position:sticky; top:96px; align-self:start}
}

.toc ul{list-style:none; padding:0; margin:0}
.toc li{margin:0}
.toc a{
  display:block; padding:5px 10px; font-size:13px; line-height:1.55;
  color:var(--dim); text-decoration:none;
  border-left:2px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)
}
.toc a:hover{color:var(--text); text-decoration:none}
.toc a.is-active{color:var(--accent-bright); font-weight:500; border-left-color:var(--accent-bright)}

/* =============================================================
   Byline
   ============================================================= */

.byline{
  font-size:13px; color:var(--muted);
  max-width:1100px; margin-inline:auto; padding:0 24px 20px
}

/* =============================================================
   Hero entrance animations (motion-safe only)
   ============================================================= */

@keyframes heroRise{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
@keyframes sparkDraw{ from{ stroke-dashoffset:120 } to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion: no-preference){
  .js .block--hero-landing h1,.js .block--hero-article h1{ animation: heroRise var(--dur-slow) var(--ease) both }
  .js .block--hero-landing .hero-sub,.js .block--hero-article .hero-sub{ animation: heroRise var(--dur-slow) var(--ease) 120ms both }
  .js .hero-stats .spark path{ stroke-dasharray:120; animation: sparkDraw 1.1s var(--ease) .3s both }
}

/* =============================================================
   Home hero split — text column + animated "talk & trade" phone
   ============================================================= */
.hero-split{
  max-width:1100px; margin-inline:auto;
  padding:120px 24px 40px;   /* top clears the fixed nav with breathing room */
  display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:center
}
/* In split context the hero text is the left column — drop its own column constraint */
.hero-split .block--hero-landing{max-width:none; margin:0; padding:0 0 30px}
.hero-phone{display:flex; justify-content:center; padding:0}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr; gap:16px; padding-top:104px}
  .hero-split .block--hero-landing{padding:0}
  .hero-phone{padding:8px 0 0; justify-content:flex-start}
}

/* Phone frame */
.conv-phone{
  position:relative; width:300px; max-width:84vw;
  background:linear-gradient(180deg,#1b1810,#100e0a);
  border:1px solid var(--line-2); border-radius:42px;
  padding:12px; box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb),.10),
    0 0 60px rgba(var(--accent-rgb),.10)
}
.conv-phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:104px; height:7px; border-radius:99px; background:#000; opacity:.85; z-index:2
}
.conv-phone-screen{
  background:radial-gradient(120% 80% at 50% 0%, #16130d 0%, var(--bg) 70%);
  border-radius:32px; padding:26px 16px 16px; min-height:430px;
  display:flex; flex-direction:column; gap:12px; overflow:hidden
}
.conv-phone-header{display:flex; align-items:center; justify-content:space-between}
.conv-phone-brand{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--text)}
.conv-phone-status{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dim);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:99px; padding:3px 9px}
.conv-phone-status-dot{width:6px; height:6px; border-radius:50%; background:var(--green)}

/* Voice wave */
.conv-wave{display:flex; align-items:center; justify-content:center; gap:4px; height:30px}
.conv-wave-bar{width:3px; height:8px; border-radius:99px;
  background:linear-gradient(180deg,var(--accent-bright),rgba(var(--accent-rgb),.35))}

/* Chat */
.conv-chat{display:flex; flex-direction:column; gap:9px; flex:1; justify-content:flex-end}
.conv-msg{max-width:84%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.45}
.conv-msg-user{align-self:flex-end; color:#1a1304;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent)); border-bottom-right-radius:5px}
.conv-msg-quant{align-self:flex-start; color:var(--text);
  background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:5px}
.conv-msg-confirm{align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--accent-bright); background:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.25); border-radius:99px; padding:7px 12px}
.conv-msg-confirm::before{content:""; width:13px; height:13px; border-radius:50%;
  background:var(--accent-bright); flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/10px no-repeat}
.conv-typing{align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px}
.conv-typing span{width:6px; height:6px; border-radius:50%; background:var(--text-muted)}

/* Input row */
.conv-input{display:flex; align-items:center; gap:10px; margin-top:2px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:99px; padding:8px 10px}
.conv-input-mic{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:#1a1304; background:linear-gradient(135deg,var(--accent-bright),var(--accent))}
.conv-input-mic svg{width:15px; height:15px}
.conv-input-text{font-size:12.5px; color:var(--text-muted)}

@media (prefers-reduced-motion: no-preference){
  .conv-wave-bar{animation:convWave 1s ease-in-out infinite}
  .conv-wave-bar:nth-child(1){animation-delay:0s}   .conv-wave-bar:nth-child(2){animation-delay:.07s}
  .conv-wave-bar:nth-child(3){animation-delay:.14s}  .conv-wave-bar:nth-child(4){animation-delay:.21s}
  .conv-wave-bar:nth-child(5){animation-delay:.28s}  .conv-wave-bar:nth-child(6){animation-delay:.35s}
  .conv-wave-bar:nth-child(7){animation-delay:.28s}  .conv-wave-bar:nth-child(8){animation-delay:.21s}
  .conv-wave-bar:nth-child(9){animation-delay:.14s}  .conv-wave-bar:nth-child(10){animation-delay:.07s}
  .conv-wave-bar:nth-child(11){animation-delay:0s}
  .conv-msg,.conv-typing{animation:convPop .32s var(--ease) both}
  .conv-typing span{animation:convBlink 1s ease-in-out infinite}
  .conv-typing span:nth-child(2){animation-delay:.18s}
  .conv-typing span:nth-child(3){animation-delay:.36s}
  .js .hero-phone .conv-phone{animation:heroRise var(--dur-slow) var(--ease) 200ms both}
}
@keyframes convWave{0%,100%{height:7px}50%{height:24px}}
@keyframes convPop{from{opacity:0; transform:translateY(8px) scale(.97)}to{opacity:1; transform:none}}
@keyframes convBlink{0%,100%{opacity:.3}50%{opacity:1}}

/* =============================================================
   article.css — dark-editorial long-form reading blocks.
   Rewritten for redesign-dark-editorial branch.

   REAL markup reference (layout.js):
   - Two-column grid:  .article-layout > .toc-aside + main.page-main
   - TOC:              nav.toc > ul > li > a[href="#sec-N"]   (no title element)
   - Active link:      .toc a.is-active   (added by app.js)
   - Byline:           <div class="byline">plain text</div>   (no inner <b>)
   - Hero:             <section class="block block--hero block--hero-article">
   - Blocks inside main.page-main: section.block.block--{prose|feature-list|pipeline|glossary|faq}
                                   aside.block.block--callout
   ============================================================= */


/* ── Article hero ────────────────────────────────────────────── */

.block--hero-article {
  max-width: 1100px;
  margin-inline: auto;
  padding: 40px 24px 6px;
}

.block--hero-article h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 14px 0 16px;
  max-width: 17ch;
}

.block--hero-article .hero-sub {
  font-size: 20px;
  color: var(--dim);
  max-width: 52ch;
  margin: 0 0 18px;
}


/* ── Byline ──────────────────────────────────────────────────── */
/*  markup: <div class="byline">By Quant Research Team</div>     */

.byline {
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
}


/* ── Article layout grid + sticky TOC ───────────────────────── */
/*  Real wrapper is .article-layout (NOT .article-grid)          */

.article-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 54px;
  margin-top: 46px;
  align-items: start;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .toc-aside {
    display: none;
  }
}

/* Sticky TOC column */
.toc-aside {
  position: sticky;
  top: 28px;
  align-self: start;
}

.toc {
  font-size: 13.5px;
}

/* TOC label removed — was hard-coded English "On this page" which broke DE/RU/KO locales.
   Accessible label is carried by aria-label on the <nav class="toc"> element. */
.toc::before {
  content: "";
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc a {
  display: block;
  color: var(--dim);
  padding: 7px 0 7px 14px;
  border-left: 1px solid var(--line);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.toc a:hover {
  color: var(--text);
  text-decoration: none;
}

/* Active section — set by app.js adding .is-active */
.toc a.is-active {
  color: var(--accent-bright);
  border-left-color: var(--accent-bright);
}


/* ── Section counter: big outlined numbers on headed blocks ──── */
/*  counter is reset on <main> (which is main.page-main)         */

main {
  counter-reset: sec;
}

.block--prose,
.block--feature-list,
.block--pipeline,
.block--glossary {
  position: relative;
  padding: 38px 0;
  counter-increment: sec;
}

/* Outlined ghost number — prose blocks only for cleaner reading */
.block--prose::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  top: 24px;
  right: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), .18);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .block--prose::before {
    display: none;
  }
}


/* ── Serif headings across all content blocks ────────────────── */

.block--prose h2,
.block--feature-list h2,
.block--pipeline h2,
.block--glossary h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 22px;
  max-width: 20ch;
  color: var(--text);
}

.block--faq h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  color: var(--text);
}


/* ── Prose block ─────────────────────────────────────────────── */

.block--prose p {
  font-size: 17.5px;
  color: #D8D2C6;
  max-width: var(--measure);
  margin: 0 0 20px;
  line-height: 1.75;
}

.block--prose p:last-child {
  margin-bottom: 0;
}

/* Gold-underlined inline links */
.block--prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.block--prose a:hover {
  text-decoration-color: var(--accent-bright);
}

/* Custom gold-dash bullets */
.block--prose ul {
  max-width: var(--measure);
  padding-left: 0;
  list-style: none;
  margin: 0 0 20px;
}

.block--prose ul li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 12px;
  color: #D8D2C6;
  font-size: 17px;
  line-height: 1.7;
}

.block--prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1.5px;
  background: var(--accent);
}

.block--prose ol {
  padding-left: 1.5em;
  margin: 0 0 20px;
}

.block--prose ol li {
  color: #D8D2C6;
  font-size: 17px;
  margin: 0 0 10px;
  line-height: 1.7;
}

.block--prose ol li::marker {
  color: var(--accent);
  font-weight: 600;
}


/* ── Feature-list block — editorial numbered rows ────────────── */

.block--feature-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
}

.block--feature-list li {
  counter-increment: item;
  position: relative;
  padding: 20px 0 20px 56px;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
  color: var(--dim);
  font-size: 16.5px;
  line-height: 1.7;
}

.block--feature-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.block--feature-list li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--serif);
  color: var(--accent);
  font-size: 18px;
  font-weight: 500;
}

.block--feature-list li strong {
  color: var(--text);
  font-weight: 600;
}


/* ── Pipeline block — editorial numbered steps ───────────────── */

.block--pipeline ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
}

.block--pipeline li {
  counter-increment: item;
  position: relative;
  padding: 20px 0 20px 56px;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
  color: var(--dim);
  font-size: 16.5px;
  line-height: 1.7;
}

.block--pipeline li:last-child {
  border-bottom: 1px solid var(--line);
}

.block--pipeline li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--serif);
  color: var(--accent);
  font-size: 18px;
  font-weight: 500;
}

.block--pipeline li strong {
  color: var(--text);
  font-weight: 600;
}


/* ── Pull-quote / blockquote utility ─────────────────────────── */

.pull,
blockquote {
  margin: 34px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--accent);
  max-width: 40ch;
}

.pull p,
blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 25px;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  max-width: none;
}


/* ── Glossary block — definition rows ───────────────────────── */

.block--glossary dl {
  margin: 14px 0 0;
  border-top: 1px solid var(--line);
}

.block--glossary dt {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent-bright);
  font-weight: 500;
  padding-top: 18px;
  letter-spacing: -.01em;
}

.block--glossary dd {
  margin: 6px 0 18px;
  font-size: 15.5px;
  color: var(--dim);
  max-width: 54ch;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  line-height: 1.7;
}


/* ── FAQ accordion — gold +/− affordance ────────────────────── */

.block--faq {
  padding: 38px 0;
}

.block--faq .faq-item {
  border-bottom: 1px solid var(--line);
}

.block--faq .faq-item:first-of-type {
  border-top: 1px solid var(--line);
}

/* Hide native disclosure triangle in all browsers */
.block--faq .faq-question {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
  transition: color var(--dur) var(--ease);
}

.block--faq .faq-question::-webkit-details-marker {
  display: none;
}

.block--faq .faq-question::marker {
  display: none;
}

/* Gold + affordance */
.block--faq .faq-question::after {
  content: "+";
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  flex-shrink: 0;
  transition: color var(--dur) var(--ease);
  line-height: 1;
}

/* Gold − when open */
.block--faq .faq-item[open] .faq-question::after {
  content: "−";
  color: var(--accent-bright);
}

.block--faq .faq-item[open] .faq-question {
  color: var(--accent-bright);
}

/* Answer text */
.block--faq .faq-item p {
  color: var(--dim);
  font-size: 15.5px;
  max-width: 60ch;
  margin: 0 0 20px;
  line-height: 1.75;
  padding: 0 0 4px;
}


/* ── Callout block — gold-ruled note band ────────────────────── */
/*  markup: <aside class="block block--callout" role="note">     */

.block--callout {
  margin: 34px 0;
  border: 1px solid var(--border-gold);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--panel);
  padding: 20px 24px;
  max-width: var(--measure);
}

.block--callout p {
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 10px;
  max-width: none;
}

.block--callout p:last-child {
  margin: 0;
}