/* Deccan Benchmarks — v5 light. Tokens, type and spacing taken from the Figma
   "Deccan" section (light frames 4975:3911 home, 4975:1989 benchmark).
   Dark-mode rules below are the previous design's, kept untouched for a later pass. */

/* Self-hosted, replacing the Google Fonts link. Only the weights the design uses. */
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Surfaces — page ground sampled from the Figma light frame */
  --bg: #F5F3F0; --surface: #FFFFFF; --soft: #FAF9F7;
  /* Ink */
  --ink: #111113; --ink-2: #6B6B76; --ink-3: #A3A3AC; --ink-4: #C4C4CC;
  /* Hairlines and washes — Figma uses ink at low alpha, not a flat grey */
  --line: rgba(18,18,18,.09); --line-2: rgba(18,18,18,.14); --wash: rgba(18,18,18,.04);
  --track: rgba(18,18,18,.05);
  /* Accent stays Deccan blue: deccanAccent.light from the colour handoff */
  --accent: #1165E4; --accent-2: #5B8BFF; --accent-wash: #EFF4FF; --warm: #D9534F;
  /* Row hover. deccan.ai/research darkens its cards #E5E2DF -> #DCD3CB on hover;
     that same warm shift (-9, -15, -20) applied to our white rows lands here. */
  --hover: #F6F0EB;
  /* Component surfaces, so dark mode is a token swap rather than a second stylesheet */
  --panel: #FFFFFF;                      /* stat cards, latest table, method banner */
  --card-bg: rgba(255,255,255,.7);       /* translucent board/section cards */
  --card-line: rgba(18,18,18,.12);
  --row-base: #FFFFFF; --row-alt: #FAF9F6;
  --thead-bg: rgba(18,18,18,.04); --thead-ink: #8A8A93;
  --track: #EBE8E4;                      /* bar track */
  --eyebrow: rgba(59,52,43,.6);
  --cta-bg: #111113; --cta-ink: #F6F3F0; --cta-bg-hover: #2a2a2e;
  --cta2-bg: rgba(18,18,18,.03); --cta2-line: rgba(18,18,18,.24);
  --chip: #FFFFFF;                       /* the white disc behind a provider mark */
  --knob: rgba(18,18,18,.1); --knob-line: rgba(18,18,18,.12);
  /* Type */
  --serif: "Season Mix", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Metrics — 1440 frame, 1120 content column, 160 side margin */
  --w: 1120px; --gut: 160px; --label: 230px;
  --nav-h: 88px; --card-pad: 24px; /* +1px border = Figma's 25px inset */ --r: 4px; --r-card: 8px;
  color-scheme: light;
}


/* Dark mode. Taken from the Figma dark frames; the gradient asset is the SAME file as
   light (byte-identical export) - only its offset and the ground beneath it differ. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Values read from the Figma dark frames: home 4975:3375, benchmark 4975:604.
     Model/bar colours deliberately do NOT change between modes - only the ground does. */
  --bg: #0D0D0F; --surface: #121314; --soft: #18181B;
  --ink: #F6F3F0; --ink-2: #A3A3AC; --ink-3: #6B6B76; --ink-4: #4A4A52;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.14);
  --wash: rgba(255,255,255,.05);
  --accent: #1279F7; --accent-2: #6BA6FF; --accent-wash: rgba(18,121,247,.10);
  --hover: #16161A;
  --panel: rgba(18,19,20,.6);
  --card-bg: rgba(18,19,20,.6); --card-line: rgba(255,255,255,.12);
  --row-base: #141417; --row-alt: #111113;
  --thead-bg: rgba(30,30,34,.6); --thead-ink: #6B6B76;
  --track: #1E1E22;
  --eyebrow: rgba(235,232,228,.6);
  --cta-bg: #F6F3F0; --cta-ink: #121314; --cta-bg-hover: #FFFFFF;
  --cta2-bg: rgba(255,255,255,.04); --cta2-line: rgba(246,243,240,.32);
  --chip: #FFFFFF;
  --knob: rgba(255,255,255,.15); --knob-line: rgba(255,255,255,.12);
  color-scheme: dark;
  }
  :root:not([data-theme="light"]) body { background-position: -71.72vw -23.95vw; }
  :root:not([data-theme="light"]) body[data-report],
  :root:not([data-theme="light"]) body.is-report { background-position: -69.91vw -45.33vw; }
}
:root[data-theme="dark"] {
  /* Values read from the Figma dark frames: home 4975:3375, benchmark 4975:604.
     Model/bar colours deliberately do NOT change between modes - only the ground does. */
  --bg: #0D0D0F; --surface: #121314; --soft: #18181B;
  --ink: #F6F3F0; --ink-2: #A3A3AC; --ink-3: #6B6B76; --ink-4: #4A4A52;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.14);
  --wash: rgba(255,255,255,.05);
  --accent: #1279F7; --accent-2: #6BA6FF; --accent-wash: rgba(18,121,247,.10);
  --hover: #16161A;
  --panel: rgba(18,19,20,.6);
  --card-bg: rgba(18,19,20,.6); --card-line: rgba(255,255,255,.12);
  --row-base: #141417; --row-alt: #111113;
  --thead-bg: rgba(30,30,34,.6); --thead-ink: #6B6B76;
  --track: #1E1E22;
  --eyebrow: rgba(235,232,228,.6);
  --cta-bg: #F6F3F0; --cta-ink: #121314; --cta-bg-hover: #FFFFFF;
  --cta2-bg: rgba(255,255,255,.04); --cta2-line: rgba(246,243,240,.32);
  --chip: #FFFFFF;
  --knob: rgba(255,255,255,.15); --knob-line: rgba(255,255,255,.12);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background-position: -71.72vw -23.95vw; }
