/* ==========================================================================
   1. Design tokens — Dnotitia NA
   Single source for CSS and Figma Variables (see tokens.json).
   Naming maps 1:1: --color-text-primary → color/text/primary
   ========================================================================== */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/pretendard-variable.woff2") format("woff2-variations");
}

:root {
  /* ---------- Primitive: neutral ---------- */
  --neutral-0: #ffffff;
  --neutral-25: #f7f7f5;
  --neutral-50: #f0f0ee;
  --neutral-100: #e8e8e5;
  --neutral-200: #dcdcd8;
  --neutral-300: #c8c8c4;
  --neutral-400: #a3a3a0;
  --neutral-500: #737371;
  --neutral-600: #555553;
  --neutral-700: #3d3d3b;
  --neutral-800: #4a4a48;
  --neutral-900: #18181a;
  --neutral-950: #0e0e10;

  /* ---------- Primitive: brand ---------- */
  --orange-300: #ff9a5c;
  --orange-500: #f35a00;
  --orange-600: #d64f00;
  --orange-700: #c94600;
  --orange-800: #a83800;
  --orange-rgb: 243 90 0;
  --ink-rgb: 24 24 26;

  /* ---------- Semantic: color ---------- */
  --color-bg: var(--neutral-25);
  --color-surface: var(--neutral-0);
  --color-surface-muted: var(--neutral-50);
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary: var(--neutral-500);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-900);
  --color-brand: var(--orange-500);
  --color-brand-strong: var(--orange-600);
  --color-focus: var(--orange-500);
  --color-border-input: #8c8c89;                     /* form control edges: ≥ 3:1 on bg and surface */
  --color-danger: #b42318;                           /* errors only; AA on bg and surface */
  --color-scrim: rgb(247 247 245 / 82%);          /* readability layer over the animated page grid */
  --color-button-primary-bg: var(--neutral-900);
  --color-button-primary-bg-hover: var(--neutral-700);
  --color-button-primary-text: var(--neutral-0);
  --color-button-primary-hover-start: var(--orange-700);   /* hover: ink fades to a deep orange gradient; white text stays above 4.5:1 */
  --color-button-primary-hover-end: var(--orange-800);
  --color-button-primary-hover-glow: rgb(255 122 46 / 64%); /* follows the pointer */
  --color-button-primary-text-hover: var(--neutral-0);
  --color-heading-chrome-top: var(--neutral-900);    /* heading chrome: graphite gradient + soft shine */
  --color-heading-chrome-bottom: var(--neutral-800);
  --color-heading-chrome-shine: rgb(255 255 255 / 55%);

  /* ---------- Semantic: data (charts) ---------- */
  --color-data-1-start: var(--neutral-800);   /* server acquisition */
  --color-data-1-end: var(--neutral-900);
  --color-data-2-start: var(--orange-300);    /* power */
  --color-data-2-end: var(--orange-500);
  --color-data-3-start: #c9c9c5;              /* maintenance */
  --color-data-3-end: #9a9a96;

  /* ---------- Spacing (4–120 scale only) ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---------- Typography (px; size / line-height pairs) ---------- */
  --font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-display: 64px;  --line-height-display: 72px;
  --font-size-h1: 48px;       --line-height-h1: 56px;
  --font-size-h2: 40px;       --line-height-h2: 48px;
  --font-size-h3: 24px;       --line-height-h3: 32px;
  --font-size-manifesto: 32px; --line-height-manifesto: 40px;  /* Home statement: large but no louder than H2 */
  --font-size-body-lg: 18px;  --line-height-body-lg: 28px;
  --font-size-body: 16px;     --line-height-body: 24px;
  --font-size-body-sm: 14px;  --line-height-body-sm: 20px;
  --font-size-caption: 13px;  --line-height-caption: 18px;  /* floor: nothing smaller than 13px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-heading: -1px;   /* display, h1, h2 */
  --line-height-control: 24px;      /* buttons, links, chips, inputs: height = padding + 24 */
  --measure-body: 680px;   /* paragraphs */
  --measure-lead: 600px;   /* hero lead */

  /* ---------- Layout ---------- */
  --container-max: 1200px;          /* content width; padding is added outside it */
  --container-padding: 32px;        /* 32 desktop · 24 tablet · 20 mobile (frames 1440 / 768 / 375) */
  --grid-columns: 12;               /* 12 desktop · 8 tablet · 4 mobile */
  --grid-gap: 24px;                 /* 24 desktop · 24 tablet · 16 mobile */
  --section-space: var(--space-120); /* 120 desktop · 80 tablet · 64 mobile */
  --section-header-gap: var(--space-48); /* header → content */
  --group-gap: var(--space-64);          /* content group → content group */
  --header-height: 72px;

  /* ---------- Components ---------- */
  --button-height-md: 40px;         /* result: 8 + 24 + 8 */
  --button-padding-y-md: var(--space-8);
  --button-padding-y-lg: var(--space-12);
  --input-padding-y: var(--space-12);
  --chip-padding-y: var(--space-4);
  --button-height-lg: 48px;         /* result: 12 + 24 + 12 */
  --button-padding-x: 24px;
  --input-height: 48px;
  --input-padding-x: 16px;
  --textarea-min-height: 160px;
  --checkbox-size: 20px;
  --icon-size: 16px;
  --chart-track-height: 280px;
  --chart-column-width: 120px;
  --chart-bar-width: 64px;
  --chart-bar-width-sm: 44px;
  --logo-width: 112px;
  --logo-height: 24px;
  --product-image-max: 560px;
  --product-image-max-sm: 480px;
  --product-image-max-xs: 360px;
  --spec-label-width: 120px;
  --code-log-lines: 5;              /* hero query console, visible lines */
  --pixel-icon-size: 72px;          /* 12 × 12 tiles on the 6 px pixel pitch */
  --pixel-icon-tile: 6px;
  --nav-menu-width: 480px;          /* GNB dropdown panel, two columns */
  --chip-3d-stage: 480px;           /* VDPU page hero, square stage for the 3D chip */
  --page-nav-height: 48px;          /* sticky in-page nav */
  --bar-chart-bar-height: 16px;
  --bar-chart-value-space: 48px;    /* safe area after the longest bar for its end label */
  --code-line-height: 24px;

  /* ---------- Chip 3D materials (product rendering, not UI color) ---------- */
  --chip-edge: #1c1d20;
  --chip-substrate: #2b2c2f;
  --chip-lid-side: #cfd0d0;

  /* ---------- Elevation (product imagery only) ---------- */
  --shadow-product: drop-shadow(0 16px 24px rgb(var(--ink-rgb) / 18%));
  --shadow-thumbnail: drop-shadow(0 8px 16px rgb(var(--ink-rgb) / 16%));

  /* ---------- Motion ---------- */
  --hover-zoom: 104%;               /* product image hover */
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-chart: 1100ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);       /* UI motion */
  --ease-fade: cubic-bezier(0.33, 0, 0.2, 1); /* page and reveal fades */
  --ease-enter: cubic-bezier(0.25, 1, 0.5, 1); /* objects arriving and settling */
  --duration-enter: 1300ms;
}

/* Inverse scope (CTA band). Same names, dark values. */
[data-theme="dark"] {
  --color-bg: var(--neutral-950);
  --color-surface: var(--neutral-900);
  --color-text-primary: var(--neutral-25);
  --color-text-secondary: var(--neutral-400);
  --color-text-tertiary: var(--neutral-500);
  --color-border: rgb(255 255 255 / 14%);
  --color-border-strong: var(--neutral-25);
  --color-scrim: rgb(14 14 16 / 72%);
  --color-border-input: #7a7a77;
  --color-danger: #ff8a7a;
  --color-button-primary-bg: var(--neutral-0);
  --color-button-primary-bg-hover: var(--neutral-100);
  --color-button-primary-text: var(--neutral-900);
  --color-button-primary-text-hover: var(--neutral-0);
  --color-heading-chrome-top: var(--neutral-0);
  --color-heading-chrome-bottom: var(--neutral-400);
  --color-heading-chrome-shine: rgb(255 255 255 / 95%);
}

/* Responsive type: tablet 768–1199 · mobile < 768 */
@media (max-width: 1199px) {
  :root {
    --font-size-display: 48px; --line-height-display: 56px;
    --font-size-h1: 40px;      --line-height-h1: 48px;
    --font-size-h2: 32px;      --line-height-h2: 40px;
    --font-size-h3: 20px;      --line-height-h3: 28px;
    --font-size-manifesto: 28px; --line-height-manifesto: 36px;
  }
}
@media (max-width: 767px) {
  :root {
    --font-size-display: 40px; --line-height-display: 48px;
    --font-size-h1: 32px;      --line-height-h1: 40px;
    --font-size-h2: 28px;      --line-height-h2: 36px;
    --font-size-manifesto: 24px; --line-height-manifesto: 32px;
  }
}

/* ==========================================================================
   Dnotitia NA — Site styles
   (1 Design tokens → tokens.css) · 2 Reset/Base · 3 Typography · 4 Layout
   5 Components · 6 Page sections · 7 Utilities · 8 Responsive

   Layout contract
   Section → .container (1200 + side padding) → .grid (12 / 8 / 4 cols, 24 gap) → component
   Every grid child declares its span with --col-span / --col-span-tablet / --col-span-mobile.
   No section sets its own width, margin-left or offset. Absolute positioning is only
   used for canvases, the content scrim, chart labels and the hero product field.
   ========================================================================== */

@property --col-span { syntax: "<integer>"; inherits: false; initial-value: 12; }
@property --col-span-tablet { syntax: "<integer>"; inherits: false; initial-value: 8; }
@property --col-span-mobile { syntax: "<integer>"; inherits: false; initial-value: 4; }
@property --col-start { syntax: "auto | <integer>"; inherits: false; initial-value: auto; }   /* desktop only: a column to start on, so space between groups comes from the grid, not margins */

/* 2. Reset / Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-24)); }
html:has(.page-nav) { scroll-padding-top: calc(var(--header-height) + var(--page-nav-height) + var(--space-24)); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
table, caption { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, dl, dd, figure, ul, ol, address, pre { margin: 0; }
:where(ul[role="list"], ol) { list-style: none; padding: 0; }   /* zero specificity, so component padding always wins */
address { font-style: normal; }
[hidden] { display: none !important; }   /* components set display; hidden must still win */
a { color: inherit; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
/* In-page links land below the sticky header (and the VDPU page nav), and glide there unless motion is reduced */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main [id] { scroll-margin-top: calc(var(--header-height) + var(--space-24)); }
.page-nav ~ section[id] { scroll-margin-top: calc(var(--header-height) + var(--page-nav-height) + var(--space-24)); }

/* 3. Typography ------------------------------------------------------------ */
.hero__title, .page-hero__title { font-size: var(--font-size-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-heading); font-weight: var(--font-weight-semibold); text-wrap: balance; max-width: 13ch; }
.page-hero__title { max-width: 16ch; }
.section-header__title, .cta-band__title { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-heading); font-weight: var(--font-weight-semibold); text-wrap: balance; }
.item__title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: 0; font-weight: var(--font-weight-semibold); }
.hero__lead, .section-header__description, .cta-band__body { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-secondary); max-width: var(--measure-body); }
.hero__lead { max-width: var(--measure-lead); }
.list-title { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-semibold); }
.note-line, .product-visual__caption { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-tertiary); }
.footnote { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); max-width: var(--measure-body); }

/* Heading chrome: a graphite gradient with a soft shine that passes now and then */
.heading-chrome {
  color: var(--color-text-primary);
  background-image:
    linear-gradient(100deg, transparent 0 42%, var(--color-heading-chrome-shine) 50%, transparent 58% 100%),
    linear-gradient(180deg, var(--color-heading-chrome-top) 20%, var(--color-heading-chrome-bottom) 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.heading-chrome.is-visible { animation: chrome-shine 9s var(--ease) 300ms infinite; }

/* 4. Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container-max) + var(--container-padding) * 2); margin-inline: auto; padding-inline: var(--container-padding); }
.section { position: relative; z-index: 1; padding-block: var(--section-space); }
.section__stack { display: flex; flex-direction: column; gap: var(--group-gap); }
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-48); }
.grid > * { min-width: 0; grid-column: var(--col-start) / span var(--col-span); }
.grid--subgrid { grid-template-columns: subgrid; }
.table-wrap { overflow-x: auto; }

/* 5. Components ------------------------------------------------------------ */

/* Button — primary / secondary / ghost × md / lg */
.button { --button-edge: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: 0; box-shadow: inset 0 0 0 1px var(--button-edge); border-radius: var(--radius-md); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); line-height: var(--line-height-control); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), color 400ms var(--ease-fade); }
.button--md { min-height: var(--button-height-md); padding: var(--button-padding-y-md) var(--button-padding-x); font-size: var(--font-size-body-sm); line-height: var(--line-height-control); }
.button--lg { min-height: var(--button-height-lg); padding: var(--button-padding-y-lg) var(--button-padding-x); line-height: var(--line-height-control); }
/* Primary: ink at rest. On hover or keyboard focus a deep orange gradient fades in over 400 ms,
   brightest where the pointer is (--mx, --my, set by site.js). The label stays white above 4.5:1. */
