/* ============ concept4 design system (base) ============ */
/* 1.0.39: fallback faces sized to match Inter and Space Grotesk (metrics from the font files against Arial),
   so text keeps its line breaks and height when the web fonts arrive late. The swap moved the pricing page
   on phones by 26px (CLS 0.24). */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Roboto');
  size-adjust:106.18%;ascent-override:91.24%;descent-override:22.72%;line-gap-override:0%;}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial'),local('ArialMT'),local('Roboto');
  size-adjust:107.75%;ascent-override:91.32%;descent-override:27.10%;line-gap-override:0%;}
/* ============ tokens ============ */
:root{
  --bg:#FBF8F3;
  --text:#231F20;
  --muted:#5F584F;
  --overline:#8A7F6E;
  --hairline:#E9E2D4;
  --card-line:#D6CBB4;
  --accent:#0045B0;
  --accent-deep:#0045B0;
  --pill-bg:#0045B0;
  --pill-text:#FFFFFF;
  --band-bg:#0F1B33;
  --band-text:#DCE6F7;
  --band-accent:#7DB2FF;
  --code-bg:#0F1B33;
  --logo-filter:none;
  --footer-bg:#0F1B33;
  --bar-bg:#0045B0;
  --bar-text:#FFFFFF;
  --wash:#F5F1E9;
  --font-display:'Space Grotesk','Space Grotesk Fallback','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

/* ============ reset / base ============ */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:500;color:var(--text);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.shell{max-width:1160px;margin:0 auto;padding:0 24px;}
@media (max-width:480px){ .shell{padding:0 20px;} }

.overline{
  font:600 12px/1 var(--font-body);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--overline);
  margin:0 0 14px;
}
.h1{
  font-size:clamp(42px,7vw,72px);
  line-height:1.02;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.h2{
  font-size:clamp(32px,4.5vw,54px);
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.lede{
  font:400 17px/1.55 var(--font-body);
  color:var(--muted);
  text-wrap:pretty;
}
.mono{font-family:var(--font-mono);}
.accent-text{color:var(--accent);}
.small{font-size:13px;color:var(--muted);}

.sec-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.sec-head .lede{margin-top:16px;}
.sec-head.left{text-align:left;margin-left:0;max-width:680px;}

section{padding:104px 0;position:relative;}
@media (max-width:640px){ section{padding:72px 0;} }
.hairline-t{border-top:1px solid var(--hairline);}
.tight{padding-top:72px;}

/* ============ buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:13px 26px;
  font:600 14px/1 var(--font-body);
  letter-spacing:-0.01em;
  white-space:nowrap;
  transition:opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--pill-bg);color:var(--pill-text);}
.btn-primary:hover{opacity:.88;}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--card-line);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn .arr{display:inline-block;transition:transform .15s ease;}
.btn:hover .arr{transform:translateX(3px);}

.tlink{color:var(--accent);border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent);transition:border-color .15s ease;}
.tlink:hover{border-color:var(--accent);}
.ctalink{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);font:600 14px/1 var(--font-body);
}
.ctalink .arr{display:inline-block;transition:transform .15s ease;}
.ctalink:hover .arr{transform:translateX(3px);}

/* ============ announcement bar ============ */
.abar{
  background:var(--bar-bg);
  color:var(--bar-text);
}
.abar a{
  display:block;
  text-align:center;
  padding:10px 20px;
  font:600 13px/1.3 var(--font-body);
  letter-spacing:-0.01em;
}
.abar a:hover{opacity:.85;}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 24px;
}
.nav-left{display:flex;align-items:center;gap:14px;min-width:0;}
.navlogo{display:flex;align-items:center;flex:0 0 auto;}
.navlogo img{height:52px;width:auto;filter:var(--logo-filter);}
.gh-badge{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--card-line);border-radius:999px;
  padding:5px 12px 5px 10px;
  font:500 12px/1 var(--font-mono);
  color:var(--muted);
  flex:0 0 auto;
}
.gh-badge:hover{border-color:var(--accent);color:var(--text);}
.gh-mark{width:14px;height:14px;}
.nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.nav-right .btn{padding:10px 20px;font-size:13px;}
@media (max-width:640px){
  .gh-badge, .nav-right .btn-secondary{display:none;}
}
.nav-divider{width:1px;height:26px;background:var(--card-line);flex:0 0 auto;}
.nav-nvidia{height:26px;width:auto;flex:0 0 auto;}
@media (max-width:480px){
  .nav-divider, .nav-nvidia{display:none;}
}

/* ============ hero ============ */
.hero{padding-top:88px;padding-bottom:0;overflow:hidden;}
.hero-inner{max-width:880px;margin:0 auto;text-align:center;}
.hero .h1{margin-bottom:22px;}
.hero .h1 .mark{color:var(--accent);}
.hero-lede{max-width:60ch;margin:0 auto 36px;font:400 18px/1.6 var(--font-body);color:var(--muted);text-wrap:pretty;}
.hero-lede strong{color:var(--text);font-weight:600;}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:64px;}

/* code window */
.codewin{
  max-width:640px;margin:0 auto;
  border:1px solid var(--card-line);
  border-radius:10px;
  overflow:hidden;
  background:var(--code-bg);
  text-align:left;
}
/* the code window stays dark in both treatments, so its inks are fixed, not theme tokens */
.codewin-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;
  border-bottom:1px solid #22304A;
  font:500 12px/1 var(--font-mono);
  color:#8DA2C4;
}
.codewin-dots{display:flex;gap:6px;flex:0 0 auto;}
.codewin-dots span{width:8px;height:8px;border-radius:50%;background:#2C3B58;}
.codewin-path b{color:#DCE6F7;font-weight:500;}
.codewin pre{
  margin:0;padding:20px;overflow-x:auto;
  font:400 13.5px/1.7 var(--font-mono);
  color:#DCE6F7;
}
.codewin code .str{color:#7DB2FF;}
.codewin code .cmt{color:#7E93BC;}

/* ticker */
.ticker-wrap{margin:56px 0 0;overflow:hidden;}
.ticker{
  overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ticker-track{
  display:inline-flex;width:max-content;
  animation:marquee 40s linear infinite;
  font:500 13px/1 var(--font-mono);
  color:var(--muted);
  letter-spacing:.01em;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-track .seg{padding:0 18px;flex:0 0 auto;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;}
  .ticker-track .copy2{display:none;}
}

/* glow */
.hero-glow{
  position:absolute;left:50%;bottom:-40px;
  width:900px;height:420px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent-deep) 60%, transparent), transparent 72%);
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.hero-inner,.ticker-wrap,.proof{position:relative;z-index:1;}

/* logo wall */
.proof{padding:56px 0 96px;text-align:center;}
.proof .overline{margin-bottom:26px;}
.proof-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:28px 48px;
}
/* original-colour logos on white tiles so they read on the black ground */
.proof-row{gap:14px;}
.proof-row img{
  height:24px;width:auto;
  background:#FFFFFF;
  border:1px solid var(--card-line);
  border-radius:10px;
  padding:16px 26px;
  box-sizing:content-box;
}
.proof-row img.tall{height:32px;padding:12px 26px;}
@media (max-width:640px){ .proof-row{gap:10px;} .proof-row img{height:20px;padding:12px 18px;} .proof-row img.tall{height:26px;padding:9px 18px;} }

/* ============ table ============ */
.tbl-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap;}
.tbl-head .h2{margin:0;}
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--hairline);}
table{width:100%;border-collapse:collapse;min-width:520px;}
th{
  text-align:left;padding:14px 16px;
  font:600 12px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;
  color:var(--overline);border-bottom:1px solid var(--hairline);white-space:nowrap;
}
td{
  padding:20px 16px;border-bottom:1px solid var(--hairline);
  font:400 15px/1.5 var(--font-body);
  vertical-align:middle;
}
td:first-child{font-family:var(--font-display);font-weight:500;font-size:16px;}
th:last-child,td:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.t-contact a{color:var(--accent);}
.t-contact a:hover{text-decoration:underline;}
tr.t-note td{color:var(--muted);font-size:14px;border-bottom:none;padding-top:22px;}
.tbl-below{margin-top:28px;color:var(--muted);font-size:15px;text-wrap:pretty;}
.tbl-below a{color:var(--accent);}

/* ============ cards ============ */
.card{
  border:1px solid var(--card-line);
  border-radius:8px;
  padding:32px 28px;
  background:transparent;
}
.num-badge{
  display:block;
  font:500 14px/1 var(--font-mono);
  color:var(--accent);
  margin-bottom:20px;
}
.card h3{font-size:19px;line-height:1.3;margin-bottom:10px;}
.card p{color:var(--muted);font-size:15px;line-height:1.6;}
.card p strong,.card p b{color:var(--text);font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* pricing logic */
.cards-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:48px;
}
@media (max-width:820px){ .cards-row{grid-template-columns:1fr;} }
.cards-row .card{display:flex;flex-direction:column;}
.cards-row .ctalink{margin-top:18px;}

.wash-panel{
  background:var(--wash);
  border:1px solid var(--card-line);
  border-radius:10px;
  padding:36px 32px;
}
.wash-panel p{color:var(--text);font:500 17px/1.5 var(--font-body);text-wrap:pretty;margin-bottom:22px;}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  border:1px solid var(--card-line);
  border-radius:999px;
  padding:8px 16px;
  font:500 13px/1 var(--font-mono);
  color:var(--muted);
}
.footnote{margin-top:22px;max-width:70ch;}

/* details grid */
.tech-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:48px;
}
@media (max-width:900px){ .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .tech-grid{grid-template-columns:1fr;} }
code.kbd{
  font-family:var(--font-mono);font-size:13px;
  background:var(--wash);
  border-radius:4px;padding:2px 6px;
  color:var(--accent);
}
.codewin.wide{max-width:100%;}

/* ============ sovereignty band ============ */
.band{background:var(--band-bg);color:var(--band-text);}
.band .h2{color:var(--band-text);}
.band .overline{color:color-mix(in srgb, var(--band-text) 60%, transparent);}
.band .lede{color:color-mix(in srgb, var(--band-text) 78%, transparent);}
.band .hl{color:var(--band-accent);}
.band-hairline{--bh: color-mix(in srgb, var(--band-text) 18%, transparent);}
.band-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--bh);
  border:1px solid var(--bh);
  border-radius:10px;
  overflow:hidden;
  margin-top:56px;
}
@media (max-width:640px){ .band-grid{grid-template-columns:1fr;} }
.band-item{background:var(--band-bg);padding:34px 32px;}
.band-item h3{font-size:19px;margin-bottom:10px;color:var(--band-text);}
.band-item p{font-size:15px;line-height:1.6;color:color-mix(in srgb, var(--band-text) 72%, transparent);}
.band-lede-wrap{max-width:640px;margin:0 auto;text-align:center;}