:root[data-theme="dark"] body[data-report],
:root[data-theme="dark"] body.is-report { background-position: -69.91vw -45.33vw; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
html, body { overflow-x: clip; }
/* The page ground plus Figma's bg-gradient layer (exported from node 4975:3912).
   The PNG already carries the layer's 55% in its own alpha, so it is drawn at full
   opacity. Placement is the image's frame position expressed in vw, so it scales with
   the viewport exactly as the 1440 design does. The benchmark frame offsets it higher
   and further left than the homepage, hence the second rule.
   html carries the flat colour so body's background is not propagated to the canvas. */
html { background-color: var(--bg); }
body { margin: 0; background-color: transparent; color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  background-image: url("bg-gradient.webp"); background-repeat: no-repeat;
  background-size: 244.07vw auto; background-position: -47.14vw -53.18vw; }
body[data-report], body.is-report { background-position: -60.89vw -63.39vw; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; }
/* 1440 frame: 160 | 1120 content | 160. max-width carries the gutters so the
   content column itself measures exactly var(--w). */
.wrap { max-width: calc(var(--w) + 64px); margin: 0 auto; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) { .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.lbl { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* Nav — Figma header 1440x88, nav row 84, content column 1120 */
/* Figma's header has no fill at all - the gradient reads straight through it. The
   ground only appears once the page scrolls, so the sticky bar stays readable. */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: transparent;
  border-bottom: 1px solid var(--line); transition: background-color .2s, backdrop-filter .2s; }
/* Opaque fallback first: where color-mix is unsupported that declaration is dropped and
   .nav keeps its transparent base, leaving the sticky bar unreadable over moving content
   -- the exact thing this ground exists to prevent. */
.nav.scrolled { background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: calc(var(--nav-h) - 1px); }
.brand { display: flex; align-items: center; gap: 24px; text-decoration: none; }
.brand img { width: 119px; height: auto; }
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] footer img { filter: invert(1) brightness(1.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img, :root:not([data-theme="light"]) footer img { filter: invert(1) brightness(1.9); } }
/* the 38px rule between the logo and the wordmark */
.brand::after { content: none; }
.nav nav { margin-left: auto; display: flex; gap: 32px; align-items: center; }
.nav nav > a, .dd > button { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 28px;
  color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0 0 1px; cursor: pointer; }
.nav nav > a:hover, .dd > button:hover { color: var(--ink); }
.dd > button { font-weight: 600; color: var(--ink); }
/* Figma's nav is four plain words at a 32px gap (node 4975:3925). Our Benchmarks item
   is a menu, so it carries a caret Figma never had. Do NOT compensate the gap for the
   caret's width: the caret is ink, so the eye measures from the caret, not from the last
   letter. Pulling the next item closer (tried at -13px) collapsed caret->Environments to
   19px against Environments->Contact at 32px, which read as badly uneven. The 32px flex
   gap is correct as-is; the caret is instead tightened to its own word below. */
.dd { position: relative; }
.dd > button::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 4px; }
.dd .menu { position: absolute; right: -12px; top: 100%; min-width: 260px; width: max-content; max-width: min(420px, calc(100vw - 48px)); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.18); display: none; }
.dd:hover .menu, .dd:focus-within .menu { display: block; }
.dd .menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 9px 10px; border-radius: var(--r); text-decoration: none; font-size: 14px; color: var(--ink); white-space: nowrap; }
.dd .menu a span { flex: 0 0 auto; text-align: right; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.dd .menu a:hover { background: var(--wash); }
/* right cluster: theme switch + Get in Touch */
.nav-right { display: flex; gap: 16px; align-items: center; margin-left: 16px; }
/* Theme switch. Figma draws BOTH frames with the knob at left:22px and only flips the
   moon's colour (#111113 -> #F6F3F0), so the mock carries no state at all. Styling is
   Figma's; the behaviour is ours: sun on the left, moon on the right, knob sliding onto
   the active one. A single icon riding the knob read as "what you'll get" while the knob
   read as "where you are" -- two opposite grammars in one control. --kx and the two
   opacities MUST flip together in these same three places; splitting them is what broke
   this before. Knob is 22px in a 46px padding box, so 1px / 23px are the symmetric ends. */
.theme { --kx: 1px; --o-sun: 1; --o-moon: .32;
  width: 48px; height: 26px; padding: 0; position: relative; display: block; cursor: pointer;
  background: var(--wash); border: 1px solid var(--line); border-radius: 13px; color: var(--ink); }
:root[data-theme="dark"] .theme { --kx: 23px; --o-sun: .32; --o-moon: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme { --kx: 23px; --o-sun: .32; --o-moon: 1; } }
.theme::before { content: ""; position: absolute; top: 1px; left: var(--kx); width: 22px; height: 22px;
  border-radius: 11px; background: var(--knob); border: .5px solid var(--knob-line); transition: left .18s ease; }
/* Both icons sit still in the track; only the knob travels, onto whichever is active.
   The inactive one stays visible but dimmed, so the control shows its two states at once
   the way a physical switch does. Icons are children, so they paint over ::before. */
.theme svg { position: absolute; top: 3.5px; width: 17px; height: 17px;
  pointer-events: none; transition: opacity .18s ease; }
.theme .sun { left: 3.5px; opacity: var(--o-sun); }
.theme .moon { left: 25.5px; opacity: var(--o-moon); }
.theme:hover { border-color: var(--line-2); }
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-cta { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 8px 16px; border-radius: var(--r);
  background: var(--cta-bg); color: var(--cta-ink); font-size: 14px; font-weight: 600; line-height: normal; text-decoration: none; white-space: nowrap; }
.btn-cta:hover { background: var(--cta-bg-hover); }
/* Figma only specifies 1440. Below it the nav sheds pieces in order of importance so
   the right cluster never runs past the gutter. There used to be a three-step ladder
   here (CTA out at 1024, links out at 860, CTA out again at 480) whose first step was
   justified by the Contact link covering the CTA. Contact is gone, so that step is gone
   with it: the bar now holds its full width down to 860 and hands everything to the
   hamburger below it. */
/* Mobile menu. Trigger is deccan.ai's own two-line mark (16x16 box, M1 5H15 / M1 11H15,
   1px round caps); it cross-fades to an X rather than rotating into one, because a
   horizontal path has a zero-height fill-box and transform-origin: center on it lands
   somewhere different in every engine. Panel behaviour follows surgehq.ai's mobile menu:
   it drops from directly under the bar, full bleed, rows stacked on hairlines, primary
   action boxed at the foot. */
.ham { display: none; width: 44px; height: 44px; margin-right: -14px; padding: 0;
  align-items: center; justify-content: center; background: none; border: 0;
  border-radius: var(--r); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ham svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.ham svg path { transition: opacity .18s ease; }
.ham .mx { opacity: 0; }
.ham[aria-expanded="true"] .mb { opacity: 0; }
.ham[aria-expanded="true"] .mx { opacity: 1; }
.ham:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* visibility (not display) carries the closed state: it animates, and it takes the two
   links out of the tab order and the accessibility tree while shut, which opacity alone
   would not. The 0s visibility delay holds the panel painted until the fade finishes. */
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface);
  border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px -16px rgba(0,0,0,.22);
  max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.mobile-menu.open { opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s; }
/* This .wrap is inside .nav, so it also matches `.nav .wrap` at the same specificity --
   which pins it to the 87px bar height, centres its children and puts a 24px gap between
   them. All three have to be undone here or the panel clips its own CTA. */
.mobile-menu .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0;
  height: auto; padding-top: 4px; padding-bottom: 20px; }
