/* ============================================
   RAI & AI — raiandai.com
   Dark-mode sibling of the resume system.
   Type: Helvetica (the subway nod)
   Accent: violet — Sarai's "AI"
   ============================================ */

:root{
  --bg:#0D0B14;
  --surface:#16131F;
  --surface-2:#1D1929;
  --line:#2A2438;
  --ink:#F2F0F7;
  --muted:#9B96AB;
  --faint:#6B667C;
  --accent:#8B6FFF;
  --accent-deep:#6D4FE0;
  --glow:rgba(139,111,255,0.16);
  --maxw:1060px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--accent-deep);color:#fff;}

a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(13,11,20,0.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;justify-content:space-between;align-items:center;
}
.wordmark{
  font-weight:700;font-size:17px;letter-spacing:-0.01em;color:var(--ink);
}
.wordmark:hover{text-decoration:none;}
.wordmark .ai{color:var(--accent);}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{
  color:var(--muted);font-size:14px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;
}
.nav-links a:hover{color:var(--ink);text-decoration:none;}
.nav-links a.resume-btn{
  color:var(--ink);border:1px solid var(--line);
  padding:8px 16px;border-radius:100px;
}
.nav-links a.resume-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:110px 0 90px 0;
  text-align:center;
}
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:130%;
  background:radial-gradient(ellipse at 50% 0%, var(--glow) 0%, transparent 62%);
  pointer-events:none;
}
.hero-inner{position:relative;max-width:820px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-size:13px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:26px;
}
h1{
  font-size:clamp(40px, 6.4vw, 68px);
  font-weight:700;letter-spacing:-0.03em;line-height:1.04;
  margin-bottom:26px;
}
h1 .dim{color:var(--muted);}
.hero p.lede{
  font-size:clamp(17px, 2vw, 20px);
  color:var(--muted);max-width:620px;margin:0 auto 38px auto;line-height:1.65;
}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-block;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:100px;letter-spacing:0.01em;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-primary:hover{background:var(--accent);color:#fff;}
.btn-ghost{border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- sections ---------- */
section{padding:78px 0;}
.section-label{
  font-size:13px;letter-spacing:0.24em;text-transform:lowercase;
  color:var(--accent);font-weight:500;margin-bottom:14px;
}
.section-label::before{content:"/ ";color:var(--faint);}
h2{
  font-size:clamp(26px, 3.4vw, 36px);
  font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin-bottom:18px;
}
.section-intro{color:var(--muted);max-width:640px;margin-bottom:44px;}

/* ---------- work cards ---------- */
.cards{display:grid;gap:22px;}
.card{
  display:block;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  padding:36px;transition:border-color .2s ease, transform .2s ease;
  color:var(--ink);
}
.card:hover{border-color:var(--accent-deep);transform:translateY(-2px);text-decoration:none;}
.card .tag{
  font-size:12px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.card h3{font-size:24px;font-weight:700;letter-spacing:-0.015em;margin:12px 0 10px 0;line-height:1.2;}
.card p{color:var(--muted);font-size:16px;max-width:640px;}
.card .metrics{
  display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--line);
}
.card .metric b{display:block;font-size:22px;letter-spacing:-0.01em;color:var(--ink);}
.card .metric span{font-size:13px;color:var(--faint);letter-spacing:0.04em;}
.card .read{margin-top:22px;font-size:14px;font-weight:600;color:var(--accent);letter-spacing:0.04em;}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start;}
.about-grid p{color:var(--muted);margin-bottom:18px;}
.about-grid p b{color:var(--ink);}
.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px;
}
.quote blockquote{
  font-size:17px;line-height:1.6;color:var(--ink);font-weight:400;
}
.quote cite{
  display:block;margin-top:16px;font-style:normal;
  font-size:13px;letter-spacing:0.08em;color:var(--faint);text-transform:uppercase;
}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.pill{
  font-size:13px;color:var(--muted);border:1px solid var(--line);
  padding:7px 14px;border-radius:100px;letter-spacing:0.02em;
}

/* ---------- recognition ---------- */
.recog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.recog .item{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;
}
.recog .item h4{font-size:16px;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;}
.recog .item span{font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:64px 0 48px 0;margin-top:40px;
}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:28px;}
.foot-grid h2{margin-bottom:10px;}
.foot-grid p{color:var(--muted);}
.foot-meta{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);
}
.foot-meta .v{color:var(--accent);}