.button--primary { position: relative; isolation: isolate; overflow: hidden; background: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
.button--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(96px circle at var(--mx, 50%) var(--my, 50%), var(--color-button-primary-hover-glow), transparent 72%), linear-gradient(120deg, var(--color-button-primary-hover-start), var(--color-button-primary-hover-end)); opacity: 0; transition: opacity 400ms var(--ease-fade); }
.button--primary:hover, .button--primary:focus-visible { color: var(--color-button-primary-text-hover); }
.button--primary:hover::before, .button--primary:focus-visible::before { opacity: 1; }
.button--secondary { --button-edge: var(--color-border); background: transparent; color: var(--color-text-primary); }
.button--secondary:hover { --button-edge: var(--color-border-strong); }
.button--ghost { min-height: var(--button-height-md); padding: var(--button-padding-y-md) 0; background: none; color: var(--color-text-primary); font-size: var(--font-size-body-sm); line-height: var(--line-height-control); }
.button--ghost:hover { color: var(--color-brand-strong); }
.button:disabled, .button[aria-disabled="true"] { opacity: 40%; pointer-events: none; }
.button__icon { width: var(--icon-size); height: var(--icon-size); flex: none; }
.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }

/* Logo */
.site-logo { display: inline-flex; align-items: center; min-height: var(--button-height-md); color: var(--color-text-primary); }
.site-logo__mark { width: var(--logo-width); height: var(--logo-height); }

/* Section header */
.section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); margin-bottom: var(--section-header-gap); }
.section-header--flush { margin-bottom: 0; }
.section-header--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.section-header__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }

/* Rule item — the one grouping pattern: a strong top rule, then content */
.item, .check-list, .spec-table, .office { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-24); border-top: 1px solid var(--color-border-strong); }
.item__body { color: var(--color-text-secondary); }
.item__media { display: block; padding-bottom: var(--space-12); line-height: 0; }
.pixel-icon { display: block; width: var(--pixel-icon-size); height: var(--pixel-icon-size); }
.pixel-icon[data-pixel-scale] { width: auto; height: auto; }
.item--active { border-top-color: var(--color-brand); box-shadow: inset 0 1px 0 var(--color-brand); }

/* Spec item (dense variant of the rule item) */
.spec-item { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-16); border-top: 1px solid var(--color-border-strong); }
.spec-item dt { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.spec-item dd { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }



/* Table — compare variant (qualitative, highlighted VDPU column) */
.table { --table-pad-y: 10px; font-size: var(--font-size-body); line-height: var(--line-height-body); font-variant-numeric: tabular-nums; }
.table__caption { caption-side: bottom; text-align: left; padding-top: var(--space-12); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.table th, .table td { padding: var(--table-pad-y) var(--space-12); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.table th:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th { font-weight: var(--font-weight-semibold); border-bottom-color: var(--color-border-strong); }
.table--compare thead th { border-top: 1px solid var(--color-border-strong); }
.table--compare tbody th { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); width: 28%; }
.table--compare td { color: var(--color-text-secondary); }
/* Highlight column (VDPU): reads as one raised card across the table. The ink header rises 12 px above the table top with
   rounded corners; cells are white, framed by 1 px ink sides; a rounded foot closes the card 12 px below the last row.
   Other columns step back to secondary text. Tables share one compact format: 16 px text, 10 px rows. */
.table-wrap:has(.table__highlight) { padding-block: var(--space-12); }
.table--compare { --hl-edge: var(--color-text-primary); --hl-pad: var(--space-24); }
.table--compare .table__caption { padding-top: var(--space-24); }
.table--compare .table__highlight { position: relative; background-color: var(--color-surface); color: var(--color-text-primary); padding-inline: var(--hl-pad); box-shadow: inset 1px 0 0 var(--hl-edge), inset -1px 0 0 var(--hl-edge); transition: background-color 200ms var(--ease-fade); }
.table--compare td.table__highlight { font-weight: var(--font-weight-medium); }
.table--compare th.table__highlight, .table--compare td.table__highlight { padding-right: var(--hl-pad); }
.table--compare thead .table__highlight { background-color: var(--hl-edge); color: var(--color-button-primary-text); border-top-color: var(--hl-edge); border-bottom-color: var(--hl-edge); box-shadow: none; }
.table--compare thead .table__highlight::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 13px; background: var(--hl-edge); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.table--compare tbody tr:last-child .table__highlight { border-bottom-color: transparent; }
.table--compare tbody tr:last-child .table__highlight::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 13px; margin-top: -1px; background: var(--color-surface); box-shadow: inset 1px 0 0 var(--hl-edge), inset -1px 0 0 var(--hl-edge), inset 0 -1px 0 var(--hl-edge); border-radius: 0 0 var(--radius-lg) var(--radius-lg); transition: background-color 200ms var(--ease-fade); }
.table__hl-title { display: block; }
.table__hl-sub { display: block; margin-top: var(--space-4); font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-regular); color: rgb(255 255 255 / 72%); }
/* Performance: a brand marker leads every VDPU cell */
.table--compare:not(.fit-table) td.table__highlight { padding-left: calc(var(--hl-pad) + 20px); }
.table--compare:not(.fit-table) td.table__highlight::before { content: ""; position: absolute; left: var(--hl-pad); top: calc(var(--table-pad-y) + 8px); width: 8px; height: 8px; background: var(--color-brand); }
/* Fit: a check on every VDPU row; the CPU column steps back to tertiary text */
.fit-table { table-layout: fixed; }
.fit-table__col-signal { width: 24%; } .fit-table__col-vdpu { width: 44%; } .fit-table__col-cpu { width: 32%; }
.fit-table__badge { display: inline-flex; align-items: center; gap: var(--space-8); }
.fit-table__badge::before { content: ""; width: 8px; height: 8px; background: var(--color-brand); }
.fit-table td.table__highlight { padding-left: calc(var(--hl-pad) + 28px); }
.fit-table td.table__highlight::before { content: ""; position: absolute; left: var(--hl-pad); top: calc(var(--table-pad-y) + 2px); width: 20px; height: 20px; border-radius: 50%; background: var(--color-text-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 10 3 3 5-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat; transition: transform 400ms var(--ease-enter) calc(var(--r, 0) * 90ms + 120ms), opacity 300ms var(--ease-fade) calc(var(--r, 0) * 90ms + 120ms); }
.fit-table thead th:last-child, .fit-table td:last-child { color: var(--color-text-tertiary); }
.fit-table tbody tr:nth-child(1) { --r: 1; } .fit-table tbody tr:nth-child(2) { --r: 2; } .fit-table tbody tr:nth-child(3) { --r: 3; } .fit-table tbody tr:nth-child(4) { --r: 4; } .fit-table tbody tr:nth-child(5) { --r: 5; }
.js .fit-table:not(.is-in) td.table__highlight::before { transform: scale(0); opacity: 0; }
.fit-table tbody tr:hover th, .fit-table tbody tr:hover td:last-child { color: var(--color-text-primary); }
.table--compare tbody tr:hover .table__highlight, .table--compare tbody tr:last-child:hover .table__highlight::after { background-color: var(--color-surface-muted); }
.fit-table tbody tr:hover td.table__highlight::before { transform: scale(1.1); transition-delay: 0ms; }

/* Recognition cards: two featured cards with a key figure (counts up on entry), three selections; each carries a faint line mark.
   Cards rise in on scroll (80 ms apart, replay on each visit). Hover lifts the card, fades in a 1 px orange gradient border (sweeps from the top-left corner) and warms the mark. */
/* News and events: featured press release (links out), events with date blocks, press links, milestones, newsletter slot. */
.news { row-gap: var(--space-48); }
.news-feature { --col-span: 7; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-16); transition: opacity 700ms var(--ease-fade), transform 700ms var(--ease); }
.js .news-feature:not(.is-in) { opacity: 0; transform: translateY(var(--space-24)); }
.news-feature__link { position: relative; display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
/* One continuous 1 px orange gradient border over media and body (drawn above both so the media never cuts it). Hover brightens it. */
.news-feature__link::after { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-300) 30%, var(--color-border) 65%) 100% 100% / 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; transition: background-position var(--duration-slow) var(--ease); }
.news-feature__link:hover::after { background-position: 0 0; }
.news-feature__media { position: relative; display: grid; place-items: center; height: 216px; padding: var(--space-24) var(--space-48); background-color: var(--color-surface-muted); background-image: radial-gradient(circle at 18% 28%, rgb(var(--orange-rgb) / 12%) 0, transparent 34%), radial-gradient(circle at 84% 78%, rgb(var(--orange-rgb) / 9%) 0, transparent 38%), radial-gradient(circle at 62% 8%, rgb(var(--ink-rgb) / 5%) 0, transparent 30%), radial-gradient(circle at 40% 100%, rgb(255 255 255 / 70%) 0, transparent 45%); background-size: 120% 120%; background-position: 50% 50%; transition: background-position 1200ms var(--ease); }
.news-feature__link:hover .news-feature__media { background-position: 40% 60%; }
.news-feature__media img { grid-area: 1 / 1; width: 100%; max-width: 336px; height: auto; filter: var(--shadow-thumbnail); transition: transform 700ms var(--ease-enter); }
.news-feature__link:hover .news-feature__media img:first-child { transform: translate(-8px, -6px); }
.news-feature__link:hover .news-feature__chip { transform: translate(10px, 8px); }
.news-feature__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); flex: 1; }
.news-feature__title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-semibold); }
.news-feature__summary { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); max-width: 560px; }
.news-feature__cta { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: auto; padding-top: var(--space-8); font-weight: var(--font-weight-semibold); color: var(--color-brand-strong); }
.news-feature__cta .icon, .press-item__icon { transition: transform var(--duration-base) var(--ease); }
.news-feature__link:hover { box-shadow: 0 16px 32px rgb(var(--orange-rgb) / 10%); }
.news-feature__link:hover .news-feature__cta .icon, .press-item:hover .press-item__icon { transform: translate(2px, -2px); }
.news-feature__link:focus-visible, .press-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.news-meta > * + *::before { content: "·"; margin-right: var(--space-8); }
.news-meta__type { font-weight: var(--font-weight-semibold); color: var(--color-brand-strong); }
.news-events { --col-span: 5; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-16); }
.event-list { display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--color-border-strong); }
.event { flex: 1 1 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-content: center; gap: var(--space-16); padding-block: var(--space-16); border-bottom: 1px solid var(--color-border); }
.event:last-child { border-bottom-color: var(--color-border-strong); }
.event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 72px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); background: var(--color-surface); font-variant-numeric: tabular-nums; transition: box-shadow var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease); }
.event__month { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-brand-strong); text-transform: uppercase; }
.event__day { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-semibold); }
.event__year { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.event:first-child .event__date { background: var(--color-text-primary); box-shadow: none; }
.event:first-child .event__day { color: var(--color-surface); } .event:first-child .event__year { color: var(--color-text-tertiary); } .event:first-child .event__month { color: var(--orange-300); }
.event:hover .event__date { box-shadow: inset 0 0 0 1px var(--color-brand); }
.event__body { display: flex; flex-direction: column; gap: var(--space-4); }
.event__name { font-weight: var(--font-weight-semibold); }
.event__place { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.event__note { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-tertiary); }
.news-press { --col-span: 7; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-16); }
.press-list { display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--color-border-strong); }
.press-list > li { display: flex; flex: 1 1 0; }
.press-list > li:last-child .press-item { border-bottom-color: var(--color-border-strong); }
.press-item { flex: 1; justify-content: center; position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16) var(--space-48) var(--space-16) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.press-item__title { transition: color var(--duration-base) var(--ease); }
.press-item:hover .press-item__title { color: var(--color-brand-strong); }
.press-item__title { font-weight: var(--font-weight-medium); }
.press-item__icon { position: absolute; right: 0; top: 50%; margin-top: -8px; color: var(--color-text-tertiary); }
.press-item:hover .press-item__icon { color: var(--color-brand-strong); }
.news-milestones { --col-span: 5; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-16); }
.milestones { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) 0 var(--space-16) var(--space-24); border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.milestones::before { content: ""; position: absolute; left: 4px; top: 26px; bottom: 34px; width: 1px; background: var(--color-border-strong); }
.milestone { position: relative; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.milestone::before { content: ""; position: absolute; left: calc(var(--space-24) * -1); top: 6px; width: 9px; height: 9px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.milestone:first-child::before { background: var(--color-brand); box-shadow: none; }
.milestone time { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.newsletter-slot { --col-span: 12; --col-span-tablet: 8; display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding: var(--space-24); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-tertiary); }
.newsletter-slot__label { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.recog-grid { row-gap: var(--grid-gap); }
.recog-card { --col-span: 4; --col-span-tablet: 4; --col-span-mobile: 4; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-8); min-height: 224px; padding: var(--space-24); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border); transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease), opacity 700ms var(--ease-fade); }
.recog-card--featured { --col-span: 6; min-height: 264px; }
.recog-card::before { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-300) 35%, var(--color-border-strong) 75%) 100% 100% / 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease), background-position var(--duration-slow) var(--ease); }
.recog-card__meta { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.recog-card__type { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.recog-card__figure { margin-top: var(--space-16); font-size: var(--font-size-display); line-height: var(--line-height-display); font-weight: var(--font-weight-semibold); letter-spacing: -1px; color: var(--color-brand-strong); font-variant-numeric: tabular-nums; }
.recog-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.recog-card__tags li { padding: 6px var(--space-12); border-radius: var(--radius-sm); background: rgb(var(--orange-rgb) / 8%); color: var(--color-brand-strong); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-semibold); }
.recog-card__figure--word { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
.recog-card__note { margin-top: var(--space-4); max-width: 420px; font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.recog-card__scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin-top: auto; padding-top: var(--space-16); }
.recog-card__scope-item { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-md); background: rgb(var(--ink-rgb) / 4%); }
.recog-card__scope-label { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); }
.recog-card__scope-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-text-tertiary); }
.recog-card__scope-item--in { background: rgb(var(--orange-rgb) / 6%); }
.recog-card__scope-item--in .recog-card__scope-label { color: var(--color-brand-strong); }
.recog-card__scope-item--in .recog-card__scope-label::before { background: var(--color-brand); box-shadow: none; }
.recog-card__scope-value { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.recog-card--report .recog-card__note { margin-top: var(--space-8); }
.recog-card__title { margin-top: auto; max-width: 400px; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-semibold); }
.recog-card--featured .recog-card__title { margin-top: 0; max-width: none; }
.recog-card > :not(.recog-card__mark) { position: relative; z-index: 1; }
.recog-card__body { max-width: 440px; font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.recog-card--featured .recog-card__body { margin-top: auto; }
.recog-card__mark { position: absolute; right: -16px; bottom: -16px; width: 160px; height: 160px; fill: none; stroke: var(--color-text-primary); stroke-width: 2; stroke-linecap: square; vector-effect: non-scaling-stroke; opacity: 8%; transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease), stroke var(--duration-slow) var(--ease); pointer-events: none; }
.recog-card__mark * { vector-effect: non-scaling-stroke; }
.recog-card--featured .recog-card__mark { right: 16px; bottom: -8px; width: 176px; height: 176px; }
.recog-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px transparent, 0 16px 32px rgb(var(--orange-rgb) / 10%); }
.recog-card:hover::before { opacity: 1; background-position: 0 0; }
.recog-card:hover .recog-card__mark { stroke: var(--color-brand); opacity: 28%; transform: translate(-8px, -8px) rotate(-4deg); }
.js .recog-card:not(.is-in) { opacity: 0; transform: translateY(var(--space-24)); }
.js .recog-card.is-in { transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms); }
.js .recog-card.is-in:hover { transition-delay: 0ms; }