.mobile-menu a { display: flex; align-items: center; min-height: 52px; padding: 14px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mobile-menu a:active { color: var(--ink-2); }
/* Two class selectors, so it outranks the .btn-cta display:none the 860 query sets on
   the bar's copy of this button. */
.mobile-menu .btn-cta { display: flex; margin-top: 20px; padding: 0 16px;
  border-bottom: 0; color: var(--cta-ink); letter-spacing: .08em; }
@media (max-width: 860px) { .nav nav > a, .dd { display: none; } .btn-cta { display: none; } .ham { display: flex; } }
@media (min-width: 861px) { .mobile-menu { display: none; } }

/* Page head — Figma hero: eyebrow pill, 64px Season Mix heading, 16px lead.
   Single column across the full 1120 content width (the old label column is gone). */
.crumb { padding-top: 80px; font-size: 13px; letter-spacing: .01em; text-transform: none; color: var(--ink-3); }
.crumb a { text-decoration: none; color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }
.head { display: block; padding: 80px 0 64px; }
.crumb + .head { padding-top: 31px; }
.head .kind { padding: 0 0 24px; }
.head .kind i { display: none; }
.head .kind .lbl { display: inline-block; background: var(--wash); color: var(--ink); opacity: .9;
  font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: .2px; text-transform: uppercase;
  padding: 8px 18px 8px 16px; border-radius: 999px; }
.head h1 { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1.12; letter-spacing: -1.5px;
  color: var(--ink); margin: 0 0 24px; }
.head h1 em { font-style: normal; color: inherit; }
.head .lead { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: var(--w); }
.head .lead b { color: var(--ink); font-weight: 600; }

/* Homepage first fold, Figma node 9:2: heading and lead on the left, two counted
   stats on the right. At 1440 the frame is 1120 wide, split 533 / 54 / 533, with the
   two stats 238.5 each and 56 between them. Scoped to .head-home so the benchmark
   pages keep the single-column header. The body gradient is untouched. */
.head-home { padding-bottom: 56px; }
.head-home .head-main { display: grid; grid-template-columns: minmax(0, 533fr) minmax(0, 533fr);
  gap: 54px; align-items: start; }
.head-home h1 { margin: 0 0 24px; }
.head-home .lead { max-width: 533px; }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding-top: 13px; }
.gstat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1;
  letter-spacing: -1px; color: var(--ink); }
