/* ════════════════════════════════════════
   HOME
════════════════════════════════════════ */
.hero { padding:72px 0 56px; text-align:center; max-width:820px; margin:0 auto }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:4px 12px; background:var(--surf) }
.eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--text2) }
.hero h1 { font-size:clamp(30px,5vw,48px); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:20px 0 16px }
.hero p { font-size:clamp(15px,2vw,17px); color:var(--muted); max-width:620px; margin:0 auto; line-height:1.6 }
.hero .cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px }
.preview { border:1px solid var(--border); border-radius:14px; background:var(--surf); padding:14px; box-shadow:var(--shadow-pop); max-width:1080px; margin:0 auto }
.preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.pv { border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; background:var(--bg) }
.pv .v { font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums }
.pv .s { font-size:12px }
.pv-wide { grid-column:span 2 }
.pv-bars { display:flex; align-items:flex-end; gap:4px; height:64px; margin-top:8px }
.pv-bars i { flex:1; border-radius:2px 2px 0 0; background:var(--c1) }
@media (max-width:720px) { .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
.section { padding:64px 0 0 }
.section-h { text-align:center; max-width:640px; margin:0 auto 28px }
.section-h h2 { font-size:24px; font-weight:700; letter-spacing:-.02em }
.section-h p { color:var(--muted); margin-top:8px }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
@media (max-width:900px) { .features { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px) { .features { grid-template-columns:minmax(0,1fr) } }
.feature { padding:20px }
.feature h3 { font-size:14.5px; font-weight:600; margin-bottom:6px }
.feature p { font-size:13.5px; color:var(--muted); line-height:1.6 }
.cta-band { margin-top:64px; text-align:center; padding:40px 20px }
.cta-band h2 { font-size:22px; font-weight:700; letter-spacing:-.02em }
.cta-band p { color:var(--muted); margin:8px 0 20px }

/* hero chart line drawing itself behind the headline (home + about) */
.hero, .ab-hero { position:relative; isolation:isolate }
.hero-bg, .ab-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 55%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 50% 55%,#000 30%,transparent 75%) }
.hero-bg svg, .ab-bg svg { width:100%; height:100%; display:block }
.hero-bg path, .ab-bg path { fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:2400; stroke-dashoffset:2400; animation:draw 3.2s cubic-bezier(.4,0,.2,1) forwards }
.ab-l1, .hero-bg .l1 { stroke:var(--c1); opacity:.45 }
.ab-l2, .hero-bg .l2 { stroke:var(--s4); animation-delay:.35s !important }
.ab-l3, .hero-bg .l3 { stroke:var(--c2); opacity:.3; animation-delay:.7s !important }
@keyframes draw { to { stroke-dashoffset:0 } }
/* grid of hairlines that slowly drifts */
.hero-bg::before, .ab-bg::before { content:''; position:absolute; inset:-40px; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:40px 40px; opacity:.55; animation:drift 30s linear infinite }
@keyframes drift { to { transform:translate(40px,40px) } }
.hero h1, .hero p, .hero .cta, .hero .eyebrow { animation:rise .7s cubic-bezier(.2,.7,.2,1) both }
.hero h1 { animation-delay:.08s } .hero p { animation-delay:.16s } .hero .cta { animation-delay:.24s }
@keyframes rise { from { opacity:0; transform:translateY(16px) } }
.pv-bars i { transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.7,.2,1) both }
.pv-bars i:nth-child(3n+2) { animation-delay:.08s } .pv-bars i:nth-child(3n) { animation-delay:.16s }
@keyframes grow { from { transform:scaleY(0) } }
/* home headline: words rise one by one (split in home.js, styles shared with .ab-title);
   until the split lands the plain heading waits, with a late fade-in as a fallback */
.hero h1:not(.split) { animation-delay:1.2s }
.hero h1.split { animation:none }
.hero h1 .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em }
.hero h1 .w > span { display:inline-block; animation:word .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 70ms + .05s) }
/* preview tilts flat as it scrolls in; bars and sparkline start only once it is visible */
.preview-wrap { perspective:1400px }
.preview.rv { transform:rotateX(14deg) translateY(28px) scale(.97); transform-origin:50% 0; transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1) }
.preview.rv.in { transform:none }
.preview.rv:not(.in) .pv-bars i, .preview.rv:not(.in) .pv-spark path { animation-play-state:paused }
.pv-spark { display:block; width:100%; height:26px; margin-top:8px }
.pv-spark path { fill:none; stroke:var(--c1); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.6s .3s cubic-bezier(.4,0,.2,1) forwards }
.hm-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:1080px; margin:40px auto 0 }
@media (max-width:720px) { .hm-stats { grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ════════════════════════════════════════
   ABOUT (layout inspired by dune.com/about, in the site's neutral palette)
════════════════════════════════════════ */
.ab-hero { text-align:center; padding:96px 20px 88px; border-bottom:1px solid var(--border); overflow:hidden }
.ab-title { font-size:clamp(38px,7vw,76px); font-weight:700; letter-spacing:-.045em; line-height:1.02; max-width:900px; margin:22px auto 20px }
.ab-title .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em }
.ab-title .w > span { display:inline-block; animation:word .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 70ms + .1s) }
@keyframes word { from { transform:translateY(105%) } }
.ab-intro { font-size:clamp(15px,2vw,18px); color:var(--muted); max-width:620px; margin:0 auto; line-height:1.6; animation:rise .8s .35s cubic-bezier(.2,.7,.2,1) both }
.ab-hero .cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px; animation:rise .8s .45s cubic-bezier(.2,.7,.2,1) both }
.ab-hero .eyebrow { animation:rise .6s cubic-bezier(.2,.7,.2,1) both }
.ab-k { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px }
.ab-mission { padding:80px 0 40px; max-width:860px }
.about-figure { margin:48px auto 0; max-width:960px }
.about-cover { display:block; width:100%; max-height:480px; object-fit:cover; border-radius:12px; border:1px solid var(--border) }
.about-figure figcaption { margin-top:8px; font-size:12.5px; color:var(--muted); text-align:center }
.ab-mission p { font-size:clamp(21px,3vw,32px); font-weight:500; letter-spacing:-.02em; line-height:1.35; color:var(--text) }
.ab-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; padding-bottom:24px }
.ab-stat { padding:22px 20px }
.ab-stat .v { font-size:clamp(30px,4vw,42px); font-weight:700; letter-spacing:-.04em; line-height:1.1; font-variant-numeric:tabular-nums }
.ab-stat .lbl { margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase }
.ab-sh { margin:72px 0 28px }
.ab-sh h2 { font-size:clamp(24px,3.4vw,34px); font-weight:700; letter-spacing:-.03em }
/* timeline */
.tl { list-style:none; position:relative; --p:0 }
.tl::before, .tl::after { content:''; position:absolute; left:119px; top:6px; bottom:6px; width:1px; background:var(--border) }
.tl::after { background:var(--text2); bottom:auto; height:calc((100% - 12px) * var(--p)) }
.tl li { display:grid; grid-template-columns:120px minmax(0,1fr); padding:0 0 36px; position:relative }
.tl li:last-child { padding-bottom:0 }
.tl li::before { content:''; position:absolute; left:115px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--border2); z-index:1; transition:background .3s, border-color .3s, transform .3s }
.tl li.on::before { background:var(--text); border-color:var(--text); transform:scale(1.15) }
.tl-k { font-size:13px; color:var(--muted); padding-right:24px; transition:color .3s }
.tl li.on .tl-k { color:var(--text) }
.tl-b { padding-left:28px }
.tl-b h3 { font-size:18px; font-weight:600; letter-spacing:-.015em; line-height:1.3 }
.tl-b p { color:var(--muted); margin-top:6px; line-height:1.65; max-width:620px }
@media (max-width:600px) {
  .tl::before, .tl::after { left:4px }
  .tl li { grid-template-columns:minmax(0,1fr); padding-left:26px }
  .tl li::before { left:0 }
  .tl-b { padding-left:0; margin-top:4px }
  .ab-hero { padding:64px 16px 56px }
}
.ab-more .prose { max-width:720px }
.ab-contacts { scroll-margin-top:90px }
.ab-contact-grid { display:grid; grid-template-columns:minmax(0,420px); gap:12px }
.ab-contact-card { display:block; min-width:0; padding:20px; text-decoration:none }
.ab-contact-card:hover { border-color:var(--border2) }
.ab-contact-card .lbl { color:var(--muted); font-size:12px }
.ab-contact-card .addr { display:block; margin-top:9px; color:var(--text); font-size:14px; overflow-wrap:anywhere }
/* data sources marquee */
.ab-src { padding-top:72px }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee-in { display:flex; gap:10px; width:max-content; animation:tick 45s linear infinite }
.marquee:hover .marquee-in { animation-play-state:paused }
.marquee span { font-size:13px; color:var(--text2); border:1px solid var(--border); background:var(--surf); padding:7px 16px; border-radius:999px; white-space:nowrap }
@keyframes tick { to { transform:translateX(calc(-50% - 5px)) } }
@media (prefers-reduced-motion:reduce) { .marquee-in { flex-wrap:wrap; width:auto; justify-content:center } .marquee-in span[aria-hidden] { display:none } }
.ab-end { margin-top:72px }
.ab-end .cta { display:flex; justify-content:center }