/* Product visual — image on the page ground; wrapper owns centring, never the grid */
.product-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); }
.product-visual__image { width: 100%; height: auto; object-fit: contain; filter: var(--shadow-product); transition: scale var(--duration-slow) var(--ease); transform-origin: 50% 60%; }
.product-visual:hover .product-visual__image { scale: var(--hover-zoom); }

/* Pipeline (an ordered process, so it is numbered) */
.pipeline { position: relative; }
.pipeline__index { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.item--active .pipeline__index { color: var(--color-brand-strong); }
.pipeline::before { content: ""; position: absolute; top: 0; left: 0; width: var(--space-64); height: 2px; background: linear-gradient(90deg, transparent, var(--color-brand)); opacity: 0; pointer-events: none; }
.pipeline.is-visible::before { animation: data-flow 2400ms var(--ease) 3; }

/* Check list and spec table */
.check-list__items { display: flex; flex-direction: column; list-style: none; padding: 0; font-size: var(--font-size-body); line-height: var(--line-height-body); }
.check-list__items li { padding-block: 10px; border-bottom: 1px solid var(--color-border); }
.check-list--muted .check-list__items { color: var(--color-text-secondary); }
.spec-table__list { display: flex; flex-direction: column; font-size: var(--font-size-body); line-height: var(--line-height-body); }
.spec-table__list > div { display: grid; grid-template-columns: var(--spec-label-width) minmax(0, 1fr); gap: var(--space-12); padding-block: 10px; border-bottom: 1px solid var(--color-border); }
.spec-table__list dt { color: var(--color-text-tertiary); }
.spec-table__list dd { font-weight: var(--font-weight-medium); }

/* Office */
.office { gap: var(--space-4); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.office__label { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); padding-bottom: var(--space-4); }
.office__name { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.office a { width: fit-content; text-decoration: none; }
.office a:hover { color: var(--color-text-primary); text-decoration: underline; }

/* Resource card */
.resource-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); text-decoration: none; color: inherit; }
.resource-card__media { width: 100%; aspect-ratio: 16 / 10; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; margin-bottom: var(--space-12); background: var(--color-surface-muted); border-radius: var(--radius-lg); overflow: hidden; }
.resource-card__media img { width: auto; max-width: 64%; max-height: 72%; object-fit: contain; filter: var(--shadow-thumbnail); transition: scale var(--duration-slow) var(--ease); }
.resource-card:hover .resource-card__media img { scale: var(--hover-zoom); }
/* Document thumbnail: the page fills the frame width and rises from the bottom edge, cropped like a sheet on a desk */
.resource-card__media--document { place-items: start center; padding-top: var(--space-32); }
.resource-card__media--document img { width: 58%; max-width: none; max-height: none; transform-origin: 50% 0; }
.resource-card__type { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); }
.resource-card__title { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body-lg); }
.resource-card:hover .resource-card__title { text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 4px; }
.resource-card__body { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.resource-card__date { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

/* Content scrim — quiets the animated page grid behind product information.
   Decoration only: it never moves content off the grid. */
.section__body, .hero__content, .page-hero__content, .spec-strip, .cta-band__content { position: relative; isolation: isolate; }
.section__body::before, .hero__content::before, .page-hero__content::before, .spec-strip::before, .cta-band__content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: var(--color-scrim); border-radius: var(--radius-lg);
  box-shadow: 0 0 var(--space-32) var(--space-16) var(--color-scrim);
}
.section__body::before { inset: calc(var(--space-24) * -1) 0; }
.hero__content::before, .page-hero__content::before, .cta-band__content::before { inset: calc(var(--space-16) * -1); }
.spec-strip::before { inset: 0 calc(var(--space-16) * -1) calc(var(--space-16) * -1); }

/* 6. Page sections --------------------------------------------------------- */

/* Page grid canvas */
.page-grid { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 70%, transparent 100%); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-height); border-bottom: 1px solid transparent; transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.site-header.is-scrolled, .site-header:has(.is-open) { background: var(--color-bg); border-bottom-color: var(--color-border); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-32); }
.site-nav { flex: 1; }
.site-nav__list { display: flex; justify-content: center; gap: var(--space-32); }
.site-nav__link { position: relative; display: inline-flex; align-items: center; min-height: var(--button-height-md); padding-block: var(--button-padding-y-md); font-size: var(--font-size-body-sm); line-height: var(--line-height-control); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-text-primary); }
.site-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-8); height: 2px; background: var(--color-brand); }
/* GNB hover: label roll (text slides up, its copy rolls in) and the shared indicator */
.nav-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.nav-roll__text { display: block; transition: transform var(--duration-base) var(--ease); }
.nav-roll::after { content: attr(data-label); content: attr(data-label) / ""; position: absolute; left: 0; top: 100%; transition: transform var(--duration-base) var(--ease); }
.site-nav__link:hover .nav-roll__text, .site-nav__link:hover .nav-roll::after, .site-header__cta:hover .nav-roll__text, .site-header__cta:hover .nav-roll::after,
.site-nav__mobile-cta .button:hover .nav-roll__text, .site-nav__mobile-cta .button:hover .nav-roll::after { transform: translateY(-100%); }
.site-nav { position: relative; }
.site-nav__indicator { position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--color-brand); opacity: 0; pointer-events: none; transition: transform var(--duration-slow) var(--ease), width var(--duration-slow) var(--ease), opacity var(--duration-base) var(--ease); }
.site-nav.has-indicator .site-nav__link[aria-current="page"]::after { display: none; }
.site-nav__mobile-cta { display: none; }

/* GNB dropdown (VDPU, Resources, Company). The parent stays a link; the chevron is a
   disclosure button. Opens on hover (mouse) or click/Enter, closes on leave, Esc or outside click.
   Panel padding 8 + item padding 16 = 24, so item titles line up with the parent label. */