.gstat .gl { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink); }
/* The mock greys this line almost out, but that is placeholder text. --ink-3 lands
   at 2.3:1 on the light ground, so it takes --ink-2, the same grey as the lead. */
.gstat p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) {
  .head-home .head-main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .head-home .lead { max-width: none; }
  .glance { padding-top: 0; }
}
@media (max-width: 560px) { .glance { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 860px) {
  .head { padding: 48px 0 40px; }
  .crumb { padding-top: 40px; }
  .head h1 { font-size: clamp(34px, 7vw, 64px); letter-spacing: -.02em; }
}

/* Figma prefixes section labels with "//". Aangeeras asked for it off the modality label
   at the top-left of each board card only; every other label keeps it. */
.lbl::before { content: "// "; }
.card-head .lbl::before { content: none; }
/* Updates list — bordered table, one row per update (benchmark pages) */
/* Method banner — a white panel like the others, marked by a blue left rule.
   The handoff keeps the accent on these banners Deccan blue; in Figma that accent is
   the rule alone, not a tinted fill, and the heading is ink. */
@media (max-width: 900px) {
}

/* Benchmark page sections — Figma: full-width header (title + note) then a card */
.sec { display: block; padding: 0 0 56px; border: 0; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 0 0 24px; }
.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 39px; letter-spacing: -.5px;
  margin: 0 0 4px; color: var(--ink); }