/* ---------- case study pages ---------- */
.cs-hero{padding:90px 0 40px 0;position:relative;overflow:hidden;}
.cs-hero::before{
  content:"";position:absolute;inset:-60% -20% auto -20%;height:150%;
  background:radial-gradient(ellipse at 50% 0%, var(--glow) 0%, transparent 60%);
  pointer-events:none;
}
.cs-hero .wrap{position:relative;}
.cs-hero .tag{font-size:13px;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.cs-hero h1{font-size:clamp(32px,5vw,52px);margin:16px 0 18px 0;text-align:left;}
.cs-hero .lede{font-size:19px;color:var(--muted);max-width:680px;line-height:1.6;}
.cs-meta{
  display:flex;gap:40px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
}
.cs-meta div b{display:block;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:5px;}
.cs-meta div span{font-size:15px;color:var(--ink);}

article{padding:30px 0 70px 0;}
article .prose{max-width:720px;margin:0 auto;}
article h2{font-size:26px;margin:52px 0 16px 0;}
article h2:first-child{margin-top:8px;}
article p{color:var(--muted);margin-bottom:18px;}
article p b, article li b{color:var(--ink);}
article ul, article ol{margin:0 0 20px 22px;color:var(--muted);}
article li{margin-bottom:10px;}
article .pull{
  border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:34px 0;
  font-size:20px;line-height:1.55;color:var(--ink);font-weight:500;letter-spacing:-0.01em;
}
.stat-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:36px 0;
}
.stat-band .stat{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;
}
.stat-band .stat b{display:block;font-size:24px;letter-spacing:-0.01em;}
.stat-band .stat span{font-size:13px;color:var(--faint);line-height:1.4;display:block;margin-top:4px;}

/* media drop-zones — replace with real assets */
.media{
  margin:36px 0;border:1px dashed var(--line);border-radius:16px;
  background:var(--surface);
  min-height:220px;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
  text-align:center;padding:30px;
}
.media.wide{min-height:320px;}

.cs-next{
  border-top:1px solid var(--line);padding:44px 0 70px 0;
}
.cs-next .label{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;}
.cs-next a{font-size:24px;font-weight:700;letter-spacing:-0.015em;color:var(--ink);}
.cs-next a:hover{color:var(--accent);text-decoration:none;}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr;gap:34px;}
  .recog{grid-template-columns:1fr;}
  .hero{padding:80px 0 64px 0;}
  section{padding:56px 0;}
  .nav-links{gap:16px;}
  .nav-links a:not(.resume-btn){display:none;}
}


/* ============ v2 additions ============ */

/* ---------- dashboard ---------- */
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px;}
.dash .d{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 18px 22px;position:relative;overflow:hidden;
}
.dash .d.hero-stat{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;}
.dash .d .lbl{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);font-weight:500;}
.dash .d .num{font-size:30px;font-weight:700;letter-spacing:-0.02em;margin-top:6px;line-height:1.1;}
.dash .d.hero-stat .num{font-size:44px;}
.dash .d .sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;}
.dash .d .trend{color:#5DD39E;font-size:13px;font-weight:600;margin-top:8px;}
.dash .d .trend.violet{color:var(--accent);}
.bars{display:flex;align-items:flex-end;gap:14px;height:110px;margin:18px 0 10px 0;}
.bars .bar{flex:1;border-radius:8px 8px 4px 4px;background:var(--surface-2);position:relative;}
.bars .bar.b1{height:9%;background:var(--line);}
.bars .bar.b2{height:100%;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);}
.bars .bar span{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  font-size:12px;color:var(--muted);white-space:nowrap;font-weight:600;
}
.bars .bar.b2 span{color:var(--ink);}
.bar-x{display:flex;gap:14px;}
.bar-x div{flex:1;text-align:center;font-size:11px;letter-spacing:0.14em;color:var(--faint);text-transform:uppercase;}

/* ---------- marquee ---------- */
.marquee-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;}
.marquee{display:flex;gap:0;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite;}
.marquee-band:hover .marquee{animation-play-state:paused;}
.marquee .m{
  font-size:20px;font-weight:700;letter-spacing:0.14em;color:var(--faint);
  padding:0 34px;text-transform:uppercase;
}
.marquee .m .dot{color:var(--accent);padding-left:68px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .marquee{animation:none;flex-wrap:wrap;white-space:normal;width:auto;justify-content:center;row-gap:10px;}
  .marquee > .half:last-child{display:none;}
}
.marquee .half{display:flex;}