.site-nav__item { display: flex; align-items: center; }
.site-nav__item--menu { position: relative; }
.site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--space-24); height: var(--button-height-md); padding: 0; border: 0; background: none; color: var(--color-text-tertiary); cursor: pointer; }
.site-nav__toggle:hover, .site-nav__item.is-open .site-nav__toggle { color: var(--color-text-primary); }
.site-nav__chevron { width: 12px; height: 12px; transition: transform var(--duration-base) var(--ease); }
.site-nav__item.is-open .site-nav__chevron { transform: rotate(180deg); }
.site-nav__menu { position: absolute; top: 100%; left: calc(var(--space-24) * -1); width: var(--nav-menu-width); padding: var(--space-8); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 var(--space-12) var(--space-32) rgb(var(--ink-rgb) / 8%); opacity: 0; visibility: hidden; transform: translateY(calc(var(--space-4) * -1)); transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fast); }
.site-nav__item.is-open .site-nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0ms; }
.site-nav__menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-nav__menu-link { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--duration-fast) var(--ease); }
.site-nav__menu-link:hover, .site-nav__menu-link:focus-visible { background: var(--color-surface-muted); }
.site-nav__menu-title { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.site-nav__menu-desc { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.menu-toggle { display: none; width: var(--button-height-md); height: var(--button-height-md); padding: 0; border: 0; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); }
.menu-toggle__bar { width: 20px; height: 2px; background: currentColor; transition: transform var(--duration-base) var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-of-type { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-of-type { transform: translateY(-3px) rotate(-45deg); }
.skip-link { position: absolute; left: var(--space-16); top: -100px; z-index: 100; padding: var(--space-8) var(--space-16); background: var(--color-button-primary-bg); color: var(--color-button-primary-text); border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-16); }

/* Hero */
.hero { position: relative; z-index: 1; padding-top: calc(var(--header-height) + var(--space-96)); padding-bottom: var(--space-80); }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__body { position: relative; display: flex; flex-direction: column; gap: var(--space-96); pointer-events: none; }
.hero__body > * { pointer-events: auto; }
.hero__grid { align-items: center; }
.hero__content { --col-span: 5; --col-span-tablet: 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.hero__heading { display: flex; flex-direction: column; gap: var(--space-16); }
.hero__product { display: flex; align-items: baseline; gap: var(--space-12); font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
.hero__product-name { font-weight: var(--font-weight-bold); min-width: 4ch; }
.hero__product-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--color-brand); animation: caret 900ms steps(1) infinite; }
.hero__product-full { color: var(--color-text-tertiary); }
.hero__visual { --col-span: 7; --col-span-tablet: 4; }
.hero__visual .product-visual__image { max-width: var(--product-image-max); }
/* Hero product: the card arrives from the upper left, the chip from the lower right, on load and each time the hero scrolls back into view. */
.hero__visual .hero-product { display: grid; max-width: 640px; aspect-ratio: 1600 / 796; }
.hero-product > img { grid-area: 1 / 1; width: 100%; height: auto; }
.js .hero-product > img { transition: transform var(--duration-enter) var(--ease-enter), opacity 600ms var(--ease-fade); }
.js .hero-product:not(.is-in) .hero-product__card { opacity: 0; transform: translate(-96px, -64px); }
.js .hero-product:not(.is-in) .hero-product__chip { opacity: 0; transform: translate(96px, 80px); }
.js .hero-product.is-in .hero-product__chip { transition-delay: 180ms; }
.hero { overflow-x: clip; } /* the entering chip must not widen the page */
.hero__visual-meta { align-self: stretch; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-24); padding-top: var(--space-16); }
.hero__visual-meta .product-visual__caption { flex: none; text-align: right; }

/* Code log — the hero query console. Pretendard, tabular numerals, typed line by line.
   Five lines visible; older lines scroll up and fade out under the mask. */
.code-log { flex: 1 1 auto; min-width: 0; height: calc(var(--line-height-caption) * var(--code-log-lines)); overflow: hidden; font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
.code-log__lines { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.code-log__line { padding-left: var(--space-24); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.code-log__line--input { position: relative; color: var(--color-text-secondary); }
.code-log__line--input::before { content: "›"; position: absolute; left: var(--space-8); color: var(--color-brand); }
.code-log__line.is-active::after { content: ""; display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--color-brand); animation: caret 900ms steps(1) infinite; }
.spec-strip { row-gap: var(--space-24); }
.spec-item { --col-span: 2; --col-span-tablet: 2; --col-span-mobile: 2; }
.spec-strip--quad > .spec-item { --col-span: 3; --col-span-tablet: 4; --col-span-mobile: 2; }
.spec-strip--triple > .spec-item { --col-span: 4; --col-span-tablet: 4; --col-span-mobile: 4; }

/* Problem — three rule items */

/* ---------- Home: manifesto, solution, effect, use cases ---------- */
/* Manifesto (Problem): large lines that ink in as they pass the middle of the screen.
   --ink runs 0 → 1 per line (site.js); without JS every line is ink. */
.manifesto { position: relative; overflow: hidden; }
.manifesto__text { --col-span: 9; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-48); }
.manifesto__group { display: flex; flex-direction: column; font-size: var(--font-size-manifesto); line-height: var(--line-height-manifesto); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-heading); }
.manifesto__line { display: block; color: color-mix(in srgb, var(--color-text-primary) calc(var(--ink, 1) * 100%), var(--color-border)); transition: color 200ms linear; }
.manifesto__title { font-weight: var(--font-weight-semibold); }
.manifesto__pixels { position: absolute; inset: 0; pointer-events: none; }
.pixel-bit { position: absolute; display: grid; grid-template-columns: repeat(3, var(--space-8)); grid-auto-rows: var(--space-8); opacity: 0; transition: opacity 900ms var(--ease-fade); }
.pixel-bit.is-on { opacity: 1; }
.pixel-bit i { background: var(--color-brand); }
.pixel-bit i.is-ink { background: var(--color-text-primary); }
.pixel-bit i.is-gap { background: none; }

/* Solution: text and features 5 · one empty column · diagram stage 6 (the same split as Effect).
   The stage stretches to the text column, so tops and bottoms meet; padding 32 on every side. */
.solution { align-items: stretch; }
.solution__text { --col-span: 5; --col-span-tablet: 8; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--space-40); }
.concept-stage { --col-start: 7; --col-span: 6; --col-span-tablet: 8; display: grid; place-items: center; min-height: 100%; padding: var(--space-32); background-color: var(--color-bg); background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px); background-size: var(--space-16) var(--space-16); background-position: -1px -1px; border-radius: var(--radius-lg); }
.concept-stage__canvas { width: 100%; }
.concept-stage svg { display: block; width: 100%; height: auto; font-size: var(--font-size-caption); line-height: var(--line-height-caption); }
.concept-stage text { font-family: inherit; }
.cd-label { fill: var(--color-text-tertiary); font-weight: var(--font-weight-medium); }
.cd-label--brand { fill: var(--color-brand); font-weight: var(--font-weight-semibold); }
.cd-text { fill: rgb(255 255 255 / 88%); font-weight: var(--font-weight-medium); }
.cd-sub { fill: rgb(255 255 255 / 48%); }
.cd-frame { fill: none; stroke: rgb(255 255 255 / 28%); }
.cd-row rect { fill: rgb(255 255 255 / 4%); stroke: rgb(255 255 255 / 14%); transition: stroke var(--duration-base) var(--ease); }
.cd-row--entry rect { stroke: rgb(255 255 255 / 32%); }
.cd-row.is-active rect { stroke: var(--color-brand); }
.cd-lane { fill: none; stroke: rgb(255 255 255 / 24%); stroke-dasharray: 2 4; }
.cd-select { fill: none; stroke: var(--color-brand); }
.cd-handle { fill: var(--color-brand); }
.cd-tile { fill: none; stroke-width: 1; stroke-linecap: square; transition: stroke 600ms var(--ease-fade); }
.cd-tile--x { stroke: rgb(255 255 255 / 40%); }
.cd-tile--slash { stroke: rgb(255 255 255 / 26%); }
.cd-tile--dot { stroke: rgb(255 255 255 / 18%); }
.cd-tile.is-lit { stroke: var(--color-brand); transition-duration: 120ms; }
.cd-cell { fill: rgb(var(--orange-rgb) / 24%); transition: fill 300ms var(--ease-fade); }
.cd-cell.is-on { fill: var(--color-brand); transition-duration: 80ms; }
.cd-packet--q { fill: var(--color-brand); }
.cd-packet--r { fill: rgb(255 255 255 / 92%); }
.cd-cross { fill: none; stroke: rgb(255 255 255 / 48%); }

/* Marker list: an 8 px brand tile marks each point; no rules */
.marker-list { display: flex; flex-direction: column; gap: var(--space-24); }
.marker-list__item { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--space-16); row-gap: var(--space-4); }
.marker-list__item::before { content: ""; grid-row: 1; width: var(--space-8); height: var(--space-8); margin-top: var(--space-8); background: var(--color-brand); }
.marker-list dt { grid-column: 2; grid-row: 1; font-weight: var(--font-weight-semibold); }
.marker-list dd { grid-column: 2; color: var(--color-text-secondary); }

/* Arrow link: a brand box holding the arrow, then the label */
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--button-height-md); font-size: var(--font-size-body); line-height: var(--line-height-control); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); text-decoration: none; }
.link-arrow__box { display: grid; place-items: center; width: var(--space-24); height: var(--space-24); border-radius: var(--radius-sm); background: var(--color-brand); color: var(--neutral-0); transition: background-color var(--duration-fast) var(--ease); }
.link-arrow:hover .link-arrow__box { background: var(--orange-800); }
.link-arrow:hover { color: var(--color-brand-strong); }

/* Effect: statement and accordion 5 / glow panel 6, one empty column between */
.effect { align-items: stretch; }
.effect__text { --col-span: 5; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-40); }
.effect__title { font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-heading); }
.effect__visual { --col-start: 7; --col-span: 6; --col-span-tablet: 8; }
.accordion { border-top: 1px solid var(--color-border-strong); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); min-height: var(--space-64); padding-block: var(--space-16); font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }
.accordion__head::-webkit-details-marker { display: none; }
.accordion__body { padding-bottom: var(--space-24); padding-right: var(--space-40); color: var(--color-text-secondary); }

/* Toggle icon — the one +/− used by every disclosure (accordion, FAQ).
   Closed: ink plus on a muted box. Open: the vertical bar turns flat into a white minus on a brand box.
   While a panel is closing (.is-closing) it already shows the closed state. */
.toggle-label { min-width: 0; }
.toggle-icon { position: relative; flex: none; width: var(--space-24); height: var(--space-24); border-radius: var(--radius-sm); background: var(--color-surface-muted); transition: background-color var(--duration-base) var(--ease); }
.toggle-icon::before, .toggle-icon::after { content: ""; position: absolute; left: 7px; top: 11px; width: 10px; height: 2px; background: var(--color-text-primary); transition: transform var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease); }
.toggle-icon::after { transform: rotate(90deg); }
summary:hover .toggle-icon { background: var(--color-border); }
details[open]:not(.is-closing) > summary .toggle-icon { background: var(--color-brand); }
details[open]:not(.is-closing) > summary:hover .toggle-icon { background: var(--orange-700); }
details[open]:not(.is-closing) > summary .toggle-icon::before, details[open]:not(.is-closing) > summary .toggle-icon::after { background: var(--neutral-0); }
details[open]:not(.is-closing) > summary .toggle-icon::after { transform: rotate(0deg); }
summary:focus-visible { outline-offset: -2px; }

/* Glow panel: a deep ink-to-orange field with a fine grid, the product floating on it */
.glow-panel { position: relative; display: grid; place-items: center; min-height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 78% 108%, var(--orange-500) 0%, var(--orange-800) 34%, var(--neutral-900) 78%); }
.glow-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px); background-size: var(--space-24) var(--space-24); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.glow-panel__image { position: relative; width: 84%; height: auto; filter: drop-shadow(0 24px 40px rgb(0 0 0 / 48%)); transition: transform var(--duration-slow) var(--ease); }
.glow-panel:hover .glow-panel__image { transform: scale(var(--hover-zoom)); }

/* Use cases: tiles with a pixel icon on a gridded panel, then title and body */
.tile-list { row-gap: var(--space-40); }
.tile { --col-span: 3; --col-span-tablet: 4; display: flex; flex-direction: column; gap: var(--space-12); }
.tile__media { display: grid; place-items: center; aspect-ratio: 1 / 1; margin-bottom: var(--space-12); border-radius: var(--radius-lg); background-color: var(--color-surface-muted); background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: var(--space-24) var(--space-24); background-position: calc(50% + 12px) calc(50% + 12px); }
.tile-list--thirds > .tile { --col-span: 4; --col-span-tablet: 4; }
/* 261013 feedback: the use-case boxes had more space than their icons need; trim top/bottom (icon 144 px + 36 px each side). */
.tile-list--compact .tile__media { aspect-ratio: auto; height: 216px; }
.person__photo { aspect-ratio: 1 / 1; font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.tile__title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-semibold); }
.tile__body { color: var(--color-text-secondary); }

/* ---------- VDPU: technique showcase ---------- */
/* Side 5 (title, then the rail stretched to the stage height) / stage 7.
   The stage is 528 high (22 grid cells of 24). Its grid is centred on the icon: the icon is 288 (12 cells),
   drawn at 4× so each tile is one 24 px cell, its top on the second line (48). The caption card sits on line 16 (384), one cell below the icon. */
.showcase { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-24); align-items: stretch; }
.showcase__side { grid-column: span 5; display: flex; flex-direction: column; gap: var(--space-24); }
.showcase__list { position: relative; flex: 1; display: flex; flex-direction: column; box-shadow: inset 2px 0 0 var(--color-border); }
.showcase__tab { flex: 1; display: flex; align-items: center; min-height: var(--space-64); padding: var(--space-16) 0 var(--space-16) var(--space-24); border: 0; background: none; text-align: left; font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); cursor: pointer; transition: color var(--duration-base) var(--ease); }
.showcase__tab:hover { color: var(--color-text-secondary); }
.showcase__tab[aria-selected="true"] { color: var(--color-text-primary); }
.showcase__tab:focus-visible { outline-offset: -2px; }
/* the brand segment glides to the selected tab; while autoplay runs it fills top to bottom */
.showcase__progress { position: absolute; left: 0; top: 0; width: 2px; height: var(--seg-h, 25%); transform: translateY(var(--seg-y, 0)); background: rgb(var(--orange-rgb) / 32%); transition: transform var(--duration-slow) var(--ease), height var(--duration-slow) var(--ease); }
.showcase__progress::after { content: ""; position: absolute; inset: 0; background: var(--color-brand); transform-origin: top; transform: scaleY(var(--fill, 1)); }
.showcase__stage { grid-column: span 7; display: grid; height: 528px; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--color-surface-muted); background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: var(--space-24) var(--space-24); background-position: calc(50% + 12px) 0; }
.showcase__panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-48); padding-top: var(--space-48); }
.showcase__panel[hidden] { display: none; }
.showcase__panel:not([hidden]) { animation: panel-in var(--duration-slow) var(--ease-fade); }
.showcase__body { width: min(480px, calc(100% - var(--space-48))); padding: var(--space-16) var(--space-24); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border); }
@keyframes panel-in { from { opacity: 0; transform: translateY(var(--space-8)); } }