.sec-head p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2); max-width: 800px; }
.sec-head .dir, .sec-head .scale { font-size: 12px; letter-spacing: .2px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sec .ctl { display: grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: center; }
.sec .ctl label { font-size: 12px; letter-spacing: .2px; text-transform: uppercase; color: var(--ink-3); }
.sec select { font: 14px var(--sans); color: var(--ink); background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 26px 6px 10px; appearance: none; cursor: pointer; min-width: 150px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
/* Benchmark overview — Figma 748 podium | 32 | 340 supporting */
/* The podium had a supporting column beside it until the updates card and the
   "How it's measured" banner were removed. It now runs the full width. */
.overview-b { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px 0 56px; }
/* A board can hide both supporting blocks. Then the podium takes the full width
   instead of leaving an empty 340px column beside it. */

/* Methodology - three cards, one row on desktop so the grid never reads as
   having a gap where a fourth card used to be. Tokens only, so it follows the theme. */
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.method .m-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; }
.m-lbl { margin: 0; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.m-body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 1000px) {
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards in two columns orphan the third. Let it span the row. */
  .method .m-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px)  { .method { grid-template-columns: minmax(0, 1fr); } }
.top-three .lbl { display: block; font-size: 14px; font-weight: 500;
  letter-spacing: .2px; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.card.podium-card { padding: 40px; }  /* Figma: podium row 666 inside the 748 card */
.podium-cap { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }

/* Podium — Figma 3 columns 211.3 wide, platforms 116/168/84, avatars 48/64/48 */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; }
.podium .p { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.podium .who { display: grid; place-items: center; }
.podium .who .pic { width: 48px; height: 48px; background: var(--surface); border: 1px solid var(--line); }
.podium .who .pic.mono { font-size: 15px; }
.podium .p.first .who .pic { width: 64px; height: 64px; }
.podium .nm { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--ink); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .sc { margin-top: 10px; font-family: var(--serif); font-size: 24px; line-height: 29px; color: var(--ink); font-variant-numeric: tabular-nums; }
.podium .p.first .sc { font-size: 34px; line-height: 41px; }
.podium .blk { width: 100%; margin-top: 10px; border-radius: var(--r) var(--r) 0 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #fff; }
.podium .p:nth-child(1) .blk { height: 116px; }
.podium .p:nth-child(2) .blk { height: 168px; }
.podium .p:nth-child(3) .blk { height: 84px; }
.podium .crown { display: none; }
.podium .base { display: none; }
@media (max-width: 960px) { .overview-b { grid-template-columns: 1fr; } }
/* Figma shows the podium at desktop only. Below 640 it becomes a plain ranked list,
   which stays legible where three 100px columns would not. */
@media (max-width: 640px) {
  .podium { grid-template-columns: 1fr; gap: 8px; }
  .podium .p { flex-direction: row; align-items: center; gap: 12px; }
  .podium .who .pic, .podium .p.first .who .pic { width: 40px; height: 40px; }
  .podium .who .pic.mono, .podium .p.first .who .pic.mono { font-size: 12px; }
  .podium .nm { margin: 0; flex: 1 1 auto; text-align: left; min-width: 0; }
  .podium .sc, .podium .p.first .sc { margin: 0; font-size: 20px; line-height: 24px; flex: none; }
  .podium .blk,
  .podium .p:nth-child(1) .blk,
  .podium .p:nth-child(2) .blk,
  .podium .p:nth-child(3) .blk { order: -1; width: 28px; height: 28px; margin: 0; flex: none;
    border-radius: var(--r); font-size: 12px; }
}
@media (max-width: 860px) {
  .sec-head { flex-direction: column; gap: 12px; }
  .sec-head h2 { font-size: 24px; line-height: 1.25; }
  .podium-card { padding: 20px; }
  .podium .p.first .sc { font-size: 26px; }
}

/* Ranking rows — Figma table: 1px-bordered panel, 36px header, 52/60px rows.
   Columns 28px rank | bar | 72px numerics, 14px inset, 16px gaps (10px on the home card). */
.scale { text-align: right; margin-bottom: 8px; }
.rows { border: 1px solid var(--line); border-radius: 6px; background: var(--row-base); overflow: hidden; }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 72px var(--xc, ); gap: 0 16px; align-items: center;
  padding: 9px 14px 10px; border-top: 1px solid var(--line); min-height: 52px; }
/* Figma alternates the row ground; the header is child 1, so data rows start even */
.rows .row:not(.h):nth-child(odd) { background: var(--row-alt); }
.rows.compact .row { gap: 0 10px; grid-template-columns: 28px minmax(0, 1fr) 74px; min-height: 60px; padding: 13px 14px 14px; }
.row .n { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.row.lead .n { color: var(--ink); font-weight: 600; }
/* the bar carries the model name, as the colour handoff's labelOnBar expects */
.row .bar { position: relative; height: 32px; background: var(--track); border-radius: 6px; overflow: visible; }
.row .bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; min-width: 2px;
  /* the fill is an <i>: reset the UA italic so nothing inherits it */
  font-style: normal; }
/* The label is a sibling of the fill. placeBarLabels() measures it and sets left/max-width,
   then flags whether it ended up on the fill (--on, the handoff's labelOnBar) or past it. */
/* width:100% is load-bearing, not cosmetic: clip-path percentages resolve against this
   element's own box, so the label must span the whole bar for inset(... --fw ...) to cut
   at the fill's edge. Sized to its content it cut at --fw of the TEXT instead, which put
   a visible seam through the middle of the name. Content stays left-aligned regardless. */
.row .bar > .lab { position: absolute; top: 0; left: 0; height: 32px; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 0;
  white-space: nowrap; overflow: hidden; font-style: normal; pointer-events: none; }
/* Base copy reads against the track; the overlay is clipped to the fill and reads
   against it. Where the label is shorter than the fill the overlay covers it entirely,
   so short-bar and long-bar rows look identical and every name starts at the same x. */
.row .bar > .lab { color: var(--ink); }
.row .bar > .lab.on-fill { color: var(--on, #fff);
  -webkit-clip-path: inset(0 calc(100% - var(--fw, 100%)) 0 0);
  clip-path: inset(0 calc(100% - var(--fw, 100%)) 0 0); }
.row .bar .lab .nm { font-size: 13px; font-weight: 500; line-height: 20px; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; padding-right: 1px; }
.row .bar .lab .sub { font-size: 12px; line-height: 20px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row .bar .lab .sub::before { content: "· "; }
.row .bar .lab .pic { width: 20px; height: 20px; background: var(--chip); border: 0; flex: none; }
.row .bar .lab .pic.mono { font-size: 7px; }
/* 95% interval: kept from the current site, no Figma counterpart. Sits over the fill. */
.row .bar s { position: absolute; top: 50%; transform: translateY(-50%); height: 18px; border-left: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(255,255,255,.75); text-decoration: none; pointer-events: none; }
.row .v { text-align: right; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.row.lead .v { font-weight: 600; }
.row .v small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; font-weight: 400; }
.row .x { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row.h, .rows.compact .row.h { min-height: 36px; padding: 10px 14px; border-top: 0;
  background: var(--thead-bg); border-bottom: 1px solid var(--line); }
.row.h span { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--thead-ink); }
.row.h .v, .row.h .x { text-align: right; }
.rows-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.rows-foot button { background: none; border: 0; padding: 0; color: var(--accent); font-size: 13px; cursor: pointer; }
.rows-foot button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .row, .rows.compact .row { grid-template-columns: 24px minmax(0, 1fr) 62px; gap: 0 8px; padding: 10px; }
  .row .x, .row.h .x { display: none; }
  .row .bar .lab .nm { font-size: 12px; }
  /* Figma gives no guidance below 1440: drop the provider/harness line and keep the
     name clipped to the bar so nothing runs past the edge. */
  .row .bar .lab .sub { display: none; }
  .row .bar > .lab { max-width: calc(100% - 8px); overflow: hidden; }
}

/* Provider marks */
.pic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.pic svg { width: var(--g, 55%); height: var(--g, 55%); }
/* Full-colour brand marks sit on a white chip and fill more of it than the
   monochrome glyphs do. One variable so every chip size scales with it. */
.pic.logo { background: var(--chip); --g: 72%; }
.podium .who .pic { --g: 50%; }
.pic.mono { color: #fff; border: 0; font: 600 8px/1 var(--sans); letter-spacing: -.02em; }

/* Hardest-mode cards — Figma 3 x 362.7, 16px gap, 52px rows */
.dims { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
/* collapse the columns before the cards get too narrow to hold a bar */
@media (max-width: 900px) { .dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dims { grid-template-columns: 1fr; } }
.dim { min-width: 0; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r); padding: 24px; }
@media (max-width: 620px) { .dim { padding: 18px; } }
.dim h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; font-family: var(--serif); font-weight: 400;
  font-size: 20px; line-height: 29px; letter-spacing: -.3px; color: var(--ink); }
.dim h3 .k { font-family: var(--sans); font-size: 12px; letter-spacing: .2px; color: var(--ink-3); }
.dim .rows { border-radius: var(--r-card); }
.dim .row { grid-template-columns: minmax(0, 1fr) 54px; gap: 0 12px; min-height: 52px; padding: 10px 14px; }
.dim .row.h { display: none; }

/* Capability strips — Figma strip 80 tall, label 170 + plot 854, legend above */
.strip-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 12px; }
/* Direct child only. .pic is itself a <span> nested inside this wrapper, so an
   unscoped descendant selector also matched the chip and replaced its
   display:grid/place-items:center with inline-flex -- where justify-items does
   nothing and the main axis falls back to flex-start. That pinned every legend
   logo to the left edge of its circle (1.96px off centre, 3.15px for the
   sprite icons) while align-items still centred it vertically. */
.strip-legend > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--ink-2); }
.strip-legend .pic { width: 16px; height: 16px; }
.strip-legend .pic.mono { font-size: 6px; }
.strips { display: grid; gap: 0; }
.strip { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 30px; align-items: center;
  border-top: 1px solid var(--line); }