/* ============ poc timeline ============ */
.poc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start;}
@media (max-width:820px){ .poc-grid{grid-template-columns:1fr;gap:48px;} }
.poc-copy .sec-head{text-align:left;margin:0 0 28px;max-width:none;}
.timeline{display:flex;flex-direction:column;}
.tl-row{
  display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--hairline);
}
.tl-row:last-child{border-bottom:1px solid var(--hairline);}
.tl-time{
  flex:0 0 92px;
  font:500 13px/1.5 var(--font-mono);
  color:var(--accent);
}
.tl-row p{color:var(--muted);font-size:15px;line-height:1.5;}

/* bridge */
.bridge-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.bridge-row p{
  flex:1 1 420px;min-width:0;
  font:500 20px/1.5 var(--font-display);
  letter-spacing:-0.01em;
  text-wrap:pretty;
}
.mk-word{color:var(--accent);}

/* ============ faq ============ */
.faq{border-top:1px solid var(--hairline);max-width:760px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--hairline);}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;cursor:pointer;list-style:none;
  font:500 17px/1.4 var(--font-display);color:var(--text);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .ind{
  position:relative;flex:0 0 20px;height:20px;
}
.faq summary .ind::before,.faq summary .ind::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  transition:transform .2s ease, opacity .2s ease;
}
.faq summary .ind::before{width:14px;height:2px;}
.faq summary .ind::after{width:2px;height:14px;}
.faq details[open] summary .ind::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq .faq-body{padding:0 4px 26px;max-width:64ch;}
.faq .faq-body p{color:var(--muted);font-size:15.5px;line-height:1.6;}
.faq .faq-body a{color:var(--accent);}

/* ============ final cta ============ */
.cta-band{background:var(--band-bg);color:var(--band-text);text-align:center;}
.cta-band .h2{color:var(--band-text);max-width:820px;margin:0 auto;}
.cta-band .mk-word{color:var(--band-accent);}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:40px 0 20px;}
.cta-band .btn-primary{background:var(--band-accent);color:var(--band-bg);}
.cta-band .btn-secondary{border-color:color-mix(in srgb, var(--band-text) 30%, transparent);color:var(--band-text);}
.cta-band .btn-secondary:hover{border-color:var(--band-accent);color:var(--band-accent);}
.cta-foot{color:color-mix(in srgb, var(--band-text) 60%, transparent);font-size:13px;}

/* ============ footer (always black) ============ */
footer{background:var(--footer-bg);color:#DCE6F7;padding:72px 0 40px;}
.f-logo img{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.95;}
.f-rows{display:flex;flex-wrap:wrap;gap:12px 34px;margin:32px 0 40px;font-size:14.5px;}
.f-rows a{color:#9FB3D6;}
.f-rows a:hover{color:#DCE6F7;}
.f-base{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
  border-top:1px solid #1C2A44;padding-top:24px;font-size:13px;color:#7E93BC;
}
.f-base a{color:#7E93BC;}
.f-base a:hover{color:#DCE6F7;}


@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* ============ revamp extensions (site_extra.css) ============ */

/* ============================================================
   site.css extensions on top of concept4's design system.
   New components only: dropdown nav, stat strip, video feature
   cards, case cards, testimonials, suite cards, case-study rows,
   big quote, proof blocks, jobs row, data viz svgs, mobile nav.
   All built from the same tokens: 8-10px radii, 1px --card-line
   borders, no shadows.
   ============================================================ */

* { font-stretch: normal; }
img { max-width: 100%; }

/* ---------- nav dropdowns ---------- */
.nav-links{display:flex;align-items:center;gap:26px;flex:1 1 auto;justify-content:center;}
.nav-links > a{font:500 14.5px/1 var(--font-body);color:var(--text);white-space:nowrap;}
.nav-links > a:hover{color:var(--accent);}
.nav-links > a[aria-current="page"]{color:var(--accent);}
.nav-dd{position:relative;}
.nav-dd-btn{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:500 14.5px/1 var(--font-body);color:var(--text);padding:8px 0;
}
.nav-dd-btn:hover{color:var(--accent);}
.nav-dd-btn svg{width:9px;height:6px;transition:transform .15s ease;}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg);}
.nav-panel{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:280px;background:#FFFFFF;border:1px solid var(--card-line);border-radius:8px;
  padding:8px;box-shadow:0 8px 24px rgba(35,31,32,.08);
  display:none;flex-direction:column;gap:2px;z-index:60;
}
.nav-dd.open .nav-panel{display:flex;}
.nav-panel a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:6px;}
.nav-panel a:hover{background:var(--wash);}
.nav-panel a b{font:600 14px/1.2 var(--font-body);color:var(--text);}
.nav-panel a span{font:400 12.5px/1.3 var(--font-body);color:var(--muted);}
.nav-mid{display:flex;align-items:center;flex:1 1 auto;justify-content:center;}
@media (max-width:920px){
  .nav-mid{display:none;}
  .nav-right .btn{display:none;}
  .gh-badge{display:none;}
}

/* burger + mobile panel */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:0;cursor:pointer;padding:0;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg);}
@media (max-width:920px){ .nav-burger{display:flex;} }

.mnav{
  display:none;position:fixed;top:76px;left:16px;right:16px;z-index:150;
  background:#FFFFFF;border:1px solid var(--card-line);border-radius:10px;
  padding:10px;flex-direction:column;gap:2px;
  box-shadow:0 8px 24px rgba(35,31,32,.1);
  max-height:calc(100vh - 100px);overflow-y:auto;
}
.mnav.open{display:flex;}
.mnav a{padding:13px 12px;font:500 15px/1 var(--font-body);color:var(--text);border-radius:6px;}
.mnav a:hover{background:var(--wash);}
.mnav a[aria-current="page"]{color:var(--accent);}
.mnav .btn{margin-top:8px;justify-content:center;}

/* ---------- stat strip (static replacement for the pinned/floating stats stage) ---------- */
.stat-strip{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1160px;margin:0 auto;
}
.stat-strip .stat-cell{
  padding:36px 20px;text-align:center;min-width:0;
  border-left:1px solid var(--hairline);
}
.stat-strip .stat-cell:first-child{border-left:0;}
.stat-strip .stat-num{font:500 clamp(24px,3.4vw,38px)/1.1 var(--font-mono);color:var(--accent);letter-spacing:-0.01em;}
.stat-strip .stat-lbl{margin-top:8px;font:500 13px/1.3 var(--font-body);color:var(--muted);letter-spacing:.01em;}
@media (max-width:640px){
  .stat-strip{grid-template-columns:1fr;}
  .stat-strip .stat-cell{border-left:0;border-top:1px solid var(--hairline);}
  .stat-strip .stat-cell:first-child{border-top:0;}
}

/* ---------- video panel (dark frame, reused for all product videos) ---------- */
.vidpanel{
  border:1px solid var(--card-line);border-radius:10px;overflow:hidden;
  background:var(--code-bg);line-height:0;
}
.vidpanel video{width:100%;height:auto;display:block;}

/* ---------- 3-up video feature cards ("What you get") ---------- */
.mu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:900px){ .mu-grid{grid-template-columns:1fr;} }
.mu-card{min-width:0;}
.mu-card .vidpanel{margin-bottom:20px;aspect-ratio:4/3;}
.mu-card .vidpanel video{height:100%;object-fit:cover;}
.mu-card h3{font-size:19px;margin-bottom:8px;}
.mu-card p{color:var(--muted);font-size:15px;line-height:1.6;}
.mu-card .overline{margin-bottom:6px;}

/* ---------- 4-up modifier ("Why teams switch") ---------- */
.mu-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){ .mu-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:700px){ .mu-grid.four{grid-template-columns:1fr;} }

/* ---------- data-viz svgs reused from the gallery (gauges + before/after bars) ---------- */
.stat-viz{display:block;margin:12px 0 4px;}
.gauge rect.trk{fill:var(--hairline);}
.gauge rect.band{fill:var(--accent);}
.ba rect.bar-before{fill:var(--card-line);}
.ba rect.bar-after{fill:var(--accent);}
.ba text{font-family:var(--font-body);font-size:10px;font-weight:600;fill:var(--muted);}
.ba text.after-lab{fill:var(--accent);}
.vol-icon{display:inline-flex;vertical-align:-3px;margin:0 4px;color:var(--accent);}
.vol-icon svg{display:block;width:16px;height:12px;}

/* ---------- case cards ("In production" 3-up on home) ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:900px){ .cases-grid{grid-template-columns:1fr;} }
.case-card{min-width:0;border:1px solid var(--card-line);border-radius:8px;padding:28px 26px;display:flex;flex-direction:column;}
.case-sector{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.case-sector img{filter:grayscale(1);opacity:.75;}
.case-sector span{font:600 12px/1 var(--font-body);letter-spacing:.03em;text-transform:uppercase;color:var(--overline);}
.case-card h3{font-size:19px;line-height:1.32;margin-bottom:10px;}
.case-card .desc{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:18px;}
.case-card .stat{font:500 30px/1 var(--font-mono);color:var(--text);}
.case-card .stat-label{margin-top:6px;font-size:13px;color:var(--muted);}
.case-card .case-link{display:inline-block;margin-top:18px;color:var(--accent);font:600 14px/1 var(--font-body);}

/* ---------- testimonials (2-up) ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:760px){ .testi-grid{grid-template-columns:1fr;} }
.testi-card{min-width:0;border:1px solid var(--card-line);border-radius:8px;padding:32px 28px;}
.testi-card p{font:500 18px/1.5 var(--font-display);letter-spacing:-0.01em;text-wrap:pretty;margin-bottom:22px;}
.testi-name{font:600 14px/1.2 var(--font-body);color:var(--text);}
.testi-role{margin-top:2px;font:400 13px/1.3 var(--font-body);color:var(--muted);}

/* ---------- pricing suite cards (4-up top of pricing page) ---------- */
.suite-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
@media (max-width:920px){ .suite-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .suite-grid{grid-template-columns:1fr;} }
.suite-card{min-width:0;border:1px solid var(--card-line);border-radius:8px;padding:28px 24px;display:flex;flex-direction:column;}
.suite-card.emph{border-color:var(--accent);}
.suite-card .suite-head{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.suite-card h3{font-size:18px;}
.suite-card p{color:var(--muted);font-size:14.5px;line-height:1.55;}
.suite-card .who{margin:10px 0 18px;font-size:13px;color:var(--overline);}
.suite-card .btn{margin-top:auto;align-self:flex-start;}

/* ---------- option rows (private deployment / bundle, full width band) ---------- */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.opt-row .opt-copy{flex:1 1 420px;min-width:0;}
.opt-row .opt-copy p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.6;}
.opt-row .who{display:block;font-size:13px;color:var(--overline);margin-bottom:10px;}
.opt-row .opt-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 1 240px;min-width:0;max-width:100%;}
.opt-row .opt-cta .btn{max-width:100%;white-space:normal;text-align:center;}