/* ════════════════════════════════════════
   ARTICLES
════════════════════════════════════════ */
.posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
@media (max-width:960px) { .posts { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px) { .posts { grid-template-columns:minmax(0,1fr) } }
.post { display:flex; flex-direction:column; padding:0; overflow:hidden; transition:border-color .15s }
.post:hover { border-color:var(--border2) }
.post .cover { aspect-ratio:16/9; background:var(--surf2); object-fit:cover; width:100%; border-bottom:1px solid var(--border) }
.post .cover.ph { display:grid; place-items:center; color:var(--muted); font-size:28px; font-weight:700 }
.post .body { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1 }
.post h3 { font-size:15.5px; font-weight:600; line-height:1.35; letter-spacing:-.01em }
.post p { font-size:13.5px; color:var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.post .meta { font-size:12px; color:var(--muted); margin-top:auto; padding-top:4px }
.article-h { margin:20px 0 24px }
.article-h h1 { font-size:clamp(26px,4vw,36px); font-weight:700; letter-spacing:-.025em; line-height:1.2 }
.article-h .meta { color:var(--muted); font-size:13px; margin-top:10px }
.article-h .lead { font-size:17px; color:var(--text2); margin-top:12px; line-height:1.6 }
.article-cover { width:100%; border-radius:var(--r); border:1px solid var(--border); background:var(--surf2); margin-bottom:28px; aspect-ratio:16/9; object-fit:cover }
.article-lessons { display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px }
.article-lessons > * { min-width:0 }
.article-lessons .posts { grid-template-columns:repeat(2,minmax(0,1fr)) }
@media(max-width:760px) { .article-lessons { grid-template-columns:1fr; gap:20px } .article-lessons .side-nav { display:flex; gap:8px; overflow-x:auto } .article-lessons .side-nav a { flex-shrink:0 } }
@media(max-width:560px) { .article-lessons .posts { grid-template-columns:1fr } }
.back { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted) }
.back:hover { color:var(--text) }
.pager { display:flex; justify-content:center; gap:8px; margin-top:24px }
/* small category label above a title (academy cards and lessons) */
.tag { align-self:flex-start; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:2px 8px }
.article-h .tag { display:inline-block; margin-bottom:12px }
.chip .n:empty { display:none }

/* article / lesson page: content + sidebar (categories, related, academy) */
.art-page { max-width:1180px; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:48px; align-items:start }
.art-main { min-width:0; max-width:760px }
.art-side { display:flex; flex-direction:column; gap:28px; padding-top:44px }
.art-side .side-title { padding:0 0 10px; border-bottom:1px solid var(--border); margin-bottom:6px }
.art-side .side-nav a { display:flex; justify-content:space-between; gap:10px; padding-left:0; padding-right:0; white-space:normal; background:none }
.art-side .side-nav a.on::before { display:none }
.art-side .side-nav .n { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:400 }
.mini { display:flex; flex-direction:column }
.mini a { display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border) }
.mini a:last-child { border-bottom:0 }
.mini .th { width:56px; height:40px; border-radius:6px; object-fit:cover; background:var(--surf2); border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); font-weight:700; font-size:14px }
.mini b { font-size:13.5px; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.mini a:hover b { text-decoration:underline; text-decoration-color:var(--border2); text-underline-offset:2px }
.mini .lbl { display:block; margin-top:2px }
.art-side .more { font-size:12.5px; color:var(--muted); margin-top:8px; display:inline-block }
.art-side .more:hover { color:var(--text) }
@media (max-width:1024px) {
  .art-page { grid-template-columns:minmax(0,1fr); gap:0 }
  .art-main { max-width:760px; margin:0 auto; width:100% }
  .art-side { max-width:760px; margin:40px auto 0; width:100%; padding-top:32px; border-top:1px solid var(--border) }
  .art-side .side-title { display:block }
  .art-side .side-nav { flex-direction:column; overflow:visible }
}

/* articles: reports / posts on X */
.art-tabs { margin:-8px 0 20px }
.tweets { columns:3 300px; column-gap:14px }
.tweet { break-inside:avoid; margin-bottom:14px; padding:16px; display:flex; flex-direction:column; gap:12px }
.tweet header { display:flex; align-items:center; gap:10px }
.tweet header div { display:flex; flex-direction:column; line-height:1.3; min-width:0 }
.tweet header b { font-size:14px; font-weight:600 }
.tweet .av { width:34px; height:34px; border-radius:50%; background:var(--surf2); border:1px solid var(--border); display:grid; place-items:center; font-weight:600; color:var(--text2); flex:none }
.tweet .x { margin-left:auto; color:var(--muted); font-size:16px }
.tweet p { font-size:14.5px; line-height:1.6; overflow-wrap:anywhere }
.tweet p a { color:var(--text); text-decoration:underline; text-decoration-color:var(--border2); text-underline-offset:2px }
.tweet footer { display:flex; align-items:center; justify-content:space-between; gap:8px }

/* academy: category sidebar + lessons */
.ac { max-width:1440px; width:100%; margin:0 auto; padding:20px 20px 40px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; flex:1; align-content:start }
.ac > main.wrap { padding:0; max-width:none; min-width:0 }
.ac-side { position:sticky; top:calc(57px + 20px); align-self:start }
.ac-side .side-nav a { display:flex; justify-content:space-between; gap:10px }
.ac-side .side-nav .n { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:400 }
@media (max-width:1024px) {
  .ac { grid-template-columns:minmax(0,1fr); gap:0; padding:0 }
  .ac > main.wrap { padding:16px 16px 32px }
  .ac-side { top:57px; z-index:40; background:var(--hdr-bg); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border); padding:8px 12px }
}