.strip:first-child { border-top: 0; }
.strip .t { text-align: right; font-size: 13px; line-height: 16px; color: var(--ink-2); }
.strip .t small { display: block; font-size: 11px; letter-spacing: .2px; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.lane { position: relative; height: 80px; margin: 0 12px; }
.lane::before { content: ""; position: absolute; left: -12px; right: -12px; top: 40px; border-top: 1px solid var(--line); }
.dot { position: absolute; top: 30px; transform: translateX(-50%); }
.dot .pic { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--surface); }
.dot .pic.mono { font-size: 7px; }
.dot.lead .pic { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px currentColor; }
.dot:hover { z-index: 3; }
.val { position: absolute; top: 10px; transform: translateX(-50%); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.val.dn { top: 56px; }
.val.lead { font-weight: 600; font-size: 12px; }
.dot .tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; background: var(--ink);
  color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: var(--r); white-space: nowrap; display: none; }
.dot:hover .tip { display: block; }
.dot.r .tip { left: auto; right: -6px; transform: none; }
.dot.l .tip { left: -6px; transform: none; }
.grp-h { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.grp-h:first-child { margin-top: 0; }
.grp-h h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; }
.grp-h .k { font-size: 12px; letter-spacing: .2px; color: var(--ink-3); }
.grp-h .c { margin-left: auto; font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px) { .strip { grid-template-columns: 1fr; gap: 0; } .strip .t { text-align: left; padding: 12px 0 0; } }