/* ---------- NVIDIA chip ---------- */
.nv-chip{display:inline-flex;align-items:center;gap:10px;margin-top:18px;}
.nv-chip img{height:22px;width:auto;}
.nv-chip span{font-size:13px;color:var(--muted);}

/* ---------- AWS panel ---------- */
.aws-panel{
  margin-top:32px;border:1px solid var(--card-line);border-radius:10px;padding:26px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--wash);
}
.aws-panel h3{font-size:17px;margin-bottom:6px;}
.aws-panel p{color:var(--muted);font-size:14.5px;max-width:52ch;}

/* ---------- customers: alternating two-column case study blocks ---------- */
.cs-block{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
@media (max-width:860px){ .cs-block{grid-template-columns:1fr;gap:32px;} }
.cs-block.rev .cs-copy{order:2;}
.cs-block.rev .cs-metrics{order:1;}
@media (max-width:860px){ .cs-block.rev .cs-copy,.cs-block.rev .cs-metrics{order:initial;} }
.cs-label{display:flex;align-items:center;gap:10px;margin-bottom:16px;font:600 12px/1 var(--font-body);letter-spacing:.03em;text-transform:uppercase;color:var(--overline);}
.cs-label img{filter:grayscale(1);opacity:.8;}
.cs-copy h3{font-size:24px;line-height:1.28;margin-bottom:12px;}
.cs-copy p{color:var(--muted);font-size:15.5px;line-height:1.6;}
.cs-metrics{display:flex;flex-direction:column;gap:0;}
.cs-metric{padding:20px 0;border-top:1px solid var(--hairline);}
.cs-metrics .cs-metric:last-child{border-bottom:1px solid var(--hairline);}
.cs-metric-v{font:500 26px/1.1 var(--font-mono);color:var(--text);}
.cs-metric-l{margin-top:6px;font-size:13.5px;color:var(--muted);}

/* ---------- big quote (customers / about) ---------- */
.bigquote-sec{text-align:center;}
.bigquote-sec.ink{background:var(--band-bg);color:var(--band-text);}
.bigquote-sec.ink .bigquote-attr{color:color-mix(in srgb, var(--band-text) 75%, transparent);}
.bigquote{max-width:820px;margin:0 auto;font:500 clamp(24px,3.6vw,36px)/1.35 var(--font-display);letter-spacing:-0.01em;text-wrap:balance;}
.bigquote-attr-row{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.bigquote-attr{font-size:14.5px;color:var(--muted);}
.logo-chip img{height:20px;width:auto;filter:brightness(0) invert(1);opacity:.85;}

/* ---------- about: founder / two-column proof rows ---------- */
.founder-grid{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:center;}
@media (max-width:860px){ .founder-grid{grid-template-columns:1fr;gap:32px;} }
.founder-copy h2{margin-bottom:18px;}
.founder-copy p{color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:24px;}
.founder-grid img{width:240px;height:240px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--card-line);justify-self:center;}
@media (max-width:860px){ .founder-grid img{width:180px;height:180px;order:-1;} }

.proof-block{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--hairline);}
.proof-block:first-of-type{border-top:0;}
@media (max-width:860px){ .proof-block{grid-template-columns:1fr;gap:28px;} }
.proof-block.rev .proof-text{order:2;}
.proof-block.rev .proof-panel{order:1;}
@media (max-width:860px){ .proof-block.rev .proof-text,.proof-block.rev .proof-panel{order:initial;} }
.proof-text h3{font-size:22px;line-height:1.3;margin-bottom:12px;}
.proof-text p{color:var(--muted);font-size:15.5px;line-height:1.6;margin-bottom:20px;}
.proof-panel{min-width:0;}
.proof-big{font:500 48px/1 var(--font-mono);color:var(--accent);}
.proof-cap{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:36ch;}
.proof-chat{display:flex;flex-direction:column;gap:12px;}
.proof-chat div{border:1px solid var(--card-line);border-radius:10px;padding:16px 18px;font-size:14.5px;line-height:1.55;color:var(--text);background:var(--wash);}
.proof-box{border:1px solid var(--card-line);border-radius:10px;padding:24px 26px;}
.proof-box .lbl{font:600 12px/1 var(--font-body);letter-spacing:.03em;text-transform:uppercase;color:var(--overline);margin-bottom:14px;}
.proof-box ul{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.proof-box li{font-size:15px;color:var(--text);padding-left:18px;position:relative;}
.proof-box li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.proof-box .out{font-size:13.5px;color:var(--muted);border-top:1px solid var(--hairline);padding-top:14px;}
.proof-cities{display:flex;gap:32px;}
.proof-cities div{display:flex;flex-direction:column;gap:4px;}
.proof-cities b{font:500 20px/1 var(--font-display);color:var(--text);}
.proof-cities span{font-size:13px;color:var(--muted);}

.jobs-row{display:block;border:1px solid var(--card-line);border-radius:10px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.jobs-row:hover{border-color:var(--accent);}
.jobs-row span{font:500 16px/1 var(--font-display);color:var(--text);}
.jobs-row em{font-style:normal;color:var(--accent);font-size:14px;}

/* ---------- info rows (checklist-style 3/4 col rows with icon) ---------- */
.info-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.info-rows.three{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){ .info-rows,.info-rows.three{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .info-rows,.info-rows.three{grid-template-columns:1fr;} }
.info-rows .row-item{display:flex;gap:10px;align-items:flex-start;min-width:0;}
.info-rows .ic{width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--accent);}
.info-rows h3{font-size:16px;line-height:1.3;}
.info-rows .row-item > div{min-width:0;}
.info-rows .row-item p{margin:6px 0 0;font-size:14px;color:var(--muted);}

/* platform "what you get" 2x2 wcard grid (icon or video + heading + copy) */
.wcard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:760px){ .wcard-grid{grid-template-columns:1fr;} }
.wcard{min-width:0;border:1px solid var(--card-line);border-radius:8px;padding:28px 26px;}
.wcard .ic{width:28px;height:28px;color:var(--accent);margin-bottom:16px;}
.wcard .vidpanel{margin-bottom:16px;aspect-ratio:16/10;}
.wcard .vidpanel video{height:100%;object-fit:cover;}
.wcard h3{font-size:18px;margin-bottom:8px;}
.wcard h3 a{color:var(--text);}
.wcard h3 a:hover{color:var(--accent);}
.wcard p{color:var(--muted);font-size:14.5px;line-height:1.6;}

.console-vid .vidpanel{max-width:920px;margin:0 auto;aspect-ratio:16/9;}
.console-vid .vidpanel video{height:100%;object-fit:cover;}

.flow-vid{max-width:920px;margin:0 auto;}
.flow-vid .vidpanel{aspect-ratio:16/9;}
.flow-vid .vidpanel video{height:100%;object-fit:cover;}
.flow-note{margin-top:20px;text-align:center;color:var(--muted);font-size:14.5px;max-width:60ch;margin-left:auto;margin-right:auto;}

/* hero video panel (model-api hero, code-window sized) */
.hero-vid-wrap{max-width:640px;margin:32px auto 0;}
.hero-vid-wrap .vidpanel{aspect-ratio:4/3;}
.hero-vid-wrap .vidpanel video{height:100%;object-fit:cover;}

/* pricing model table icon */
.model-cell{display:inline-flex;align-items:center;gap:10px;}
.model-cell img{width:22px;height:22px;border-radius:5px;}

/* section-tint helper (concept4 uses --wash sparingly) */
.sec-tint{background:var(--wash);}

/* ---------------------------------------------------------------
   Round 3: platform.html "How it fits" horizontal request rail
   (mockup97 .pd-flow, ported onto Concept 4 tokens: stations are
   .card, core station gets an --accent border, chips are mono
   pills, arrows are inline SVG in --muted, tags mono --accent).
   --------------------------------------------------------------- */
.pd-flow{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;gap:16px;align-items:center;max-width:1080px;margin:0 auto;}
.pd-station{border:1px solid var(--card-line);border-radius:8px;padding:26px 20px;text-align:center;min-width:0;background:transparent;}
.pd-station-core{border-color:var(--accent);}
.pd-station-label{margin:0 0 16px;font:600 15px/1.3 var(--font-display);color:var(--text);}
.pd-station-logo img{height:26px;width:auto;display:inline-block;}
.pd-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.pd-chip{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--font-mono);color:var(--muted);border:1px solid var(--card-line);border-radius:999px;padding:7px 13px;}
.pd-chip img{width:14px;height:14px;flex:0 0 auto;border-radius:3px;}
.pd-chip svg{width:13px;height:13px;color:var(--accent);flex:0 0 auto;}
.pd-flow-link{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:88px;}
.pd-flow-tag{font:600 12px/1 var(--font-mono);color:var(--accent);letter-spacing:.02em;white-space:nowrap;}
.pd-arrow{width:64px;height:11px;color:var(--muted);display:block;}
.pd-flow-cap{margin:0;font-size:11.5px;line-height:1.4;color:var(--muted);text-align:center;max-width:16ch;}
@media (max-width:980px){
  .pd-flow{grid-template-columns:1fr;gap:6px;max-width:520px;}
  .pd-flow-link{flex-direction:row;gap:14px;padding:10px 0;}
  .pd-arrow{transform:rotate(90deg);width:44px;}
}

/* platform.html "the console" placeholder shots (no real asset yet) */
.console-shots{display:grid;grid-template-columns:7fr 5fr;gap:20px;}
@media (max-width:760px){ .console-shots{grid-template-columns:1fr;} }
.console-shot{
  min-height:340px;border:1px dashed var(--card-line);border-radius:10px;
  background:var(--wash);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--muted);font-size:13px;line-height:1.5;
}