/* ---------- VDPU: published results ---------- */
/* Three press-confirmed figures in one panel, split by hairlines on the page grid (4 / 4 / 4), with the condition note below */
.measure-panel { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.measure-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.measure { display: flex; flex-direction: column; gap: var(--space-8); padding-inline: var(--space-24); box-shadow: inset 1px 0 0 var(--color-border); }
.measure:first-child { padding-left: 0; box-shadow: none; }
.measure__label { order: 1; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.measure__value { order: 2; font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-heading); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.measure__note { order: 3; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-tertiary); }
/* On scroll: the columns rise in 120 ms apart (600 ms) and their numbers count up; the note follows.
   Armed only by JS (.is-armed), so without JS everything shows; replays each time the panel comes back. */
.measure-panel.is-armed .measure, .measure-panel.is-armed .measure-panel__note { opacity: 0; transform: translateY(var(--space-16)); transition: opacity 600ms var(--ease-fade), transform 600ms var(--ease); }
.measure-panel.is-armed .measure:nth-child(2) { transition-delay: 120ms; }
.measure-panel.is-armed .measure:nth-child(3) { transition-delay: 240ms; }
.measure-panel.is-armed .measure-panel__note { transition-delay: 480ms; }
.measure-panel.is-armed.is-visible .measure, .measure-panel.is-armed.is-visible .measure-panel__note { opacity: 1; transform: none; }
.measure__value [data-count-to] { font-variant-numeric: tabular-nums; }
.measure-panel__note { padding-top: var(--space-16); box-shadow: inset 0 1px 0 var(--color-border); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }

/* ---------- VDPU: Integration with the hairline figure ---------- */
/* Top row: text 6 (header + supported software) and the figure 6 (cols 7–12, 3 : 2, drawing cropped to fill), centred on each other.
   Bottom row: "What changes" and "What stays the same" as two equal cards, 6 + 6, sharing one height. */
.integration__top { align-items: center; row-gap: var(--space-40); }
.integration__text { --col-span: 6; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-40); }
.integration__figure { --col-span: 6; --col-start: 7; --col-span-tablet: 8; --col-span-mobile: 4; width: 100%; aspect-ratio: 3 / 2;
  --hairline-plate: var(--color-bg); --hairline-hi: var(--color-brand); --hairline-edge: var(--neutral-400); --hairline-mid: var(--neutral-300); --hairline-lo: var(--neutral-200); }
.integration__figure svg { display: block; width: 100%; height: 100%; }
.integration__figure svg :where(path, polygon, ellipse, line) { vector-effect: none; stroke-width: 0.64px; }
.check-list__items--muted { color: var(--color-text-secondary); }
.switch-list { display: flex; flex-direction: column; gap: var(--space-24); }
.switch-list .check-list__items { font-size: var(--font-size-body); line-height: var(--line-height-body); border-top: 1px solid var(--color-border-strong); }
.switch-list .check-list__items li { padding-block: var(--space-12); }
/* Integration compare cards: white panels, radius 12, 32 padding, 24 between head and list. "What changes" is outlined by a
   1 px orange gradient border (orange-500 → orange-300 → border, 135°) with a faint orange shadow and an ink icon (arrow);
   "What stays the same" has a plain 1 px border and a muted icon (equals). List rows are 48 high and hairline-separated;
   each row's glyph sits centred in a 40 px column so item text starts on the same line as the card title. */
.compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-64); }
.compare-card { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.compare-card--change { border-color: transparent; background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(135deg, var(--orange-500) 0%, var(--orange-300) 40%, var(--color-border) 100%) border-box; box-shadow: 0 12px 32px rgb(243 90 0 / 8%); }
.compare-card__head { display: flex; align-items: center; gap: var(--space-16); }
.compare-card__icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-text-primary) center / 20px 20px no-repeat; }
.compare-card--change .compare-card__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 10h11M11 6l4 4-4 4'/%3E%3C/svg%3E"); }
.compare-card--same .compare-card__icon { background-color: var(--color-surface-muted); box-shadow: inset 0 0 0 1px var(--color-border); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2318181a' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M5 7.5h10M5 12.5h10'/%3E%3C/svg%3E"); }
.compare-card__heading { display: flex; flex-direction: column; }
.compare-card__title { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-semibold); }
.compare-card__sub { color: var(--color-text-tertiary); }
.compare-card__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.compare-card__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-16); padding-block: var(--space-12); border-bottom: 1px solid var(--color-border); }
.compare-card__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.compare-card__list li::before { content: ""; justify-self: center; width: 20px; height: 20px; margin-top: 2px; background: center / 20px 20px no-repeat; }
.compare-card--change li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='8' height='8' fill='%23f35a00'/%3E%3C/svg%3E"); }
.compare-card--same li { color: var(--color-text-secondary); }
.compare-card--same li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a3a3a0' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m5 10 3.5 3.5L15 7'/%3E%3C/svg%3E"); }
.js .compare-card { transition: opacity 600ms var(--ease-fade), transform 600ms var(--ease-enter); }
.js .compare-card--same { transition-delay: 100ms; }
.js .compare-card:not(.is-in) { opacity: 0; transform: translateY(24px); }
.switch-list [role="tabpanel"]:not([hidden]) { animation: panel-in var(--duration-slow) var(--ease-fade); }

/* Segmented control: two tabs in one track; the selected one is ink */
.segmented { display: inline-flex; align-self: flex-start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.segmented__tab { min-height: var(--button-height-md); padding: var(--button-padding-y-md) var(--space-16); border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--font-size-body-sm); line-height: var(--line-height-control); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.segmented__tab:hover { color: var(--color-text-primary); }
.segmented__tab[aria-selected="true"] { background: var(--color-button-primary-bg); color: var(--color-button-primary-text); }

/* Facts: label and value pairs on a two-column grid, no rules */
.facts { display: flex; flex-direction: column; gap: var(--space-16); }
.facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--grid-gap); }
.facts__list div { display: flex; flex-direction: column; gap: var(--space-4); }
.facts__list dt { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.facts__list dd { font-weight: var(--font-weight-medium); }

/* Use cases, pipeline */
.item-list > .item, .pipeline > .item { --col-span: 3; --col-span-tablet: 4; }

/* Integration */
.integration-details { align-items: start; }
.check-list { --col-span: 4; --col-span-tablet: 4; }
.spec-table { --col-span: 4; --col-span-tablet: 8; }


/* Resources */
.resource-card { --col-span: 4; --col-span-tablet: 8; }

/* Company — about 6 / facts 5, people in thirds, NA office 5 / team 6 */
.company-about, .company-na { align-items: start; }
.company-about__content { --col-span: 6; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-24); }
.company-about__text { display: flex; flex-direction: column; gap: var(--space-16); color: var(--color-text-secondary); font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
.company-about__facts { --col-start: 8; --col-span: 5; --col-span-tablet: 8; }
.person__bio { color: var(--color-text-secondary); }
.person__edu { margin: calc(var(--space-4) * -1) 0 var(--space-8); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-tertiary); }
/* Previous organizations: logos in grey at rest, full colour when the card is hovered. Heights tuned per logo so they read at the same weight. */
.person__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); margin: auto 0 0; padding: var(--space-16) 0 0; list-style: none; border-top: 1px solid var(--color-border); }
.person__logos li { display: flex; align-items: center; height: var(--space-24); }
.person__logo { width: auto; filter: grayscale(1); opacity: 0.55; transition: filter var(--duration-slow) var(--ease), opacity var(--duration-slow) var(--ease); }
.person__logo--sk { height: 24px; }
.person__logo--sait { height: 22px; }
.person__logo--samsung { height: 14px; }
.person:hover .person__logo { filter: none; opacity: 1; }
.team-strip { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-64); }
.team-strip__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); border-top: 1px solid var(--color-border-strong); padding-top: var(--space-24); }
/* 261013: larger portraits (96 px from 192 px sources); columns line up with the leadership cards above. */
.team-member { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-16); row-gap: var(--space-4); align-items: center; align-content: center; }
.team-member__photo { grid-row: span 2; width: 96px; height: 96px; border-radius: 50%; background: var(--color-surface-muted); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-member__name { align-self: end; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-semibold); }
.team-member__title { align-self: start; color: var(--color-text-secondary); }
@media (min-width: 768px) and (max-width: 1199px) { .team-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person__role { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); }
.company-na__content { --col-span: 5; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-32); }
.company-na__content .office { align-self: stretch; }
.company-na__team { --col-start: 7; --col-span: 6; --col-span-tablet: 8; align-self: center; }