/* ════════════════════════════════════════
   AUTH
════════════════════════════════════════ */
.auth { max-width:380px; margin:8vh auto 0; width:100% }
.auth .card { padding:28px }
.auth h1 { font-size:20px; font-weight:700; letter-spacing:-.02em }
.auth .sub { color:var(--muted); font-size:13.5px; margin:6px 0 22px }
.auth .btn { width:100% }
.auth .note { font-size:12.5px; color:var(--muted); margin-top:16px; text-align:center }
.pw { position:relative }
.pw .input { padding-right:56px }
.pw button { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted); padding:4px 6px }
.pw button:hover { color:var(--text) }

/* feature card illustrations (home) */
.ft-art { height:92px; border-radius:8px; background:var(--surf2); margin-bottom:16px; padding:12px 14px; overflow:hidden; display:flex; align-items:center }
.ft-art > svg { width:100%; height:100% }
.ft-art .g { stroke:var(--grid); stroke-width:1; fill:none; vector-effect:non-scaling-stroke }
.ft-art .ln { fill:none; stroke:var(--c1); stroke-width:2; vector-effect:non-scaling-stroke }
.ft-art .ar { fill:var(--c1); opacity:.14 }
.ft-art .box { fill:var(--surf); stroke:var(--border2) }
.ft-art .dash { stroke:var(--s3); stroke-width:1.5; stroke-dasharray:4 4; fill:none; animation:ft-dash 1.2s linear infinite }
.ft-art .lock { fill:var(--surf3); stroke:var(--text2); stroke-width:1.5 }
.ft-art .lk { fill:none; stroke:var(--text2); stroke-width:1.5 }
.ft-art text { font:500 10px var(--mono); fill:var(--muted) }
@keyframes ft-dash { to { stroke-dashoffset:-16 } }
.ft-cal { display:flex; gap:6px; width:100%; height:100%; align-items:stretch; position:relative }
.ft-cal > div { flex:1; background:var(--surf); border:1px solid var(--border); border-radius:5px; padding:5px; display:flex; flex-direction:column; gap:3px; position:relative }
.ft-cal span { font:600 9px var(--mono); color:var(--muted); margin-bottom:2px }
.ft-cal i { display:block; height:4px; border-radius:2px; background:var(--s4) }
.ft-cal i:nth-of-type(2) { background:var(--c3) }
.ft-cal b { position:absolute; inset:-1px; border:1.5px solid var(--text2); border-radius:5px }
.ft-cal em { position:absolute; right:6px; bottom:4px; font-style:normal; font-size:10px; color:var(--text); background:var(--surf3); padding:1px 6px; border-radius:99px }
.ft-news { display:flex; flex-direction:column; gap:8px; width:100% }
.ft-news > div { display:flex; gap:8px; align-items:center }
.ft-news span { width:18px; height:18px; border-radius:4px; background:var(--surf3); flex:none }
.ft-news p { flex:1; display:flex; flex-direction:column; gap:4px }
.ft-news i { display:block; height:4px; border-radius:2px; background:var(--s4) }
.ft-news i:first-child { background:var(--s3) }
.ft-flow { display:flex; flex-direction:column; justify-content:center; gap:5px; width:100% }
.ft-flow > div { position:relative; height:7px; background:linear-gradient(var(--border2),var(--border2)) center/1px 140% no-repeat }
.ft-flow i { position:absolute; top:0; bottom:0; border-radius:2px }
.ft-flow i.up { left:50%; background:var(--up) } .ft-flow i.dn { right:50%; background:var(--down) }
.ft-idx { display:flex; gap:14px; width:100%; height:100%; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--border2) }
.ft-idx > div { display:flex; gap:3px; height:100%; align-items:flex-end; width:28% }
.ft-idx i { flex:1; background:var(--c1); border-radius:2px 2px 0 0 }
.ft-idx > div:nth-child(2) i { background:var(--down) }