/* Round 3c: "Why teams switch" cards 2x2 on desktop, videos shown uncropped at native 1600x1464 ratio */
.mu-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;}
@media (max-width:700px){ .mu-grid.four{grid-template-columns:1fr;} }
.mu-grid.four .vidpanel{aspect-ratio:1600/1464;background:var(--wash);}
.mu-grid.four .vidpanel video{width:100%;height:100%;object-fit:contain;}
.mu-grid.four .mu-card h3{font-size:21px;margin-top:4px;}
.mu-grid.four .mu-card p{max-width:52ch;}

/* Round 3d: platform "Every model type" as icon rows (mockup97 device) + pricing full-width section ledes */
.sol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;max-width:1080px;margin:0 auto;}
@media (max-width:820px){ .sol-grid{grid-template-columns:1fr;} }
.sol-row{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--hairline);}
.sol-row .ic{width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--accent);}
.sol-row p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5;}
.sol-row p b{color:var(--text);font-weight:600;}
.lede.lede-wide{max-width:none;}

/* Round 3e: demo.html (Book a demo) */
.demo-hero{padding-bottom:0;}
.demo-hero .hero-inner{max-width:760px;}
.demo-hero .hero-lede{margin-bottom:0;}
.demo-sec{padding-top:64px;}
.demo-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;}
@media (max-width:900px){ .demo-grid{grid-template-columns:1fr;gap:40px;} }
.demo-h2{font-size:clamp(26px,3vw,36px);margin-bottom:28px;}
.demo-rows{display:flex;flex-direction:column;}
.demo-row{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--hairline);}
.demo-row:last-child{border-bottom:1px solid var(--hairline);}
.demo-row .ic,.demo-commit .ic{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--accent);}
.demo-row b{display:block;font:600 15.5px/1.35 var(--font-body);color:var(--text);margin-bottom:4px;}
.demo-row p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;}
.demo-commit{display:flex;gap:10px;align-items:center;margin:22px 0 0;font:500 14.5px/1.4 var(--font-body);color:var(--text);}
.demo-contact{margin-top:28px;}
.demo-contact .tlink{font:500 16px/1.4 var(--font-mono);}
.demo-form{border:1px solid var(--card-line);border-radius:10px;padding:32px 28px;background:#FFFFFF;min-width:0;}
.demo-form label{display:block;margin-bottom:16px;}
.demo-form label span{display:block;font:600 12.5px/1 var(--font-body);color:var(--muted);margin-bottom:8px;}
.demo-form input,.demo-form select,.demo-form textarea{
  width:100%;border:1px solid var(--card-line);border-radius:8px;padding:12px 14px;background:var(--bg);
  font:400 15px/1.4 var(--font-body);color:var(--text);outline:none;transition:border-color .15s ease;
}
.demo-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F584F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px;padding-right:36px;}
.demo-form textarea{resize:vertical;min-height:110px;}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea{border-color:var(--card-line);}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{border-color:var(--accent);}
.demo-form .btn{margin-top:6px;}
.demo-form .btn[disabled]{opacity:.6;pointer-events:none;}
.demo-error{margin:12px 0 0;color:#B42318;font-size:13.5px;}
.demo-legal{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);}
.demo-legal a{color:var(--accent);}
.demo-thanks h3{font-size:24px;margin:6px 0 12px;}
.demo-thanks p{color:var(--muted);font-size:15px;line-height:1.6;}
.demo-thanks-kicker{color:#1A7F4B;}
.demo-proof{padding:88px 0 104px;text-align:center;}
.demo-proof-h2{margin-bottom:12px;}
.demo-proof .lede{max-width:52ch;margin:0 auto 32px;}

/* home "what you can build": same wcard as platform, three across */
.wcard-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){ .wcard-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .wcard-grid--3{grid-template-columns:1fr;} }

/* ===== round 4: developers ===== */
/* ============================================================
   developers.html: page-scoped additions only.
   Reuses existing tokens (--card-line, --accent, --muted, --hairline,
   --font-mono, --font-body). No new colours, no new radii scale.
   ============================================================ */

/* hero quick-nav chips: hero-inner is text-align:center, but .chip-row
   is a flex row that defaults to flex-start, so it needs centering here. */
.hero .chip-row{justify-content:center;margin-top:28px;}

/* chip-row items are sometimes plain <a> tags on this page (quick-nav,
   doc links). site.css only styles .chip visually; add the missing
   interactive states without touching site.css itself. */
a.chip{transition:border-color .15s ease,color .15s ease;}
a.chip:hover{border-color:var(--accent);color:var(--accent);}

.dev-inline-cta{margin-top:28px;}
#models .dev-modal-chips{margin-bottom:0;}

/* ---------- one-line migration: 3-up codewin row ---------- */
.codewin-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
@media (max-width:900px){
  .codewin-row{grid-template-columns:1fr;}
}
.codewin-row .codewin{max-width:none;margin:0;}

/* ---------- serving engines: pure-CSS radio tab set (no JS) ---------- */
.etabs{position:relative;}
.etabs-radio{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
  white-space:nowrap;
}
.etabs-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.etabs-bar label{
  display:inline-flex;align-items:center;
  cursor:pointer;user-select:none;
  padding:10px 18px;
  border:1px solid var(--card-line);
  border-radius:999px;
  font:500 14px/1 var(--font-body);
  color:var(--muted);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.etabs-bar label:hover{border-color:var(--accent);color:var(--text);}
.etabs-panel{display:none;}
.etabs-use{
  color:var(--muted);
  font-size:15.5px;line-height:1.6;
  max-width:64ch;
  margin-bottom:20px;
}
.etabs-panel .codewin{max-width:none;margin:0;}

#eng-vllm:checked ~ .etabs-bar label[for="eng-vllm"],
#eng-sglang:checked ~ .etabs-bar label[for="eng-sglang"],
#eng-trtllm:checked ~ .etabs-bar label[for="eng-trtllm"],
#eng-transformers:checked ~ .etabs-bar label[for="eng-transformers"],
#eng-mlx:checked ~ .etabs-bar label[for="eng-mlx"]{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

#eng-vllm:checked ~ .etabs-panels #panel-vllm,
#eng-sglang:checked ~ .etabs-panels #panel-sglang,
#eng-trtllm:checked ~ .etabs-panels #panel-trtllm,
#eng-transformers:checked ~ .etabs-panels #panel-transformers,
#eng-mlx:checked ~ .etabs-panels #panel-mlx{
  display:block;
}

.etabs-radio:focus-visible ~ .etabs-bar label[for="eng-vllm"]{outline:2px solid var(--accent);outline-offset:2px;}
#eng-sglang:focus-visible ~ .etabs-bar label[for="eng-sglang"]{outline:2px solid var(--accent);outline-offset:2px;}
#eng-trtllm:focus-visible ~ .etabs-bar label[for="eng-trtllm"]{outline:2px solid var(--accent);outline-offset:2px;}
#eng-transformers:focus-visible ~ .etabs-bar label[for="eng-transformers"]{outline:2px solid var(--accent);outline-offset:2px;}
#eng-mlx:focus-visible ~ .etabs-bar label[for="eng-mlx"]{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- endpoint table: keep the description column in body type.
   site.css's generic table rule sets td:last-child to monospace
   (built for numeric data columns); this table's last column is a
   sentence, so override it back to body font for just this table. */
.dev-endpoints td:last-child{
  font-family:var(--font-body);
  font-variant-numeric:normal;
  color:var(--muted);
}
.dev-endpoints td:first-child{padding-right:24px;}

/* ---------- "what the runtime gives you": 4-cell stat strip.
   Base .stat-strip is a 3-column grid; this page needs 4 cells, so
   add a modifier rather than editing the shared component. */
.stat-strip.four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){
  .stat-strip.four{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-strip.four .stat-cell{border-left:1px solid var(--hairline);}
  .stat-strip.four .stat-cell:nth-child(odd){border-left:0;}
}
@media (max-width:480px){
  .stat-strip.four{grid-template-columns:1fr;}
  .stat-strip.four .stat-cell{border-left:0;border-top:1px solid var(--hairline);}
  .stat-strip.four .stat-cell:first-child{border-top:0;}
}


/* ===== round 4: partner ===== */
/* Task B additions for partner.html only. Do not edit site.css. */

/* Center the standalone "Become a partner" form. site.css's .demo-form has no
   max-width of its own: on demo.html it sits inside the two-column .demo-grid,
   but partner.html has no second-column copy to pair it with, so it needs its
   own width cap to avoid stretching full-shell-width on wide viewports. */
.partner-form-wrap{max-width:640px;margin:0 auto;}

/* Give each .timeline row a bold title above its description (Reach Out,
   Discovery Call, etc). site.css's .timeline only ships a time-label + single
   paragraph; this reuses .demo-row's exact title typography token-for-token
   rather than inventing a new style. */
.tl-row b{display:block;font:600 15.5px/1.35 var(--font-body);color:var(--text);margin-bottom:4px;}


/* ===== round 4: resources ===== */
/* ============================================================
   resources.html: additions on top of site.css.
   Small, scoped additions only: a clickable-card meta line for
   the "from the blog" cards, a hover state for the two card
   components used as links, and a horizontal layout for the
   empty-state events panel. No new visual language: same
   hairlines, same --card-line borders, same radii as site.css.
   ============================================================ */

/* "Notes from the team shipping it" cards: whole .card is an <a>,
   so it needs its own hover and a mono meta line between the
   title and the excerpt (matches the accent-on-hover convention
   already used by .jobs-row / .wcard h3 a). */
.post-card-meta{
  font:500 13px/1.4 var(--font-mono);
  color:var(--muted);
  margin:2px 0 12px;
}

/* "Go deeper" resource cards: whole .wcard is an <a>. Reuses
   .case-link (already defined in site.css) for the trailing CTA
   line, just needs a hover state since the card itself is now
   the click target. */
a.wcard{display:block;transition:border-color .15s ease;}
a.wcard:hover{border-color:var(--accent);}
a.wcard h3{color:var(--text);}
a.wcard .case-link{margin-top:14px;}

/* Events empty-state: reuses .wash-panel, arranged as a row with
   the CTA button, same way .aws-panel already lays itself out. */
.events-panel{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.events-panel p{margin:0;color:var(--text);font:500 15px/1.5 var(--font-body);}


/* ===== round 4: blog ===== */
/* ============================================================
   blog.html + blog/*.html: additions on top of site.css.
   Loaded only by the blog index and the 27 post pages. Same
   tokens as the rest of Concept 4: hairlines not shadows,
   8-10px radii, --card-line borders, no new visual language.
   ============================================================ */

/* ---------- blog index + "more from the blog" card grid ----------
   Custom breakpoints per spec: 3 columns >=980px, 2 columns
   >=640px, 1 column below. (.cards-row in site.css only has a
   single breakpoint at 820px, so this is its own grid class
   rather than a reuse.) */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:980px){ .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr;} }