/* Record list — dated hairline rows for recognition, news and events */
.record-list { border-top: 1px solid var(--color-border-strong); }
.record-list__row { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: baseline; padding-block: var(--space-16); border-bottom: 1px solid var(--color-border); }
.record-list__date { grid-column: span 2; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.record-list__type { grid-column: span 2; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.record-list__title { grid-column: span 8; font-weight: var(--font-weight-medium); }

/* Logo wall — consented customer and partner logos */
.logo-wall { row-gap: var(--grid-gap); }
.logo-wall__slot { --col-span: 2; --col-span-tablet: 2; --col-span-mobile: 2; display: grid; place-items: center; height: var(--space-80); box-shadow: inset 0 0 0 1px var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
/* Customers and partners: logos run in a horizontal loop. The track holds two identical groups and moves by half its width, so the loop is seamless. */
.person__photo { overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* CTA band */
.cta-band { position: relative; z-index: 1; overflow: hidden; background: var(--color-bg); color: var(--color-text-primary); padding-block: var(--space-96); }
.cta-band__traces { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-band__grid { position: relative; align-items: center; }
.cta-band__content { --col-span: 6; --col-span-tablet: 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.cta-band__visual { --col-span: 6; --col-span-tablet: 4; }
.cta-band__visual .product-visual__image { max-width: var(--product-image-max-sm); filter: none; }
.cta-band .button--ghost { color: var(--color-text-secondary); }
.cta-band .button--ghost:hover { color: var(--color-text-primary); }

/* Footer */
.site-footer { position: relative; z-index: 1; background: var(--color-bg); border-top: 1px solid var(--color-border); padding-block: var(--space-64) var(--space-32); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.site-footer__body { display: flex; flex-direction: column; gap: var(--space-64); }
.site-footer__grid { row-gap: var(--space-32); align-items: start; }
.site-footer__logo { --col-span: 4; --col-span-tablet: 8; align-self: start; }
.site-footer__group { --col-span: 2; --col-span-tablet: 2; --col-span-mobile: 2; display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text-secondary); }
.site-footer__group--wide { --col-span: 4; --col-span-tablet: 4; --col-span-mobile: 4; }
.site-footer__address { font-style: normal; }
.site-footer__group > span.site-footer__label { min-height: 0; margin-top: var(--space-8); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.site-footer__address > span:not(.site-footer__label) { min-height: 0; padding-bottom: var(--space-4); }
.site-footer__heading { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); min-height: var(--space-32); display: flex; align-items: center; }
.site-footer__group > span { display: flex; align-items: center; min-height: var(--space-32); }
.site-footer__link { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--space-32); padding-block: var(--space-4); line-height: var(--line-height-control); width: fit-content; text-decoration: none; }
.site-footer__link:hover { color: var(--color-text-primary); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-16); padding-top: var(--space-24); border-top: 1px solid var(--color-border); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
.site-footer__legal { display: flex; flex-wrap: wrap; column-gap: var(--space-24); }


/* ---------- VDPU page ---------- */
/* Product hero: text 6 / framed product 6, then the spec strip */
.page-hero { position: relative; z-index: 1; padding-top: calc(var(--header-height) + var(--space-96)); padding-bottom: var(--space-80); }
.page-hero__body { display: flex; flex-direction: column; gap: var(--space-96); }
.page-hero__grid { align-items: center; }
.page-hero__content { --col-span: 6; --col-span-tablet: 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.page-hero__visual { --col-span: 6; --col-span-tablet: 4; }

/* Page nav: sticky in-page links under the header; the current section gets the brand rule */
.page-nav { position: sticky; top: var(--header-height); z-index: 40; background: var(--color-bg); border-block: 1px solid var(--color-border); }
.page-nav.is-stuck { border-top-color: transparent; }
.page-nav__list { display: flex; gap: var(--space-32); height: var(--page-nav-height); overflow-x: auto; scrollbar-width: none; }
.page-nav__list::-webkit-scrollbar { display: none; }
.page-nav__list > li { display: flex; }
.page-nav__link { position: relative; display: flex; align-items: center; white-space: nowrap; padding-block: var(--space-12); font-size: var(--font-size-body-sm); line-height: var(--line-height-control); color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
.page-nav__link:hover, .page-nav__link[aria-current="true"] { color: var(--color-text-primary); }
.page-nav__link[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-brand); }

.section__group { display: flex; flex-direction: column; gap: var(--space-24); }

/* Table sub-label */
.table__sub { display: block; font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-regular); color: var(--color-text-tertiary); }

/* Chip 3D — the VDPU package, balanced on a corner, turning (assets/js/chip-3d.js).
   The stage is a square in the visual column; geometry inside it is 3D coordinates, not layout.
   --S (chip edge) is measured from the stage width. */
.chip-3d { position: relative; display: grid; place-items: center; width: 100%; max-width: var(--chip-3d-stage); aspect-ratio: 1; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.chip-3d.is-dragging { cursor: grabbing; }
.chip-3d:focus-visible { outline-offset: var(--space-8); }
.chip-3d__fallback { width: 64%; filter: var(--shadow-product); }
.chip-3d.is-mounted .chip-3d__fallback { display: none; }
.chip-3d__scene { position: absolute; inset: 0; perspective-origin: 50% 50%; }
.chip-3d__anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.chip-3d__world, .chip-3d__spin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.chip-3d__shadow, .chip-3d__chip { position: absolute; left: calc(var(--S) / -2); top: calc(var(--S) / -2); width: var(--S); height: var(--S); }
.chip-3d__shadow { background: radial-gradient(closest-side, rgb(var(--ink-rgb) / 42%) 0%, rgb(var(--ink-rgb) / 12%) 45%, rgb(var(--ink-rgb) / 0%) 100%); pointer-events: none; }
.chip-3d__chip { --T: calc(var(--S) * 0.058); --L: calc(var(--S) * 0.81); --LH: calc(var(--S) * 0.024); --Sp: calc(var(--S) * 0.994); --Lp: calc(var(--L) * 0.99); transform-style: preserve-3d; }
.chip-3d__face { position: absolute; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.chip-3d__face > i { position: absolute; inset: 0; pointer-events: none; }
.chip-3d__shade { background: #000; opacity: 0; }
.chip-3d__spec { background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 85%) 50%, transparent 70%); background-size: 260% 260%; mix-blend-mode: screen; opacity: 0; }
.chip-3d__front, .chip-3d__lid { background-image: url("/assets/img/vdpu-chip-top.webp"); background-repeat: no-repeat; }
.chip-3d__front { left: 0; top: 0; width: var(--S); height: var(--S); border-radius: 2.3%; background-size: 100% 100%; transform: translateZ(calc(var(--T) / 2)); }
.chip-3d__back { left: 0; top: 0; width: var(--S); height: var(--S); border-radius: 2.3%; background: var(--chip-substrate); transform: translateZ(calc(var(--T) / -2)) rotateY(180deg); }
.chip-3d__bga { position: absolute; inset: 6%; background-image: radial-gradient(circle at 50% 50%, #f4f4f2 0 22%, #a8a9a8 34%, transparent 40%); background-size: calc(100% / 26) calc(100% / 26); opacity: 90%; }
.chip-3d__bga::after { content: ""; position: absolute; inset: 30%; background: var(--chip-substrate); border-radius: 2px; }
.chip-3d__a1 { position: absolute; left: 2.4%; top: 2.4%; width: 3%; height: 3%; background: #e6e6e4; clip-path: polygon(0 0, 100% 0, 0 100%); }
.chip-3d__side { background: repeating-linear-gradient(0deg, rgb(255 255 255 / 6%) 0 1px, transparent 1px 3px), var(--chip-edge); }
.chip-3d__side--x { width: var(--T); height: var(--Sp); left: calc((var(--S) - var(--T)) / 2); top: calc((var(--S) - var(--Sp)) / 2); background: repeating-linear-gradient(90deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 3px), var(--chip-edge); }
.chip-3d__side--y { width: var(--Sp); height: var(--T); left: calc((var(--S) - var(--Sp)) / 2); top: calc((var(--S) - var(--T)) / 2); }
.chip-3d__side--r { transform: translateX(calc(var(--S) / 2)) rotateY(90deg); }
.chip-3d__side--l { transform: translateX(calc(var(--S) / -2)) rotateY(-90deg); }
.chip-3d__side--t { transform: translateY(calc(var(--S) / -2)) rotateX(90deg); }
.chip-3d__side--b { transform: translateY(calc(var(--S) / 2)) rotateX(-90deg); }
.chip-3d__lid { width: var(--L); height: var(--L); left: calc((var(--S) - var(--L)) / 2); top: calc((var(--S) - var(--L)) / 2); border-radius: 2.6%; background-size: 123.46% 123.46%; background-position: 50% 50%; transform: translateZ(calc(var(--T) / 2 + var(--LH))); }
.chip-3d__lside { background: var(--chip-lid-side); }
.chip-3d__lside--x { width: var(--LH); height: var(--Lp); left: calc((var(--S) - var(--LH)) / 2); top: calc((var(--S) - var(--Lp)) / 2); }
.chip-3d__lside--y { width: var(--Lp); height: var(--LH); left: calc((var(--S) - var(--Lp)) / 2); top: calc((var(--S) - var(--LH)) / 2); }
.chip-3d__lside--r { transform: translateZ(calc(var(--T) / 2 + var(--LH) / 2)) translateX(calc(var(--L) / 2)) rotateY(90deg); }
.chip-3d__lside--l { transform: translateZ(calc(var(--T) / 2 + var(--LH) / 2)) translateX(calc(var(--L) / -2)) rotateY(-90deg); }
.chip-3d__lside--t { transform: translateZ(calc(var(--T) / 2 + var(--LH) / 2)) translateY(calc(var(--L) / -2)) rotateX(90deg); }
.chip-3d__lside--b { transform: translateZ(calc(var(--T) / 2 + var(--LH) / 2)) translateY(calc(var(--L) / 2)) rotateX(-90deg); }

/* Page transition (Home → VDPU). Layers: content 0–1 · page nav 40 · header 50 · transition 60 · skip link 100 */
.page-transition { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.page-transition__backdrop { position: absolute; inset: 0; background: var(--color-bg); opacity: 0; }
.chip-3d.page-transition__stage { width: min(64vmin, var(--chip-3d-stage)); max-width: none; cursor: default; opacity: 0; will-change: transform, opacity; }
.page-transition .chip-3d__shadow { display: none; }
.page-transition.is-leaving { opacity: 0; transition: opacity 320ms var(--ease-fade); }
/* Arrival (either page): the backdrop the transition left behind fades away */
.is-arriving body::after { content: ""; position: fixed; inset: 0; z-index: 60; background: var(--color-bg); pointer-events: none; animation: arrive 320ms var(--ease-fade) both; }
@keyframes arrive { to { opacity: 0; visibility: hidden; } }

/* ---------- Resources page ---------- */
.page-header { position: relative; z-index: 1; padding-top: calc(var(--header-height) + var(--space-96)); }
.page-header__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.section--tight-top { padding-top: var(--section-header-gap); }

/* Featured resource: cover 6 / content 5, tops aligned */
.resource-feature { align-items: start; }
.resource-feature__media { --col-span: 6; --col-span-tablet: 4; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--color-surface-muted); border-radius: var(--radius-lg); overflow: hidden; }
.resource-feature__media img { width: 84%; height: auto; filter: var(--shadow-thumbnail); transition: scale var(--duration-slow) var(--ease); }
.resource-feature__media:hover img { scale: var(--hover-zoom); }
.resource-feature__content { --col-start: 8; --col-span: 5; --col-span-tablet: 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.resource-feature__heading { display: flex; flex-direction: column; gap: var(--space-8); }
.resource-feature__body { color: var(--color-text-secondary); }
/* Document contents: hairline rows; the steps variant numbers each row */
.doc-contents { display: flex; flex-direction: column; gap: var(--space-8); align-self: stretch; }
.doc-contents__list { display: flex; flex-direction: column; border-top: 1px solid var(--color-border-strong); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.doc-contents__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); padding-block: var(--space-8); border-bottom: 1px solid var(--color-border); }
.doc-contents__pages { flex: none; font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); }
.doc-contents__list--steps { counter-reset: step; }
.doc-contents__list--steps li { justify-content: flex-start; counter-increment: step; }
.doc-contents__list--steps li::before { content: counter(step); flex: none; width: var(--space-16); font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); }
.note-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--color-border); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.resource-grid--pair > .resource-card { --col-span: 6; --col-span-tablet: 8; }

/* Reveal group (Public materials): children rise and fade in on scroll, 120 ms apart.
   Document pages slide up inside their frame; product images settle from 106%.
   Only active when JS is running (html.js) and motion is allowed. */
.js .reveal-group > * { opacity: 0; transform: translateY(var(--space-24)); transition: opacity 700ms var(--ease-fade), transform 700ms var(--ease); }
.js .reveal-group > :nth-child(2) { transition-delay: 120ms; }
.js .reveal-group > :nth-child(3) { transition-delay: 240ms; }
.js .reveal-group .resource-card__media img { transition: transform 1100ms var(--ease) 150ms, scale 1100ms var(--ease) 150ms; }
.js .reveal-group .resource-card__media--document img { transform: translateY(18%); }
.js .reveal-group .resource-card__media:not(.resource-card__media--document) img { scale: 106%; }
.js .reveal-item { opacity: 0; transform: translateY(var(--space-12)); transition: opacity 700ms var(--ease-fade) 240ms, transform 700ms var(--ease) 240ms; }
.js .reveal-group.is-visible > *, .js .reveal-item.is-visible { opacity: 1; transform: none; }
.js .reveal-group.is-visible .resource-card__media img { transform: none; scale: none; }
.js .reveal-group.is-visible .resource-card:hover .resource-card__media img { scale: var(--hover-zoom); transition-delay: 0ms; transition-duration: var(--duration-slow); }
/* Slots for materials that are not published yet: no link, no hover */
.resource-card--soon:hover .resource-card__media img, .js .reveal-group.is-visible .resource-card--soon:hover .resource-card__media img { scale: none; }
.resource-card--soon:hover .resource-card__title { text-decoration: none; }

/* ---------- Contact page ---------- */
/* Form 8 (fields split 4 / 4 on the page grid) · one empty column · aside 3 */
.contact-layout { align-items: start; }
.contact-form, .form-success { --col-span: 8; --col-span-tablet: 8; }
.contact-aside { --col-start: 10; --col-span: 3; --col-span-tablet: 8; display: flex; flex-direction: column; gap: var(--space-48); }
.contact-aside .check-list__items a { text-decoration: none; }
.contact-aside .check-list__items a:hover { text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 4px; }

/* Form: sections are rule items (strong top rule, 24 above content); sections 48 apart */
.form { display: flex; flex-direction: column; gap: var(--space-48); }
.form__section { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; margin: 0; padding: var(--space-24) 0 0; border: 0; border-top: 1px solid var(--color-border-strong); }
.form__legend { float: left; width: 100%; padding: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); font-weight: var(--font-weight-semibold); }
.form__legend + * { clear: both; }
.form__hint, .field__hint { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--grid-gap); }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.field--half { grid-column: auto / span 1; }
.field__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-semibold); }
.field__optional { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-regular); color: var(--color-text-tertiary); }
.field__control { --field-edge: var(--color-border-input); width: 100%; min-height: var(--input-height); padding: var(--input-padding-y) var(--input-padding-x); font: inherit; font-size: var(--font-size-body); line-height: var(--line-height-control); color: var(--color-text-primary); background: var(--color-surface); border: 0; box-shadow: inset 0 0 0 1px var(--field-edge); border-radius: var(--radius-md); transition: box-shadow var(--duration-fast) var(--ease); }
.field__control:hover { --field-edge: var(--color-text-secondary); }
.field__control:focus { outline: none; --field-edge: var(--color-border-strong); box-shadow: inset 0 0 0 1px var(--field-edge), 0 0 0 2px var(--color-focus); }
.field__control[aria-invalid="true"] { --field-edge: var(--color-danger); }
.field__control[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--field-edge), 0 0 0 2px var(--color-danger); }
.field__control--select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--input-padding-x) * 2 + var(--icon-size)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23555553' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: var(--icon-size); background-position: right var(--input-padding-x) center; }
.field__control--textarea { min-height: var(--textarea-min-height); padding: var(--space-12) var(--input-padding-x); line-height: var(--line-height-body); resize: vertical; }
.field__error { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-danger); }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Choice (radio as a segmented chip): unselected = input edge, selected = ink fill like the primary button */
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { --choice-edge: var(--color-border-input); display: inline-flex; align-items: center; min-height: var(--button-height-md); padding: var(--button-padding-y-md) var(--space-16); border: 0; box-shadow: inset 0 0 0 1px var(--choice-edge); border-radius: var(--radius-md); font-size: var(--font-size-body-sm); line-height: var(--line-height-control); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.choice span:hover { --choice-edge: var(--color-border-strong); color: var(--color-text-primary); }
.choice input:checked + span { background: var(--color-button-primary-bg); --choice-edge: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
.choice--multi span { gap: var(--space-8); }
.choice--multi span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.6; }
.choice--multi input:checked + span::before { opacity: 1; box-shadow: none; background: var(--color-button-primary-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2318181a' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m4 8 3 3 5-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.choice-group[aria-invalid="true"] .choice span { --choice-edge: var(--color-danger); }
.choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Checkbox: native control in brand, text beside it */
.checkbox { display: grid; grid-template-columns: var(--checkbox-size) minmax(0, 1fr); gap: var(--space-12); align-items: start; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); cursor: pointer; }
.checkbox input { width: var(--checkbox-size); height: var(--checkbox-size); margin: 2px 0 0; accent-color: var(--color-button-primary-bg); }
.checkbox a { color: var(--color-text-primary); }

/* Error summary: a hairline in the danger color, the fields as links */
.form__alert { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-12); border-top: 2px solid var(--color-danger); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-danger); }
.form__alert:focus { outline: none; }
.form__alert ul { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); }
.form__alert a { color: inherit; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); }
.form__submit[disabled] { opacity: 60%; cursor: progress; }
.form__note { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); max-width: 40ch; }

