/* v6 layer */
/* Interactive charts */
.enhanced .lens-grid { max-width: 1040px !important; min-height: 0 !important; }
.pa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pa-change { margin-top: 10px; font-size: 14px; color: var(--emerald); font-variant-numeric: tabular-nums; }
#lens-range .pa-change { color: #b8c2bc; }
.tf-chips { display: flex; gap: 4px; padding: 4px; border: 1px solid rgb(242 245 243 / .14); border-radius: 999px; }
.tf-chips button { min-width: 48px; min-height: 40px; border: 0; border-radius: 999px; background: none; color: #a9b3ad; font-size: 12px; font-weight: 500; letter-spacing: .04em; transition: background .3s, color .3s; }
.tf-chips button:hover { color: var(--text); }
.tf-chips button[aria-pressed=true] { background: rgb(242 245 243 / .1); color: var(--text); }
.ix-chart { position: relative; margin-top: 26px; height: clamp(300px, 34vw, 400px); touch-action: pan-y; cursor: crosshair; border-radius: 6px; outline-offset: 6px; }
.ix-chart svg { display: block; overflow: visible; }
.ix-grid { stroke: rgb(242 245 243 / .08); stroke-width: 1; }
.ix-open { stroke: rgb(242 245 243 / .28); stroke-width: 1; stroke-dasharray: 2 4; }
.ix-axis { fill: #8d978f; font: 500 11px var(--sans); font-variant-numeric: tabular-nums; }
.ix-line { fill: none; stroke: #00b86b; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ix-ann circle { fill: #0a0f0c; stroke: #d8dfda; stroke-width: 1.4; }
.ix-ann text { fill: #c8d0cb; font: 500 11px var(--sans); font-variant-numeric: tabular-nums; }
.ix-ann, .ir-mark { transition: opacity .25s; }
.ix-cur circle { fill: #00b86b; }
.ix-cur rect { fill: #00b86b; }
.ix-cur text { fill: #04130b; font: 600 11px var(--sans); font-variant-numeric: tabular-nums; }
.ix-cross { transition: opacity .15s; pointer-events: none; }
.ix-vline { stroke: rgb(242 245 243 / .45); stroke-width: 1; }
.ix-dot { fill: #00b86b; stroke: #04130b; stroke-width: 2; }
.ix-tip { position: absolute; top: -8px; left: 0; z-index: 2; padding: 8px 12px; border-radius: 8px; background: rgb(14 20 17 / .92); border: 1px solid rgb(242 245 243 / .14); box-shadow: 0 10px 30px rgb(0 0 0 / .4); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.ix-tip.on { opacity: 1; }
.ix-tip b { display: block; font: 400 18px/1.1 var(--serif); color: var(--text); font-variant-numeric: tabular-nums; }
.ix-tip span { font-size: 11px; color: #a9b3ad; }
.pa-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(242 245 243 / .1); font-size: 12px; color: #8d978f; letter-spacing: .04em; text-transform: uppercase; }
.pa-stats b { margin-left: 8px; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ir-tail { fill: rgb(242 245 243 / .04); }
.ir-mark line { stroke: rgb(242 245 243 / .4); stroke-width: 1; stroke-dasharray: 2 3; }
.ir-mark.spot line { stroke: var(--text); stroke-dasharray: none; }
.ir-mark text { fill: #c8d0cb; font: 500 12px var(--sans); }
.ir-mark.spot text { fill: var(--text); }
.ir-label { fill: #d8f3e6; font: 500 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; }

/* Economics: full-viewport presence */
.economics { min-height: 100svh; display: flex; align-items: center; }
.economics > .scene-body { width: min(calc(100% - var(--gutter) * 2), 1320px); padding-block: clamp(96px, 14vh, 160px) !important; }
.economics .chapter-heading { margin-bottom: clamp(48px, 8vh, 88px) !important; }
.ai-figures { gap: clamp(32px, 4vw, 72px); }
.ai-fig { padding-top: 32px; }
.ai-big { font-size: clamp(56px, 6.4vw, 104px); margin-top: 22px; }
.ai-fig small { font-size: 13px; margin-top: 16px; }
.ai-fig p { font-size: 15px; max-width: 360px; }

/* Closing: brighter background, crisp HTML phone */
.closing > .scenery img { opacity: .62 !important; }
.closing > .scenery::after { display: block !important; background: radial-gradient(ellipse at 65% 40%, rgb(5 8 7 / .55), rgb(5 8 7 / .15) 70%) !important; }
.join-phone { margin: 0; display: flex; justify-content: center; }
.device { position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 52px; background: linear-gradient(145deg, #2c322e, #121614 45%, #262b28); box-shadow: 0 0 0 1px rgb(255 255 255 / .1) inset, 0 0 0 1px #050706, 0 40px 80px -20px rgb(0 0 0 / .8), 0 20px 40px -20px rgb(0 184 107 / .12); }
.screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #070b09; display: flex; flex-direction: column; padding: 14px 18px 12px; font-family: var(--sans); color: var(--text); }
.status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500; height: 26px; padding: 0 8px; }
.status .sig { font-size: 8px; letter-spacing: 1px; }
.island { position: absolute; left: 50%; top: 12px; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }
.app-top { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.app-top .wordmark { font: italic 400 22px/1 var(--serif); }
.ap-tag { font-size: 11px; color: var(--emerald); font-weight: 500; letter-spacing: .04em; }
.ap-hero { margin-top: 18px; padding: 14px; border-radius: 16px; background: rgb(242 245 243 / .04); border: 1px solid rgb(242 245 243 / .07); }
.ap-hero .eyebrow { font-size: 9px; display: block; }
.ap-hero strong { display: inline-block; margin-top: 4px; font: 400 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
.ap-hero > .up { margin-left: 8px; font-size: 12px; }
.ap-hero svg { display: block; width: 100%; height: 60px; margin-top: 10px; }
.up { color: var(--emerald); } .dn { color: #c9a24a; }
.ap-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ap-list li { display: grid; grid-template-columns: 1fr 56px auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid rgb(242 245 243 / .07); }
.ap-list li b { display: block; font-size: 12px; font-weight: 500; }
.ap-list li span { display: block; font-size: 9.5px; color: #8d978f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-list li > div:first-child { min-width: 0; }
.ap-list svg { width: 56px; height: 22px; }
.ap-list polyline { fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ap-list polyline.up { stroke: #00b86b; } .ap-list polyline.dn { stroke: #c9a24a; }
.ap-list .pr { text-align: right; }
.ap-list .pr b { font-variant-numeric: tabular-nums; }
.ap-list .pr span.up { color: var(--emerald); } .ap-list .pr span.dn { color: #c9a24a; }
.ap-note { margin-top: auto; font-size: 9px; color: #6f7973; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.ap-tabs { display: flex; justify-content: space-around; padding-top: 10px; margin-top: 8px; border-top: 1px solid rgb(242 245 243 / .07); font-size: 10px; color: #6f7973; }
.ap-tabs .on { color: var(--emerald); }

@media (max-width: 700px) {
  .pa-head { align-items: flex-start; }
  .ix-chart { height: 280px; margin-inline: -4px; }
  .pa-stats { gap: 10px 20px; }
  .economics { min-height: 0; display: block; }
  .economics > .scene-body { width: auto; padding-block: 80px !important; }
  .ai-big { font-size: 60px; }
  .device { width: 260px; border-radius: 46px; }
  .screen { border-radius: 37px; padding: 12px 14px 10px; }
}
@media (max-width: 360px) { .ix-chart { height: 250px; } .ai-big { font-size: 52px; } }

/* Item 6: hero device composed with the globe (same .device component). */
.hero-art .hero-canvas { container-type: inline-size; }
.hero-glow { position: absolute; left: 83.6%; top: 34%; width: 44%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(0 184 107 / .22), rgb(0 184 107 / .08) 40%, transparent 68%); mix-blend-mode: screen; }
.hero-device { position: absolute; left: 66.5%; top: 9.5%; width: 300px; transform-origin: 0 0; scale: var(--dscale, .8); }
.hero-device .device { width: 300px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1) inset, 0 0 0 1px #050706, -30px 40px 70px -10px rgb(0 0 0 / .85), 0 0 60px -10px rgb(0 184 107 / .25); }
.hd-shadow { position: absolute; left: 6%; right: -4%; bottom: -14px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .85), transparent); filter: blur(4px); }
html.mo .hero-device { animation: mo-rise 1.2s cubic-bezier(.16,1,.3,1) .35s both; }
@media (prefers-reduced-motion: reduce) { html.mo .hero-device { animation: none; } }