/* Whole .card is the link (same convention as resources.html's
   .post-card, redefined here since each page loads only its own
   _add-*.css file). */
.post-card{display:block;transition:border-color .15s ease;}
.post-card:hover{border-color:var(--accent);}
.post-card h3{color:var(--text);font-size:18px;line-height:1.35;margin:0 0 8px;}
.post-card .overline{margin-bottom:10px;}
.post-card p.mono{margin:0 0 12px;}
.post-card > p:last-child{color:var(--muted);font-size:14.5px;line-height:1.6;}
.post-card[hidden]{display:none;}

/* ---------- category filter chips ---------- */
.blog-filter{margin-bottom:36px;}
.blog-filter .chip{
  cursor:pointer;background:none;border-width:1px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.blog-filter .chip:hover{border-color:var(--accent);color:var(--text);}
.blog-filter .chip[aria-pressed="true"]{
  background:var(--pill-bg);color:var(--pill-text);border-color:var(--pill-bg);
}

/* ---------- post header ---------- */
.post-hero{padding:56px 0 8px;}
.post-head{max-width:72ch;}
.post-head .overline{margin-bottom:14px;}
.post-head .h1{margin-bottom:18px;}
.post-head .lede{max-width:none;margin-bottom:18px;}
.post-meta{margin:0;}

/* ---------- article body ----------
   72ch on purpose: wider than the site's 60ch default. Long-form
   prose at 60ch inside this full-width section left a narrow
   column with too much dead air either side; 72ch keeps line
   length readable (roughly 11-13 words/line at this font size)
   while filling the section properly. */
.post-content{padding:24px 0 56px;}
.post-body{max-width:72ch;margin:0 auto;color:var(--text);font-size:17px;line-height:1.75;}
.post-body > *:first-child{margin-top:0;}
.post-body p{margin:0 0 22px;text-wrap:pretty;}
.post-body h2{
  font-size:clamp(23px,3vw,30px);line-height:1.28;letter-spacing:-0.01em;
  margin:46px 0 16px;text-wrap:pretty;
}
.post-body h3{font-size:19px;line-height:1.32;margin:34px 0 12px;}
.post-body h2:first-child,.post-body h3:first-child{margin-top:0;}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:1.3em;}
.post-body ul{list-style:disc;}
.post-body ol{list-style:decimal;}
.post-body li{margin-bottom:10px;line-height:1.65;}
.post-body li:last-child{margin-bottom:0;}
.post-body li > ul,.post-body li > ol{margin-top:10px;margin-bottom:0;}
.post-body strong{color:var(--text);font-weight:600;}
.post-body em{font-style:italic;}
.post-body a{
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent);
}
.post-body a:hover{text-decoration-color:var(--accent);}
.post-body blockquote{
  margin:30px 0;padding:2px 0 2px 22px;border-left:3px solid var(--accent);
  color:var(--muted);font:500 18px/1.55 var(--font-display);letter-spacing:-0.005em;
  text-wrap:pretty;
}
.post-body blockquote p{margin-bottom:0;}
.post-body blockquote p + p{margin-top:14px;}

/* images: full-width, capped, never overflow */
.post-body img{max-width:100%;height:auto;display:block;border-radius:8px;margin:28px 0;}

/* code: inline pill + dark scroll-safe window, same ink as .codewin */
.post-body code{
  font-family:var(--font-mono);font-size:0.88em;
  background:var(--wash);border:1px solid var(--card-line);border-radius:4px;
  padding:2px 6px;color:var(--text);
}
.post-body pre{
  margin:0 0 22px;padding:20px;overflow-x:auto;max-width:100%;
  border:1px solid var(--card-line);border-radius:10px;
  background:var(--code-bg);color:#DCE6F7;
  font:400 13.5px/1.7 var(--font-mono);white-space:pre;
}
.post-body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit;border-radius:0;}

/* tables: script wraps every <table> in .tbl-wrap so it scrolls
   instead of pushing the page wide; column/row styling itself
   comes from site.css's global table/th/td rules. */
.post-body .tbl-wrap{margin:6px 0 28px;max-width:100%;}
.post-body table{min-width:480px;}

/* mobile: tighten the header rhythm a little */
@media (max-width:640px){
  .post-hero{padding-top:40px;}
  .post-body{font-size:16px;}
}

/* ===== round 4: events list on resources.html ===== */
.timeline--events .tl-time{flex:0 0 118px;}
.timeline--events .tl-row > div{min-width:0;}
.timeline--events .tl-row b{font-size:16px;}
.events-cta{margin-top:36px;text-align:center;}
@media (max-width:560px){
  .timeline--events .tl-row{flex-direction:column;gap:6px;}
  .timeline--events .tl-time{flex:0 0 auto;}
}

/* ===== round 5: numbered step tabs on developers.html =====
   Reuses the .etabs radio/label mechanism. Three narrow side-by-side code
   windows clipped their content at ~330px; one full-width window per step,
   switched by tab, is what every comparable developer site does. */
.steps-tabs .etabs-bar label{gap:10px;}
.steps-tabs .step-n{
  color:var(--accent);font-size:12.5px;font-weight:500;
  font-variant-numeric:tabular-nums;margin-right:2px;
}
#step-1:checked ~ .etabs-bar label[for="step-1"],
#step-2:checked ~ .etabs-bar label[for="step-2"],
#step-3:checked ~ .etabs-bar label[for="step-3"]{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
#step-1:checked ~ .etabs-bar label[for="step-1"] .step-n,
#step-2:checked ~ .etabs-bar label[for="step-2"] .step-n,
#step-3:checked ~ .etabs-bar label[for="step-3"] .step-n{color:rgba(255,255,255,.72);}

#step-1:checked ~ .etabs-panels #panel-step-1,
#step-2:checked ~ .etabs-panels #panel-step-2,
#step-3:checked ~ .etabs-panels #panel-step-3{
  display:block;
}

.steps-tabs .etabs-panel .codewin{max-width:100%;}
.steps-tabs .etabs-use{margin-bottom:16px;}
@media (max-width:640px){
  .steps-tabs .etabs-bar{overflow-x:auto;white-space:nowrap;}
  .steps-tabs .etabs-bar label{flex:0 0 auto;}
}

/* developers: icons inside the plain .card used by the governance grid */
#api .card .ic{width:26px;height:26px;color:var(--accent);margin-bottom:16px;display:block;}

/* round 5: icons in the plain .card used by partner tracks */
.cards-row .card .ic{width:26px;height:26px;color:var(--accent);margin-bottom:16px;display:block;}

/* ===== round 5: blog cards get a category colour rail =====
   Competitors (Baseten, Anyscale) carry blog cards on a reusable templated
   thumbnail rather than per-post artwork. A 3px top rail keyed to category is
   the same idea at zero production cost, and it gives the grid a visual rhythm
   instead of six identical text blocks. */