/* Cost chart — type and weights from the Figma card (4975:2558) */
svg.cost { width: 100%; height: auto; overflow: visible; display: block; }
svg.cost text { font: 11px var(--sans); fill: var(--ink-3); }
svg.cost .ax { font-size: 11px; letter-spacing: .08em; fill: var(--ink-3); }
svg.cost line { stroke: var(--line); }
svg.cost line.axis { stroke: var(--line-2); }
svg.cost .lab { font-size: 13px; font-weight: 500; fill: var(--ink); }
svg.cost .lab.f { font-weight: 600; }
svg.cost .lab-p { font-size: 12px; fill: var(--ink-3); }
svg.cost .mono { font: 600 9px var(--sans); fill: #fff; }
svg.cost .big { font-family: var(--serif); font-size: 38px; letter-spacing: -1px; }

/* Key findings — Figma rows 92 tall: index | big number (160) | sentence */
.findings-card { padding: 0; }
.findings { list-style: none; padding: 0; margin: 0; counter-reset: f; }
.findings li { display: grid; grid-template-columns: 24px 160px minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 24px; min-height: 92px; border-top: 1px solid var(--line); }
.findings li:first-child { border-top: 0; }
.findings li::before { counter-increment: f; content: counter(f, decimal-leading-zero); font-size: 13px; color: var(--ink-3); }
.findings .n { font-family: var(--serif); font-size: 34px; line-height: 44px; color: var(--accent); font-variant-numeric: tabular-nums; }
.findings p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); }
@media (max-width: 700px) { .findings li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px 16px; } .findings p { grid-column: 1 / -1; } }

/* Analysis prose + figures — Figma card padding 33, figures 1054 wide */
.prose { padding: 32px; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -.3px; margin: 0 0 12px; color: var(--ink); }
.prose p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 860px; }
.prose p b { color: var(--ink); font-weight: 600; }
/* Lists inside analysis prose. First used to separate the Browser Gyms app
   roster from the prose describing how a task runs. */
.prose ul { margin: 0 0 14px; padding: 0; list-style: none; max-width: 860px; }
.prose li { position: relative; margin: 0 0 7px; padding-left: 18px; font-size: 15px;
  line-height: 1.7; color: var(--ink-2); }