/* Sent state: replaces the form in the same grid area */
.form-success { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--color-brand); box-shadow: inset 0 1px 0 var(--color-brand); }
.form-success:focus { outline: none; }

/* ---------- Legal page ---------- */
/* Contents 3 (sticky) · one empty column · text 8 (measure 680) */
.legal-layout { align-items: start; }
.legal-layout__toc { --col-span: 3; --col-span-tablet: 8; align-self: start; position: sticky; top: calc(var(--header-height) + var(--space-24)); }
.legal-layout__toc a { text-decoration: none; color: var(--color-text-secondary); }
.legal-layout__toc a:hover { color: var(--color-text-primary); }
.legal-layout__body { --col-start: 5; --col-span: 8; --col-span-tablet: 8; }
.prose { display: flex; flex-direction: column; gap: var(--space-48); max-width: var(--measure-body); }
.prose section { display: flex; flex-direction: column; gap: var(--space-12); }
.prose h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: 0; font-weight: var(--font-weight-semibold); }
.prose p { color: var(--color-text-secondary); }
.prose a { color: var(--color-text-primary); }

/* Tag — a small labelled chip for inputs and outputs */
.tag { --tag-edge: var(--color-border); display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--space-24); padding: var(--chip-padding-y) var(--space-8); border: 0; box-shadow: inset 0 0 0 1px var(--tag-edge); border-radius: var(--radius-sm); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-secondary); white-space: nowrap; }
.tag::before { content: ""; flex: none; width: var(--space-4); height: var(--space-4); background: var(--color-text-tertiary); }

/* Stepper — a process with state (PoC). Each step owns a rule that fills when the
   step is reached; the node marks the step start. Desktop 4 × 3, tablet 2 × 4,
   mobile turns into a vertical rail (A ↓ B ↓ C ↓ D). */
.stepper > .stepper__step { --col-span: 3; --col-span-tablet: 4; }
.stepper__step { --progress: 0; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding-top: var(--space-24); border-top: 1px solid var(--color-border); }
.stepper__step::before { content: ""; position: absolute; left: 0; top: -1px; width: calc(var(--progress) * 100%); height: 2px; background: var(--color-brand); }
.stepper__step::after { content: ""; position: absolute; left: 0; top: calc(var(--space-4) * -1); width: var(--space-8); height: var(--space-8); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border-strong); transition: background-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); }
.stepper__step.is-reached::after { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.stepper__index { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; transition: color var(--duration-base) var(--ease); }
.stepper__step.is-active .stepper__index { color: var(--color-brand-strong); }
.stepper__outputs { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-top: var(--space-8); }
.stepper__outputs .tag { opacity: 50%; transform: translateY(var(--space-4)); transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); }
.stepper__step.is-reached .tag { opacity: 1; transform: none; }
.stepper__step.is-reached .tag:nth-child(2) { transition-delay: 80ms; }
.stepper__step.is-reached .tag:nth-child(3) { transition-delay: 160ms; }
.stepper__step.is-active .tag { --tag-edge: var(--color-border-strong); color: var(--color-text-primary); }
.stepper__step.is-active .tag::before { background: var(--color-brand); }
/* Measure: the markers read like live meters while the step is active */
.stepper__step.is-active .stepper__outputs--measure .tag::before { animation: meter 900ms steps(2) infinite; }
.stepper__step.is-active .stepper__outputs--measure .tag:nth-child(2)::before { animation-delay: 300ms; }
.stepper__step.is-active .stepper__outputs--measure .tag:nth-child(3)::before { animation-delay: 600ms; }
@keyframes meter { 50% { background: var(--color-text-tertiary); } }

/* FAQ: heading 4 / disclosure list 8 */
.faq-layout { align-items: start; }
.faq-layout__header { --col-span: 4; --col-span-tablet: 8; }
.faq { --col-span: 8; --col-span-tablet: 8; border-top: 1px solid var(--color-border-strong); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); min-height: var(--button-height-lg); padding-block: var(--space-16); font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__answer { max-width: var(--measure-body); padding-bottom: var(--space-24); color: var(--color-text-secondary); }
.faq__answer a { color: var(--color-text-primary); }

/* 7. Utilities ------------------------------------------------------------- */
.u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.u-hidden-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes caret { 50% { opacity: 0; } }
@keyframes chrome-shine { 0% { background-position: 100% 0, 0 0; } 28%, 100% { background-position: 0% 0, 0 0; } }
@keyframes data-flow { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 55% { left: calc(50% + var(--grid-gap) / 2 - var(--space-64)); opacity: 1; } 65%, 100% { left: calc(50% + var(--grid-gap) / 2 - var(--space-64)); opacity: 0; } }