.post-card{position:relative;overflow:hidden;}
.post-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-line);
  transition:background-color .15s ease;
}
.post-card[data-cat="Engineering"]::before{background:var(--accent);}
.post-card[data-cat="Industry"]::before{background:#7DB2FF;}
.post-card[data-cat="Product"]::before{background:#0F1B33;}
.post-card[data-cat="Perspectives"]::before{background:#8A7F6E;}
.post-card .overline{display:inline-flex;align-items:center;gap:7px;}
.post-card .overline::before{
  content:"";width:7px;height:7px;border-radius:2px;background:var(--card-line);flex:0 0 auto;
}
.post-card[data-cat="Engineering"] .overline::before{background:var(--accent);}
.post-card[data-cat="Industry"] .overline::before{background:#7DB2FF;}
.post-card[data-cat="Product"] .overline::before{background:#0F1B33;}
.post-card[data-cat="Perspectives"] .overline::before{background:#8A7F6E;}

/* ===== round 5: blog post furniture (breadcrumb, TL;DR, table of contents) =====
   All three are standard on Fireworks, Anyscale and Baseten long-form posts and
   we had none of them. Built from existing tokens, no new visual language. */
.post-breadcrumb{
  border-bottom:1px solid var(--hairline);
  padding:14px 0;
  font:500 13px/1 var(--font-body);
  color:var(--muted);
}
.post-breadcrumb .shell{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.post-breadcrumb a{color:var(--muted);}
.post-breadcrumb a:hover{color:var(--accent);}
.post-breadcrumb span[aria-hidden]{color:var(--card-line);}
.post-breadcrumb .crumb-cat{color:var(--text);}


.post-toc{
  border:1px solid var(--card-line);
  border-radius:8px;
  padding:22px 26px;
  margin:0 0 40px;
  max-width:72ch;
}
.post-toc-label{
  color:var(--overline);letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 12px;
}
.post-toc ol{
  margin:0;padding:0;list-style:none;
  counter-reset:toc;
  display:flex;flex-direction:column;gap:9px;
}
.post-toc li{counter-increment:toc;display:flex;gap:11px;align-items:baseline;}
.post-toc li::before{
  content:counter(toc,decimal-leading-zero);
  font:500 12px/1.5 var(--font-mono);color:var(--accent);flex:0 0 auto;
}
.post-toc a{color:var(--text);font-size:15px;line-height:1.5;}
.post-toc a:hover{color:var(--accent);}

/* product links we attached to words already present in the article body */
.post-body a[href^="/"]{
  color:var(--accent);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.post-body a[href^="/"]:hover{border-bottom-color:var(--accent);}

@media (max-width:640px){
  .post-toc{padding-left:18px;padding-right:18px;}
}

/* ===== round 5: pillar + cluster navigation on comparison posts =====
   Five head-to-head posts and one multi-way guide were competing for the same
   query. Linking them as a hub and spokes turns the overlap into coverage. */
.cluster-sec{padding:72px 0;}
.cluster-sec .sec-head{margin-bottom:32px;}
.cluster-pillar{margin:0 0 20px;}
.cluster-nav{
  list-style:none;margin:0;padding:0;
  max-width:760px;
  border-top:1px solid var(--hairline);
}
.cluster-nav li{border-bottom:1px solid var(--hairline);}
.cluster-nav a{
  display:block;padding:16px 4px;
  font:500 16px/1.45 var(--font-body);color:var(--text);
  text-wrap:pretty;
  transition:color .15s ease, padding-left .15s ease;
}
.cluster-nav a:hover{color:var(--accent);padding-left:8px;}

/* round 5: further-reading block on product pages */
.further-reading .post-card h3{font-size:17px;margin-bottom:10px;}
.fr-more{margin-top:28px;text-align:center;}

/* round 5: end-of-post conversion band */
.post-cta{padding:72px 0;}
.post-cta .lede{max-width:56ch;margin:16px auto 0;}

/* ===== round 5: about page founding narrative ===== */
.story-copy{max-width:68ch;margin:0 auto;}
.story-copy p{
  color:var(--muted);font-size:17px;line-height:1.7;
  margin-bottom:22px;text-wrap:pretty;
}
.story-quote{
  margin:36px 0 0;padding:24px 0 0;
  border-top:1px solid var(--hairline);
  font:500 clamp(20px,2.4vw,26px)/1.4 var(--font-display);
  letter-spacing:-0.01em;color:var(--text);text-wrap:balance;
}
#how-we-got-here .sec-head{text-align:center;}

/* ===== round 5: animation placements outside the homepage =====
   Same contract as the homepage cards: .vidpanel frame, data-autoplay so
   site.js drives play/pause on scroll and honours reduced-motion. */
.eng-split{max-width:520px;margin:0 auto 40px;}
.eng-split .vidpanel{aspect-ratio:1600/1464;}
.eng-split .vidpanel video{width:100%;height:100%;object-fit:contain;background:var(--wash);}

.api-vid{max-width:520px;margin:48px auto 0;}
.api-vid .vidpanel{aspect-ratio:1600/1464;}
.api-vid .vidpanel video{width:100%;height:100%;object-fit:contain;background:var(--wash);}

.about-vid{max-width:560px;margin:0 auto 48px;}
.about-vid .vidpanel{aspect-ratio:1600/1464;}
.about-vid .vidpanel video{width:100%;height:100%;object-fit:contain;background:var(--wash);}

@media (max-width:640px){
  .eng-split,.api-vid,.about-vid{max-width:100%;}
}

/* round 5: partner page architecture strip (xgVidFlow is 1600x600, wide) */
.partner-vid{max-width:900px;margin:0 auto 48px;}
.partner-vid .vidpanel{aspect-ratio:1600/600;}
.partner-vid .vidpanel video{width:100%;height:100%;object-fit:contain;background:var(--wash);}

/* ---------------------------------------------------------------
   Round 7 (revised): enterprise.html and startups.html
   Persona pages that lead with isometric art, Baseten-style, instead of
   paragraphs. Everything here is additive; no existing rule is redefined.
   --------------------------------------------------------------- */
:root{
  --iso-top:#FFFFFF;
  --iso-lit:#CFE0FB;
  --iso-hub-lit:#3D7BE0;
  --iso-bar:#7DB2FF;
  --iso-bar-lit:#B9D5FF;
}

/* split hero: copy left, art right */
.hero--split .hero-inner{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:40px;align-items:center;text-align:left;
}
.hero--split .h1{font-size:clamp(36px,4.4vw,58px);}
.hero--split .hero-lede{margin-left:0;margin-right:0;max-width:34em;}
.hero--split .hero-cta{justify-content:flex-start;}
.hero--split .overline{margin-bottom:18px;}
.hero-art{position:relative;}
.hero-art .motion{border:0;background:transparent;padding:0;overflow:visible;}
@media (max-width:900px){
  .hero--split .hero-inner{grid-template-columns:1fr;gap:28px;}
  .hero-art{max-width:520px;margin:0 auto;width:100%;}
}

/* isometric art */
.iso{display:block;width:100%;height:auto;overflow:visible;}
.iso .cb polygon,.iso .cb path,.iso .cb ellipse{stroke:var(--accent);stroke-opacity:.5;stroke-width:1;stroke-linejoin:round;}
.iso .cb .t{fill:var(--iso-top);}
.iso .cb .l{fill:#E4ECF9;}
.iso .cb .r{fill:#C6D6F0;}
.iso .hub .t{fill:var(--accent);}
.iso .hub .l{fill:#0B3E97;}
.iso .hub .r{fill:#072F74;}
.iso .hub polygon{stroke:#062A66;stroke-opacity:1;}
.iso .xm path{fill:#FFFFFF;}
.iso .plus{fill:var(--accent);stroke:none;}
.iso .app .t{fill:#FFFFFF;} .iso .app .l{fill:#F1ECE2;} .iso .app .r{fill:#E3DACB;}
.iso .app polygon{stroke:#8A7F6E;stroke-opacity:.7;}
.iso .wt .t{fill:#F4F7FD;} .iso .wt .l{fill:#DCE6F7;} .iso .wt .r{fill:#B9CCEC;}
.iso .panel .t{fill:#FFFFFF;} .iso .panel .l{fill:#EEF2FA;} .iso .panel .r{fill:#D9E2F2;}
.iso .bar .t{fill:var(--iso-bar);} .iso .bar .l{fill:#4F8EF0;} .iso .bar .r{fill:#2F6FD6;}
.iso .bar polygon{stroke:#1F56B3;stroke-opacity:.8;}
.iso .slab .t{fill:#FFFFFF;} .iso .slab .l{fill:#EEE8DC;} .iso .slab .r{fill:#E0D6C4;}
.iso .slab polygon{stroke:#B7A98F;stroke-opacity:.8;}
.iso .tok .t,.iso .pkt .t{fill:#7DB2FF;} .iso .tok .l,.iso .pkt .l{fill:#4F8EF0;} .iso .tok .r,.iso .pkt .r{fill:#2F6FD6;}
.iso .tok polygon,.iso .pkt polygon{stroke:#1F56B3;stroke-opacity:.8;}
.iso .rack .t{fill:#F4F7FD;} .iso .rack .l{fill:#1B2A47;} .iso .rack .r{fill:#0F1B33;}
.iso .rack polygon{stroke:#0F1B33;stroke-opacity:1;}
.iso .ghost polygon{fill:none;stroke:#8A7F6E;stroke-width:1.2;stroke-dasharray:4 4;}
.iso .col .t{fill:#FFFFFF;} .iso .col .l{fill:#4F8EF0;} .iso .col .r{fill:#2F6FD6;}
.iso .zone{fill:rgba(0,69,176,.045);stroke:var(--accent);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:5 5;}
.iso .fence{fill:rgba(0,69,176,.04);stroke:var(--accent);stroke-opacity:.6;stroke-width:1.2;stroke-dasharray:5 5;}
.iso .wall{fill:rgba(15,27,51,.05);stroke:#0F1B33;stroke-opacity:.8;stroke-width:1.6;}
.iso .gd{fill:#D6CBB4;}
.iso .wire{fill:none;stroke:var(--accent);stroke-opacity:.45;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.iso .wire.api{stroke-opacity:.7;stroke-width:2;}
.iso .pulse{fill:var(--accent);}
.iso .pulse.alt{fill:#7DB2FF;}
.iso .led{fill:#7DB2FF;}
.iso .dia{fill:#7DB2FF;stroke:var(--accent);stroke-width:1;stroke-opacity:.6;}

/* static art gets quiet CSS motion; GSAP scenes are handled by motion.js */
@keyframes isoBlink{0%,100%{fill:var(--iso-top);}50%{fill:var(--iso-lit);}}
@keyframes isoLed{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes isoDash{to{stroke-dashoffset:-40;}}
@keyframes isoBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.iso-tile .gpu .t{animation:isoBlink 3.2s ease-in-out infinite;animation-delay:var(--d,0s);}
.iso-tile .led{animation:isoLed 2.4s ease-in-out infinite;animation-delay:var(--d,0s);}
.iso-tile .fence{animation:isoDash 5s linear infinite;}
.art-bob{animation:isoBob 5s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .iso-tile .gpu .t,.iso-tile .led,.iso-tile .fence,.art-bob{animation:none;}
}

/* three-question cards: art on top, two lines under it */
.q-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:900px){ .q-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;} }
.q-card{border:1px solid var(--card-line);border-radius:10px;overflow:hidden;background:#FFFFFF;display:flex;flex-direction:column;}
/* fixed height, art scales to fit: the three SVGs have different aspect
   ratios and an aspect-ratio box would let the tallest one win */
.q-art{background:var(--wash);border-bottom:1px solid var(--hairline);height:210px;padding:22px 26px;box-sizing:border-box;}
.q-art .motion{border:0;background:transparent;padding:0;width:100%;height:100%;overflow:visible;}
.q-art .iso{width:100%;height:100%;}
.q-card .q-copy{padding:24px 26px 28px;}
.q-card h3{font-size:19px;line-height:1.3;margin-bottom:8px;}
.q-card p{font-size:15px;line-height:1.6;color:var(--muted);}

/* compact control-plane row under the cards */
.cp-strip{margin-top:28px;padding:26px 28px;border:1px solid var(--hairline);border-radius:10px;background:var(--wash);}
.cp-strip .info-rows{margin-bottom:18px;}

/* deployment tiles */
.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:900px){ .tile-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;} }
.tile{border:1px solid var(--card-line);border-radius:10px;background:#FFFFFF;overflow:hidden;}
.tile-art{height:200px;padding:22px 30px;box-sizing:border-box;background:var(--wash);border-bottom:1px solid var(--hairline);}
.tile-art .iso{width:100%;height:100%;}
.tile .tile-copy{padding:22px 26px 26px;}
.tile h3{font-size:18px;margin-bottom:6px;}
.tile p{font-size:15px;line-height:1.6;color:var(--muted);}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:980px){ .ind-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;} }
.ind-card{border:1px solid var(--card-line);border-radius:10px;background:#FFFFFF;padding:26px 26px 28px;display:flex;flex-direction:column;}
.ind-art{height:92px;margin:0 0 18px -4px;display:flex;align-items:flex-end;}
.ind-art .iso{height:100%;width:auto;max-width:150px;}
.ind-card h3{font-size:20px;line-height:1.25;margin-bottom:8px;}
.ind-card > p{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:18px;}
.ind-card .chip-row{margin-bottom:16px;}
.ind-card .chip-row{gap:6px;}
.ind-card .chip{font-size:12px;padding:7px 10px;}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.tag{font:500 11.5px/1 var(--font-mono);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:5px;padding:6px 8px;}
.ind-card .ind-proof{font-size:13.5px;color:var(--muted);margin:-4px 0 18px;}
.ind-card .ind-proof b{color:var(--text);font-weight:500;}
.ind-card .ctalink{margin-top:auto;}
.ind-note{margin-top:22px;text-align:center;}

/* model strip (startups) */
.model-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;}
.model-strip .model-cell{border:1px solid var(--card-line);border-radius:999px;background:#FFFFFF;padding:9px 16px 9px 10px;font:500 14.5px/1 var(--font-display);color:var(--text);}
.model-strip .model-cell img{width:24px;height:24px;border-radius:6px;}

/* price chart (startups) */
.price-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;}
@media (max-width:900px){ .price-wrap{grid-template-columns:1fr;gap:32px;} }
.price-wrap .sec-head{text-align:left;margin:0 0 22px;max-width:none;}
.price-chart{padding:30px 30px 24px;}
.price-chart .pc-group{margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline);}
.pc-label{font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--overline);margin:0 0 14px;}
.pc-row{display:grid;grid-template-columns:136px minmax(0,1fr) 62px;align-items:center;gap:14px;margin-bottom:12px;}
.pc-name{font:500 14px/1.2 var(--font-display);color:var(--text);display:flex;align-items:center;gap:8px;}
.pc-name img{width:20px;height:20px;border-radius:5px;}
.pc-track{height:26px;border-radius:6px;background:var(--wash);overflow:hidden;}
.pc-bar{height:100%;width:var(--w);min-width:6px;border-radius:6px;background:var(--accent);}
.pc-bar.is-closed{background:repeating-linear-gradient(135deg,#8A7F6E 0 6px,#A89D8B 6px 12px);}
.pc-val{font:500 14px/1 var(--font-mono);color:var(--text);text-align:right;}
.pc-foot{font-size:12.5px;color:var(--muted);margin-top:16px;}
@media (max-width:480px){ .pc-row{grid-template-columns:112px minmax(0,1fr) 54px;gap:10px;} .price-chart{padding:22px 18px 18px;} }

/* two-line diff (startups) */
.switch-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;}
@media (max-width:900px){ .switch-wrap{grid-template-columns:1fr;gap:32px;} }
.switch-wrap .sec-head{text-align:left;margin:0 0 22px;max-width:none;}
.codewin.diff{max-width:none;margin:0;}
.codewin.diff pre{white-space:pre;overflow-x:auto;}
.codewin.diff .del{display:block;background:rgba(229,83,75,.16);color:#FFB4AE;margin:0 -20px;padding:0 20px;}
.codewin.diff .add{display:block;background:rgba(63,185,80,.16);color:#9BE7A6;margin:0 -20px;padding:0 20px;}
@media (max-width:480px){ .codewin.diff pre{font-size:10.8px;padding:16px 14px;} .codewin.diff .del,.codewin.diff .add{margin:0 -14px;padding:0 14px;} }
.switch-list{display:flex;flex-direction:column;gap:12px;margin:0 0 22px;padding:0;list-style:none;}
.switch-list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--text);}
.switch-list li svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent);margin-top:2px;}

/* use-case cards (startups): icon, title, one line */
.uc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
@media (max-width:1000px){ .uc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .uc-grid{grid-template-columns:1fr;} }

/* the numbered scale steps sit on a single rail */
.steps-rail{position:relative;}
.steps-rail .wcard{background:#FFFFFF;}


/* A seventh nav item ("Solutions") does not fit at the narrow end of the
   desktop range: at 1024px the links overflowed left and ran under the NVIDIA
   badge by 19px. The burger takes over at 920px, so only 921px to ~1160px
   needs tightening. The badge is decorative and already hidden at 480px; it
   steps out of the way here too rather than being overlapped. */
@media (min-width:921px) and (max-width:1160px){
  .nav-links{gap:17px;}
  .nav-links > a,.nav-dd-btn{font-size:13.5px;}
  .nav-inner{gap:12px;}
}
@media (min-width:921px) and (max-width:1010px){
  .nav-divider,.nav-nvidia{display:none;}
}
.nav-left{flex:0 0 auto;}
.nav-mid{min-width:0;}

/* blog posts that rank for enterprise or startup queries point at the page
   built for that query */
.post-sol{margin-top:20px;font-size:15px;}

/* logo strip directly under a split hero: the default .proof padding plus
   a section's own padding left a 200px hole */
.logo-sec{padding:0;}
.logo-sec .proof{padding:8px 0 80px;}
/* XW Bank's asset is its mark only. Pair it with the name so it reads,
   in the same white chip the other logos sit in. */
.logo-named{display:inline-flex;align-items:center;gap:10px;height:24px;box-sizing:content-box;
  padding:16px 22px;background:#FFFFFF;border:1px solid var(--card-line);border-radius:10px;
  font:600 17px/1 var(--font-display);color:#231F20;letter-spacing:-.01em;}
.proof-row .logo-named img{height:26px;width:auto;padding:0;border:0;border-radius:0;background:none;}
@media (max-width:640px){ .logo-named{height:20px;padding:12px 16px;font-size:15px;} .proof-row .logo-named img{height:22px;padding:0;} }
.band-item .bi{display:block;width:26px;height:26px;color:var(--band-accent);margin-bottom:16px;}

/* ---------------------------------------------------------------
   Round 7b: the same isometric language on developers, partner,
   resources, about and the blog. Additive only.
   --------------------------------------------------------------- */
.iso .lay0 .t{fill:#FFFFFF;} .iso .lay0 .l{fill:#DCE6F7;} .iso .lay0 .r{fill:#B9CCEC;}
.iso .lay1 .t{fill:#F4F7FD;} .iso .lay1 .l{fill:#CFDDF5;} .iso .lay1 .r{fill:#A9C1E9;}
.iso .lay2 .t{fill:#EEF3FC;} .iso .lay2 .l{fill:#C2D4F1;} .iso .lay2 .r{fill:#9AB6E4;}
.iso .eng1 .t{fill:#EAF1FD;} .iso .eng1 .l{fill:#D3E0F6;} .iso .eng1 .r{fill:#B3C9EC;}
.iso .eng2 .t{fill:#DDE8FB;} .iso .eng2 .l{fill:#C3D5F2;} .iso .eng2 .r{fill:#A2BDE7;}
.iso .sheet .t{fill:#FFFFFF;} .iso .sheet .l{fill:#EEE8DC;} .iso .sheet .r{fill:#E0D6C4;}
.iso .sheet polygon{stroke:#B7A98F;stroke-opacity:.8;}
.iso .ink{fill:#D6CBB4;stroke:none;}
.iso .socket{fill:none;stroke:var(--accent);stroke-opacity:.7;stroke-width:1.2;stroke-dasharray:4 4;}
.iso .dia.art-bob{transform-box:fill-box;}

/* a graphic scene sitting in a content section */
.motion.iso-card{background:var(--wash);border:1px solid var(--hairline);padding:26px 30px;overflow:visible;}
.eng-split .motion.iso-card,.api-vid .motion.iso-card,.about-vid .motion.iso-card{aspect-ratio:auto;}

/* static hero art (no scene) */
.hero-art.is-static .iso{max-width:560px;margin:0 auto;}

/* card icons replacing line icons */
.card-art{height:84px;margin:0 0 16px -4px;display:flex;align-items:flex-end;}
.card-art .iso{height:100%;width:auto;max-width:140px;}

/* blog index: topic groups */
.topic-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto;}
.topic-nav .chip{text-decoration:none;}
.topic-nav .chip:hover{border-color:var(--accent);color:var(--accent);}
.topic-sec .sec-head{text-align:left;margin:0 0 28px;max-width:720px;}
.topic-sec .sec-head .lede{margin-top:10px;}
.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:980px){ .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .topic-grid{grid-template-columns:1fr;} }
.post-card.has-thumb{display:flex;flex-direction:column;}
.pc-thumb{height:118px;background:var(--wash);border:1px solid var(--hairline);border-radius:8px;margin:0 0 16px;display:grid;place-items:center;padding:14px;box-sizing:border-box;}
.pc-thumb .iso{height:100%;width:auto;max-width:100%;}
.post-card .pc-kind{font:500 11px/1 var(--font-mono);color:var(--accent);letter-spacing:.04em;text-transform:uppercase;}

/* post header: topic art on the right */
.post-head.has-art{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:44px;align-items:center;}
.post-art .iso{width:100%;height:auto;}
@media (max-width:820px){ .post-head.has-art{grid-template-columns:1fr;} .post-art{display:none;} }

/* sources list at the end of articles, model pages and compare pages */
.post-body .post-sources{font-size:14px;line-height:1.6;color:var(--muted);padding-left:1.4em;}
.post-body .post-sources li{margin-bottom:8px;}
.post-body .post-sources a{color:var(--muted);}
/* model and compare landing pages: body text sits under a centred hero */
.landing-hero{padding-bottom:64px;}
.model-cell .tlink{color:inherit;}
/* inside a topic group the group heading already names the topic */
.topic-grid .post-card > .overline{display:none;}

/* ---------- Round 8: one reading column on posts ----------
   Crumb, header, TOC and body share one left edge. Before this the crumb
   and TOC sat on the page shell's edge while the header and body were
   centred at two different widths. */
:root{--post-col:760px;}
.post-breadcrumb .shell,.shell.post-head{max-width:calc(var(--post-col) + 48px);}
.post-toc,.post-body{max-width:var(--post-col);margin-left:auto;margin-right:auto;}
.post-toc{margin-bottom:40px;}

/* ---------- Round 8: transit-map art (tm_art.py) ----------
   Replaces the isometric set. Flat lines, stations and the X hub; SMIL
   motion is paused off screen and under reduced motion by site.js. */
.tm{display:block;width:100%;height:auto;overflow:visible;}
.hero-art .tm{max-width:560px;margin:0 auto;}
.q-art .tm,.tile-art .tm{width:100%;height:100%;}
.ind-art .tm,.card-art .tm{height:100%;width:auto;max-width:150px;}
.pc-thumb .tm{height:100%;width:auto;max-width:100%;}
.post-art .tm{width:100%;height:auto;}
.art-panel{background:var(--wash);border:1px solid var(--hairline);border-radius:10px;padding:26px 30px;}
.art-panel .tm{max-width:640px;margin:0 auto;}
@media (max-width:480px){ .art-panel{padding:18px 14px;} }
/* split hero uses the full shell: at the base 880px cap the art column was
   only 388px wide and the illustration read as a thumbnail */
.hero--split .hero-inner{max-width:1160px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;}
@media (max-width:900px){ .hero--split .hero-inner{grid-template-columns:1fr;gap:28px;} }
/* post header art sits in the right margin, so the title keeps the full
   reading column and one left edge with the body; hidden where there is
   no margin to hold it */
.post-head.has-art{display:block;position:relative;}
.post-head.has-art .post-art{position:absolute;left:calc(100% + 8px);top:6px;width:190px;}
@media (max-width:1259px){ .post-head.has-art .post-art{display:none;} }

/* journey line: numbered steps as stations on one transit line
   (partner process, startups scale path). --n = number of steps. */
.journey{--n:4;list-style:none;margin:8px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:28px;text-align:center;}
.journey::before{content:"";position:absolute;top:19px;height:8px;border-radius:4px;background:var(--accent);
  left:calc(50% / var(--n));right:calc(50% / var(--n));}
.journey::after{content:"";position:absolute;top:18px;width:18px;height:10px;border-radius:5px;background:#0F1B33;
  box-shadow:0 0 0 2px #FFFFFF;left:calc(50% / var(--n));animation:jTrain 5.5s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes jTrain{0%{left:calc(50% / var(--n));opacity:0;}6%{opacity:1;}94%{opacity:1;}
  100%{left:calc(100% - 50% / var(--n) - 18px);opacity:0;}}
.journey li{position:relative;z-index:1;}
.j-stop{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;box-sizing:border-box;
  border-radius:50%;background:#FFFFFF;border:4px solid #0F1B33;font:500 13px/1 var(--font-mono);color:var(--accent);}
.journey h3{font-size:18px;line-height:1.3;margin:0 0 6px;}
.journey h3 a{color:inherit;}
.journey p{font-size:15px;line-height:1.55;color:var(--muted);max-width:26ch;margin:0 auto;}
@media (max-width:760px){
  .journey{grid-template-columns:1fr;gap:26px;text-align:left;}
  .journey::before{left:19px;right:auto;top:23px;bottom:23px;width:8px;height:auto;}
  .journey::after{display:none;}
  .journey li{padding-left:66px;min-height:46px;}
  .j-stop{position:absolute;left:0;top:0;margin:0;}
  .journey h3{padding-top:11px;}
  .journey p{margin:0;max-width:none;}
}
@media (prefers-reduced-motion:reduce){ .journey::after{animation:none;display:none;} }

/* Round 8: blog index (blog.html). Additive only, scoped with a
   page-prefixed class so nothing else is affected. */

/* hero topic-nav sits under the lede inside .hero-copy: left aligned,
   not the centred row .topic-nav uses everywhere else it appears alone
   in a full-width hero. */
.blog-nav-left{justify-content:flex-start;margin:0;}

/* "Start here" tiles are whole-card links (Enterprise's .tile is a plain
   div, never a link), so the anchor needs block layout and no underline. */
.blog-tile{display:block;color:inherit;text-decoration:none;transition:border-color .15s ease;}
.blog-tile:hover{border-color:var(--accent);}
/* a split hero with no logo strip under it needs its own bottom space
   (.hero has padding-bottom:0 because the home page's proof row follows) */
.hero--split:not(:has(+ .logo-sec)){padding-bottom:88px;}
@media (max-width:900px){ .hero--split:not(:has(+ .logo-sec)){padding-bottom:56px;} }
/* blog index: one topic illustration per section head; the cards stay text
   (a thumbnail per card repeated the same picture six times in a row) */
.topic-sec .sec-head.topic-head{max-width:none;display:grid;grid-template-columns:minmax(0,720px) 260px;
  justify-content:space-between;gap:40px;align-items:center;}
.topic-art .tm{width:100%;height:auto;}
@media (max-width:760px){ .topic-sec .sec-head.topic-head{grid-template-columns:1fr;} .topic-art{display:none;} }

/* Round 8: resources.html only. Prefixed .res-. Reuses existing site.css
   components (band, wcard-grid, cards-row, card-art, pc-thumb) wherever
   possible; only new layout is the events card grid below. */

/* Events: four cards in a row, 2x2 on tablet, 1 column on phone. */
.res-ev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
@media (max-width:900px){ .res-ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .res-ev-grid{grid-template-columns:1fr;} }
.res-ev-card{min-width:0;border:1px solid var(--card-line);border-radius:8px;padding:24px 22px;}
.res-ev-date{color:var(--accent);font-size:14px;letter-spacing:.02em;margin:0 0 14px;}
.res-ev-card h3{font-size:16px;line-height:1.3;margin-bottom:8px;}
.res-ev-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;}

/* .tlink defaults to --accent, a dark blue meant for light backgrounds.
   Inside the dark compliance band that reads as almost-invisible; match it
   to the band's own accent instead. */
.band-item .tlink{color:var(--band-accent);border-bottom-color:color-mix(in srgb, var(--band-accent) 40%, transparent);}
/* percentage height does not resolve inside the grid thumb box, so the art
   grew past it; pin it to the box's content height */
.pc-thumb .tm{height:88px;width:auto;max-width:100%;}
.pc-thumb{height:140px;padding:12px;}
.pc-thumb .tm{height:116px;}
.res-ev-date{font:500 21px/1.15 var(--font-display);letter-spacing:-.01em;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--hairline);}

/* developers.html — Round 8 restyle. Additive only; see R8-PAGE-SPEC.md.

   The model-catalogue cards need a big mono count, the same visual weight
   as .stat-strip .stat-num, but usable inside a plain .card (that rule is
   scoped to .stat-strip so it does not apply here). */
.dev-count{
  font:500 clamp(24px,3.4vw,38px)/1.1 var(--font-mono);
  color:var(--accent);
  letter-spacing:-0.01em;
  margin:4px 0 10px;
}
.art-panel{margin-bottom:28px;}
.art-panel:last-child{margin-bottom:0;}


/* ---------- Round 8b: object illustrations (ix_art.py, approved 9/29, palette 1) ----------
   Replaces the transit-map set. Axonometric objects, heavy outlines, flat fills,
   hard navy shadows. Palette 1 = brand blue + light blue. */
:root{--ix-main:#0045B0;--ix-main2:#1F5FC4;--ix-acc:#7DB2FF;--ix-gem:#0045B0;}
.ix{display:block;width:100%;height:auto;overflow:visible;}
.ix path,.ix rect,.ix ellipse,.ix circle{stroke:#0F1B33;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.ix .led,.ix .ns,.ix .ns *{stroke:none!important}
.ix .w{fill:#FFFFFF}.ix .g{fill:#E8E3D8}.ix .m{fill:var(--ix-main)}.ix .m2{fill:var(--ix-main2)}
.ix .a{fill:var(--ix-acc)}.ix .k{fill:#0F1B33}.ix .sh{fill:#0F1B33;stroke:none}
.ix .dt{fill:#0F1B33;stroke:none}
.ix .cb{fill:none;stroke:#0F1B33;stroke-width:3.2;stroke-linecap:round}
.ix .ln{fill:none;stroke:#0F1B33;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ix .dash{fill:none;stroke:#0F1B33;stroke-width:1.2;stroke-dasharray:3 3}
.ix .gem{fill:none;stroke:var(--ix-gem);stroke-width:2}
.ix .lbl{font-family:"Space Grotesk",Arial,sans-serif;font-weight:600;fill:#0F1B33;stroke:none!important}
.ix .draw{stroke-dasharray:3;stroke-dashoffset:3;animation:ixDraw 4s ease-in-out infinite}
.ix .ln.draw{stroke-dasharray:1.6;stroke-dashoffset:1.6}
@keyframes ixDraw{0%{stroke-dashoffset:1.6}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1.6}}
.ix .led{animation:ixLed 2.2s ease-in-out infinite}
@keyframes ixLed{0%,100%{opacity:1}50%{opacity:.25}}
.ix .lift{animation:ixLift 3.6s ease-in-out infinite}
@keyframes ixLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ix .bob{animation:ixLift 4.4s ease-in-out infinite}
.ix .cur{animation:ixCur 3.6s ease-in-out infinite}
@keyframes ixCur{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-7px)}}
.ix .slide{animation:ixSlide 4.8s ease-in-out infinite}
@keyframes ixSlide{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,8px)}}
.ix .drop{animation:ixDrop 4.8s ease-in-out infinite}
@keyframes ixDrop{0%{transform:translateY(-26px);opacity:0}25%{opacity:1}45%,100%{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.ix *{animation:none!important}}
/* the steps line: dashed rule and outlined number tiles with a hard shadow,
   in the same language as the illustrations (the moving train is gone) */
.journey::before{height:0;background:none;border-top:2px dashed #0F1B33;top:22px;}
.journey::after{display:none;}
.j-stop{border-radius:8px;border:2px solid #0F1B33;box-shadow:4px 4px 0 #0F1B33;}
@media (max-width:760px){ .journey::before{border-top:0;border-left:2px dashed #0F1B33;width:0;left:22px;top:23px;bottom:23px;height:auto;} }

/* illustrations are <img> files now (cached, lazy-loaded, sized); keep their
   proportions inside fixed-height art boxes */
img.ix{object-fit:contain;max-width:100%;}
.q-art img.ix,.tile-art img.ix{width:100%;height:100%;}
.card-art img.ix,.ind-art img.ix{height:100%;width:auto;max-width:150px;}
.pc-thumb img.ix{height:116px;width:auto;}
/* keep a hyphenated term on one line without changing the heading's text */
.nowrap{white-space:nowrap;}
/* developers: the endpoint table and doc links sit inside the dark API band */
.band .dev-endpoints{margin:40px 0 0;}
.band .dev-endpoints table{background:transparent;color:var(--band-text);}
.band .dev-endpoints th,.band .dev-endpoints td{background:transparent;color:var(--band-text);border-color:rgba(220,230,247,.16);}
.band .dev-endpoints th{color:var(--band-accent);}
.band .dev-docs-chips{margin-top:20px;}
.band .dev-docs-chips .chip{color:var(--band-text);border-color:rgba(220,230,247,.3);background:transparent;}
.band .dev-docs-chips .chip:hover{border-color:var(--band-accent);color:#FFFFFF;}

/* Model API self-serve refresh, 16 Oct 2026 */
.nav-login{font:500 14px/1 var(--font-body);color:var(--text);text-decoration:none;margin-right:16px;white-space:nowrap}
.nav-login:hover{color:var(--accent)}
@media (max-width:900px){.nav-login{display:none}}
td.t-price{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.row-req td{color:#9A9488}
tr.row-req img{filter:grayscale(1);opacity:.5}
.price-tbl .t-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-tbl td.t-num b{font:600 18px/1 var(--font-display);color:var(--text)}
.au-flag{display:block;width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(15,27,51,.08)}
.au-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 auto 18px;padding:5px 12px 5px 5px;border:1px solid var(--card-line,#D6CBB4);border-radius:999px;background:color-mix(in srgb,#fff 60%,transparent);font:600 12px/1 'Inter',-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text,#231F20)}
.au-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 14px/1.4 'Inter',-apple-system,sans-serif;color:var(--muted,#5F584F)}
.au-note .au-flag{width:16px;height:16px}