/* ---------- work grid v2 ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.gcard{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  color:var(--ink);transition:border-color .2s ease, transform .2s ease;
}
.gcard:hover{border-color:var(--accent-deep);transform:translateY(-3px);text-decoration:none;}
.gcard .cover{aspect-ratio:16/10;display:block;width:100%;}
.gcard .body{padding:22px 22px 24px 22px;display:flex;flex-direction:column;flex:1;}
.gcard .tag{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.gcard h3{font-size:19px;font-weight:700;letter-spacing:-0.01em;margin:10px 0 8px 0;line-height:1.25;}
.gcard p{color:var(--muted);font-size:14.5px;line-height:1.55;flex:1;}
.gcard .read{margin-top:16px;font-size:13px;font-weight:600;color:var(--accent);letter-spacing:0.04em;}

/* ---------- philosophy ---------- */
.philosophy{position:relative;overflow:hidden;text-align:center;padding:100px 0;}
.philosophy::before{
  content:"";position:absolute;inset:auto -20% -60% -20%;height:140%;
  background:radial-gradient(ellipse at 50% 100%, var(--glow) 0%, transparent 60%);
  pointer-events:none;
}
.philosophy .wrap{position:relative;max-width:760px;}
.philosophy .big{
  font-size:clamp(26px,4vw,42px);font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:18px 0 22px 0;
}
.philosophy .big .ai{color:var(--accent);}
.philosophy p{color:var(--muted);max-width:600px;margin:0 auto 16px auto;}
.philosophy p b{color:var(--ink);}

/* ---------- awards band ---------- */
.awards-inline{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px;}
.awards-inline .a{
  border:1px solid var(--line);border-radius:100px;padding:10px 20px;
  font-size:13px;color:var(--muted);letter-spacing:0.03em;
}
.awards-inline .a b{color:var(--ink);font-weight:600;}
.awards-inline .a span{color:var(--faint);}

@media (max-width:820px){
  .dash{grid-template-columns:repeat(2,1fr);}
  .dash .d.hero-stat{grid-column:span 2;}
  .grid3{grid-template-columns:1fr;}
}


/* ============ v3 additions — Nexious-inspired evolution ============ */

/* ---------- hero, more air ---------- */
.hero-v3{padding:130px 0 56px 0;}
.hero-v3 h1{font-size:clamp(44px, 7vw, 78px);line-height:1.02;margin-bottom:28px;}
.hero-v3 .lede{margin-bottom:42px;}
@media (max-width:640px){.desk-br{display:none;}}

/* ---------- floating dashboard frame ---------- */
.dash-stage{padding:24px 20px 90px 20px;position:relative;}
.frame{
  max-width:1140px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 40px 90px rgba(0,0,0,0.55),
    0 0 140px var(--glow);
}
.frame-chrome{
  display:flex;align-items:center;gap:7px;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.fdot{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block;}
.furl{
  margin-left:14px;font-size:12px;letter-spacing:0.1em;color:var(--faint);
  border:1px solid var(--line);border-radius:100px;padding:4px 14px;
  text-transform:lowercase;
}
.frame-body{display:flex;min-height:480px;}

/* sidebar */
.fside{
  width:198px;flex-shrink:0;
  border-right:1px solid var(--line);
  padding:18px 12px;
  display:flex;flex-direction:column;gap:2px;
}
.fs-item{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--muted);
  padding:9px 12px;border-radius:10px;
  letter-spacing:0.01em;white-space:nowrap;
}
.fs-item .fs-ico{font-size:13px;color:var(--faint);width:16px;text-align:center;}
.fs-item.active{background:var(--surface-2);color:var(--ink);}
.fs-item.active .fs-ico{color:var(--accent);}
.fs-item.dim{color:var(--faint);font-size:12.5px;}
.fs-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:2px;}

/* main panel */
.fmain{flex:1;padding:22px 24px 24px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.fmain-head{display:flex;justify-content:space-between;align-items:center;}
.fmain-head h3{font-size:18px;font-weight:700;letter-spacing:-0.01em;}
.frange{
  font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:9px;padding:6px 12px;
}

/* stat row */
.fstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.fstat{
  background:var(--bg);
  border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 14px 16px;min-width:0;
}
.flbl{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);font-weight:500;}
.fnum{font-size:27px;font-weight:700;letter-spacing:-0.02em;margin-top:7px;line-height:1.05;}
.ftrend{font-size:12.5px;font-weight:600;margin-top:7px;color:#5DD39E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ftrend.violet{color:var(--accent);}

/* chart + table grid */
.fgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;flex:1;}
.fcard{
  background:var(--bg);
  border:1px solid var(--line);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;min-width:0;
}
.fcard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.fchip{
  font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:4px 10px;
}
.fchart svg{width:100%;height:auto;flex:1;display:block;}
.fchart-x{
  display:flex;justify-content:space-between;margin-top:10px;
  font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);
}
.fchart-x .lit{color:var(--accent);font-weight:600;}