/* 8. Responsive ------------------------------------------------------------ */
/* Tablet 768–1199: 8 columns, 24 padding, 80 section space */
@media (max-width: 1199px) {
  :root { --grid-columns: 8; --container-padding: 24px; --section-space: var(--space-80); }
  .grid > * { grid-column: auto / span var(--col-span-tablet); }
  .pipeline::before { display: none; }
  .legal-layout__toc { position: static; }
  .hero__visual-meta { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .hero__visual-meta .product-visual__caption { text-align: left; }
  .code-log { width: 100%; }
  .resource-card { display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; column-gap: var(--grid-gap); row-gap: var(--space-8); align-items: start; }
  .resource-card__media { grid-column: 1 / span 3; grid-row: 1 / span 4; margin-bottom: 0; }
  .resource-card > :not(.resource-card__media) { grid-column: 4 / span 5; }
  .resource-grid { row-gap: var(--space-32); }
  .glow-panel { aspect-ratio: 4 / 3; }
  .concept-stage__canvas { max-width: 560px; }
  .showcase__side, .showcase__stage { grid-column: span 8; }
  .showcase__list { flex-direction: row; overflow-x: auto; box-shadow: inset 0 -2px 0 var(--color-border); scrollbar-width: none; }
  .showcase__tab { flex: none; min-height: var(--button-height-lg); padding: var(--space-12) var(--space-16); font-size: var(--font-size-body); line-height: var(--line-height-body); }
  .showcase__tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--color-brand); }
  .showcase__progress { display: none; }
  .integration__figure { --col-start: auto; justify-self: center; max-width: 480px; }
  .record-list__title { grid-column: span 4; }
}
/* Mobile < 768: 4 columns, 20 padding, 64 section space */
@media (max-width: 767px) {
  :root { --grid-columns: 4; --container-padding: 20px; --grid-gap: 16px; --section-space: var(--space-64); --header-height: 64px; --chart-track-height: 220px; }
  .grid > * { grid-column: auto / span var(--col-span-mobile); }
  .record-list__row { row-gap: var(--space-4); }
  .tile__media, .person__photo { aspect-ratio: auto; height: 192px; }
  .person__photo { height: auto; aspect-ratio: 1 / 1; }
  .news-feature__media { height: 192px; padding: var(--space-24); }
  .event, .press-list > li { flex: none; }
  .milestones { justify-content: flex-start; }
  .news-feature__title { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
  .recog-card, .recog-card--featured { min-height: 0; }
  .recog-card__figure { margin-top: var(--space-8); }
  .recog-card__mark, .recog-card--featured .recog-card__mark { width: 120px; height: 120px; }
  .compare-cards, .team-strip__list { grid-template-columns: minmax(0, 1fr); }
  .team-member { grid-template-columns: 80px minmax(0, 1fr); }
  .team-member__photo { width: 80px; height: 80px; }
  .compare-cards { margin-top: var(--space-48); }
  .compare-card { padding: var(--space-24); }
  .recog-card__scope { grid-template-columns: minmax(0, 1fr); }
  .js .hero-product:not(.is-in) .hero-product__card { transform: translate(-48px, -32px); }
  .js .hero-product:not(.is-in) .hero-product__chip { transform: translate(48px, 40px); }
  .measure-panel { padding: var(--space-24); }
  .measure-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); }
  .measure { padding-inline: 0; padding-top: var(--space-24); box-shadow: inset 0 1px 0 var(--color-border); }
  .measure:first-child { padding-top: 0; }   /* 8 grid cells: a whole number at any width */
  .showcase__side, .showcase__stage { grid-column: span 4; }
  .showcase__stage { height: auto; min-height: 528px; padding-bottom: var(--space-24); }
  .manifesto__group { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: 0; }
  .concept-stage { padding: var(--space-16); }
  .concept-stage__canvas { max-width: none; }
  .accordion__body { padding-right: 0; }
  .record-list__title { grid-column: 1 / -1; }
  .site-nav { flex: 0; }
  .site-nav__list { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--space-8) var(--container-padding) var(--space-32); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
  .site-nav__list.is-open { display: flex; }
  .site-nav__link { width: 100%; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
  .site-nav__link[aria-current="page"]::after { right: auto; width: var(--space-24); }
  .site-nav__indicator { display: none; }
  .site-nav__item { flex-direction: column; align-items: stretch; }
  .site-nav__toggle { display: none; }
  .site-nav__menu { position: static; width: auto; padding: 0 0 var(--space-8) var(--space-16); border: 0; border-radius: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }
  .site-nav__menu-list { grid-template-columns: 1fr; }
  .site-nav__menu-link { min-height: var(--button-height-md); justify-content: center; padding: 0; border-radius: 0; }
  .site-nav__menu-link:hover { background: none; }
  .site-nav__menu-title { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
  .site-nav__menu-desc { display: none; }
  .site-nav__list.is-open { max-height: calc(100vh - var(--header-height)); overflow-y: auto; }
  .site-nav.has-indicator .site-nav__link[aria-current="page"]::after { display: block; }
  .site-nav__mobile-cta { display: block; margin-top: var(--space-16); }
  .site-nav__mobile-cta .button { width: 100%; }
  .site-header__cta { display: none; }
  .site-header__inner { justify-content: space-between; }
  .menu-toggle { display: inline-flex; }
  .hero { padding-top: calc(var(--header-height) + var(--space-64)); padding-bottom: var(--space-64); }
  .hero__body { gap: var(--space-64); }
  .hero__product { flex-direction: column; gap: 0; }
  .hero .button-group, .hero .button-group .button, .page-hero .button-group, .page-hero .button-group .button { width: 100%; }
  .page-hero { padding-top: calc(var(--header-height) + var(--space-64)); padding-bottom: var(--space-64); }
  .page-hero__body { gap: var(--space-64); }
  .page-nav__list { gap: var(--space-24); }
  .form__fields { grid-template-columns: minmax(0, 1fr); }
  .field--half { grid-column: 1 / -1; }
  .choice-group .choice, .choice span { width: 100%; }
  .form__actions .button { width: 100%; }
  .stepper { row-gap: 0; }
  .stepper__step { padding: 0 0 var(--space-48) var(--space-32); border-top: 0; border-left: 1px solid var(--color-border); }
  .stepper__step:last-child { padding-bottom: 0; }
  .stepper__step::before { left: -1px; top: 0; width: 2px; height: calc(var(--progress) * 100%); }
  .stepper__step::after { left: calc(var(--space-4) * -1); top: 0; }
  .section-header--row { flex-direction: column; align-items: flex-start; }
  .resource-card { display: flex; }
  .resource-card__media { margin-bottom: var(--space-12); }
  .site-footer__link { min-height: var(--button-height-md); }
  /* Tables and the chip diagram keep their readable size and scroll sideways instead of crushing */
  .table-wrap > .table { min-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .news-feature, .js .news-feature:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .news-feature__media img { transition: none; transform: none !important; }
  .js .recog-card, .js .recog-card:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .recog-card:hover, .recog-card:hover .recog-card__mark { transform: none; }
  .table--compare .table__highlight, .js .fit-table td.table__highlight::before, .js .compare-card { transition: none; }
  .js .compare-card:not(.is-in) { opacity: 1; transform: none; }
  .js .hero-product > img { transition: none; opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .product-visual:hover .product-visual__image, .resource-card:hover .resource-card__media img, .glow-panel:hover .glow-panel__image { transform: none; }
  .js .reveal-group > *, .js .reveal-item, .js .reveal-group .resource-card__media img { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .heading-chrome { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
  .section__body::before, .hero__content::before, .page-hero__content::before, .spec-strip::before, .cta-band__content::before { display: none; }
  .button--primary, .button--secondary, .field__control, .choice span, .tag { outline: 1px solid CanvasText; outline-offset: -1px; }
  .button--primary::before, .glow-panel::before { display: none; }
}

/* Copy review 261011: stack the published-results columns on phones */
@media (max-width: 767px) { .measure-list { grid-template-columns: 1fr; gap: var(--space-24); } .measure { padding-inline: 0; box-shadow: none; } .measure + .measure { padding-top: var(--space-24); box-shadow: inset 0 1px 0 var(--color-border); } }

/* Resources 261013: brochure and papers open in a new tab; the arrow on the meta line says so. */
.resource-card__date { display: inline-flex; align-items: center; gap: var(--space-4); }
.resource-card__date .button__icon { width: 16px; height: 16px; transition: translate var(--duration-base) var(--ease); }
.resource-card:hover .resource-card__date .button__icon { translate: 2px -2px; }
.resource-card:focus-visible { outline: 2px solid var(--color-focus, var(--color-brand)); outline-offset: 4px; border-radius: var(--radius-lg); }

/* Shared: pause/play control for background video (WCAG 2.2.2). */
.video-toggle { display: grid; place-items: center; flex: none; width: var(--space-40); height: var(--space-40); border: 1px solid var(--color-border); border-radius: 50%; background: rgb(14 14 16 / 40%); color: var(--color-text-primary); cursor: pointer; transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.video-toggle:hover { background: rgb(14 14 16 / 72%); border-color: var(--color-border-strong); }
.video-toggle:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.video-toggle__icon { width: 16px; height: 16px; fill: currentColor; }
.video-toggle[aria-pressed="false"] .video-toggle__icon--play, .video-toggle[aria-pressed="true"] .video-toggle__icon--pause { display: none; }
@media (prefers-reduced-motion: reduce) { .video-toggle { display: none; } }


/* Home 261013: full-bleed video hero. Dark scope; chrome headline (white to grey) from the dark tokens.
   The left and bottom scrims keep the copy legible over every frame of the loop. */
.hero--video { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--color-bg); color: var(--color-text-primary); }
.hero--video .hero__body { width: 100%; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; filter: brightness(0.7) saturate(1.05); }
.hero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(14 14 16 / 90%) 0%, rgb(14 14 16 / 72%) 32%, rgb(14 14 16 / 24%) 62%, rgb(14 14 16 / 8%) 100%),
  linear-gradient(0deg, rgb(14 14 16 / 80%) 0%, rgb(14 14 16 / 0%) 34%),
  linear-gradient(180deg, rgb(14 14 16 / 60%) 0%, rgb(14 14 16 / 0%) 24%); }
.hero--video .hero__content { --col-span: 6; }
.hero--video .hero__content::before { display: none; }
.hero--video .hero__lead { color: var(--neutral-300, #c8c8c4); }
.hero--video .hero__product-full { color: var(--neutral-400); }
.hero__toggle { position: absolute; right: var(--container-padding); bottom: 0; }
.menu-toggle { color: var(--color-text-primary); }
.hero--video .hero__body { position: relative; }
@media (max-width: 767px) {
  .hero--video { min-height: 640px; align-items: flex-end; }
  .hero__video { object-position: 40% 50%; }
  .hero__media::after { background: linear-gradient(0deg, rgb(14 14 16 / 92%) 0%, rgb(14 14 16 / 70%) 50%, rgb(14 14 16 / 40%) 100%); }
  .hero__toggle { position: static; align-self: flex-end; margin-top: var(--space-24); }
}

/* Resources 261013: grouped lists (documents, video) and a video card with a play badge. */
.resource-group { display: flex; flex-direction: column; gap: var(--space-24); }
.resource-group__title { margin: 0; }
.resource-card__media--video { position: relative; background: #0e0e10; }
.resource-card__media--video img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.resource-card__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgb(14 14 16 / 56%); border: 1px solid rgb(255 255 255 / 28%); color: #fff; transition: background-color var(--duration-base) var(--ease), scale var(--duration-slow) var(--ease); }
.resource-card__play svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.resource-card--video:hover .resource-card__play { background: var(--color-brand); border-color: transparent; scale: 1.06; }
.resource-card__duration { position: absolute; right: var(--space-12); bottom: var(--space-12); padding: 2px var(--space-8); border-radius: var(--radius-sm, 4px); background: rgb(14 14 16 / 72%); color: #fff; font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-variant-numeric: tabular-nums; }

/* VDPU 261013 (copy review #28): one line under the spec strip says why specs are not listed. */
.spec-note { margin-top: var(--space-16); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-tertiary); }
.spec-note a { color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 3px; }

/* 261013b: Jeanne feedback. */
[tabindex="-1"]:focus { outline: none; }
.note-row--prominent { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.team-member__name { display: inline-flex; align-items: center; gap: var(--space-8); }
.team-member__link { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-tertiary); transition: color var(--duration-fast, 150ms) var(--ease); }
.team-member__link svg { width: 16px; height: 16px; }
.team-member__link:hover { color: #0a66c2; }
.team-member__link:focus-visible { outline: 2px solid var(--color-focus, var(--color-brand)); outline-offset: 2px; }
/* Selection cards: a soft warm fill so the shorter cards read as finished, not empty. */
.recog-card:not(.recog-card--featured) { background: linear-gradient(160deg, rgb(var(--orange-rgb) / 8%) 0%, rgb(var(--orange-rgb) / 3%) 60%, rgb(var(--orange-rgb) / 1%) 100%), var(--color-surface); box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / 14%); }
.recog-card:not(.recog-card--featured) .recog-card__mark { opacity: 11%; stroke: var(--color-brand-strong); }
.recog-card:not(.recog-card--featured):hover { box-shadow: inset 0 0 0 1px transparent, 0 16px 32px rgb(var(--orange-rgb) / 10%); }
.recog-card:not(.recog-card--featured):hover .recog-card__mark { opacity: 28%; stroke: var(--color-brand); }
.note-row--prominent .button { font-size: var(--font-size-body); line-height: var(--line-height-body); }
/* 261013c: KOLAS panel without throughput: two measures (recall, p99 latency). */
@media (min-width: 768px) { .measure-list--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.measure__prefix { margin-right: 2px; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.measure__unit { margin-left: 6px; font-size: var(--font-size-h3, 24px); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
/* 261013c: press list keeps its natural height (does not stretch to the milestones column). */
.press-list { flex: none; }
.press-list > li { flex: none; }
.press-item { justify-content: flex-start; padding-block: var(--space-24); }
/* 261013d: meta reads "Type: Source, Date" (no middle-dot separators). */
.news-meta { display: block; }
.news-meta > * + *::before { content: none; }

/* ---------- Design targets (Home effect, VDPU performance) ----------
   Three cards: 10× throughput, 90% lower TCO, 87% less rack space (V110 projections from FPGA measurements).
   Each card's charts are driven by --p (0 → 1), set from scroll position in site.js; --p defaults to 1 (final state). */
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }
.targets { display: flex; flex-direction: column; gap: var(--space-24); }
.targets__title { display: flex; align-items: baseline; gap: 2px; }
.targets__mark { color: var(--color-brand-strong); }
.targets__list { row-gap: var(--grid-gap); }
.target { --col-span: 4; --col-span-tablet: 8; --col-span-mobile: 4; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-32) var(--space-32) var(--space-24); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgb(var(--orange-rgb) / 6%) 0%, rgb(var(--orange-rgb) / 1%) 70%), var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.target__figure { display: flex; align-items: baseline; font-size: 64px; line-height: 64px; font-weight: var(--font-weight-semibold); letter-spacing: -2px; color: var(--color-brand-strong); font-variant-numeric: tabular-nums; }
.target__unit { margin-left: 2px; font-size: 40px; letter-spacing: 0; }
.target__title { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.target__chart { height: 160px; margin-top: var(--space-24); }
.target__note { margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--color-border); font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-tertiary); }
/* 10×: two horizontal bars */
.target__chart--bars { display: flex; flex-direction: column; justify-content: center; gap: var(--space-24); }
.tbar { display: flex; flex-direction: column; gap: var(--space-8); }
.tbar__label { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.tbar--vdpu .tbar__label { color: var(--color-brand-strong); font-weight: var(--font-weight-semibold); }
.tbar__track { position: relative; height: 12px; border-radius: 6px; background: rgb(var(--ink-rgb) / 5%); overflow: hidden; }
.tbar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--neutral-200), var(--neutral-400)); transform-origin: left; transform: scaleX(var(--p)); }
.tbar--vdpu .tbar__fill { background: linear-gradient(90deg, rgb(var(--orange-rgb) / 10%), var(--color-brand)); }
/* 90%: two columns, an arrow down to the short one */
.target__chart--cols { display: flex; align-items: stretch; justify-content: center; gap: var(--space-48); }
.tcol { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 96px; }
.tcol__track { position: relative; flex: 1; width: 40px; border-bottom: 1px solid var(--color-border-strong); }
.tcol__fill { position: absolute; inset: auto 0 0; height: calc(var(--h) * 100%); border-radius: 20px 20px 0 0; background: linear-gradient(180deg, var(--neutral-300), rgb(var(--ink-rgb) / 4%)); transform-origin: bottom; transform: scaleY(var(--p)); }
.tcol--vdpu .tcol__fill { background: linear-gradient(180deg, var(--color-brand), rgb(var(--orange-rgb) / 20%)); }
.tcol__arrow { position: absolute; left: 50%; bottom: calc(10% + 8px); width: 16px; height: calc(80% * var(--p)); max-height: 104px; translate: -50% 0; fill: none; stroke: var(--color-brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: clamp(0, calc((var(--p) - 0.5) * 3), 1); overflow: visible; }
.tcol__label { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); white-space: nowrap; }
.tcol--vdpu .tcol__label { color: var(--color-brand-strong); font-weight: var(--font-weight-semibold); }
/* 87%: two racks of 15 units; the VDPU rack keeps 2 and the other 13 slots empty out */
.target__chart--racks { display: flex; justify-content: center; gap: var(--space-48); }
.track { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.track__units { display: flex; flex-direction: column; gap: 2px; width: 88px; padding: 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.track__units i { height: 6px; border-radius: 2px; background: var(--neutral-300); }
.track--vdpu .track__units i.is-empty { box-shadow: inset 0 0 0 1px var(--neutral-200); background: color-mix(in srgb, var(--neutral-300) calc(clamp(0, 1 - (var(--p) - 0.3 - var(--k) * 0.03) * 5, 1) * 100%), transparent); }
.track--vdpu .track__units i.is-on { background: var(--color-brand); box-shadow: 0 0 0 1px rgb(var(--orange-rgb) / 30%); }
.track__label { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); white-space: nowrap; }
.track--vdpu .track__label { color: var(--color-brand-strong); font-weight: var(--font-weight-semibold); }
@media (max-width: 767px) {
  .target { padding: var(--space-24); }
  .target__figure { font-size: 56px; line-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .target { --p: 1 !important; } }
.track:not(.track--vdpu) .track__units i, .track--vdpu .track__units i.is-on { opacity: clamp(0.08, calc(var(--p) * 4 - (14 - var(--k)) * 0.15), 1); }
/* 261013e: smoother growth — --p (a registered number) eases toward each new scroll value instead of jumping frame to frame. */
.target { transition: --p 900ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .target { transition: none; } }