/* "how the data flows" diagram (home + about) */
.flow { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); align-items:stretch }
.fl-col { background:var(--surf); border:1px solid var(--border); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:10px }
.fl-core { background:var(--surf2) }
.fl-h { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; margin-bottom:4px }
.fl-n { width:20px; height:20px; border-radius:50%; background:var(--surf3); display:grid; place-items:center; font:600 11px var(--mono); color:var(--text2) }
.fl-grp { display:flex; flex-direction:column; gap:5px }
.fl-grp > div { display:flex; flex-wrap:wrap; gap:5px }
.fl-chip { font-size:11.5px; color:var(--text2); border:1px solid var(--border); border-radius:99px; padding:2px 9px; background:var(--surf2) }
.fl-step { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text2) }
.fl-step svg { width:16px; height:16px; flex:none; color:var(--text); padding:5px; box-sizing:content-box; background:var(--surf); border:1px solid var(--border); border-radius:7px }
.fl-core .fl-step svg { background:var(--surf3); border-color:transparent }
.fl-arrow { display:flex; align-items:center; justify-content:center }
.fl-arrow i { position:relative; display:block; width:100%; height:2px; background:repeating-linear-gradient(90deg,var(--s3) 0 6px,transparent 6px 11px); background-size:22px 2px; animation:fl-move 1s linear infinite }
.fl-arrow i::after { content:""; position:absolute; right:-2px; top:-4px; border:5px solid transparent; border-left:7px solid var(--s3); border-right:0 }
@keyframes fl-move { to { background-position:22px 0 } }
.fl-dash { display:grid; grid-template-columns:1fr 1fr; gap:6px; flex:1 }
.fl-tile { background:var(--surf2); border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:5px }
.fl-tile i { display:block; height:4px; border-radius:2px; background:var(--s4) }
.fl-tile b { display:block; height:10px; width:70%; border-radius:3px; background:var(--s3) }
.fl-chart { grid-column:1/-1; width:100%; height:44px; background:var(--surf2); border-radius:6px }
.fl-chart .ln { fill:none; stroke:var(--c1); stroke-width:1.75; vector-effect:non-scaling-stroke }
.fl-chart .ar { fill:var(--c1); opacity:.14 }
.fl-bars { grid-column:1/-1; display:flex; gap:4px; align-items:flex-end; height:34px; background:var(--surf2); border-radius:6px; padding:6px 8px }
.fl-bars i { flex:1; border-radius:2px 2px 0 0; background:var(--c2); opacity:.8 }
@media (max-width:860px) {
  .flow { grid-template-columns:minmax(0,1fr); grid-template-rows:auto }
  .fl-arrow { height:34px }
  .fl-arrow i { width:2px; height:100%; background:repeating-linear-gradient(180deg,var(--s3) 0 6px,transparent 6px 11px); background-size:2px 22px; animation-name:fl-move-v }
  .fl-arrow i::after { right:-4px; top:auto; bottom:-2px; border:5px solid transparent; border-top:7px solid var(--s3); border-bottom:0 }
}
@keyframes fl-move-v { to { background-position:0 22px } }
.ab-flow #flow { margin-top:4px }
@media (prefers-reduced-motion:reduce) { .fl-arrow i, .ft-art .dash { animation:none } }