/* programs table */
.ftable-cols{
  display:grid;grid-template-columns:1.4fr 1fr 0.9fr;gap:10px;
  font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px;
}
.frow{
  display:grid;grid-template-columns:1.4fr 1fr 0.9fr;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.frow:last-of-type{border-bottom:none;}
.fprog{min-width:0;}
.fprog b{display:block;font-size:13px;font-weight:600;letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fprog i{
  display:block;height:3px;border-radius:3px;margin-top:6px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
}
.fval{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fstatus{
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  border-radius:100px;padding:4px 9px;text-align:center;white-space:nowrap;
}
.fstatus.ship{color:var(--accent);background:rgba(139,111,255,0.12);}
.fstatus.done{color:#5DD39E;background:rgba(93,211,158,0.1);}
.fmore{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:600;color:var(--accent);}

/* ---------- marquee label ---------- */
.band-label{
  text-align:center;font-size:12px;letter-spacing:0.24em;text-transform:lowercase;
  color:var(--faint);margin-bottom:20px;
}
.band-label::before{content:"/ ";}

/* ---------- metrics that mean something ---------- */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mcard{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px 30px 30px 30px;
  display:flex;flex-direction:column;min-height:320px;
  transition:border-color .2s ease;
}
.mcard:hover{border-color:var(--accent-deep);}
.mnum{font-size:clamp(38px,4vw,48px);font-weight:700;letter-spacing:-0.025em;line-height:1;}
.mlbl{font-size:15px;color:var(--muted);margin-top:12px;}
.mcard p{
  color:var(--muted);font-size:14.5px;line-height:1.6;
  margin-top:auto;padding-top:44px;
}

/* ---------- scroll-reveal philosophy ---------- */
.philosophy .reveal{
  font-size:clamp(19px,2.4vw,24px);
  line-height:1.6;font-weight:500;letter-spacing:-0.01em;
  color:var(--ink);
  max-width:680px;margin:0 auto 22px auto;
}
.philosophy .reveal.js .rw{color:var(--faint);transition:color .3s ease;}
.philosophy .reveal.js .rw.lit{color:var(--ink);}
.philosophy .after-reveal{color:var(--muted);max-width:600px;margin:0 auto 16px auto;}

/* ---------- v3 responsive ---------- */
@media (max-width:960px){
  .fside{display:none;}
  .fgrid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .hero-v3{padding:90px 0 40px 0;}
  .dash-stage{padding:12px 14px 64px 14px;}
  .fstats{grid-template-columns:repeat(2,1fr);}
  .mgrid{grid-template-columns:1fr;}
  .mcard{min-height:0;}
  .mcard p{padding-top:28px;}
  .frame-body{min-height:0;}
}


/* ============ v4 additions ============ */

/* dashboard column stack: chart + programs left, career log right */
.fcol{display:flex;flex-direction:column;gap:12px;min-width:0;}
.fchart svg{width:100%;height:auto;display:block;}

/* career log */
.flog{min-width:0;}
.flog-list{display:flex;flex-direction:column;flex:1;}
.fl{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.fl:last-child{border-bottom:none;}
.fl-ico{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;
  background:var(--surface-2);color:var(--accent);
  font-size:12px;line-height:24px;text-align:center;
}
.fl-txt{flex:1;font-size:12.5px;color:var(--ink);line-height:1.35;padding-top:3px;min-width:0;}
.fl-time{
  flex-shrink:0;font-size:11px;color:var(--faint);
  letter-spacing:0.06em;padding-top:5px;
}

/* foundations cards: compact variant */
.mcard.compact{min-height:0;}
.mcard.compact p{margin-top:14px;padding-top:0;}
.ftitle{font-size:19px;font-weight:700;letter-spacing:-0.01em;}

/* case studies index page */
.cs-index{padding:20px 0 80px 0;}

/* v4 responsive */
@media (max-width:960px){
  .fgrid{grid-template-columns:1fr;}
}

/* ---------- video embed (v4.1) ---------- */
.video-embed{margin:36px 0;}
.video-frame{
  position:relative;aspect-ratio:16/9;
  background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
}
.video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.video-embed figcaption{
  margin-top:12px;font-size:13px;color:var(--faint);
  letter-spacing:0.04em;
}

/* ---------- system diagrams (v4.2) ---------- */
.diagram{margin:36px 0;}
.diagram svg{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:16px;
  background:#121017;
}
.diagram figcaption{
  margin-top:12px;font-size:13px;color:var(--faint);letter-spacing:0.04em;
}

/* footer email (v4.3) */
.foot-mail{color:var(--faint);}
.foot-mail:hover{color:var(--accent);text-decoration:none;}