.prose li:last-child { margin-bottom: 0; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ink-3); }
.prose li b { color: var(--ink); font-weight: 600; }
.prose .part { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--line); }
.prose .part:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
figure.fig { margin: 24px 0 0; }
figure.fig figcaption { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
figure.fig figcaption b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); }
figure.fig figcaption span { font-size: 13px; color: var(--ink-3); }
figure.fig .foot { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--ink-3) !important; }
figure.fig img { width: 100%; height: auto; background: #fff; border-radius: var(--r); }
.scroll { overflow-x: auto; }
table.heat { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
table.heat th { font-weight: 500; color: var(--ink-3); text-align: center; padding: 4px 3px 8px; font-size: 11px; line-height: 1.3; vertical-align: bottom; }
table.heat tbody th { text-align: left; color: var(--ink-2); white-space: nowrap; padding-right: 12px; font-size: 13px; font-weight: 400; }
table.heat td { text-align: center; padding: 8px 3px; min-width: 42px; }
table.dt { border-collapse: collapse; width: 100%; font-size: 14px; }
table.dt th { font-weight: 500; font-size: 12px; letter-spacing: .2px; color: var(--ink-3); text-align: left; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line-2); }
table.dt td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; vertical-align: top; }
table.dt td:first-child { color: var(--ink); }
.hb { display: grid; gap: 10px; }
.hb div { display: grid; grid-template-columns: minmax(120px, 270px) 1fr 52px; gap: 14px; align-items: center; font-size: 14px; }
.hb .t { height: 32px; background: var(--wash); border-radius: var(--r); }
.hb .t i { display: block; height: 100%; background: var(--accent); border-radius: var(--r); }
.hb .t i.warm { background: var(--warm); }
.hb .v { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 560px) { .hb div { grid-template-columns: 1fr 48px; } .hb .t { grid-column: 1 / -1; grid-row: 2; } }
.stk { display: grid; gap: 9px; }
.stk div.r { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; font-size: 13px; }
.stk .b { display: flex; height: 24px; gap: 2px; border-radius: var(--r); overflow: hidden; }
.stk .b i { display: grid; place-items: center; font-size: 11px; font-style: normal; overflow: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
@media (max-width: 560px) { .stk div.r { grid-template-columns: 1fr; gap: 4px; } }
/* The CTA is the only thing in its card now, so it carries no divider. */
.cta-note { margin: 0; font-size: 15px; color: var(--ink-2); }
.cta-note b { color: var(--ink); }
.cta-note a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Home: board cards — Figma card 1120x560, 25px padding, head / table / CTAs */
.board { display: block; padding: 0 0 24px; border: 0; }
/* Figma: rgba(255,255,255,.7) over a 6px backdrop blur, 1px rgba(18,18,18,.12), r=4.
   The translucency is what lets the page gradients show through the cards. */
.card { background: var(--card-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--card-line); border-radius: var(--r); padding: var(--card-pad); }
.card-head { margin-bottom: 20px; }
.card-head .lbl { display: block; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.card-head h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -.3px; margin: 0 0 6px; color: var(--ink); }
.card-head h2 a { text-decoration: none; color: inherit; }
.card-head h2 a:hover { color: var(--accent); }
.card-head h2 em { font-style: normal; color: inherit; }
.card-head p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.card .meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card .meta .lbl { font-size: 12px; letter-spacing: .2px; text-transform: uppercase; color: var(--ink-3); }
.card-ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: var(--r);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cta svg { width: 12px; height: 12px; flex: none; }
.cta-1 { background: var(--cta-bg); color: var(--cta-ink); }
.cta-1:hover { background: var(--cta-bg-hover); }
.cta-2 { background: var(--cta2-bg); color: var(--ink); border: 1px solid var(--cta2-line); }
.cta-2:hover { background: var(--wash); }
.group-h { display: block; padding: 40px 0 24px; }
.group-h h2 { margin: 0 0 6px; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 32px;
  line-height: 1.3; letter-spacing: -.5px; color: var(--ink); }
.group-h p { margin: 0; font-size: 14px; line-height: 17px; color: var(--ink-2); }
.group-h + .board { border-top: 0; margin-top: 0; }
@media (max-width: 860px) {
  .card { padding: 18px; }
  .card-head h2 { font-size: 24px; }
  .group-h h2 { font-size: 24px; }
}

/* Footer — Figma 1440x323: back-to-top rule, brand row, legal row */
footer { padding: 0 0 56px; }
footer .wrap { display: block; font-size: 14px; color: var(--ink-2); }
footer .to-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 44px; margin-top: 65px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 500; line-height: 28px; }
footer .to-top svg { width: 6px; height: 10px; }
footer .to-top:hover { color: var(--accent); }
footer .f-brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 0 0; }
footer .f-brand img { width: 119px; height: auto; }
footer .f-brand span { font-size: 14px; line-height: 16px; color: var(--ink-2); text-align: right; }
footer .f-legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 0; font-size: 14px; color: var(--ink-3); }
footer a { text-decoration: none; color: inherit; }
footer .f-legal a:hover { color: var(--ink); }
@media (max-width: 640px) {
  footer .f-brand, footer .f-legal { flex-direction: column; align-items: flex-start; }
  footer .f-brand span { text-align: left; }
}