/* BharatGen interim site. Look borrowed from the 2026 deck system:
   soft sky-to-white grounds, two-tone kesar/neel titles, rounded deck cards in tan, sky and peach,
   fully rounded eyebrow pills. Square edges are reserved for the new identity, so they stay out of this site. */

/* two scripts most systems lack, subset to the one word each that the Text page shows (Noto, SIL OFL) */
@font-face { font-family: "BG Scripts"; src: url("fonts/ol-chiki-santali.woff2") format("woff2"); unicode-range: U+1C50-1C7F; font-display: swap; }
@font-face { font-family: "BG Scripts"; src: url("fonts/meetei-mayek-meiteilon.woff2") format("woff2"); unicode-range: U+ABC0-ABFF; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Fallback faces sized to match Bricolage Grotesque and Inter, so text does not jump or rewrap
   when the web fonts arrive. Arial (Windows, Mac) and Roboto (Android) are each measured separately. */
@font-face { font-family: "BG Display Arial"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); font-weight: 600 700; size-adjust: 92.2%; ascent-override: 100.9%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "BG Display Arial"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); font-weight: 400 500; size-adjust: 95.7%; ascent-override: 97.2%; descent-override: 28.2%; line-gap-override: 0%; }
@font-face { font-family: "BG Display Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 700; size-adjust: 97.9%; ascent-override: 95%; descent-override: 27.6%; line-gap-override: 0%; }
@font-face { font-family: "BG Display Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 400 500; size-adjust: 96.5%; ascent-override: 96.4%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "BG Body Arial"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); size-adjust: 104%; ascent-override: 93.1%; descent-override: 23.2%; line-gap-override: 0%; }
@font-face { font-family: "BG Body Roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 104.9%; ascent-override: 92.3%; descent-override: 23%; line-gap-override: 0%; }
:root {
  color-scheme: light;
  /* colour */
  --neel: #05539C;          /* brand blue: headings, dark surfaces, pills */
  --neel-deep: #0A3D73;     /* pressed states, footer ground */
  --kesar: #F59222;         /* brand saffron: accents, rules, large marks */
  --kesar-ink: #A04F00;     /* darker saffron for small marks (required fields, placeholders); passes 4.5:1 on white */
  --kesar-title: #D6740E;   /* large saffron marks only; headings are charcoal */
  --ink: #1D2530;           /* body text: near-black */
  --muted: #56606D;         /* secondary text: neutral grey (6:1 on white) */
  --line: #E3E6EA;          /* hairlines: neutral grey */
  --ground: #FBFBFC;        /* page ground: near-white */
  --white: #FFFFFF;
  --tan: #D8C6BA;           /* deck card: text family */
  --tan-ink: #5E412D;
  --sky: #D6EAFB;           /* deck card: vision / general */
  --sky-soft: #F3F5F8;      /* quiet fills (chips, panels): neutral grey */
  --peach: #E2E3C9;         /* speech family, Shrutam: olive (leaf); the token keeps its old name */
  --peach-ink: #4A4E1D;
  --olive-tts: #E6E1D8;     /* Sooktam: stone */
  --olive-tts-ink: #4F463D;
  --charcoal: #3F4955;      /* headings, page titles and display numbers */
  --brown: #6B4A33;         /* small labels: roles, eyebrows, demo labels, blog categories (passes 4.5:1 on white, tan, sky and peach) */
  /* type */
  --display: "Bricolage Grotesque", "BG Display Arial", "BG Display Roboto", sans-serif;
  --body: "Inter", "BG Body Arial", "BG Body Roboto", sans-serif;
  --step-6: clamp(2.4rem, 1.6rem + 3.6vw, 4.1rem);
  --step-5: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --step-4: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem);
  --step-3: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --step-2: 1.18rem;
  --step-1: 1.04rem;
  --step-0: 0.94rem;
  --step--1: 0.8rem;
  /* shape */
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1180px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --h: var(--charcoal);     /* heading and display-number colour */
  --h-k: var(--charcoal);   /* the first phrase of page titles and big display numbers (was saffron) */
  --label: var(--brown);    /* small labels: roles, eyebrows, demo labels, blog categories (was saffron) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; font-family: var(--body); font-size: var(--step-1); line-height: 1.6; color: var(--ink);
  background: var(--ground);
}
/* a soft, slowly drifting wash of brand blue and saffron behind the top of every page */
main { position: relative; isolation: isolate; }
.aura { position: absolute; inset: 0 0 auto 0; height: min(900px, 120vh); z-index: -1; overflow: hidden; pointer-events: none; }
.aura::before, .aura::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.aura::before { width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; right: -12vw; top: -30vw; background: radial-gradient(closest-side, #FCDDB8, rgba(252,221,184,0)); animation: drift-a 22s ease-in-out infinite alternate; }
.aura::after { width: 55vw; height: 55vw; max-width: 760px; max-height: 760px; left: -16vw; top: -18vw; background: radial-gradient(closest-side, #CFE3F8, rgba(207,227,248,0)); animation: drift-b 26s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(-8vw, 6vw) scale(1.08); } }
@keyframes drift-b { to { transform: translate(7vw, 4vw) scale(.94); } }
/* page-load entrance: the hero settles in once; everything is visible if animation is off */
@keyframes rise { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .copy > *, .page-hero .wrap > *, .hero-photo, .bn-photo { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero .copy > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: .08s; }
.hero .copy > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: .16s; }
.hero .copy > :nth-child(n+4), .page-hero .wrap > :nth-child(n+4) { animation-delay: .24s; }
.hero-photo, .bn-photo { animation-delay: .2s; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--neel); text-underline-offset: 3px; }
a:hover { color: var(--neel-deep); }
:focus-visible { outline: 3px solid var(--kesar); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--h); line-height: 1.12; margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--white); padding: 8px 14px; border-radius: 999px; }

/* ---------- launch bar ---------- */
.launchbar { background: var(--neel); color: var(--white); font-size: var(--step-0); }
.launchbar .wrap { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding-block: 9px; text-align: center; }
.launchbar a { color: var(--white); font-weight: 600; }
@media (max-width: 600px) { .launchbar .long { display: none; } }
.launchbar .tag { background: var(--kesar); color: #2B1600; font-weight: 700; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--white); }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: center; }
.nav li { position: relative; }
.nav a, .nav button { font: 500 var(--step-0)/1 var(--body); color: var(--h); text-decoration: none; background: none; border: 0; padding: 10px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.nav a:hover, .nav button:hover, .nav a[aria-current="page"] { background: var(--sky-soft); color: var(--neel); }
.nav .caret { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.nav button[aria-expanded="true"] .caret { transform: rotate(-135deg) translateY(-1px); }
.menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 18px 40px -18px rgba(5,83,156,0.35); padding: 8px; list-style: none; margin: 0; display: grid; gap: 2px; }
.menu a { display: grid; gap: 2px; border-radius: 10px; padding: 10px 12px; line-height: 1.3; }
.menu a small { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.nav .cta { background: var(--neel); color: var(--white); padding: 10px 16px; margin-left: 6px; }
.nav .cta:hover { background: var(--neel-deep); color: var(--white); }
.menu-toggle { display: none; }

@media (max-width: 960px) {
  .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--step-0)/1 var(--body); color: var(--neel); background: var(--sky-soft); border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
  .nav { position: fixed; inset: var(--nav-top, 60px) 0 0 0; background: var(--white); padding: 12px var(--gutter-r) 32px var(--gutter-l); overflow-y: auto; display: none; flex-direction: column; align-items: stretch; }
  .nav.open { display: flex; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a, .nav button { width: 100%; justify-content: space-between; font-size: var(--step-1); padding: 14px 8px; border-radius: 10px; }
  .menu { position: static; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
  .nav .cta { justify-content: center; margin: 12px 0 0; }
}

/* ---------- shared building blocks ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--neel); color: var(--white); font: 600 var(--step--1)/1 var(--body); padding: 8px 14px; border-radius: 999px; width: fit-content; }
.pill.light { background: none; color: var(--label); border: 0; padding: 0; border-radius: 0; }  /* a quiet label above a section heading */
.title-2tone .k { color: var(--h-k); }
h2.title-2tone .k { color: var(--h); }  /* two-tone is for page titles; section headings stay solid blue */
.title-2tone .n { color: var(--h); }
.lede { font-size: var(--step-2); color: var(--muted); max-width: 62ch; line-height: 1.55; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 var(--step-0)/1 var(--body); padding: 14px 20px; border-radius: 999px; background: var(--neel); color: var(--white); border: 1.5px solid var(--neel); transition: background .15s, color .15s; }
.btn:hover { background: var(--neel-deep); color: var(--white); border-color: var(--neel-deep); }
.btn.ghost { background: var(--white); color: var(--neel); }
.btn.ghost:hover { background: var(--sky-soft); color: var(--neel-deep); }
.btn .arr { font-family: var(--body); }
.section { padding-block: clamp(48px, 7vw, 92px); }
.section.tight { padding-block: clamp(32px, 5vw, 56px); }
.section.band { background: var(--white); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 4vw, 40px); max-width: 760px; }
.section-head h2 { font-size: var(--step-5); }
.section-head p { color: var(--muted); font-size: var(--step-1); max-width: 62ch; }
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.split > .section-head { position: sticky; top: 110px; margin: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > .section-head { position: static; } }

/* deck card */
.card { background: var(--sky-soft); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--ink); }
.card h3 { font-size: var(--step-3); }
.card p { color: var(--ink); font-size: var(--step-0); }
.card .eyebrow { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card.tan { background: var(--tan); } .card.tan h3, .card.tan .eyebrow { color: var(--tan-ink); }
.card.peach { background: var(--peach); } .card.peach h3, .card.peach .eyebrow { color: var(--peach-ink); }
.card.sky { background: var(--sky); }
.card.white { background: var(--white); border: 1px solid var(--line); }
a.card { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(5,83,156,0.45); color: var(--ink); }
.card .more { font: 600 var(--step-0)/1 var(--body); color: var(--neel); margin-top: 6px; }
.card.tan .more { color: var(--tan-ink); } .card.peach .more { color: var(--peach-ink); }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* stats tiles (deck "by the numbers") */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { border-radius: var(--radius); padding: 20px 18px; text-align: center; display: grid; gap: 4px; }
.stat b { font: 600 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/1 var(--display); color: var(--h); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--step-0); color: var(--ink); }
.stat { background: var(--white); border: 1px solid var(--line); }  /* tints are kept for model families: text tan, speech peach, vision sky */
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* chips & links on model cards */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 var(--step--1)/1 var(--body); background: rgba(255,255,255,0.7); color: var(--ink); padding: 6px 10px; border-radius: 999px; }
.card.white .chip, .card.sky-soft .chip { background: var(--sky-soft); }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.links a { font: 600 var(--step--1)/1 var(--body); text-decoration: none; padding: 9px 13px; border-radius: 999px; background: var(--white); color: var(--neel); border: 1px solid var(--line); }
.links a:hover { background: var(--neel); color: var(--white); border-color: var(--neel); }
.status { font: 700 0.7rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--kesar); color: #2B1600; width: fit-content; }
.status.quiet { background: var(--white); color: var(--muted); border: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--step-0); margin: 4px 0 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-weight: 500; }

/* page hero */
.page-hero { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); }
.page-hero .wrap { display: grid; gap: 18px; }
.page-hero h1 { font-size: var(--step-6); max-width: 18ch; }
.crumbs { font-size: var(--step--1); color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.crumbs a { color: var(--muted); }
.crumbs .crumb-group { color: var(--muted); }

/* home hero */
.hero { padding-block: clamp(40px, 6vw, 84px) clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: var(--step-6); }
.hero .copy { display: grid; gap: 22px; }
.suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.suite .card { min-height: 0; }
.suite .card h3 { font-size: var(--step-2); }
.suite .card h3 small { font: 500 var(--step-0)/1 var(--body); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .suite { grid-template-columns: 1fr; } }

/* feature band (Patram) */
.feature { background: var(--neel); color: var(--white); border-radius: calc(var(--radius) + 6px); padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; overflow: hidden; position: relative; }
.feature h2 { color: var(--white); font-size: var(--step-5); }
.feature h2 .k { color: inherit; }  /* one heading colour; the pill is the only saffron */
.feature p { color: #D9E8F7; }
.feature .pill { background: var(--kesar); color: #2B1600; }
.feature .btn { background: var(--white); color: var(--neel); border-color: var(--white); }
.feature .btn:hover { background: var(--sky); }
.feature .btn.ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.feature .btn.ghost:hover { background: rgba(255,255,255,0.12); }
.feature .copy { display: grid; gap: 18px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feature-list li { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 2px; }
.feature-list b { font-family: var(--display); font-weight: 600; font-size: var(--step-2); color: var(--white); }
.feature-list span { color: #CFE2F5; font-size: var(--step-0); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* lists of records: papers, datasets */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.search { flex: 1 1 260px; min-width: 0; font: 400 var(--step-1)/1.2 var(--body); padding: 13px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); }
.search:focus { outline: none; border-color: var(--neel); box-shadow: 0 0 0 4px var(--sky); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { font: 600 var(--step--1)/1 var(--body); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--neel); color: var(--white); border-color: var(--neel); }
.count { font-size: var(--step--1); color: var(--muted); }
.records { display: grid; gap: 12px; }
.record { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 22px; }
.record .when { font: 600 var(--step--1)/1.3 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 4px; font-variant-numeric: tabular-nums; }
.record .body { display: grid; gap: 6px; min-width: 0; }
.record h3 { font-size: var(--step-2); line-height: 1.3; }
.record h3 a { color: var(--h); text-decoration: none; }
.record h3 a:hover { text-decoration: underline; }
.record p { font-size: var(--step-0); color: var(--ink); }
.record .meta { font-size: var(--step--1); color: var(--muted); }
.record .venue { font: 600 var(--step--1)/1 var(--body); color: var(--tan-ink); background: var(--tan); padding: 5px 9px; border-radius: 999px; width: fit-content; }
.year-head { font: 600 var(--step-3)/1 var(--display); color: var(--h-k); margin: 26px 0 4px; }
@media (max-width: 640px) { .record { grid-template-columns: 1fr; } }

/* people */
/* people grids: fixed columns, and a short last row sits in the centre instead of trailing off */
.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.people > .person { flex: 0 0 calc((100% - 48px) / 4); }
@media (max-width: 1100px) { .people > .person { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 760px) { .people > .person { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 480px) { .people > .person { flex-basis: 100%; } }
.person { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.person .face { width: 76px; height: 76px; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; font: 600 1.5rem/1 var(--display); color: var(--neel); background: var(--sky); }
.person:nth-child(3n+2) .face { background: var(--peach); color: var(--peach-ink); }
.person:nth-child(3n) .face { background: var(--tan); color: var(--tan-ink); }
.person .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: var(--step-3); line-height: 1.15; }
.person .role { font-size: .86rem; color: var(--label); font-weight: 500; line-height: 1.45; }  /* names lead; titles are lighter */
.person p { font-size: var(--step-0); color: var(--ink); }
.person .li { font: 600 var(--step--1)/1 var(--body); text-decoration: none; }
.people.compact .person { gap: 6px; padding: 16px 18px; }
.people.compact .face { width: 52px; height: 52px; font-size: 1.1rem; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--kesar); }
.timeline li { padding: 0 0 24px 24px; position: relative; display: grid; gap: 4px; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--kesar); }
.timeline time { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.timeline b { font-family: var(--display); font-weight: 600; font-size: var(--step-2); color: var(--h); }

/* table */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--step-0); }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 var(--step--1)/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--sky-soft); }
tr:last-child td { border-bottom: 0; }
td b { font-family: var(--display); color: var(--h); font-weight: 600; font-size: var(--step-1); }

/* prose (privacy, about text) */
.prose { max-width: 70ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.prose h2 { font-size: var(--step-3); margin-top: 18px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* closing CTA */
.closing { background: var(--sky); border-radius: calc(var(--radius) + 6px); padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.closing h2 { font-size: var(--step-4); max-width: 26ch; }
.closing p { color: #2C4A68; max-width: 56ch; margin-top: 8px; }

/* logo row */
.partner-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .partner-row { grid-template-columns: 1fr; } }
.inst { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; display: grid; gap: 4px; }
.inst b { font-family: var(--display); font-weight: 600; color: var(--h); font-size: var(--step-2); }
.inst span { font-size: var(--step-0); color: var(--muted); }
.inst.anchor { background: var(--neel); border-color: var(--neel); }
.inst.anchor b { color: var(--white); } .inst.anchor span { color: #D9E8F7; }

/* footer */
.site-foot { background: var(--neel-deep); color: #D4E4F5; margin-top: clamp(16px, 3vw, 40px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.site-foot .wrap { padding-block: 56px 28px; display: grid; gap: 36px; }
/* brand, backers and a short line on the left; four link columns on the right; follow row; legal */
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px 56px; }
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-logo { height: 36px; width: auto; }
.foot-brand p { font-size: var(--step-0); max-width: 36ch; color: #C6D9EE; margin: 0; }
.foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-col h2, .foot-follow h2 { font: 600 var(--step--1)/1 var(--body); color: var(--tan); margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: #E6F0FA; text-decoration: none; font-size: var(--step-0); }
.foot-col a:hover, .foot-follow a:hover { color: var(--white); text-decoration: underline; }
.backers { display: grid; gap: 10px; }
.backers .lbl { font: 600 var(--step--1)/1 var(--body); color: #C6D9EE; }
.backer-logos { display: flex; gap: 12px; }
.backer-logos a { flex: 0 0 150px; height: 64px; background: var(--white); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; }
.backer-logos img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.foot-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16); }
.foot-follow h2 { margin: 0; }
.foot-follow ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.foot-follow a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; color: #E6F0FA; text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.legal { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 22px; display: grid; gap: 6px; font-size: var(--step--1); color: #B7CDE4; }
.legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.legal a { color: #E6F0FA; }
@media (max-width: 960px) { .foot-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .backer-logos a { flex: 1 1 0; } }

/* small utilities */
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; } .mt-xl { margin-top: clamp(56px, 8vw, 96px); }
.muted { color: var(--muted); }
.note { font-size: var(--step-0); color: var(--muted); }
.ocr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .ocr-steps { grid-template-columns: 1fr; } }
.empty { background: var(--white); border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 36px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.empty h3 { font-size: var(--step-3); }

/* consortium */
.inst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .inst-grid { grid-template-columns: 1fr; } }
.inst-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.inst-card.anchor { background: var(--sky); border-color: var(--sky); }
.inst-top { display: flex; gap: 14px; align-items: center; }
.inst-top > div { display: grid; gap: 6px; }
.inst-logo { width: 64px; height: 64px; flex: none; border-radius: 14px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; padding: 8px; }
.inst-logo img { max-width: 46px; max-height: 46px; width: auto; height: auto; object-fit: contain; }
.inst-card h3 { font-size: var(--step-2); }
.inst-card p { font-size: var(--step-0); }
.inst-focus { font: 600 var(--step--1)/1.4 var(--body); color: var(--label); }
.inst-people { color: var(--muted); }
.area-filters button .n { opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: 2px; }
.researchers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; align-items: start; }
@media (max-width: 760px) { .researchers { grid-template-columns: 1fr; } }
.res-group { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.res-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 14px 44px 14px 18px; position: relative; }
.res-group summary::-webkit-details-marker { display: none; }
.res-group summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--neel); border-bottom: 2px solid var(--neel); transform: translateY(-70%) rotate(45deg); }
.res-group[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.res-inst { font: 600 var(--step-1)/1.3 var(--display); color: var(--neel); }
.res-n { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
.res-list { display: grid; gap: 0; padding: 0 18px 8px; }
.res-list .researcher { display: grid; gap: 6px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; border-radius: 0; }
.res-list .researcher h3 { font-size: var(--step-0); }
.researcher { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 8px; min-width: 0; align-content: start; }
.researcher .chips { align-items: flex-start; }
.researcher h3 { font-size: var(--step-1); }
.researcher p { font-size: var(--step--1); }
.researcher .chip { background: var(--sky-soft); }

/* ecosystem pillars and partner tiles */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } }
.pillar { border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--ink); background: var(--sky-soft); transition: transform .18s ease, box-shadow .18s ease; }
.pillar:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(5,83,156,0.45); color: var(--ink); }
.pillar h3 { font-size: var(--step-4); }
.pillar p { font-size: var(--step-0); }
.pillar .eyebrow { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pillar.tan { background: var(--tan); } .pillar.tan h3, .pillar.tan .eyebrow { color: var(--tan-ink); }
.pillar.peach { background: var(--peach); } .pillar.peach h3, .pillar.peach .eyebrow { color: var(--peach-ink); }
.pillar.sky { background: var(--sky); }
.pillar.white { background: var(--white); border: 1px solid var(--line); }
section[id] { scroll-margin-top: 90px; }
.partner-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ptile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 18px; font: 600 var(--step-2)/1.2 var(--display); color: var(--neel); text-align: center; display: grid; place-items: center; min-height: 92px; }
.ptile img { max-height: 42px; max-width: 130px; width: auto; height: auto; object-fit: contain; }
.card.intl .intl-logo { background: var(--white); border-radius: var(--radius-sm); height: 100px; display: grid; place-items: center; padding: 12px 16px; margin-bottom: 4px; }
.card.intl .intl-logo img { max-height: 74px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.stats.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.s3 .stat span { font-size: var(--step--1); }
@media (max-width: 600px) { .stats.s3 { grid-template-columns: 1fr; } }
.small { font-size: var(--step--1); }

/* filters with several groups, counts on chips */
.filter-rows { display: grid; gap: 10px; margin-bottom: 14px; }
.filters button .n { opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: 2px; }
.act { font: 600 var(--step--1)/1 var(--body); text-decoration: none; padding: 9px 13px; border-radius: 999px; background: var(--white); color: var(--neel); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
a.act:hover, button.act:hover { background: var(--neel); color: var(--white); border-color: var(--neel); }
.act.static { color: var(--muted); cursor: default; }

/* research papers */
.hl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card.hl { display: flex; flex-direction: column; gap: 10px; }
.card.hl .more { margin-top: auto; }   /* links line up along the bottom of each row */
@media (max-width: 960px) { .hl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hl-row { grid-template-columns: minmax(0, 1fr); } }
.card.hl { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.card.hl:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(5,83,156,0.45); }
.card.hl h3 { font-size: var(--step-1); line-height: 1.3; color: var(--h); }
.venue { font: 600 var(--step--1)/1 var(--body); color: var(--tan-ink); background: var(--tan); padding: 5px 9px; border-radius: 999px; width: fit-content; }
.venue.pre { background: var(--sky-soft); color: var(--muted); }
.papers { display: grid; }
.year-head .n { font: 500 var(--step--1)/1 var(--body); color: var(--muted); margin-left: 6px; }
.paper { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 6px 20px; padding: 16px 4px; border-top: 1px solid var(--line); align-items: start; }
.paper .p-when { font: 600 var(--step--1)/1.3 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 4px; font-variant-numeric: tabular-nums; }
.paper .p-main { display: grid; gap: 6px; min-width: 0; }
.paper .p-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.paper .area { font: 600 var(--step--1)/1 var(--body); color: var(--neel); background: var(--sky); padding: 5px 9px; border-radius: 999px; }
.paper h3 { font-size: var(--step-1); line-height: 1.35; }
.paper h3 a { color: var(--ink); text-decoration: none; }
.paper h3 a:hover { color: var(--neel); text-decoration: underline; }
.paper .p-auth { font-size: var(--step--1); color: var(--muted); }
.paper details summary { font: 600 var(--step--1)/1.4 var(--body); color: var(--neel); cursor: pointer; width: fit-content; }
.paper details[open] { background: var(--sky-soft); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 8px; }
.paper details p { font-size: var(--step-0); }
.paper .p-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .paper { grid-template-columns: 1fr; }
  .paper .p-act { justify-content: flex-start; }
}

/* datasets */
.ds-group-head { margin: 28px 0 12px; }
.ds-group-head h2 { font-size: var(--step-4); color: var(--h-k); }
.ds-group-head p { color: var(--muted); }
.ds-list { display: grid; gap: 12px; }
.ds { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 28px; }
.ds-main { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ds-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ds h3 { font-size: var(--step-2); color: var(--h); }
.ds-act { display: flex; gap: 8px; flex-wrap: wrap; }
.snippet { display: flex; align-items: center; gap: 10px; background: var(--sky-soft); border-radius: var(--radius-sm); padding: 8px 8px 8px 12px; min-width: 0; }
.snippet code { font: 500 0.82rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-x: auto; white-space: nowrap; flex: 1; min-width: 0; }
/* phones: let the snippet wrap instead of hiding the end under the Copy button */
@media (max-width: 600px) { .snippet { align-items: flex-start; } .snippet code { white-space: normal; overflow-wrap: anywhere; } }
.ds-facts { display: grid; gap: 8px; align-content: start; margin: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.ds-facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.ds-facts dt { font: 600 var(--step--1)/1.4 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; padding-top: 2px; }
.ds-facts dd { margin: 0; font-size: var(--step--1); color: var(--ink); }
@media (max-width: 760px) {
  .ds { grid-template-columns: 1fr; padding: 18px; }
  .ds-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}
/* partner logos: fixed-width tiles in centred rows, so an odd count never leaves a hole */
.partner-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.partner-tiles > .ptile { flex: 0 0 calc((100% - 36px) / 4); }
@media (max-width: 960px) { .partner-tiles > .ptile { flex-basis: calc((100% - 12px) / 2); } }

/* real outputs: voice samples */
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .voices { grid-template-columns: 1fr; } }
.voice { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.vplay { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--neel); cursor: pointer; display: grid; place-items: center; transition: transform .15s ease, background .15s ease; }
.vplay:hover { transform: scale(1.05); background: #04467F; }
.vplay:focus-visible { outline: 3px solid var(--kesar); outline-offset: 3px; }
.vicon { width: 0; height: 0; border-left: 15px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.voice.playing .vicon { width: 14px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, var(--white) 0 35%, transparent 35% 65%, var(--white) 65% 100%); }
.vbody { display: grid; gap: 6px; min-width: 0; }
.voice figcaption b { font: 600 var(--step--1)/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.vline { font-size: var(--step-1); line-height: 1.45; color: var(--ink); }
.vbar { display: block; height: 4px; background: var(--sky-soft); border-radius: 4px; overflow: hidden; }
.vbar i { display: block; height: 100%; width: 0; background: var(--kesar); transition: width .1s linear; }

/* real documents */
.doc-fan { position: relative; height: clamp(260px, 30vw, 360px); }
.doc-fan img { position: absolute; top: 50%; left: 50%; width: 46%; max-width: 230px; border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55); background: #fff; }
.doc-fan img:nth-child(1) { transform: translate(-105%, -50%) rotate(-8deg); }
.doc-fan img:nth-child(2) { transform: translate(-50%, -54%) rotate(1deg); z-index: 2; }
.doc-fan img:nth-child(3) { transform: translate(5%, -48%) rotate(7deg); z-index: 1; }
@media (max-width: 860px) { .doc-fan { height: 300px; } }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc { margin: 0; display: grid; gap: 10px; align-content: start; }
.doc-img { background: var(--sky-soft); border-radius: var(--radius); aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: start center; padding: 18px 18px 0; }
.doc-img img { width: 78%; height: auto; border-radius: 4px 4px 0 0; box-shadow: 0 10px 28px -14px rgba(5,83,156,0.45); background: #fff; }
.doc:nth-child(4) .doc-img { padding: 0; place-items: stretch; }
.doc:nth-child(4) .doc-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.doc figcaption { display: grid; gap: 2px; }
.doc figcaption b { font: 600 var(--step-1)/1.25 var(--display); color: var(--h); }
.doc figcaption span { font-size: var(--step--1); color: var(--muted); }

/* light feature band (Param2) */
.feature.alt { background: var(--tan); color: var(--ink); }
.feature.alt h2 { color: var(--h); }
.feature.alt h2 .k { color: inherit; }
.feature.alt p { color: var(--ink); }
.feature.alt .btn { background: var(--neel); color: var(--white); border-color: var(--neel); }
.feature.alt .btn:hover { background: #04467F; }
.feature.alt .btn.ghost { background: transparent; color: var(--neel); border-color: rgba(5,83,156,0.45); }
.feature.alt .btn.ghost:hover { background: rgba(255,255,255,0.45); }
.feature.alt .feature-list li { background: rgba(255,255,255,0.55); border-color: rgba(5,83,156,0.12); }
.feature.alt .feature-list b { color: var(--h); }
.feature.alt .feature-list span { color: var(--ink); }

/* ---------- Tabs and demos (real model outputs) ---------- */
.tabs { display: grid; gap: 16px; }
.tablist { display: flex; gap: 8px; flex-wrap: wrap; }
.tablist button { font: 600 var(--step-0)/1.1 var(--body); padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; transition: background .15s, color .15s, border-color .15s; }
.tablist button small { font-weight: 500; font-size: var(--step--1); color: var(--muted); }
.tablist button:hover { border-color: var(--neel); }
.tablist button[aria-selected="true"] { background: var(--neel); border-color: var(--neel); color: var(--white); }
.tablist button[aria-selected="true"] small { color: rgba(255,255,255,0.82); }
.tabpanel:focus-visible { outline: 3px solid var(--kesar); outline-offset: 4px; border-radius: var(--radius); }
.ex { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 860px) { .ex { grid-template-columns: minmax(0, 1fr); } }
.ex-in { background: var(--sky-soft); padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.ex-out { padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.ex-lbl { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.ex-prompt { font: 500 var(--step-2)/1.45 var(--display); color: var(--neel); }
.ex .chip { width: fit-content; background: var(--white); border: 1px solid var(--line); }
.ex-in .voice { border-color: var(--line); }
.gloss { font-size: var(--step-0); color: var(--muted); }
.ex-intro { color: var(--muted); font-size: var(--step-0); margin-bottom: 12px; max-width: 70ch; }
.ex-src { font-size: var(--step--1); color: var(--muted); margin-top: 10px; }
.ex-src a { color: var(--neel); }
.ex-transcript { font-size: var(--step-2); line-height: 1.6; color: var(--ink); }
.ex-answer { display: grid; gap: 10px; font-size: var(--step-0); border-top: 1px dashed var(--line); padding-top: 14px; }
.ex-answer ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.ex-answer.scroll, .ocr { max-height: 440px; overflow: auto; }
.ex-answer.scroll { border-top: 0; padding: 14px 16px; background: var(--ground); border-radius: var(--radius-sm); }
.code { margin: 0; background: #0F2742; color: #E6F0FA; border-radius: var(--radius-sm); padding: 16px 18px; overflow: auto; max-height: 400px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 4; }
/* model output samples: long comment lines (often in Indian scripts) wrap instead of running off the edge */
.ex-out .code { white-space: pre-wrap; overflow-wrap: anywhere; }
.think { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.think summary { cursor: pointer; padding: 10px 14px; font: 600 var(--step--1)/1.3 var(--body); color: var(--neel); }
.think-body { padding: 0 14px 12px; display: grid; gap: 8px; font-size: var(--step-0); color: var(--muted); }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; font-size: var(--step-0); align-items: start; }
.steps li::before { content: "S" counter(s); font: 700 12px/1 var(--body); color: var(--white); background: var(--neel); border-radius: 8px; padding: 6px 7px; }
.ex-doc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); max-height: 440px; overflow: auto; }
.ex-doc img { display: block; width: 100%; height: auto; }
.ocr { background: var(--ground); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 10px; font-size: var(--step-0); white-space: pre-line; }
.ocr table { border-collapse: collapse; font-size: var(--step--1); white-space: normal; }
.ocr th, .ocr td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }

/* ---------- Preview only: launch-day content held back ---------- */
.hold { border: 2px dashed var(--kesar); border-radius: var(--radius); background: #FFF8EF; }
.hold > summary { cursor: pointer; padding: 14px 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font: 600 var(--step-0)/1.3 var(--body); color: var(--ink); }
.hold-tag { background: var(--kesar); color: #2B1600; font: 700 var(--step--1)/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.hold-body { padding: 0 18px 18px; }
.hold-body .launchbar { border-radius: var(--radius-sm); }
.hold-note { background: #FFF8EF; border-bottom: 2px dashed var(--kesar); padding: 10px 0; font-size: var(--step-0); font-weight: 600; }

/* ---------- Icons (Lucide, inlined) ---------- */
.ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.72); color: var(--neel); flex: none; }
.ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
.card.white .ic, .why-card .ic { background: var(--sky-soft); }
.card.tan .ic { color: var(--tan-ink); }
.card.peach .ic { color: var(--peach-ink); }
.ic.sm { width: auto; height: auto; background: none; border-radius: 0; color: inherit; vertical-align: -3px; margin-right: 4px; }
.ic.sm svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Page hero with a banner ---------- */
.page-hero.has-banner .ph-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.page-hero.has-banner .ph-copy { display: grid; gap: 18px; align-content: center; }
.page-hero.has-banner h1 { max-width: 16ch; }
@media (max-width: 900px) { .page-hero.has-banner .ph-grid { grid-template-columns: minmax(0, 1fr); } }
.bn { margin: 0; min-width: 0; }
.bn figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 10px; }
.bn .who { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); display: flex; align-items: center; gap: 4px; }
/* models overview tiles */
.bn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bt { border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; align-content: start; min-height: 170px; overflow: hidden; }
.bt.tan { background: var(--tan); color: var(--tan-ink); } .bt.sky { background: var(--sky); color: var(--neel); } .bt.peach { background: var(--peach); color: var(--peach-ink); }
.bt b { font: 600 var(--step-2)/1.1 var(--display); }
.bt > span:not(.ic) { font-size: var(--step--1); opacity: .85; }
.bt .ic { width: 36px; height: 36px; color: inherit; }
.bt-snip { margin-top: 6px; height: 46px; overflow: hidden; border-radius: 8px; }
.bt-snip code { display: block; background: #0F2742; color: #E6F0FA; font: 12px/46px ui-monospace, Menlo, Consolas, monospace; padding: 0 10px; white-space: nowrap; }
.bt-snip img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.bt-snip .wave { width: 100%; height: 46px; }
/* text: chat */
.bn-chat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; box-shadow: 0 24px 48px -32px rgba(5,83,156,0.45); }
.bn-chat .msg { border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; font-size: var(--step-0); }
.bn-chat .you { background: var(--sky-soft); margin-left: 12%; }
.bn-chat .bot { background: var(--tan); color: var(--ink); margin-right: 6%; }
.bn-chat .bot .who { color: var(--tan-ink); }
/* speech: waveforms */
.bn-speech { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 16px; box-shadow: 0 24px 48px -32px rgba(5,83,156,0.45); }
.bn-speech .sp { display: grid; gap: 8px; }
.bn-speech .wave { width: 100%; height: 56px; }
.bn-speech p { font-size: var(--step-0); color: var(--ink); }
/* research: paper stack */
.bn-papers { display: grid; gap: 10px; }
.bn-papers .pc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 6px; box-shadow: 0 16px 34px -26px rgba(5,83,156,0.5); }
.bn-papers .pc:nth-child(2) { margin-left: 8%; } .bn-papers .pc:nth-child(3) { margin-left: 16%; }
.bn-papers .pc b { font: 600 var(--step-1)/1.3 var(--display); color: var(--h); }
.bn-papers .venue { width: fit-content; }
/* datasets: MCQ */
.bn-mcq { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 10px; box-shadow: 0 24px 48px -32px rgba(5,83,156,0.45); }
.bn-mcq .q { font: 500 var(--step-2)/1.45 var(--display); color: var(--neel); }
.bn-mcq ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bn-mcq li { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: flex; gap: 8px; align-items: center; font-size: var(--step-0); }
.bn-mcq li span { font: 700 12px/1 var(--body); color: var(--muted); }
.bn-mcq li.ok { border-color: var(--kesar); background: #FFF6EA; }
.bn-mcq li.ok span { color: var(--label); }
/* ecosystem: consortium logos */
.bn-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bn-logos span { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); aspect-ratio: 1.4; display: grid; place-items: center; padding: 12px; }
.bn-logos img { max-width: 80%; max-height: 64px; object-fit: contain; }
/* contact */
.bn-contact { display: grid; gap: 10px; }
.bn-contact > a, .bn-contact > div { display: flex; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.bn-contact .ic { background: var(--sky-soft); }
.bn-contact span:not(.ic) { display: grid; gap: 2px; font-size: var(--step-0); min-width: 0; overflow-wrap: anywhere; }
.bn-contact b { font: 600 var(--step--1)/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
/* photos (approved only) */
.bn-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }

/* ---------- Why blocks ---------- */
.why-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: end; margin-bottom: 24px; }
.why-head .section-head { margin: 0; }
@media (max-width: 860px) { .why-head { grid-template-columns: minmax(0, 1fr); } }
.name-note { border-left: 3px solid var(--kesar); padding: 4px 0 4px 16px; display: grid; gap: 4px; }
.name-note .dev { font: 600 var(--step-4)/1.1 "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", var(--display); color: var(--h-k); }
.name-note p { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }
.name-note b { color: var(--ink); }
.why-card h3 { font-size: var(--step-2); }

/* ---------- Cookie consent ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -12px 32px -20px rgba(5,83,156,0.4); padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
.consent .wrap { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consent p { font-size: var(--step-0); max-width: 70ch; margin: 0; }
.consent .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .btn { padding: 11px 18px; cursor: pointer; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Hero variety ----------
   Home: the big split hero. Model pages: split hero with a real-output banner.
   Everything else: a compact hero, with a wide photo on About and Careers. */
.page-hero.has-banner h1 { font-size: var(--step-5); }
.page-hero.compact { padding-block: clamp(32px, 4.5vw, 56px) clamp(20px, 3vw, 32px); }
.page-hero.compact .wrap { gap: 14px; }
.page-hero.compact h1 { font-size: var(--step-5); max-width: 26ch; }
.page-hero.compact .lede { max-width: 62ch; }
.ph-wide { margin: clamp(12px, 2vw, 24px) 0 0; }
.ph-wide img { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; object-position: center 55%; border-radius: var(--radius); display: block; }
.ph-wide figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 8px; }
@media (max-width: 700px) { .ph-wide img { aspect-ratio: 4 / 3; } }


/* Pull quote */
.pull { margin: 24px 0 0; padding: clamp(20px, 3vw, 32px); border-left: 4px solid var(--kesar); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; display: grid; gap: 10px; }
.pull p { font-family: var(--display); font-weight: 600; font-size: var(--step-3); color: var(--neel); line-height: 1.25; margin: 0; max-width: 40ch; }
.pull footer { font-size: var(--step--1); color: var(--muted); }

/* Click-to-play YouTube (News & media, Events) */
.yt { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--neel-deep); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-cover { position: absolute; inset: 0; display: block; color: var(--white); text-decoration: none; }
.yt-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.yt-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,61,115,0) 45%, rgba(10,61,115,0.78) 100%); pointer-events: none; }
.yt-cover:hover img { transform: scale(1.03); }
.yt-play { position: absolute; left: 18px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--step-0); }
.yt-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--kesar); position: relative; transition: transform .2s ease; }
.yt-btn::after { content: ""; position: absolute; left: 21px; top: 17px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #2B1600; }
.yt-cover:hover .yt-btn, .yt-cover:focus-visible .yt-btn { transform: scale(1.07); }
.yt-poster { position: absolute; inset: 0; z-index: 1; color: var(--white); display: grid; align-content: end; justify-items: start; gap: 6px; padding: clamp(22px, 4vw, 36px) clamp(22px, 4vw, 36px) 96px; background: linear-gradient(180deg, rgba(4,40,82,0.45) 0%, rgba(4,40,82,0.75) 50%, rgba(4,40,82,0.95) 100%); }
.yt-poster-title { font-family: var(--display); font-weight: 600; font-size: var(--step-4); line-height: 1.05; }
.yt-poster-sub { color: #C6D9EE; font-size: var(--step-0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* News & media: press */
.press-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .press-top { grid-template-columns: 1fr; } }
.plead, .pside { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); text-decoration: none; }
.plead { background: var(--neel); color: var(--white); }
.plead .pmast { color: #FFC27A; font-weight: 700; font-size: var(--step-1); } /* light saffron: 4.8:1 on blue */
.plead .ptitle { font-family: var(--display); font-weight: 600; font-size: var(--step-3); line-height: 1.2; color: var(--white); text-wrap: pretty; }
.plead .pfoot, .pside .pfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--step--1); font-weight: 600; }
.plead .pfoot { color: #C6D9EE; }
.plead .pread { color: var(--white); }
.plead:hover .ptitle, .plead:focus-visible .ptitle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.pside { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.pside .pmast { color: var(--label); font-weight: 700; font-size: var(--step-0); }
.pside .ptitle { font-family: var(--display); font-weight: 600; font-size: var(--step-2); line-height: 1.25; color: var(--h); text-wrap: pretty; }
.pside .pfoot { color: var(--muted); }
.pside .pread { color: var(--neel); }
.pside:hover .ptitle, .pside:focus-visible .ptitle { text-decoration: underline; }
.presslist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.presslist li { border-bottom: 1px solid var(--line); }
.presslist a { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 16px 0; color: inherit; text-decoration: none; }
.presslist .pmeta { font-size: var(--step--1); color: var(--ink); font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.presslist .ptitle { font-family: var(--display); font-weight: 600; font-size: var(--step-1); color: var(--h); line-height: 1.3; text-wrap: pretty; }
.presslist .pdate { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
.presslist a:hover .ptitle, .presslist a:focus-visible .ptitle { text-decoration: underline; }
@media (max-width: 760px) { .presslist a { grid-template-columns: 1fr; gap: 4px; } }
.ptag { font-size: 0.7rem; font-weight: 700; background: var(--sky-soft); color: var(--neel); padding: 2px 8px; border-radius: 999px; }
.small { font-size: var(--step--1); }

/* News & media: watch band */
.watch-band { background: var(--tan); color: var(--ink); }
.watch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .watch { grid-template-columns: 1fr; } }
.watch-copy { display: grid; gap: 16px; }
.watch-copy h2 { color: var(--h); font-size: var(--step-5); }
.watch-copy p { color: #4E3A2C; max-width: 46ch; }
/* videos to watch: one card per talk or interview, each plays in place */
.vids-wrap { margin-top: clamp(40px, 6vw, 72px); }
.vids-head { font-size: var(--step-3); margin-bottom: 20px; }
.vids { gap: 28px 24px; }
.vid { display: grid; gap: 14px; align-content: start; }
.vid .yt { aspect-ratio: 16 / 9; box-shadow: 0 14px 30px -22px rgba(60,40,25,.6); }
.vid .yt-cover::after { background: linear-gradient(180deg, rgba(10,61,115,0) 55%, rgba(10,61,115,0.6) 100%); }
.vid .yt-btn { width: 44px; height: 44px; }
.vid .yt-btn::after { left: 17px; top: 13px; }
.vid-text { display: grid; gap: 6px; }
.vid .yt-label { display: none; }
.vid-text .vid-meta { font: 600 var(--step--1)/1.3 var(--body); color: var(--label); }
.vid-text h4 { font: 600 var(--step-2)/1.25 var(--display); color: var(--h); margin: 0; }
.vid-text p { font-size: var(--step--1); color: #4E3A2C; margin: 0; }
.btn.light { background: var(--kesar); border-color: var(--kesar); color: #2B1600; }
.btn.light:hover { background: #FFB04F; border-color: #FFB04F; color: #2B1600; }
.btn.ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn.ghost-light:hover { background: rgba(255,255,255,0.1); color: var(--white); border-color: var(--white); }

/* Events */
.evlist { display: grid; }
.ev { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; padding-top: 0; }
.ev-date { display: grid; line-height: 1; position: sticky; top: 110px; }
.ev-mon { font-family: var(--display); font-weight: 600; font-size: var(--step-4); color: var(--h-k); }
.ev-yr { font-family: var(--display); font-weight: 600; font-size: var(--step-2); color: var(--neel); margin-top: 6px; }
.ev-media .yt, .ev-pic { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; }
.ev-pic img { width: 100%; height: 100%; object-fit: cover; }
.ev-body { display: grid; gap: 12px; align-content: start; }
.ev-body h2 { font-size: var(--step-4); }
.ev-place { color: var(--muted); font-weight: 600; font-size: var(--step-0); }
.ev-body .btns { margin-top: 6px; }
@media (max-width: 900px) { .ev { grid-template-columns: 80px minmax(0, 1fr); } .ev-body { grid-column: 2; } .ev-media { grid-column: 2; } .ev-date { grid-row: 1 / span 2; } }
@media (max-width: 560px) { .ev { grid-template-columns: 1fr; } .ev-date { position: static; display: flex; gap: 8px; align-items: baseline; grid-row: auto; } .ev-yr { margin-top: 0; } .ev-body, .ev-media { grid-column: 1; } }

/* Technical reports */
.reports .report h3 { font-size: var(--step-2); line-height: 1.3; }
.reports .report h3 a { color: var(--h); text-decoration: none; }
.reports .report h3 a:hover { text-decoration: underline; }
.report .p-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Blog */
.bcard { display: grid; grid-template-rows: auto 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
.bcard:hover, .bcard:focus-visible { color: var(--ink); border-color: #B7D1EB; }
.bthumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-soft); }
.bthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bcard:hover .bthumb img { transform: scale(1.03); }
.bbody { display: grid; gap: 8px; align-content: start; padding: 18px 20px 22px; }
.bmeta { font-size: var(--step--1); font-weight: 600; color: var(--label); }
.bmeta span { color: var(--muted); }
.bcard h3 { font-size: var(--step-2); line-height: 1.25; text-wrap: pretty; }
.bcard:hover h3, .bcard:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
.bsum { color: var(--muted); font-size: var(--step-0); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard.big { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: none; }
.bcard.big .bthumb { aspect-ratio: auto; min-height: 360px; }
.bcard.big .bbody { padding: clamp(24px, 4vw, 48px); align-content: center; gap: 14px; }
.bcard.big h3 { font-size: var(--step-5); line-height: 1.1; }
.bcard.big .bsum { font-size: var(--step-1); -webkit-line-clamp: 5; }
@media (max-width: 820px) { .bcard.big { grid-template-columns: 1fr; } .bcard.big .bthumb { min-height: 0; aspect-ratio: 16 / 10; } .bcard.big h3 { font-size: var(--step-4); } }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 960px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bgrid { grid-template-columns: 1fr; } }
.blist { padding-top: 0; }
.post-hero .wrap { max-width: calc(760px + var(--gutter-l) + var(--gutter-r)); }
.post-hero h1 { font-size: var(--step-5); text-wrap: pretty; }
.post-cat { font: 600 var(--step-0)/1.2 var(--body); color: var(--label); }
.post-meta { color: var(--muted); font-size: var(--step-0); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.post-cover { margin: 0 auto; max-width: 1040px; display: grid; gap: 8px; }
.post-cover img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 10; /* covers are 1200x750: show them whole */ object-fit: cover; }
.post-cover figcaption { font-size: var(--step--1); color: var(--muted); }
.post { max-width: 760px; margin-inline: auto; gap: 18px; font-size: 1.06rem; line-height: 1.7; }
.post h2 { font-size: var(--step-3); margin-top: 26px; }
.post h3 { font-size: var(--step-2); margin-top: 14px; }
.post ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.post li > ul, .post li > ol { margin-top: 6px; }
.post figure { margin: 8px 0; display: grid; gap: 8px; }
.post img { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); }
.post figcaption { font-size: var(--step--1); color: var(--muted); }
.post blockquote { margin: 6px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--kesar); font-family: var(--display); font-size: var(--step-2); color: var(--neel); line-height: 1.4; }
.post blockquote p + p { margin-top: 8px; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.post table { width: 100%; border-collapse: collapse; font-size: var(--step-0); line-height: 1.5; }
.post tr:last-child td { border-bottom: 0; }
.post th, .post td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.post th { background: var(--sky-soft); color: var(--neel); font-weight: 600; white-space: nowrap; }
.post code { font-size: 0.9em; background: var(--sky-soft); padding: 1px 5px; border-radius: 5px; }
.back { margin-top: 22px; font-weight: 600; }

/* Photo strip (Project Tapestry) */
.figs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.figs figure { margin: 0; display: grid; gap: 10px; }
.figs img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.figs figcaption { font-size: var(--step--1); color: var(--muted); }
@media (max-width: 900px) { .figs { grid-template-columns: minmax(0, 1fr); } }
/* Builder cards */
.bcard.builder .bsum { -webkit-line-clamp: 4; }
.bcard .more { margin-top: 6px; font-weight: 600; color: var(--neel); font-size: var(--step-0); }
/* Videos inside posts */
.post-video { margin: 8px 0; }
.post-video .yt { aspect-ratio: 16 / 9; }
.post .yt img { border: 0; border-radius: 0; }

.ptag.partner { background: var(--peach); color: var(--peach-ink); }

/* News: one collapsible block per year */
.pyears { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.pyear { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); scroll-margin-top: 96px; }
.pyear > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 18px; padding: 20px 26px; border-radius: var(--radius); }
.pyear > summary::-webkit-details-marker { display: none; }
.pyear > summary:hover .py-toggle { text-decoration: underline; text-underline-offset: 4px; }
.pyear > summary:focus-visible { outline: 3px solid var(--kesar); outline-offset: 2px; }
.py-year { font-family: var(--display); font-weight: 600; font-size: var(--step-4); line-height: 1; color: var(--h-k); }
.py-count { color: var(--muted); font-weight: 600; font-size: var(--step-0); }
.py-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--step--1); color: var(--neel); align-self: center; }
.py-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.pyear[open] .py-toggle::after { transform: translateY(2px) rotate(-135deg); }
.py-toggle .when-open, .pyear[open] .py-toggle .when-closed { display: none; }
.pyear[open] .py-toggle .when-open { display: inline; }
.pyear .presslist { margin: 0 26px 6px; }
.pyear .presslist li:last-child { border-bottom: 0; }
@media (max-width: 640px) { .pyear > summary { padding: 16px 18px; gap: 12px; } .pyear .presslist { margin: 0 18px 4px; } }
@media (prefers-reduced-motion: reduce) { .py-toggle::after { transition: none; } }
.pmore-wrap { border-bottom: 0 !important; }
.pmore > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 12px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: var(--step--1); color: var(--neel); background: var(--white); }
.pmore > summary::-webkit-details-marker { display: none; }
.pmore > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pmore > summary:hover { border-color: #B7D1EB; }
.pmore[open] > summary { display: none; }
.pmore .presslist { margin: 0; border-top: 1px solid var(--line); }
.pmore .presslist li:last-child { border-bottom: 0; }

/* Homepage hero photo and model families row */
.hero-photo { margin: 0; display: grid; gap: 8px; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); display: block; }
.hero-photo figcaption { font-size: var(--step--1); color: var(--muted); }
.suite4 .card h3 small { font: 500 var(--step-0)/1 var(--body); }
.suite4 .card .more { margin-top: auto; }
.values .card { display: flex; flex-direction: column; gap: 10px; }
.values .origin { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line, rgba(5,83,156,.12)); font-size: var(--step--1); color: var(--muted); }
.values .origin b { color: var(--h); font-weight: 600; }

/* Accessibility fixes (audit, 27 October 2026) */
.card.tan .spec dt { color: #3A4F66; }
.crumbs a, .site-foot .legal a, .site-foot .linkbtn { display: inline-block; padding-block: 4px; }
.person a.li { display: inline-block; min-height: 24px; padding-block: 4px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.contact-form { gap: 8px; }
.contact-form h2 { font-size: var(--step-3); }
.contact-form iframe { border: 0; width: 100%; min-height: 480px; margin-top: 8px; }
.form-fallback { font-size: var(--step--1); color: var(--muted); }
.contact-side { display: grid; gap: 14px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* Paper list: the title is the link to the paper; BibTeX copy is a quiet text button */
.paper .p-act a.act { display: none; }
.paper .p-act button.act { background: none; border: 0; padding: 4px 0; color: var(--neel); text-decoration: underline; text-underline-offset: 3px; }
.paper .p-act button.act:hover { background: none; color: var(--neel-deep, var(--neel)); }
.paper h3 a::after { content: " \2197"; font-size: 0.8em; color: var(--muted); }

/* Datasets: compact rows that open for details */
.ds-list.compact, .ds-list .ds-row + .ds-row { gap: 0; }
.ds-row { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ds-list.compact { gap: 8px; }
.ds-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 44px 14px 18px; position: relative; }
.ds-row summary::-webkit-details-marker { display: none; }
.ds-row summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--neel); border-bottom: 2px solid var(--neel); transform: translateY(-70%) rotate(45deg); transition: transform .18s ease; }
.ds-row[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ds-row .ds-name { font: 600 var(--step-1)/1.3 var(--display); color: var(--h); }
.ds-row .ds-brief { font-size: var(--step--1); color: var(--muted); text-align: right; }
.ds-row .status { grid-column: 1; }
.ds-body { display: grid; gap: 14px; padding: 0 18px 18px; }
.ds-body .ds-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 600px) { .ds-row summary { grid-template-columns: minmax(0, 1fr); } .ds-row .ds-brief { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .ds-row summary::after { transition: none; } }

/* Blog grid: a short last row fills the width instead of leaving a gap (three-column layout only) */
@media (min-width: 961px) {
  .bgrid > .bcard:last-child:nth-child(3n+2) { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .bgrid > .bcard:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: none; }
  .bgrid > .bcard:last-child:nth-child(3n+2) .bthumb, .bgrid > .bcard:last-child:nth-child(3n+1) .bthumb { aspect-ratio: auto; min-height: 100%; }
  .bgrid > .bcard:last-child:nth-child(3n+2) .bbody, .bgrid > .bcard:last-child:nth-child(3n+1) .bbody { align-content: center; padding: 28px; }
}


/* builder cards: the link sits on the bottom edge of every card in a row */
.bcard.builder .bbody { display: flex; flex-direction: column; }
.bcard.builder .more { margin-top: auto; padding-top: 6px; }
/* values: heading, text and "Where it came from" line up across each row */
@supports (grid-template-rows: subgrid) {
  .values .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: stretch; }
  .values .origin { margin-top: 0; align-self: end; }
  .values .card > p:not(.origin) { align-self: start; }
}
/* pull quotes: sized to the quote, centred, instead of a full-width card with empty space */
.pull { max-width: 820px; margin-inline: auto; }
.quotes .pull { margin: 0; max-width: none; align-content: space-between; }
/* the closing call to action sits one section-gap below the content, not two */
.section.closing-sec { padding-top: 0; }
.section.band + .section.closing-sec, .pb + .section.closing-sec, .section.demo-band + .section.closing-sec, .section.watch-band + .section.closing-sec { padding-top: clamp(32px, 5vw, 56px); }
/* press list: the release tag always sits on its own line above the outlet */
.presslist .pmeta { flex-direction: column; align-items: flex-start; gap: 4px; }
.presslist .pmeta .ptag { order: -1; }
/* top menu: the section you are in */
.nav button.here { color: var(--neel); font-weight: 600; text-decoration: underline; text-decoration-color: var(--kesar); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* back to top: appears on long pages once you have scrolled a few screens */
.to-top { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--neel); font: 600 var(--step--1)/1 var(--body); box-shadow: 0 8px 24px -12px rgba(5,83,156,.45); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
/* 404: popular pages */
.nf-h { font-size: var(--step-2); margin-bottom: 14px; }
.nf-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nf-links a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); text-decoration: none; }
.nf-links b { color: var(--h); }
.nf-links span { font-size: var(--step--1); color: var(--muted); }
.nf-links a:hover b { text-decoration: underline; }
@media (max-width: 760px) { .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .nf-links { grid-template-columns: minmax(0, 1fr); } }
.ex-zoom { font-size: var(--step--1); font-weight: 600; color: var(--neel); width: fit-content; }
.ex-doc a { display: block; cursor: zoom-in; }
.researchers > .res-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* research papers: one collapsible card per year, like News & media */
.papers { display: grid; gap: 14px; }
.paper-year .paper-list { margin: 0 26px 8px; }
.paper-year .paper:first-child { border-top: 1px solid var(--line); }
@media (max-width: 640px) { .paper-year .paper-list { margin: 0 18px 4px; } }

/* Demo folds: real model outputs sit on a tan band so they stand out while scrolling.
   The band is calm and warm; the white demo cards carry the outputs. */
.section.demo-band { position: relative; overflow: hidden; color: var(--ink); border: 0;
  --muted: #4E3A2C; --line: rgba(94,65,45,.22);
  background: var(--tan); }
.demo-band .section-head h2, .demo-band .section-head h2 .k, .demo-band .section-head h2 .n { color: var(--h); }
.demo-band .section-head p { color: var(--muted); }
.demo-band a { color: var(--tan-ink); }
.demo-band .ex, .demo-band .voice, .demo-band .ex-doc { --ink: #1D2530; --muted: #56606D; --line: #E3E6EA; color: var(--ink); }
.demo-band .ex a, .demo-band .voice a { color: var(--neel); }
.demo-band .tablist button { background: rgba(255,255,255,.45); color: var(--h); border-color: rgba(94,65,45,.28); }
.demo-band .tablist button small { color: var(--brown); }
.demo-band .tablist button:hover { border-color: var(--tan-ink); }
.demo-band .tablist button[aria-selected="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--neel); box-shadow: 0 8px 20px -14px rgba(60,40,25,.5); }
.demo-band .tablist button[aria-selected="true"] small { color: #56606D; }
.demo-band .tabpanel:focus-visible { outline-color: var(--neel); }
.section.demo-band.demo-cont { padding-top: 0; }
.demo-band .ex-src a { color: var(--tan-ink); }
.demo-band .ex .ex-src a { color: var(--neel); }

/* no strip of page ground between a demo band at the end of a page and the footer */
main:has(> .demo-band:last-child) + .site-foot { margin-top: 0; }

/* Team preview of the launch (interim only): a strip on top of every page, and dashed outlines on launch-day blocks */
.pv15 { background: #2B1600; color: #FFE7C7; font-size: var(--step--1); padding: 10px 0 calc(10px); }
.pv15 b { color: #FFFFFF; }
.pv15 a { color: #FFC27A; font-weight: 600; }
.preview15 .new15 { position: relative; outline: 2px dashed var(--kesar); outline-offset: 4px; border-radius: var(--radius); }
.preview15 .new15::after { content: "New on 16 Nov"; position: absolute; top: -11px; right: 14px; z-index: 6; background: var(--kesar); color: #2B1600; font: 700 11px/1 var(--body); padding: 5px 9px; border-radius: 999px; pointer-events: none; }
.preview15 .launchbar.new15 { outline-offset: -4px; border-radius: 0; }
.preview15 .launchbar.new15::after { top: 50%; transform: translateY(-50%); }

.demo-band .pill.light { color: var(--tan-ink); }

/* earlier models: one compact row each, below the newest model */
.earlier { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.earlier li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 16px 20px; }
.earlier li + li { border-top: 1px solid var(--line); }
.earlier time { font-size: var(--step--1); color: var(--muted); }
.earlier div { display: grid; gap: 2px; }
.earlier b { font-family: var(--display); font-weight: 600; font-size: var(--step-1); color: var(--h); }
.earlier span { color: var(--muted); font-size: var(--step-0); }
.earlier .links { display: flex; margin: 0; flex-wrap: wrap; }
@media (max-width: 700px) { .earlier li { grid-template-columns: 1fr; } }

/* facts still to come: visible in the team preview, blocked from the launch deploy */
.tbc { display: inline-block; border: 1.5px dashed var(--kesar); border-radius: 6px; padding: 1px 8px; color: var(--kesar-ink); background: #FFF7EC; font-size: var(--step--1); }
.tbc-block { border: 2px dashed var(--kesar); border-radius: var(--radius); background: #FFF7EC; padding: 22px 24px; display: grid; gap: 8px; }
.tbc-block h3 { color: var(--h); }
.tbc-block p { color: var(--ink); max-width: 62ch; }
.tbc-tag { justify-self: start; background: var(--kesar); color: #2B1600; font: 700 var(--step--1)/1 var(--body); padding: 5px 10px; border-radius: 999px; }
pre.code[data-tbc] { border: 2px dashed var(--kesar); }

/* ---------- Task explorer (Vision page, from launch) ---------- */
.px { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.px-tabs { display: grid; gap: 8px; }
.px-tab { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 13px 15px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; }
.px-tab .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--sky-soft); color: var(--neel); display: grid; place-items: center; transition: background .3s, color .3s, transform .4s cubic-bezier(.3,1.6,.5,1); }
.px-tab .ic svg { width: 20px; height: 20px; }
.px-t { display: grid; gap: 1px; min-width: 0; }
.px-t small { font-size: var(--step--1); color: var(--muted); }
.px-t b { font: 600 var(--step-1)/1.2 var(--display); color: var(--h); }
.px-t > span { font-size: var(--step--1); color: var(--muted); line-height: 1.35; }
.px-tab:hover { transform: translateX(3px); border-color: #BFD3E8; }
.px-tab[aria-selected="true"] { border-color: var(--neel); box-shadow: 0 14px 34px -22px rgba(5,83,156,.55); }
.px-tab[aria-selected="true"] .ic { background: var(--neel); color: var(--white); transform: rotate(-8deg) scale(1.06); }
.px-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--kesar); }
.px-tab.holding .px-prog { width: 100%; transition: width var(--hold, 3800ms) linear; }
.px-stage { background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 18px; display: grid; gap: 14px; box-shadow: 0 28px 60px -42px rgba(5,83,156,.5); min-width: 0; }
.px-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.px-title { display: grid; gap: 2px; min-width: 0; }
.px-title b { font: 600 var(--step-1)/1.2 var(--display); color: var(--h); }
.px-title em { font-style: normal; font-size: var(--step--1); color: var(--muted); }
.px-replay { flex: none; font: 600 var(--step--1)/1 var(--body); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--neel); cursor: pointer; transition: background .2s, color .2s; }
.px-replay:hover { background: var(--neel); color: var(--white); border-color: var(--neel); }
.px-body { --px-h: 440px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.px-media { height: var(--px-h); background: var(--sky-soft); border-radius: var(--radius-sm); display: grid; place-items: center; padding: 12px; overflow: hidden; }
.px-page { position: relative; aspect-ratio: var(--r); width: min(100%, calc((var(--px-h) - 24px) * var(--r))); background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 14px 32px -18px rgba(5,83,156,.55); }
.px-page img, .px-page video { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-media.in .px-page { animation: px-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes px-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.px-mark { position: absolute; border: 2px solid var(--kesar); background: rgba(245,146,34,.14); border-radius: 3px; animation: px-mark .5s cubic-bezier(.2,.7,.2,1) both; }
.px-mark.live { animation: px-mark .5s cubic-bezier(.2,.7,.2,1) both, px-pulse 1.6s ease-in-out .5s infinite; }
@keyframes px-mark { from { opacity: 0; transform: scale(1.18); } }
@keyframes px-pulse { 50% { box-shadow: 0 0 0 6px rgba(245,146,34,.2); } }
.px-chat { display: flex; flex-direction: column; gap: 10px; height: var(--px-h); min-width: 0; }
.px-q:empty { display: none; }
.px-q p { margin: 0 0 0 auto; max-width: 92%; width: fit-content; background: var(--neel); color: var(--white); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: var(--step-0); line-height: 1.45; animation: px-pop .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes px-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.px-a { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; background: var(--sky-soft); border-radius: 4px 14px 14px 14px; padding: 12px 14px; }
.px-who { display: inline-flex; gap: 6px; align-items: center; font: 600 var(--step--1)/1 var(--body); color: var(--neel); }
.px-who .ic svg { width: 15px; height: 15px; }
.px-out { flex: 1; min-height: 0; overflow: auto; color: var(--ink); font-size: var(--step-0); }
.px-out p { margin: 0; line-height: 1.6; }
.px-out pre { margin: 0; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.px-out .md { font-size: var(--step--1); line-height: 1.55; }
.px-out .md h2, .px-out .md h3, .px-out .md h4 { font: 600 var(--step-0)/1.3 var(--display); color: var(--h); margin: .6em 0 .3em; }
.px-out .md p, .px-out .md ul, .px-out .md ol { margin: 0 0 .5em; }
.px-out .md table { border-collapse: collapse; font-size: .92em; margin: .4em 0; }
.px-out .md th, .px-out .md td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; }
.px-out.writing > :last-child::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--kesar); animation: px-caret 1s steps(1) infinite; }
@keyframes px-caret { 50% { opacity: 0; } }
.px-out .j-key, .px-out .h-tag { color: var(--neel); }
.px-out .j-str { color: #1E6B45; }
.px-out .j-num { color: var(--kesar-ink); }
.px-out .j-lit { color: #6B3FA0; }
.px-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--muted); }
.px-status i { width: 8px; height: 8px; border-radius: 50%; background: #B8C2CE; }
.px-status[data-state="thinking"] i, .px-status[data-state="writing"] i { background: var(--kesar); animation: px-blink .9s ease-in-out infinite; }
.px-status[data-state="done"] i { background: #1E8A55; }
@keyframes px-blink { 50% { transform: scale(.55); opacity: .5; } }
.px-src.tbc { display: block; margin: 0; }
@media (max-width: 960px) {
  .px { grid-template-columns: minmax(0, 1fr); }
  .px-tabs { grid-auto-flow: column; grid-auto-columns: minmax(210px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .px-tab { scroll-snap-align: start; }
  .px-tab:hover { transform: none; }
}
@media (max-width: 680px) {
  .px-body { --px-h: 300px; grid-template-columns: minmax(0, 1fr); }
  .px-chat { height: auto; }
  .px-out { max-height: 340px; }
  .px-stage { padding: 14px; }
}

/* ---------- Motion (only with html.mo, which site.js adds unless reduced motion is on) ---------- */
.mo .rv { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .75s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; transition-delay: var(--d, 0ms); }
.mo .rv.in { opacity: 1; transform: none; }
.mo a.card.rv.in:hover { transform: translateY(-3px); }
.mo .doc-fan.rv { transform: none; }
/* documents fan out from a stack, then drift gently */
.mo .doc-fan img { transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.mo .doc-fan.rv:not(.in) img { transform: translate(-50%, -50%) rotate(0deg) scale(.92); opacity: 0; }
.mo .doc-fan.rv img:nth-child(2) { transition-delay: .08s; }
.mo .doc-fan.rv img:nth-child(3) { transition-delay: .16s; }
.mo .doc-fan.in img { animation: drift 7s ease-in-out 1s infinite; }
.mo .doc-fan.in img:nth-child(2) { animation-delay: 1.8s; }
.mo .doc-fan.in img:nth-child(3) { animation-delay: 2.6s; }
@keyframes drift { 50% { translate: 0 -7px; } }
/* a document gets "read": a saffron line passes down the page once it arrives, and again on hover */
.doc-img, .ex-doc { position: relative; }
.mo .doc.in .doc-img::after, .mo .doc:hover .doc-img::after { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 18%; pointer-events: none;
  background: linear-gradient(180deg, rgba(245,146,34,0) 0%, rgba(245,146,34,.22) 85%, rgba(245,146,34,.9) 100%); border-radius: 2px;
  animation: read 1.8s cubic-bezier(.45,0,.25,1) calc(var(--d, 0ms) + .35s) both; }
.mo .doc:hover .doc-img::after { animation-delay: 0s; }
@keyframes read { 0% { transform: translateY(-20%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(470%); opacity: 0; } }
/* the name in Devanagari writes itself, left to right */
.mo .name-note.rv .dev { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.6,0,.2,1) .25s; }
.mo .name-note.in .dev { clip-path: inset(0 0 0 0); }
/* timeline dots pop in as their line arrives */
.mo .timeline li.rv::before { transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d, 0ms) + .2s); }
.mo .timeline li.in::before { transform: none; }
/* demo answers arrive line by line; transcripts type out with a caret */
.mo .rv-out:not(.play) > *:not(.ex-lbl), .mo .rv-out:not(.play) .steps li { opacity: 0; }
.mo .rv-out.play > *:not(.ex-lbl), .mo .rv-out.play .steps li { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 150ms); }
.ex-transcript.typing::after { content: ""; display: inline-block; width: .45em; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--kesar); animation: px-caret 1s steps(1) infinite; }
/* the hero photo is uncovered from the top */
.mo .hero-photo img, .mo .bn-photo img { animation: uncover 1.1s cubic-bezier(.6,0,.2,1) .25s both; }
@keyframes uncover { from { clip-path: inset(0 0 100% 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
/* a tab's panel slides in when chosen */
.mo .tabpanel:not([hidden]) { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
/* small responses to the pointer */
.card .ic svg, .why-card .ic svg { transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.card:hover .ic svg { transform: rotate(-10deg) scale(1.1); }
.btn .arr { display: inline-block; transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }
.voice.playing .vplay { animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(245,146,34,.45); } 100% { box-shadow: 0 0 0 14px rgba(245,146,34,0); } }
/* the "New" tag on the launch strip catches the light now and then */
.launchbar .tag { position: relative; overflow: hidden; }
.mo .launchbar .tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: glint 4.5s ease-in-out 1.2s infinite; }
@keyframes glint { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }


/* ---------- Text page: language swarm and experts ---------- */
.ls-card { grid-column: 1 / -1; }
.lswarm { position: relative; min-height: 300px; margin-top: 6px; }
.lswarm canvas { position: absolute; inset: 0; }
.ls-label { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; white-space: nowrap; opacity: 0; transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.ls-label b { font: 600 var(--step-0)/1.2 var(--body), "BG Scripts", sans-serif; color: var(--ink); }
.ls-label small { font-size: 11px; color: var(--muted); }
.lswarm[data-phase="sort"] .ls-label { opacity: 1; transition-delay: .6s; }
.ls-one { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); font: 700 var(--step-3)/1 var(--display); color: var(--neel); background: rgba(255,255,255,.88); padding: 6px 14px; border-radius: 999px; opacity: 0; transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.lswarm[data-phase="mix"] .ls-one { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 1.4s; }
.ls-list { font-size: var(--step--1); color: var(--muted); margin-top: 8px; }
.moe { display: grid; gap: 14px; margin: 6px 0 4px; }
.moe-tokens { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--step-0); }
.moe-tok { padding: 3px 8px; border-radius: 6px; background: var(--sky-soft); color: var(--muted); transition: background .3s, color .3s, transform .3s; }
.moe-tok.done { color: var(--ink); }
.moe-tok.now { background: var(--kesar); color: #2B1600; transform: translateY(-2px); }
.moe-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 5px; }
.moe-grid i { aspect-ratio: 1; border-radius: 4px; background: #E3ECF6; transition: background .45s ease, transform .45s ease, box-shadow .45s ease; }
.moe-grid i.on { background: var(--kesar); transform: scale(1.08); box-shadow: 0 0 0 3px rgba(245,146,34,.18); }
@media (max-width: 520px) { .moe-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* ---------- Speech page: sound field and live voice bars ---------- */
.demo-band[data-wavefield] { position: relative; overflow: hidden; }
.demo-band[data-wavefield] > .wrap { position: relative; z-index: 1; }
.wavefield { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vwave { display: block; height: 34px; width: 100%; }
.voice.has-wave .vbar { display: none; }

/* ---------- Licence pages (licence/, licence/register/, licence/agreement/) ---------- */
.lic-facts .card b { font: 600 var(--step-2)/1.3 var(--display); color: var(--h); }
.lic-tiers { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .lic-tiers { grid-template-columns: 1fr; } }
.lic-tier { border-radius: calc(var(--radius) + 6px); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lic-tier.community { background: var(--neel); color: var(--white); }
.lic-tier.community h3 { color: var(--white); }
.lic-tier.community .for, .lic-tier.community .lbl, .lic-tier.community .price span { color: #CFE2F5; }
.lic-tier.enterprise { background: var(--white); border: 1px solid var(--line); }
.lic-tier.enterprise .for, .lic-tier.enterprise .lbl, .lic-tier.enterprise .price span { color: var(--muted); }
.lic-tier h3 { font-size: var(--step-4); }
.lic-tier .lbl { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.lic-tier hr { border: 0; border-top: 1px solid currentColor; opacity: .18; margin: 0; width: 100%; }
.lic-tier ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lic-tier li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--step-0); }
.lic-tier li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--kesar); margin-top: .55em; }
.lic-tier .price { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lic-tier .price b { display: block; font: 600 var(--step-5)/1 var(--display); }
.lic-tier.community .price b { color: var(--white); }
.lic-tier.enterprise .price b { color: var(--h); }
.lic-tier .price span { display: block; font-size: var(--step--1); margin-top: 6px; }
.lic-tier.community .btn { background: var(--kesar); border-color: var(--kesar); color: #2B1600; }
.lic-tier.community .btn:hover { background: #FFAA4A; border-color: #FFAA4A; color: #2B1600; }
.lic-tier.community .tbc { background: rgba(255,255,255,0.12); color: #FFE0B8; }
.lic-models tr.grp td { background: var(--sky-soft); font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-block: 9px; }
.lic-models td:last-child { white-space: nowrap; }
.lic-tag { display: inline-block; font: 600 var(--step--1)/1 var(--body); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.lic-tag.community { background: var(--sky); color: var(--neel); }
.lic-tag.open { background: #E3F3EA; color: #1E6B44; }
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 var(--step-2)/1.35 var(--display); color: var(--neel); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--body); color: var(--muted); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 20px; color: var(--ink); max-width: 68ch; display: grid; gap: 10px; }
/* register */
.lic-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 4vw, 40px); align-items: start; }
@media (max-width: 900px) { .lic-grid { grid-template-columns: 1fr; } }
.lic-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 30px; min-width: 0; }
.lic-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.lic-form legend { font: 600 var(--step-3)/1.2 var(--display); color: var(--neel); padding: 0; margin-bottom: 4px; }
.lic-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .lic-row { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > label, .fld > .q { font: 600 var(--step-0)/1.4 var(--body); color: var(--ink); }
.fld .hint { font-size: var(--step--1); color: var(--muted); }
.req { color: var(--kesar-ink); }
.lic-form input[type=text], .lic-form input[type=email], .lic-form input[type=url], .lic-form select, .lic-form textarea {
  font: 400 var(--step-0)/1.4 var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100%; }
.lic-form textarea { min-height: 96px; resize: vertical; }
.lic-form input:focus, .lic-form select:focus, .lic-form textarea:focus { outline: 2px solid var(--neel); outline-offset: 0; border-color: transparent; }
.choices { display: grid; gap: 8px; }
.choices.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .choices.cols { grid-template-columns: 1fr; } }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; cursor: pointer; background: var(--ground); font-size: var(--step-0); min-width: 0; }
.choice:has(input:checked) { border-color: var(--neel); background: #EEF5FC; }
.choice input, .check input { margin-top: 4px; accent-color: var(--neel); flex: none; }
.choice small { display: block; color: var(--muted); font-size: var(--step--1); }
.check { display: flex; gap: 10px; align-items: flex-start; font: 400 var(--step-0)/1.5 var(--body); }
.fld.invalid input, .fld.invalid select, .fld.invalid textarea, .fld.invalid .choice { border-color: #B42318; }
.fld .err { color: #B42318; font-size: var(--step--1); }
.covered { background: #E3F3EA; border-radius: var(--radius-sm); padding: 18px 20px; display: grid; gap: 10px; }
.covered h3 { color: #1E6B44; font-size: var(--step-2); }
.dp-notice { background: var(--sky-soft); border-radius: var(--radius-sm); padding: 16px 18px; font-size: var(--step--1); color: var(--ink); display: grid; gap: 8px; }
.dp-notice ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.lic-submit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.lic-submit .msg { color: #B42318; font-size: var(--step-0); }
.lic-route { position: sticky; top: 110px; display: grid; gap: 14px; }
@media (max-width: 900px) { .lic-route { position: static; } }
.route-card { border-radius: var(--radius-sm); padding: 20px; display: grid; gap: 8px; border: 1px solid var(--line); background: var(--white); }
.route-card .eyebrow { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.route-card .t { font: 600 var(--step-3)/1.2 var(--display); color: var(--neel); }
.route-card p { font-size: var(--step-0); color: var(--muted); }
.route-card.community { background: var(--neel); border-color: var(--neel); }
.route-card.community .t { color: var(--white); }
.route-card.community .eyebrow, .route-card.community p { color: #CFE2F5; }
.route-card.enterprise { border-color: var(--kesar); }
.lic-done { display: grid; gap: 26px; max-width: 820px; }
.lic-id { background: var(--neel); color: var(--white); border-radius: var(--radius); padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lic-id .eyebrow { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: #CFE2F5; }
.lic-id .id { font: 600 1.6rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.lic-id.ent { background: var(--white); color: var(--ink); border: 1.5px solid var(--kesar); }
.lic-id.ent .eyebrow { color: var(--muted); }
.lic-id .btn { background: var(--kesar); border-color: var(--kesar); color: #2B1600; }
.lic-id.ent .btn { background: var(--white); border-color: var(--line); color: var(--neel); }
.copybox { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.copybox code { font: 500 var(--step--1)/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; flex: 1 1 260px; min-width: 0; }
/* agreement */
.legal-doc { max-width: 760px; display: grid; gap: 14px; }
.legal-doc .summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 22px; display: grid; gap: 8px; }
.legal-doc .summary ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.legal-doc h2 { font-size: var(--step-3); margin-top: 26px; scroll-margin-top: 110px; }
.legal-doc h2 .n { color: var(--label); margin-right: 8px; }
.legal-doc ol.clauses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legal-doc ol.clauses > li { padding-left: 44px; position: relative; }
.legal-doc ol.clauses > li::before { content: attr(data-n); position: absolute; left: 0; top: 0; font: 600 var(--step-0)/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--muted); }
.legal-doc dl { margin: 0; display: grid; gap: 12px; }
.legal-doc dt { font-weight: 600; color: var(--neel); }
.legal-doc dd { margin: 2px 0 0; }
.legal-doc .notice { font: 500 var(--step-0)/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--sky-soft); border-radius: 10px; padding: 14px 16px; }
.legal-doc .toc { columns: 2; column-gap: 28px; padding-left: 22px; margin: 6px 0 0; }
@media (max-width: 600px) { .legal-doc .toc { columns: 1; } }
/* ---------- Model family pictures (home, all models) ---------- */
.ic.fam { width: 64px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; gap: 3px; position: relative; overflow: hidden; }
.fam-text { flex-direction: column; align-items: flex-start !important; padding: 0 12px; gap: 5px !important; }
.fam-text .tk { display: block; height: 5px; border-radius: 3px; background: var(--neel); width: 0; animation: tk 3.6s ease-in-out infinite; }
.fam-text .tk:nth-child(1) { --w: 38px; }
.fam-text .tk:nth-child(2) { --w: 28px; animation-delay: .5s; }
.fam-text .tk:nth-child(3) { --w: 18px; animation-delay: 1s; background: var(--kesar); }
.fam-text .caret { position: absolute; right: 12px; bottom: 10px; width: 2px; height: 10px; background: var(--kesar); animation: px-caret 1s steps(1) infinite; }
@keyframes tk { 0% { width: 0; } 30%, 80% { width: var(--w); } 100% { width: 0; } }
.fam-stt .eq { display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--peach-ink, #A04F00); animation: eq 1.1s ease-in-out infinite; }
.fam-stt .eq:nth-child(2n) { animation-delay: .15s; background: var(--kesar); }
.fam-stt .eq:nth-child(3n) { animation-delay: .3s; }
.fam-stt .eq:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.fam-vision .pg { position: relative; width: 26px; height: 32px; background: #fff; border-radius: 3px; box-shadow: 0 2px 6px rgba(5,83,156,.25); display: grid; align-content: start; gap: 3px; padding: 5px 4px; overflow: hidden; }
.fam-vision .pg i { display: block; height: 2px; background: #B7CBE2; border-radius: 1px; }
.fam-vision .pg i:nth-child(2) { width: 70%; }
.fam-vision .pg i:nth-child(4) { width: 55%; }
.fam-vision .scan { position: absolute; left: 0; right: 0; height: 4px; top: 0; background: var(--kesar); box-shadow: 0 0 8px rgba(245,146,34,.8); animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(28px); } }
.fam-tts { justify-content: flex-start !important; padding-left: 14px; }
.fam-tts .spk { width: 10px; height: 12px; background: var(--peach-ink, #A04F00); clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%); }
.fam-tts .arc { position: absolute; left: 22px; top: 50%; width: 12px; height: 12px; border: 2px solid var(--kesar); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: translateY(-50%) rotate(45deg); opacity: 0; animation: arc 1.8s ease-out infinite; }
.fam-tts .arc:nth-of-type(2) { animation-delay: .3s; }
.fam-tts .arc:nth-of-type(3) { animation-delay: .6s; }
@keyframes arc { 0% { opacity: 0; width: 8px; height: 8px; } 30% { opacity: 1; } 100% { opacity: 0; width: 34px; height: 34px; left: 16px; } }
/* ---------- Home: languages ribbon ---------- */
.script-ribbon { overflow: hidden; padding: 14px 0; border-block: 1px solid var(--line); background: var(--white); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sr-track { display: flex; width: max-content; animation: ribbon 70s linear infinite; }
.sr-track > div { display: flex; gap: 40px; padding-right: 40px; }
.sr-track span { font: 600 var(--step-2)/1.2 var(--body), "BG Scripts", sans-serif; color: #9AAFC6; white-space: nowrap; transition: color .3s; }
.sr-track span:nth-child(5n+1) { color: var(--neel); }
.sr-track span:nth-child(7n+3) { color: var(--kesar); }
.script-ribbon:hover .sr-track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translateX(-50%); } }
/* ---------- All models: release track ---------- */
.rtrack { list-style: none; margin: 0; padding: 26px 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 14px; position: relative; overflow-x: auto; }
.rtrack::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: var(--line); }
.rtrack::after { content: ""; position: absolute; left: 0; top: 33px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--neel), var(--kesar)); transform-origin: left; transform: scaleX(var(--drawn, 1)); transition: transform 2.2s cubic-bezier(.6,0,.2,1); }
.mo .rtrack:not(.in)::after { --drawn: 0; }
.rtrack li { position: relative; display: grid; gap: 4px; padding-top: 22px; align-content: start; }
.rtrack li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--neel); z-index: 1; transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--k, 0) * 280ms + .3s); }
.mo .rtrack:not(.in) li::before { transform: scale(0); }
.rtrack li:last-child::before { border-color: var(--kesar); }
.rtrack time { font-size: var(--step--1); color: var(--muted); }
.rtrack b { font: 600 var(--step-0)/1.3 var(--display); color: var(--h); }
.rtrack span { font-size: var(--step--1); color: var(--label); }
/* ---------- All models: steps joined by a running line ---------- */
.steps-flow { position: relative; gap: 14px; padding-left: 40px; }
.steps-flow::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, #BFD3E8 0 6px, transparent 6px 12px); }
.steps-flow::after { content: ""; position: absolute; left: 10px; top: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--kesar); box-shadow: 0 0 0 4px rgba(245,146,34,.2); animation: flowdot 4.5s ease-in-out infinite; }
@keyframes flowdot { 0% { top: 30px; } 45%, 55% { top: calc(100% - 40px); } 100% { top: 30px; } }
.steps-flow .card { position: relative; z-index: 1; }
/* ---------- About: build pipeline ---------- */
.pipeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; position: relative; }
.pipeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22px; height: 2px; background: var(--line); }
.pipeline::after { content: ""; position: absolute; left: 10%; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--kesar); box-shadow: 0 0 0 5px rgba(245,146,34,.18); animation: pipe 10s linear infinite; }
@keyframes pipe { from { left: 10%; } to { left: 90%; } }
.pipeline li { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; }
.pipeline .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); display: grid; place-items: center; color: var(--neel); animation: pipe-node 10s linear infinite; animation-delay: calc(var(--i) * 2s); }
.pipeline .ic svg { width: 20px; height: 20px; }
@keyframes pipe-node { 0%, 18% { border-color: var(--kesar); background: #FFF3E4; color: var(--kesar-ink); transform: scale(1.08); } 22%, 100% { border-color: var(--line); background: var(--white); color: var(--neel); transform: none; } }
.pipeline b { font: 600 var(--step-0)/1.25 var(--display); color: var(--h); }
.pipeline span { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }
@media (max-width: 700px) {
  .pipeline { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pipeline::before { left: 21px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .pipeline::after { display: none; }
  .pipeline li { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; }
  .pipeline li .ic { grid-row: span 2; }
}
/* ---------- Leadership: bios open on request ---------- */
.people { align-items: flex-start; }
.person .face { transition: transform .4s cubic-bezier(.3,1.6,.5,1), box-shadow .4s ease; }
.person:hover .face { transform: rotate(-4deg) scale(1.05); box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--kesar); }
.bios .person .bio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.bios .person .bio > p { overflow: hidden; }
.bios .person.open .bio { grid-template-rows: 1fr; }
.bio-btn { display: none; }
.bios .bio-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font: 600 var(--step--1)/1 var(--body); color: var(--neel); background: var(--sky-soft); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.bios .bio-btn::after { content: "+"; font-size: 1.1em; transition: transform .3s; }
.bios .person.open .bio-btn::after { transform: rotate(45deg); }
/* ---------- Ecosystem: consortium constellation ---------- */
.constellation { margin: 8px auto 28px; max-width: 780px; }
.constellation svg { width: 100%; height: auto; overflow: visible; }
.cl-line { fill: none; stroke: #9FC0E3; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--i) * 120ms); }
.mo .constellation.rv:not(.in) .cl-line { stroke-dashoffset: 1; }
.cl-pulse { fill: var(--kesar); }
.cl-dot { fill: var(--neel); }
.cl-ring { fill: none; stroke: var(--neel); stroke-opacity: .35; transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.cl-hub .cl-dot { fill: var(--kesar); }
.cl-hub .cl-ring { stroke: var(--kesar); }
@keyframes ring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.cl-label { font: 600 15px var(--body); fill: var(--ink); }
.cl-label.hub { font: 700 17px var(--display); fill: var(--neel); }
.cl-sub { font: 600 12px var(--body); fill: var(--kesar-ink); }
.cl-node, .cl-label { transition: opacity .5s ease; transition-delay: calc(var(--i) * 120ms + .6s); }
.mo .constellation.rv:not(.in) .cl-node, .mo .constellation.rv:not(.in) .cl-label { opacity: 0; }
/* ---------- Careers: value cards that turn over ---------- */
.vcard { perspective: 1200px; padding: 0 !important; background: transparent !important; border: 0 !important; }
.vflip { display: grid; height: 100%; }
.vf { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; }
.vf-back { background: var(--sky-soft); }
.vf-back .eyebrow { color: var(--label); }
.vf-btn { display: none; }
.flips .vflip { transition: transform .7s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.flips .vf { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flips .vf-back { transform: rotateY(180deg); }
.flips .vcard.flipped .vflip { transform: rotateY(180deg); }
.flips .vf-btn { display: inline-flex; align-items: center; gap: 8px; justify-self: start; align-self: end; margin-top: 4px; font: 600 var(--step--1)/1 var(--body); color: var(--neel); background: var(--sky-soft); border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer; }
.flips .vf-back .vf-btn { background: var(--white); }
.flips .vf-btn::before { content: "↻"; font-size: 1.15em; transition: transform .5s; }
.flips .vf-btn:hover::before { transform: rotate(180deg); }
.flips .vf-front { grid-template-rows: auto 1fr auto; }
/* ---------- Tapestry: federated training ---------- */
.fed { margin: 6px 0 22px; background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 12px 12px 6px; }
.fed svg { width: 100%; height: auto; display: block; }
.fd-link { stroke: #CFDDEC; stroke-width: 2; stroke-dasharray: 5 6; }
.fd-halo { fill: rgba(5,83,156,.08); transform-box: fill-box; transform-origin: center; }
.fd-core { fill: var(--neel); }
.fd-core-t { font: 700 15px var(--display); fill: #fff; }
.fd-core-v { font: 600 13px var(--body); fill: var(--neel); }
.fd-node rect { fill: var(--sky-soft); stroke: var(--line); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.fd-node.us rect { fill: #FFF3E4; stroke: #F7C08A; }
.fd-name { font: 700 14px var(--display); fill: var(--neel); }
.fd-small { font: 500 11px var(--body); fill: var(--muted); }
.fd-data { fill: #9FB6CF; transition: fill .4s; }
.fd-node.us .fd-data { fill: #F2B36D; }
.fd-model { fill: #fff; stroke: var(--neel); stroke-width: 2; opacity: 0; transition: opacity .4s, fill .4s; transform-box: fill-box; transform-origin: center; }
.fd-ver { font: 700 10px var(--body); fill: var(--neel); }
.fed[data-phase="2"] .fd-model, .fed[data-phase="3"] .fd-model, .fed[data-phase="4"] .fd-model { opacity: 1; }
.fed[data-phase="2"] .fd-model { animation: fd-spin 1s linear infinite; stroke-dasharray: 20 6; }
.fed[data-phase="2"] .fd-data { animation: fd-jit .6s ease-in-out infinite alternate; }
.fed[data-phase="4"] .fd-model { fill: var(--kesar); stroke: var(--kesar-ink); }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@keyframes fd-jit { to { transform: translateY(-2px); } }
.fed[data-phase="3"] .fd-halo { animation: fd-merge 1.2s ease-out infinite; }
@keyframes fd-merge { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.fd-pk { fill: var(--neel); }
.fd-pk.up { fill: var(--kesar); }
.fd-cap { text-align: center; font: 600 var(--step-0)/1.4 var(--body); color: var(--neel); min-height: 1.4em; padding: 2px 0 6px; }
.fed-steps .card { transition: border-color .35s, box-shadow .35s, transform .35s; }
.fed-steps .card.now { border-color: var(--kesar); box-shadow: 0 14px 30px -20px rgba(245,146,34,.7); transform: translateY(-3px); }
/* ---------- Tapestry: Milestone Zero link ---------- */
.m0 { margin: 4px 0 22px; }
.m0 svg { width: 100%; height: auto; display: block; }
.m0-node > circle:first-child { fill: var(--sky); stroke: var(--neel); stroke-width: 2; }
.m0-t { font: 700 18px var(--display); fill: var(--neel); }
.m0-s { font: 600 13px var(--body); fill: var(--kesar-ink); }
.m0-spin { fill: none; stroke: var(--kesar); stroke-width: 3; stroke-dasharray: 30 380; transform-box: fill-box; transform-origin: center; animation: fd-spin 2.4s linear infinite; }
.m0-link { stroke: var(--neel); stroke-width: 3; stroke-linecap: round; transition: stroke .3s, opacity .3s; }
.m0.down .m0-link { stroke: #C9D3DE; stroke-dasharray: 8 10; }
.m0-state { font: 600 14px var(--body); fill: var(--neel); }
.m0.down .m0-state { fill: var(--kesar-ink); }
.m0-pk { fill: var(--kesar); }
@media (prefers-reduced-motion: reduce) { .cl-pulse { display: none; } .sr-track { animation: none; } }
/* the Tapestry drawings: wide on larger screens, tall on phones */
.fd-tall, .m0-tall { display: none !important; }
@media (max-width: 640px) {
  .fd-wide, .m0-wide { display: none !important; }
  .fd-tall, .m0-tall { display: block !important; }
  .m0 { max-width: 340px; margin-inline: auto; }
  .cl-label { font-size: 26px; }
  .cl-label.hub { font-size: 28px; }
  .cl-sub { font-size: 20px; }
}

/* ---------- Careers ---------- */
.come { font: 600 var(--step-2)/1.3 var(--display); color: var(--ink); margin: 0; min-height: 2.6em; }
.come-w { color: var(--neel); background: linear-gradient(transparent 70%, rgba(245,146,34,.35) 70%); }
.come-w::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 3px; vertical-align: -2px; background: var(--kesar); animation: px-caret 1s steps(1) infinite; }
.life { overflow: hidden; padding: 6px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.life-track { display: flex; width: max-content; animation: ribbon 60s linear infinite; }
.life:hover .life-track { animation-play-state: paused; }
.life-track > div { display: flex; gap: 16px; padding-right: 16px; }
.life figure { margin: 0; position: relative; width: clamp(220px, 26vw, 340px); aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; flex: none; }
.life figure:nth-child(even) { transform: rotate(1.2deg) translateY(6px); }
.life figure:nth-child(odd) { transform: rotate(-1deg); }
.life img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.life figure:hover img { transform: scale(1.06); }
.life figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(255,255,255,.92); color: var(--ink); font-size: var(--step--1); padding: 6px 10px; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.life figure:hover figcaption { opacity: 1; transform: none; }
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: clamp(18px, 3vw, 32px); }
.team-copy { display: grid; gap: 10px; }
.team-copy .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--sky-soft); color: var(--neel); display: grid; place-items: center; }
.team-copy h3 { font-size: var(--step-3); }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #FFF0DD; box-shadow: inset 0 0 0 2px var(--kesar); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 5px; height: 8px; border: solid var(--kesar-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.team-viz { min-height: 220px; border-radius: var(--radius); background: var(--sky-soft); display: grid; place-items: center; padding: 18px; overflow: hidden; position: relative; }
.tv-code { margin: 0; width: 100%; overflow-wrap: anywhere; box-sizing: border-box; background: #0F2742; color: #E6F0FA; border-radius: var(--radius-sm); padding: 18px; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; min-height: 150px; }
.tv-code.typing::after { content: ""; display: inline-block; width: 7px; height: 14px; background: var(--kesar); vertical-align: -2px; animation: px-caret 1s steps(1) infinite; }
.tv-hello { position: relative; height: 90px; width: 100%; display: grid; place-items: center; }
.tv-hello span { position: absolute; font: 700 clamp(28px, 4vw, 44px)/1 var(--body); color: var(--neel); opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.tv-hello span.on { opacity: 1; transform: none; }
.tv-tick { position: absolute; right: 10%; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--kesar); transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.tv-tick::after { content: ""; position: absolute; left: 12px; top: 7px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tv-hello.ok .tv-tick { transform: scale(1); }
.tv-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.tv-board > div { background: rgba(255,255,255,.7); border-radius: 10px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 150px; }
.tv-board b { font: 600 var(--step--1)/1 var(--body); color: var(--muted); }
.tv-board i { display: block; height: 34px; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(5,83,156,.12); }
.tv-move { position: absolute; top: 44px; left: 10px; width: calc((100% - 20px) / 3 - 20px); height: 34px; border-radius: 8px; background: var(--kesar); box-shadow: 0 8px 18px -8px rgba(245,146,34,.8); animation: board 6s ease-in-out infinite; }
@keyframes board { 0%, 12% { transform: translateX(0); } 38%, 50% { transform: translateX(calc(100% + 30px)); } 76%, 100% { transform: translateX(calc(200% + 60px)); } }
.tv-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; width: 100%; }
.tv-dots i { aspect-ratio: 1; border-radius: 50%; background: #D5E2F0; transition: background .3s, transform .3s; }
.tv-dots i.on { background: var(--neel); }
.tv-dots i.on:nth-child(7n) { background: var(--kesar); }
.tv-dots b { grid-column: 1 / -1; margin-top: 10px; font: 700 var(--step-2)/1.2 var(--display); color: var(--h); text-align: center; }
@media (max-width: 760px) { .team { grid-template-columns: minmax(0, 1fr); } }
/* value cards: a tint and an icon each */
.vcard .vf-front .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--white); color: var(--neel); }
.vcard.t-sky .vf-front { background: var(--sky); border-color: var(--sky); }
.vcard.t-peach .vf-front { background: var(--peach); border-color: var(--peach); }
.vcard.t-peach .vf-front .ic { color: var(--peach-ink); }
.vcard.t-tan .vf-front { background: var(--tan); border-color: var(--tan); }
.vcard.t-tan .vf-front .ic { color: var(--tan-ink); }
.vcard .vf-front .vf-btn { background: rgba(255,255,255,.75); }
.vcard:hover .vf-front .ic svg { transform: rotate(-10deg) scale(1.1); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
/* the CEO's line lights up word by word */
.big-quote p { font: 600 clamp(1.6rem, 3.4vw, 2.6rem)/1.25 var(--display); max-width: 26ch; }
.mo .big-quote .w { color: #B9C6D4; transition: color .4s ease; }
.mo .big-quote .w.lit { color: var(--ink); }
.mo .big-quote .w.lit.key { color: var(--label); }
.likes .card p { font-size: var(--step--1); }
@media (prefers-reduced-motion: reduce) { .life-track { animation: none; } }
@media (max-width: 520px) { .tv-code { font-size: 11.5px; padding: 14px; } .team-viz { padding: 12px; } }
/* careers: three candid photos as tilted prints that straighten under the pointer */
.prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); padding: 10px 6px 18px; }
.prints figure { margin: 0; background: #fff; padding: 10px 10px 12px; border-radius: 10px; box-shadow: 0 18px 40px -24px rgba(5,83,156,.55), 0 2px 6px rgba(5,83,156,.08); transition: transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .45s ease; display: grid; gap: 10px; }
.prints figure:nth-child(1) { transform: rotate(-2.2deg) translateY(8px); }
.prints figure:nth-child(2) { transform: rotate(1.4deg); }
.prints figure:nth-child(3) { transform: rotate(-1deg) translateY(12px); }
.prints figure:hover { transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: 0 28px 50px -24px rgba(5,83,156,.6); z-index: 1; }
.prints img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 6px; display: block; }
.prints figcaption { font: 600 var(--step--1)/1.3 var(--body); color: var(--ink); padding: 0 4px; }
@media (max-width: 760px) { .prints { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }
/* the prints drift past in a loop; they still straighten under the pointer */
.prints-run { padding: 18px 0 26px; }
.prints-run .prints { display: flex; gap: 26px; padding: 0 26px 0 0; grid-template-columns: none; max-width: none; margin: 0; }
.prints-run .prints figure { width: clamp(240px, 24vw, 330px); flex: none; }
.prints-run .prints figure:nth-child(4n+1) { transform: rotate(-2.2deg) translateY(8px); }
.prints-run .prints figure:nth-child(4n+2) { transform: rotate(1.4deg); }
.prints-run .prints figure:nth-child(4n+3) { transform: rotate(-1deg) translateY(12px); }
.prints-run .prints figure:nth-child(4n) { transform: rotate(2deg) translateY(4px); }
.prints-run .prints figure:hover { transform: rotate(0) translateY(-6px) scale(1.04); }
.prints-run .life-track { animation-duration: 75s; }
.prints-run .prints figure { aspect-ratio: auto; overflow: visible; position: relative; border-radius: 10px; }
.prints-run .prints figure img { transform: none !important; }
.prints-run .prints figcaption { position: static; opacity: 1; transform: none; background: none; padding: 0 4px; border-radius: 0; }
/* four photos: two by two */
.figs:has(> figure:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .figs:has(> figure:nth-child(4)) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pointer glow, card spotlight, grain and liquid glass ---------- */
/* cards catch the light where the pointer is */
.spot { background-image: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(5,83,156,.08), rgba(5,83,156,0) 70%); }
/* fine grain on the blue bands, the blue feature cards and the hero glow, so flat colour reads like print */
.section.demo-band { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .37  0 0 0 0 .25  0 0 0 0 .18  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), var(--tan); background-size: 180px 180px, auto; }
.feature:not(.alt) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }
.aura { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.2  0 0 0 0 0.35  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* liquid glass: the header, menus, back-to-top and the tab pills on blue bands */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 961px) {
    .site-head { background-color: rgba(255,255,255,.58); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
      border-bottom: 1px solid rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(5,83,156,.07), 0 12px 32px -24px rgba(5,83,156,.45);
      background-image: radial-gradient(520px circle at var(--mx, 50%) -60%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%); }
    .menu { background: rgba(255,255,255,.9); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
      border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 26px 54px -26px rgba(5,83,156,.55); }
  }
  .to-top { background: rgba(255,255,255,.62); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 28px -14px rgba(5,83,156,.5); }
  .demo-band .tablist button { background: rgba(255,255,255,.45); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -16px rgba(60,40,25,.45); }
  .demo-band .tablist button[aria-selected="true"] { background: #FFFFFF; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(60,40,25,.5); }
}

/* ---------- Stronger glass, a pointer-lit header edge, a glass footer ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 961px) {
    /* the header floats as a glass bar */
    .site-head { background: transparent !important; background-image: none !important; border-bottom: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px var(--gutter-r, 16px) 0 var(--gutter-l, 16px); pointer-events: none; }
    .site-head .wrap { pointer-events: auto; position: relative; border-radius: 22px; padding-inline: 20px;
      background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); backdrop-filter: blur(26px) saturate(1.9); -webkit-backdrop-filter: blur(26px) saturate(1.9);
      border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(5,83,156,.06), 0 18px 40px -22px rgba(5,83,156,.5), 0 2px 6px rgba(5,83,156,.06); }
    /* a saffron light along its lower edge, where the pointer is */
    .site-head .wrap::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; border-radius: 2px; pointer-events: none;
      background: radial-gradient(180px 100% at var(--mx, 50%) 50%, #F59222, rgba(245,146,34,0) 100%); opacity: var(--edge, 0); transition: opacity .4s ease; }
    .site-head .wrap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(260px 140% at var(--mx, 50%) 0%, rgba(5,83,156,.09), rgba(5,83,156,0) 70%); opacity: var(--edge, 0); transition: opacity .4s ease; }
  }
  .to-top { background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.38)); backdrop-filter: blur(18px) saturate(1.9); -webkit-backdrop-filter: blur(18px) saturate(1.9); border: 1px solid rgba(255,255,255,.9); }
  .demo-band .tablist button:not([aria-selected="true"]) { background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.35)); border-color: rgba(94,65,45,.24); }
  /* footer: light drifting behind frosted glass */
  .site-foot .foot-links { padding: 24px 26px; border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 24px 46px -28px rgba(0,10,30,.7); }
  .site-foot .foot-follow a { background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: background .25s, transform .25s; }
  .site-foot .foot-follow a:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); text-decoration: none; }
}
.site-foot { position: relative; overflow: hidden; isolation: isolate;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), var(--neel-deep); background-size: 180px 180px, auto; }
.site-foot::before, .site-foot::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.site-foot::before { width: 520px; height: 520px; left: 8%; top: -180px; background: radial-gradient(closest-side, rgba(120,190,255,.38), rgba(120,190,255,0)); animation: foot-a 18s ease-in-out infinite alternate; }
.site-foot::after { width: 620px; height: 620px; right: -6%; top: 10%; background: radial-gradient(closest-side, rgba(90,160,235,.6), rgba(90,160,235,0)); animation: foot-b 22s ease-in-out infinite alternate; }
@keyframes foot-a { to { transform: translate(220px, 80px) scale(1.15); } }
@keyframes foot-b { to { transform: translate(-260px, -40px) scale(.9); } }

/* ---------- Review with Tejas, 29 October: calmer shadows, pointer effects only where there is something to see ---------- */
/* footer: the glass panel and the follow links get a shadow as light as the header's */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-foot .foot-links { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px -24px rgba(0,10,30,.38); }
  .site-foot .foot-follow a:hover { background: rgba(255,255,255,.18); transform: none; }
}
/* hover lifts: a lighter shadow everywhere */
a.card:hover, .pillar:hover, .card.hl:hover, .mo a.card.rv.in:hover { box-shadow: 0 10px 24px -18px rgba(5,83,156,.3); }
.prints figure:hover { box-shadow: 0 18px 34px -24px rgba(5,83,156,.4); }
/* the spotlight is smaller, and only on things you can click (viz.js) */
.spot { background-image: radial-gradient(150px circle at var(--sx, 50%) var(--sy, 50%), rgba(5,83,156,.07), rgba(5,83,156,0) 70%); }
/* photos say what they show, in a small glass label that follows the pointer (viz.js) */
.hover-cap { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; max-width: 300px; padding: 8px 12px; border-radius: 12px;
  font: 500 var(--step--1)/1.4 var(--body); color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 26px -16px rgba(5,83,156,.45); opacity: 0; transition: opacity .2s ease; will-change: transform; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hover-cap { background: rgba(255,255,255,.78); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); } }
.hover-cap.on { opacity: 1; }
/* careers photo strip: drifts on its own, scrolls by hand (trackpad, swipe, keys) and has arrows */
.life.prints-run { position: relative; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.life-scroll { overflow-x: auto; overflow-y: hidden; padding: 18px 0 26px; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.life-scroll::-webkit-scrollbar { display: none; }
.life-scroll:focus-visible { outline: 2px solid var(--kesar); outline-offset: -2px; border-radius: var(--radius); }
.prints-run .life-track { animation: none; }
.strip-btn { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 600 20px/1 var(--body); color: var(--neel); background: rgba(255,255,255,.9); border: 1px solid var(--line); box-shadow: 0 8px 22px -14px rgba(5,83,156,.5); transition: background .2s, transform .2s; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .strip-btn { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.95); backdrop-filter: blur(14px) saturate(1.7); -webkit-backdrop-filter: blur(14px) saturate(1.7); } }
.strip-btn:hover { background: #fff; transform: scale(1.06); }
.strip-btn:focus-visible { outline: 2px solid var(--kesar); outline-offset: 2px; }
.strip-btn.prev { left: max(12px, var(--gutter-l)); }
.strip-btn.next { right: max(12px, var(--gutter-r, 16px)); }
.strip-btn[hidden] { display: none; }
/* careers: the open-roles panel is one big link */
.closing.whole { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.closing.whole .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.closing.whole:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -18px rgba(5,83,156,.3); }
.closing.whole:hover .btn { background: var(--neel-deep); border-color: var(--neel-deep); }
.closing.whole:has(.btn:focus-visible) { outline: 2px solid var(--kesar); outline-offset: 3px; }
/* desktop menus open on hover: a bridge over the gap so the pointer can reach them */
@media (hover: hover) and (min-width: 961px) { .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } }

/* ---------- 29 October, second pass ---------- */
/* the floating header sits over the page's soft colour, with no white strip behind it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 961px) {
    .site-head { margin-bottom: calc(-1 * var(--head-h, 78px)); }
    main { padding-top: var(--head-h, 78px); }
  }
}
/* value cards: the whole card turns over on click */
.flips .vf { cursor: pointer; transition: box-shadow .25s ease; }
.flips .vcard:hover .vf { box-shadow: 0 10px 24px -18px rgba(5,83,156,.3); }
/* only the face that is showing takes clicks */
.flips .vcard.flipped .vf-front, .flips .vcard:not(.flipped) .vf-back { pointer-events: none; }
/* hint that the value cards turn over: a staggered peek when they first come into view, and a slight tilt on hover */
@keyframes vpeek { 0% { transform: none; } 45% { transform: rotateY(-24deg); } 70% { transform: rotateY(6deg); } 100% { transform: none; } }
.flips .vcard.peek .vflip { animation: vpeek 1.1s cubic-bezier(.3,.7,.2,1) both; animation-delay: var(--peek-delay, 0s); }
@media (hover: hover) and (pointer: fine) {
  .flips .vcard:not(.flipped):hover .vflip { transform: rotateY(-10deg); }
  .flips .vcard:not(.flipped):hover .vf-front .vf-btn::before { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .flips .vcard.peek .vflip { animation: none; } .flips .vcard:not(.flipped):hover .vflip { transform: none; } }

/* ---------- Ticks: one style everywhere, a solid blue circle with a white check ---------- */
.ticks li { padding-left: 32px; }
.ticks li::before, .lic-tier li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; box-shadow: none;
  background: var(--neel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.2 11.4l3.2 3.2 6.6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 22px 22px no-repeat; }
.ticks li::after { content: none; }
.lic-tier li { position: relative; padding-left: 32px; }
.lic-tier li::before { margin: 0; }
/* on a blue card the tick inverts: white circle, blue check */
.lic-tier.community li::before { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.2 11.4l3.2 3.2 6.6-7' fill='none' stroke='%2305539C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 22px 22px no-repeat; }


/* ---------- Home: the four families, one card open at a time (viz.js) ---------- */
.fam-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fr-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fr-body { display: grid; gap: 8px; }
.fr-card h3 small { font-size: .6em; font-weight: 500; }
@media (max-width: 960px) { .fam-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fam-row { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 961px) {
  .fam-row.live { display: flex; gap: 12px; height: 380px; }
  .fam-row.live .fr-card { flex: 1 1 0; justify-content: space-between; overflow: hidden; transition: flex-grow .6s cubic-bezier(.3,.7,.2,1), box-shadow .25s ease; }
  .fam-row.live .fr-card.on { flex-grow: 3.2; }
  .fam-row.live .fr-card .fam { transform: scale(1.7); transform-origin: left top; margin-bottom: 30px; }
  .fam-row.live .fr-card h3, .fam-row.live .fr-card .eyebrow { white-space: nowrap; }
  .fam-row.live .fr-card p, .fam-row.live .fr-card .more { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease, max-height .5s ease; max-width: 38ch; }
  .fam-row.live .fr-card.on p, .fam-row.live .fr-card.on .more { opacity: 1; max-height: 6em; transition-delay: .2s, 0s; }
  .fam-row.live .fr-card h3 { font-size: var(--step-3); }
}

/* ---------- 30 October: visible grain on every strip of colour, a calmer footer ---------- */
/* The grain is coarser and stronger than before, so tan, sky and blue read like printed paper, not flat fills. */
.section.demo-band, .watch-band { background: var(--grain), var(--tan); background-size: 140px 140px, auto; }
.closing { background: var(--grain), var(--sky); background-size: 140px 140px, auto; }
.site-foot { background: var(--grain-light), var(--neel-deep); background-size: 140px 140px, auto; }
/* footer links sit straight on the blue: no glass box around them */
.site-foot .foot-links { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
/* menus open just below the floating header, so its saffron edge never runs across a menu; an invisible bridge keeps hover open */
@media (min-width: 961px) {
  .nav li { position: relative; }
  .menu { top: calc(100% + 18px); }
  .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
  .site-head:has(.menu:not([hidden])) .wrap::after { opacity: 0 !important; }
}

/* the line under a header photo that says how it connects to the model */
.photo-why { font-size: var(--step--1); line-height: 1.5; color: var(--muted); margin-top: 10px; max-width: 60ch; }
.photo-why b { color: var(--h); font-weight: 600; }

/* ---------- Folding: long card text opens with a small plus (Abha's note, 30 October) ---------- */
[data-fold] { position: relative; }
.fold-btn { display: none; }
.folded .fold-btn { display: grid; place-items: center; position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: var(--label); cursor: pointer; opacity: .75; transition: transform .25s ease, opacity .2s, background .2s; }
.folded .fold-btn::before, .folded .fold-btn::after { content: ""; position: absolute; width: 12px; height: 1.5px; background: currentColor; border-radius: 1px; }
.folded .fold-btn::after { transform: rotate(90deg); }
.folded:hover .fold-btn, .folded .fold-btn:focus-visible { opacity: 1; }
.folded.open .fold-btn { transform: rotate(45deg); opacity: 1; }
.folded { cursor: pointer; }
.folded h3 { padding-right: 40px; }
.folded .fold-body { display: none; }
.folded.open .fold-body { display: block; animation: fold-in .3s ease both; }
.folded.open dl.fold-body { display: grid; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.folded .status + .eyebrow { margin-top: 0; }
.card.folded:has(.status) .fold-btn { top: 16px; }
@media (prefers-reduced-motion: reduce) { .folded.open .fold-body { animation: none; } .folded .fold-btn { transition: none; } }
/* when a card opens, its neighbours keep their own height instead of stretching to match */
.grid:has(> .folded.open), .grid:has(> .folded.hov) { align-items: start; }
.folded.hov .fold-body { display: block; animation: fold-in .3s ease both; }
.folded.hov dl.fold-body { display: grid; }
.folded.hov .fold-btn { transform: rotate(45deg); opacity: 1; }

/* ---------- Vision page illustrations (Anirudh's ask, 30 October): how Patram reads a page ---------- */
.pv-card { display: grid; gap: 12px; align-content: start; }
.pv-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 6px; }
.pv-doc { position: relative; aspect-ratio: 3 / 4; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 12% 10%; display: grid; gap: 6%; align-content: start; overflow: hidden; box-shadow: 0 12px 26px -20px rgba(5,83,156,.45); }
.pv-doc i { display: block; height: 7px; border-radius: 4px; background: #E3ECF6; }
.pv-doc i.h { height: 12px; width: 70%; background: #C9D9EA; }
.pv-doc i.s { width: 60%; }
.pv-doc i.tb { height: auto; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pv-doc i.tb u { display: block; height: 14px; border: 1px solid #D5E1EE; border-radius: 2px; }
.pv-doc i.st { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(160,60,60,.55); background: none; justify-self: end; margin-top: 4%; }
.pv-doc i.sg { width: 45%; height: 2px; background: #8A97A6; justify-self: end; }
.pv-scan { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(180deg, rgba(245,146,34,0), rgba(245,146,34,.14) 70%, rgba(245,146,34,.55)); opacity: 0; pointer-events: none; }
.pv-box { position: absolute; font: 600 10px/1 var(--body); color: #2B1600; background: #FDE7CF; border: 1.5px solid var(--kesar); border-radius: 4px; padding: 3px 5px; opacity: 1; }
.pv-box.k1 { top: 7%; left: 6%; } .pv-box.k2 { top: 47%; left: 6%; } .pv-box.k3 { top: 66%; right: 6%; } .pv-box.k4 { bottom: 9%; right: 6%; }
.pv-chat { display: grid; gap: 8px; font-size: var(--step--1); line-height: 1.45; }
.pv-chat .q { background: var(--sky-soft); border-radius: 12px 12px 12px 4px; padding: 10px 12px; color: var(--ink); }
.pv-chat .a { background: var(--sky-soft); border-left: 3px solid var(--kesar); border-radius: 12px 12px 4px 12px; padding: 10px 12px; color: var(--ink); }
.pv-patch { display: grid; grid-template-columns: minmax(0, 1.1fr) 28px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 6px; }
.pv-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; aspect-ratio: 4 / 3; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; }
.pv-grid i { border-radius: 3px; background: #E3ECF6; }
.pv-grid i:nth-child(8n+2), .pv-grid i:nth-child(8n+3), .pv-grid i:nth-child(n+17):nth-child(-n+24) { --pv-b: #C9D9EA; background: #C9D9EA; }
.pv-arrow { height: 2px; background: #C9D9EA; position: relative; }
.pv-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid #C9D9EA; }
.pv-words { display: flex; flex-wrap: wrap; gap: 6px; font: 600 var(--step--1)/1.2 var(--body); color: var(--ink); }
.pv-words span { background: var(--sky-soft); border-radius: 6px; padding: 3px 8px; font-weight: 400; }
/* motion: a scan passes, the parts light up, the answer arrives; patches light in a wave as words appear */
@media (prefers-reduced-motion: no-preference) {
  .mo .pv-card .pv-box, .mo .pv-card .pv-chat > *, .mo .pv-card .pv-words span { opacity: 0; }
  .mo .pv-card.in .pv-scan { animation: pv-scan 7s ease-in-out infinite; }
  .mo .pv-card.in .pv-box { animation: pv-pop 7s ease infinite; }
  .mo .pv-card.in .pv-box.k1 { animation-delay: .4s; } .mo .pv-card.in .pv-box.k2 { animation-delay: 1.2s; }
  .mo .pv-card.in .pv-box.k3 { animation-delay: 1.9s; } .mo .pv-card.in .pv-box.k4 { animation-delay: 2.4s; }
  .mo .pv-card.in .pv-chat .q { animation: pv-pop 7s ease 2.9s infinite; }
  .mo .pv-card.in .pv-chat .a { animation: pv-pop 7s ease 3.6s infinite; }
  .mo .pv-card.in .pv-grid i { animation: pv-lit 6s ease-in-out infinite; animation-delay: calc(var(--i) * 45ms); }
  .mo .pv-card.in .pv-words span { animation: pv-pop 6s ease infinite; animation-delay: calc(2.2s + var(--i) * 280ms); }
}
@keyframes pv-scan { 0% { top: -18%; opacity: 0; } 8% { opacity: 1; } 45% { top: 100%; opacity: 1; } 50%, 100% { top: 100%; opacity: 0; } }
@keyframes pv-pop { 0% { opacity: 0; transform: translateY(4px); } 6%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes pv-lit { 0%, 28% { background-color: var(--pv-b, #E3ECF6); } 33% { background-color: #F59222; } 40%, 100% { background-color: var(--pv-b, #E3ECF6); } }
@media (max-width: 600px) { .pv-read { grid-template-columns: 1fr; } .pv-doc { max-width: 240px; } .pv-patch { grid-template-columns: 1fr; } .pv-arrow { width: 2px; height: 22px; justify-self: center; } .pv-arrow::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid #C9D9EA; } }

/* ---------- 30 October: centred home hero, a line that lights up as you scroll, stacking family cards, next model ---------- */
.hero-c .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero-c .copy { justify-items: center; max-width: 940px; }
.hero-c h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); line-height: 1.02; letter-spacing: -0.02em; }
.hero-c .lede { max-width: 56ch; }
.hero-c .btns { justify-content: center; }
.ul { position: relative; white-space: nowrap; display: inline-block; }
.ul svg { position: absolute; left: -1%; right: -1%; width: 102%; bottom: -0.16em; height: .26em; overflow: visible; }
.ul path { fill: none; stroke: var(--kesar); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mo .ul path { stroke-dasharray: 340; stroke-dashoffset: 340; animation: ul-draw 1.1s cubic-bezier(.6,0,.2,1) .7s forwards; }
@keyframes ul-draw { to { stroke-dashoffset: 0; } }
.hello { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font: 600 var(--step-0)/1.2 var(--body), "BG Scripts", sans-serif; color: var(--h); box-shadow: 0 8px 20px -16px rgba(5,83,156,.4); }
.hello [data-greet] { transition: opacity .3s ease, transform .3s ease; display: inline-block; }
.hello [data-greet].out { opacity: 0; transform: translateY(-6px); }
.lang-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 760px; }
.lang-chips button { font: 500 var(--step--1)/1 var(--body), "BG Scripts", sans-serif; color: var(--h); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lang-chips button:hover { border-color: var(--h); }
.lang-chips button[aria-pressed="true"] { background: var(--h); border-color: var(--h); color: var(--white); }
.statement-sec { padding-block: clamp(48px, 9vw, 120px); }
.statement { font: 600 clamp(2rem, 1rem + 4.2vw, 4.4rem)/1.08 var(--display); letter-spacing: -0.02em; color: var(--h); text-align: center; max-width: 18ch; margin: 0 auto; }
.mo .statement .w { color: #CDD5DE; transition: color .25s ease; }
.mo .statement .w.lit { color: var(--h); }
.stack { display: grid; gap: 24px; }
.stk-card { position: sticky; top: calc(var(--head-h, 72px) + 24px + var(--k) * 16px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: clamp(220px, 24vw, 300px); padding: clamp(28px, 4vw, 52px); border-radius: calc(var(--radius) + 8px); text-decoration: none; color: var(--ink); box-shadow: 0 -10px 30px -24px rgba(5,40,80,.45); }
.stk-card h3 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem); line-height: 1; margin: 6px 0 10px; }
.stk-card p { max-width: 40ch; font-size: var(--step-1); }
.stk-card .more { display: inline-block; margin-top: 14px; font-weight: 600; }
.stk-viz { justify-self: center; width: clamp(160px, 18vw, 230px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 28px; background: rgba(255,255,255,.5); }
.stk-viz .ic.fam { transform: scale(4); transform-origin: center; background: transparent; }
.card.peach.stk-card h3, .card.peach.stk-card .eyebrow, .card.peach.stk-card .more { color: var(--peach-ink); }
.card.tan.stk-card h3, .card.tan.stk-card .eyebrow, .card.tan.stk-card .more { color: var(--tan-ink); }
.card.sky.stk-card h3, .card.sky.stk-card .eyebrow, .card.sky.stk-card .more { color: var(--neel); }
@media (max-width: 700px) { .stk-card { grid-template-columns: 1fr; min-height: 0; top: calc(var(--head-h, 60px) + 12px + var(--k) * 10px); } .stk-viz { justify-self: start; order: -1; width: 120px; border-radius: 20px; } .stk-viz .ic.fam { transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .stk-card { position: static; } }
.next-line-nav { margin-top: clamp(20px, 3vw, 36px); margin-bottom: clamp(8px, 2vw, 20px); }
.next-line-nav a { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 6px 14px; padding: 18px 4px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.nl-lab { font: 600 var(--step--1)/1 var(--body); color: var(--label); }
.nl-name { font: 600 var(--step-2)/1.1 var(--display); color: var(--h); }
.nl-sub { color: var(--muted); font-size: var(--step--1); }
.nl-arr { font: 600 var(--step-2)/1 var(--display); color: var(--neel); transition: transform .25s ease; }
.next-line-nav a:hover .nl-arr { transform: translateX(6px); }
.next-line-nav a:hover .nl-name { color: var(--neel); }
@media (max-width: 600px) { .next-line-nav a { grid-template-columns: auto 1fr auto; } .nl-sub { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Model pages: the hero sits on a panel in the family's colour, with the looping picture large ---------- */
.page-hero:has(.bn-fam) .ph-grid { border-radius: calc(var(--radius) + 10px); padding: clamp(28px, 4vw, 56px); align-items: center; }
.page-hero:has(.bn-fam.tan) .ph-grid { background: var(--tan); }
.page-hero:has(.bn-fam.peach) .ph-grid { background: var(--peach); }
.page-hero:has(.bn-fam.sky) .ph-grid { background: var(--sky); }
.page-hero:has(.bn-fam) h1 { font-size: clamp(2.4rem, 1.3rem + 4vw, 4.4rem); line-height: 1.02; }
.page-hero:has(.bn-fam.tan) h1 .k, .page-hero:has(.bn-fam.tan) h1 .n { color: var(--tan-ink); }
.page-hero:has(.bn-fam.peach) h1 .k, .page-hero:has(.bn-fam.peach) h1 .n { color: var(--peach-ink); }
.page-hero:has(.bn-fam.sky) h1 .k, .page-hero:has(.bn-fam.sky) h1 .n { color: var(--neel); }
.page-hero:has(.bn-fam) .lede { color: var(--ink); }
.bn-fam { display: grid; justify-items: center; gap: 22px; }
.bn-fam-viz { width: clamp(170px, 20vw, 250px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 30px; background: rgba(255,255,255,.55); }
.bn-fam-viz .ic.fam { transform: scale(4.4); background: transparent; }
.bn-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bn-facts li { font: 600 var(--step--1)/1.2 var(--body); color: var(--ink); background: rgba(255,255,255,.65); border-radius: 999px; padding: 8px 12px; }
@media (max-width: 900px) { .bn-fam { justify-items: start; } .bn-fam-viz { width: 130px; border-radius: 22px; } .bn-fam-viz .ic.fam { transform: scale(2.6); } .bn-facts { justify-content: flex-start; } }

/* ---------- 30 October: one texture, one motion system ---------- */
/* Every block of colour carries the same fine grain, so nothing on the site looks flat. */
:root { --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .18  0 0 0 0 .12  0 0 0 .38 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .46 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); --grain-blue: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .03  0 0 0 0 .18  0 0 0 0 .36  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.card.tan, .card.peach, .card.sky, .pillar.tan, .pillar.peach, .pillar.sky, .feature.alt, .bt.tan, .bt.sky, .bt.peach,
.vcard.t-sky .vf-front, .vcard.t-peach .vf-front, .vcard.t-tan .vf-front, .inst-card.anchor, .page-hero:has(.bn-fam) .ph-grid,
.stk-card { background-image: var(--grain); background-size: 140px 140px; }
/* the model page header panel: same grain (these rules are more specific than the colour rules above) */
.page-hero:has(.bn-fam.tan) .ph-grid, .page-hero:has(.bn-fam.peach) .ph-grid, .page-hero:has(.bn-fam.sky) .ph-grid { background-image: var(--grain); background-size: 140px 140px; }
/* the looping picture's tile sits inside a grained panel: keep it plain, so the grain isn't doubled */
.bn-fam-viz, .stk-viz { background-image: none !important; }

/* Motion. One way in for everything: a short fade and a 12px rise, same speed and curve everywhere,
   a small left-to-right stagger inside a row, nothing that bounces, wipes or drifts on its own. */
.mo .rv { transform: translateY(12px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; transition-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: .01; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero .copy > *, .page-hero .wrap > *, .hero-photo, .bn-photo { animation-duration: .6s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.mo .tabpanel:not([hidden]) { animation-duration: .35s; }
.mo .rv-out.play > *:not(.ex-lbl), .mo .rv-out.play .steps li { animation-duration: .6s; animation-delay: calc(var(--i, 0) * 90ms); }
/* the one-off flourishes go: the name note, timeline dots, document scans and floating documents simply fade in with everything else */
.mo .name-note.rv .dev { clip-path: none; transition: none; }
.mo .timeline li.rv::before { transform: none; transition: none; }
.mo .doc.in .doc-img::after { animation: none; content: none; }
.mo .doc:hover .doc-img::after { content: ""; animation: read 1.8s cubic-bezier(.45,0,.25,1) both; }
.mo .doc-fan.in img, .mo .doc-fan.in img:nth-child(2), .mo .doc-fan.in img:nth-child(3) { animation: none; }
/* small looping pictures run only while they are on screen (site.js adds .live), so a page never has loops running out of sight */
.mo .lp:not(.live), .mo .lp:not(.live) * { animation-play-state: paused !important; }

/* Sooktam: the speech family's olive with a warmer, stonier tinge, so the two speech models can be told apart */
.card.peach.tts, .bt.peach.tts { background-color: var(--olive-tts); }
.card.peach.tts h3, .card.peach.tts .eyebrow, .card.peach.tts .more, .card.peach.tts .ic, .bt.peach.tts { color: var(--olive-tts-ink); }
.card.peach.tts .fam-tts .spk { background: var(--olive-tts-ink); }

/* Consistency: every surface in a family colour (tan, sky, olive, stone) uses the token colour and the same grain.
   Small pills and labels stay flat. */
.card.tan, .card.peach, .card.sky, .pillar.tan, .pillar.peach, .pillar.sky, .feature.alt, .closing, .section.demo-band, .watch-band,
.vcard.t-sky .vf-front, .vcard.t-peach .vf-front, .vcard.t-tan .vf-front, .inst-card.anchor, .stk-card,
.page-hero:has(.bn-fam.tan) .ph-grid, .page-hero:has(.bn-fam.peach) .ph-grid, .page-hero:has(.bn-fam.sky) .ph-grid { background-image: var(--grain); background-size: 140px 140px; }

/* ---------- 404: the number in India's numerals ---------- */
.nf { padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.nf-num { position: relative; display: grid; justify-items: center; gap: 12px; padding: clamp(28px, 4vw, 52px); border-radius: calc(var(--radius) + 10px); background: var(--tan); background-image: var(--grain); background-size: 140px 140px; }
.nf-digits { position: relative; height: clamp(120px, 15vw, 210px); width: 100%; }
.nf-d { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(5rem, 11vw, 9.5rem)/1 var(--display), "Noto Sans", "BG Scripts", sans-serif; color: var(--tan-ink); opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.nf-d.on { opacity: 1; transform: none; }
.nf-script { font: 600 var(--step--1)/1 var(--body); color: var(--tan-ink); background: rgba(255,255,255,.6); border-radius: 999px; padding: 7px 12px; }
.nf-copy { display: grid; gap: 18px; justify-items: start; }
.nf-copy h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.02; }
.nf-chat { display: grid; gap: 8px; width: 100%; max-width: 520px; font-size: var(--step--1); }
.nf-chat .who { display: block; font-weight: 600; color: var(--label); margin-bottom: 4px; }
.nf-chat .you { background: var(--sky-soft); border-radius: 14px 14px 14px 4px; padding: 12px 14px; }
.nf-chat .you code { font: 500 var(--step-0)/1.3 ui-monospace, Menlo, monospace; color: var(--ink); word-break: break-all; }
.nf-chat .bot { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--kesar); border-radius: 14px 14px 4px 14px; padding: 12px 14px; }
.nf-chat .bot p { margin: 0; }
.nf-cards .card { text-decoration: none; color: var(--ink); }
.nf-cards .card .more { display: inline-block; margin-top: 8px; font-weight: 600; }
@media (max-width: 860px) { .nf-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nf-d { transition: none; } }

/* ---------- 30 October: demos sit in a rounded panel in their model's colour ---------- */
/* The section itself is plain page ground; the panel inside carries the family colour and the shared grain.
   Text: tan. Vision: sky. Speech-to-text: olive. Text-to-speech: stone. The home panel follows the open tab. */
.section.demo-band { background: none !important; border: 0; padding-block: clamp(20px, 3vw, 40px); overflow: visible; --famc: var(--tan); }
.section.demo-band.demo-cont { padding-top: 0; }
.demo-band > .wrap { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 12px); padding: clamp(28px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
  background-color: var(--famc); background-image: var(--grain); background-size: 140px 140px; transition: background-color .5s ease; }
.demo-band.fam-tan, .demo-band[data-fam="0"] { --famc: var(--tan); }
.demo-band.fam-sky, .demo-band[data-fam="1"] { --famc: var(--sky); }
.demo-band.fam-olive, .demo-band[data-fam="2"] { --famc: var(--peach); }
.demo-band.fam-stone, .demo-band[data-fam="3"] { --famc: var(--olive-tts); }
.demo-band .section-head p { color: var(--ink); opacity: .82; }
.demo-band .wrap[data-wavefield] > *:not(.wavefield) { position: relative; z-index: 1; }
.demo-band .wrap[data-wavefield] { overflow: hidden; }
@media (max-width: 600px) { .demo-band > .wrap { margin-inline: 12px; width: auto; padding: 24px 16px; border-radius: 22px; } }
/* a family-colour panel right after a demo panel keeps its distance */
.section.demo-band + .section.closing-sec { padding-top: clamp(28px, 4vw, 48px); }

/* ---------- Ambient dots behind the home hero and in the footer (viz.js, data-ambient) ---------- */
.hero-c, .site-foot { position: relative; }
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-c > .wrap { position: relative; z-index: 1; }
.site-foot > .wrap { position: relative; z-index: 1; }

/* iubenda cookie banner: our type. Colours, position and buttons are set in iubenda's configuration (build.py). */
#iubenda-cs-banner, #iubenda-cs-banner * { font-family: var(--body) !important; }
#iubenda-cs-banner .iubenda-cs-opt-group button { font-weight: 600 !important; }
@media (min-width: 640px) { html body #iubenda-cs-banner[class] .iubenda-cs-container .iubenda-cs-content { border-radius: var(--radius) !important; } }