/* About → Company: legal facts, team, AI note */
.co-lead { color:var(--muted); margin-top:8px }
.co-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px }
.co-fact, .co-person, .co-ai { display:flex; gap:14px; align-items:flex-start; padding:18px }
.co-ic { width:36px; height:36px; flex:none; border-radius:9px; background:var(--surf2); color:var(--text2); display:grid; place-items:center }
.co-ic svg { width:18px; height:18px }
.co-b { min-width:0 }
.co-v { margin-top:4px; font-weight:500; overflow-wrap:anywhere }
.co-v a, .co-person b a { color:var(--text); text-decoration:underline; text-decoration-color:var(--border2); text-underline-offset:3px }
.co-team { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px }
.co-team:empty { display:none }
.co-person { align-items:center }
.co-av { width:44px; height:44px; flex:none; border-radius:50%; background:var(--surf3); color:var(--text2); display:grid; place-items:center; font-weight:600; letter-spacing:.02em }
.co-ai { margin-top:12px }
.co-ai p { margin-top:4px; color:var(--text2); line-height:1.6 }

/* Terms / Privacy: one language block visible, matching <html lang> set by the server */
.legal { padding-top:32px; padding-bottom:48px }
.legal .prose h1 { margin-top:0 }
html[lang="vi"] .legal [data-lang="en"], html:not([lang="vi"]) .legal [data-lang="vi"] { display:none }