/* ═══════════════════════════════════════════════════════════════════════════
   YOURS ROBOTICS — Design system
   One stylesheet. No Bootstrap, no AOS, no icon font, no theme base.

   Working constraints (exceptions are documented inline, not made silently):
     · Radii        3 values — 12px controls, 20px cards, 24px media
     · Elevation    2 values — rest, hover (hover only on clickable things)
     · Dark bands   3 placements — proof strip, closing CTA, footer
     · Accent       #A4D512, used sparingly; never as body text on white
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font ─────────────────────────────────────────────────────────────────
   Clash Display for headings only. Body and UI use the system stack, which
   also gives correct CJK rendering for the JA and ZH-CN versions.           */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplayMedium.woff2') format('woff2'),
       url('../fonts/ClashDisplayMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --accent:        #A4D512;
  --accent-hover:  #b8e620;
  --accent-ink:    #1a2a00;  /* text on an accent fill — 9.0:1 */
  --accent-text:   #4e6a07;  /* accent as text on light — 5.3:1 */

  /* Ink + neutrals */
  --ink:        #111827;
  --ink-deep:   #0f1117;
  --gray-700:   #374151;
  --gray-500:   #6b7280;
  --gray-400:   #9ca3af;  /* decorative only — 2.5:1, never used for text */
  --gray-300:   #d1d5db;
  /* Form controls need a 3:1 boundary under WCAG 1.4.11; #d1d5db is 1.5:1. */
  --control-border: #8d94a0;
  --gray-200:   #e5e7eb;
  --gray-100:   #f3f4f6;
  --gray-50:    #f9fafb;
  --white:      #ffffff;

  /* On dark */
  /* Alphas are set by measurement, not by eye: .72 over --ink gives 9.5:1 and
     .55 gives 4.6:1, so secondary and tertiary copy both clear AA at body size. */
  --on-dark:        rgba(255,255,255,0.92);
  --on-dark-muted:  rgba(255,255,255,0.72);
  --on-dark-faint:  rgba(255,255,255,0.55);
  --hairline-dark:  rgba(255,255,255,0.10);
  --hairline:       var(--gray-200);

  /* Radii — three values */
  --r-sm: 12px;   /* buttons, inputs, icon boxes, chips */
  --r-md: 20px;   /* cards */
  --r-lg: 24px;   /* media frames, large containers */

  /* Elevation — two values */
  --e-rest:  0 1px 2px rgba(17,24,39,.04), 0 4px 16px rgba(17,24,39,.05);
  --e-hover: 0 2px 4px rgba(17,24,39,.05), 0 12px 32px rgba(17,24,39,.09);

  /* Rhythm */
  --gutter: 24px;
  --maxw: 1240px;
  --section-y: clamp(72px, 9vw, 132px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display',
               'Hiragino Kaku Gothic ProN', 'Helvetica Neue', system-ui, 'Segoe UI',
               'Microsoft YaHei', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Clash Display', -apple-system, 'PingFang SC', 'Hiragino Kaku Gothic ProN',
               system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Display sizes tighten further; body-size headings do not. */
.t-display {
  font-size: clamp(2.35rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
.t-h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
}
.t-h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.t-h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.012em; }

/* CJK does not want negative tracking — it closes up glyph spacing badly. */
:root:lang(ja) h1, :root:lang(ja) h2, :root:lang(ja) h3, :root:lang(ja) h4,
:root:lang(zh-Hans) h1, :root:lang(zh-Hans) h2, :root:lang(zh-Hans) h3, :root:lang(zh-Hans) h4,
html[lang="ja"] .t-display, html[lang="ja"] .t-h2, html[lang="ja"] .t-h3,
html[lang="zh-Hans"] .t-display, html[lang="zh-Hans"] .t-h2, html[lang="zh-Hans"] .t-h3 {
  letter-spacing: 0;
  line-height: 1.3;
}
html[lang="ja"] .t-display, html[lang="zh-Hans"] .t-display { line-height: 1.22; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.72;
  color: var(--gray-500);
  max-width: 62ch;
  text-wrap: pretty;
}
.body-text { color: var(--gray-500); max-width: 68ch; text-wrap: pretty; }

/* Section label — minimal type, no filled pill. */
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 14px;
}
.on-dark .eyebrow { color: var(--on-dark-faint); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }

.head { max-width: 46rem; margin-bottom: clamp(36px, 4vw, 56px); }
.head--center { margin-inline: auto; text-align: center; }
.head .lede { margin-top: 18px; }

.stack-lg > * + * { margin-top: clamp(56px, 6vw, 88px); }

/* Dark band — flat, no glass, no glow. */
.on-dark {
  background: var(--ink);
  color: var(--on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lede, .on-dark .body-text { color: var(--on-dark-muted); }
.band-gray { background: var(--gray-50); }

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  background: var(--ink); color: var(--white);
  padding: 12px 18px; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

/* ── Navigation — detached, architectural, not an oversized pill ────────── */
.nav-shell {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 16px var(--gutter) 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-inline: 20px 14px;
  border-radius: 16px;
  background: rgba(15,17,23,0.82);
  border: 1px solid var(--hairline-dark);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background .3s var(--ease);
}
.nav--solid { background: rgba(15,17,23,0.94); }

.nav__brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
/* The brand mark is a single dark colour, so on dark surfaces it is rendered
   white rather than shipping a second logo file. */
/* The approved wordmark is already white on transparent, so no filter is
   applied. Sized optically rather than by multiplier: 26px keeps the nav at
   64px while giving the identity clear presence. */
.nav__brand img { height: 26px; width: auto; }


.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: block; padding: 8px 14px; border-radius: 10px;
  font-size: 0.9375rem; color: rgba(255,255,255,0.68);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.nav__link[aria-current="page"] { color: var(--white); }

.nav__right { display: flex; align-items: center; gap: 10px; }

/* Nothing in the bar may wrap. Japanese and Chinese set no word boundaries, so
   a label a few pixels too wide for the row breaks mid-word rather than
   pushing the layout — プロダクト splits after ク and the 64px bar silently
   grows to two lines. Tightening below handles the fit; this makes the failure
   impossible rather than merely unlikely. */
.nav__link, .lang button, .nav__right > .btn { white-space: nowrap; }

/* Through the band just above the collapse the bar is tight in every language
   and roughly 30px short in Japanese. Tighten the spacing there rather than
   collapse earlier still: the links are worth more than the padding. */
@media (max-width: 1100px) {
  .nav { gap: 14px; padding-inline: 16px 12px; }
  .nav__link { padding-inline: 9px; }
  .nav__right { gap: 8px; }
  .nav__right > .btn { padding-inline: 16px; }
  .lang button { padding-inline: 7px; }
}

/* Language selector */
.lang { display: flex; align-items: center; gap: 1px; padding: 3px; border-radius: 10px;
        background: rgba(255,255,255,0.06); }
.lang button {
  padding: 5px 9px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
  color: rgba(255,255,255,0.72); transition: all .18s var(--ease);
}
.lang button:hover { color: var(--white); }
.lang button[aria-pressed="true"] { background: rgba(255,255,255,0.14); color: var(--white); }

.nav__toggle { display: none; padding: 8px; border-radius: 10px; color: var(--white); }
.nav__toggle:hover { background: rgba(255,255,255,0.07); }
.nav__toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8;
                   stroke-linecap: round; }

/* CES announcement — restrained, sits inside the nav shell */
.ces-strip {
  pointer-events: auto;
  width: 100%; max-width: var(--maxw); margin: 8px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 18px; border-radius: 10px;
  background: rgba(15,17,23,0.80);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 0.78125rem; color: var(--on-dark);
  transition: background .2s var(--ease);
}
.ces-strip:hover { background: rgba(15,17,23,0.82); }
.ces-strip strong { color: var(--on-dark); font-weight: 500; }
/* A small lime dot carries the signal so the bar itself can stay quiet and read
   as a temporary announcement rather than a second navigation. */
.ces-strip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.ces-strip .arrow { color: var(--accent); }

/* Mobile menu */
.mobile {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--ink-deep);
  display: flex; flex-direction: column;
  padding: 20px var(--gutter) 32px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .34s var(--ease), visibility .34s;
  overflow-y: auto;
}
.mobile[data-open] { transform: translateY(0); visibility: visible; }
.mobile__top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.mobile__top button { color: var(--white); padding: 8px; }
.mobile__top svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8;
                   stroke-linecap: round; }
.mobile__links { margin-top: 32px; display: flex; flex-direction: column; }
.mobile__links a {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: 1.75rem; color: var(--white); letter-spacing: -0.02em;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-dark);
}
.mobile__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }

/* ── Buttons — primary / secondary / text. No fourth style. ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  text-align: center;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary { border: 1px solid var(--gray-300); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); }
.on-dark .btn--secondary { border-color: rgba(255,255,255,0.24); color: var(--white); }
.on-dark .btn--secondary:hover { border-color: rgba(255,255,255,0.6); }

.btn--text {
  padding: 0; color: var(--accent-text); font-weight: 600; gap: 6px;
  background: none; border: none;
}
.btn--text .arrow { transition: transform .2s var(--ease); }
.btn--text:hover .arrow { transform: translateX(3px); }
.on-dark .btn--text { color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Focus — visible against green and on both themes ───────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible, .nav :focus-visible, .mobile :focus-visible {
  outline-color: var(--accent);
}

/* ── Links inside prose: one external-link treatment ────────────────────── */
.link {
  color: var(--accent-text);
  font-weight: 500;
  border-bottom: 1px solid rgba(78,106,7,0.32);
  transition: border-color .18s var(--ease);
}
.link:hover { border-bottom-color: var(--accent-text); }
.on-dark .link { color: var(--accent); border-bottom-color: rgba(164,213,18,0.35); }
.on-dark .link:hover { border-bottom-color: var(--accent); }
.link .ext { width: .68em; height: .68em; display: inline-block; margin-left: .3em;
             vertical-align: baseline; stroke: currentColor; fill: none; stroke-width: 2; opacity: .6; }
/* Links embedded inside translated copy get their external cue from CSS rather
   than an inline SVG duplicated across three language files. */
.link[target="_blank"]:not(:has(.ext))::after {
  content: "\2197"; font-size: .78em; margin-left: .22em; opacity: .55;
}

/* ── Card — one base, context modifiers only ────────────────────────────── */
.card {
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--white);
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow: var(--e-rest);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--gray-500); font-size: 0.96875rem; }
.on-dark .card {
  background: rgba(255,255,255,0.035);
  border-color: var(--hairline-dark);
  box-shadow: none;
}
.on-dark .card p { color: var(--on-dark-muted); }
.band-gray .card { background: var(--white); }

/* Only genuinely clickable cards lift, and they lift by shadow + border, not transform. */
a.card, .card--link {
  display: block;
  transition: box-shadow .28s var(--ease), border-color .28s var(--ease);
}
a.card:hover, .card--link:hover { box-shadow: var(--e-hover); border-color: var(--gray-300); }
a.card:hover .fig__img, .card--link:hover .fig__img { transform: scale(1.03); }

/* Plain bordered list item — used where a card would be too much furniture. */
.rule-list { border-top: 1px solid var(--hairline); }
.rule-item { padding-block: clamp(24px, 2.6vw, 34px); border-bottom: 1px solid var(--hairline); }
.on-dark .rule-list, .on-dark .rule-item { border-color: var(--hairline-dark); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--wide-media { grid-template-columns: 0.85fr 1.15fr; }

/* ── Image system ────────────────────────────────────────────────────────
   A family of treatments, not one frame repeated. Every frame holds its final
   footprint, crop and radius whether or not the photograph exists yet, so a
   real image drops in by setting src + object-position and nothing reflows.  */
.fig { position: relative; }
.fig__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--gray-100);
  aspect-ratio: var(--fig-ratio, 16 / 10);
}
.fig__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fig-pos, center);
  transition: transform .5s var(--ease);
}

/* Home hero panel — sits beside the headline and runs off the right edge of
   the viewport, so it is rounded on the left and square where it leaves the
   screen. Its left edge is washed back into the dark band by ::after rather
   than stopping at a hard seam; that wash is what lets the headline hold its
   own column without the photograph crowding it. 3:2 because the panel is
   vertically centred at its natural ratio — stretching it to the full hero
   height would force a near-square crop, which no deployment photograph of a
   robot and the people around it survives. */
/* In the split the panel has no ratio of its own: it fills the hero, running a
   little above the headline and a little below the buttons, so the photograph
   carries the same weight as the words beside it rather than floating as a
   strip in the middle of the dark. It sits inside the page margin like every
   other block, so its width is fixed by the container above 1288px and only
   the length of the copy moves its proportion — about 1.05:1 at 1200px and
   1.27:1 from 1288px up. A 4:3 source covers that range with the least waste.
   Stacked, it takes the same 4:3 uncropped. */
.fig--hero-split { --fig-ratio: 4 / 3; }
@media (min-width: 1200px) {
  /* No height on .hero__media itself: it is a stretched grid item, so letting
     its height resolve automatically means the negative block margins below
     grow the panel past the row on both sides rather than sliding it. Pinning
     it to 100% would just move the whole panel and leave the buttons hanging
     outside it. */
  .fig--hero-split,
  .fig--hero-split .fig__frame { height: 100%; }
  .fig--hero-split .fig__frame { aspect-ratio: auto; }
}

/* Deployment — editorial, environmental, taller crop. */
.fig--deploy { --fig-ratio: 4 / 3; }

/* Interaction — closer crop, human/robot relationship readable. */
.fig--interact { --fig-ratio: 1 / 1; }

/* Product — cleaner and more controlled so the hardware reads clearly. Capped
   and centred: at full container width the frame becomes a wall rather than a
   portrait of the machine. 16:9 because that is how the studio shot is lit —
   a single pool of light with the robot in it — and a 4:3 crop would cut the
   light away on both sides and leave the machine sitting in a box. */
.fig--product { --fig-ratio: 16 / 9; max-width: 1040px; margin-inline: auto; }
.fig--product .fig__frame {
  background: linear-gradient(170deg, var(--gray-50), var(--gray-100));
}

/* Editorial card — compact, publication-like. */
.fig--card { --fig-ratio: 3 / 2; }
.fig--card .fig__frame { border-radius: var(--r-md); }

/* Full-bleed strip. */
.fig--bleed { --fig-ratio: 21 / 9; }
.fig--bleed .fig__frame { border-radius: 0; }

.fig__caption {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--gray-500);
  line-height: 1.55;
}
.on-dark .fig__caption { color: var(--on-dark-faint); }

/* Missing-photo state — a designed, obviously-provisional frame that holds the
   exact composition. Never mistakable for a real photograph. */
.fig[data-pending] .fig__frame {
  background:
    repeating-linear-gradient(-45deg,
      rgba(17,24,39,0.028) 0 10px,
      transparent 10px 20px),
    var(--gray-100);
  border: 1px dashed var(--gray-300);
}
.on-dark .fig[data-pending] .fig__frame {
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.035) 0 10px,
      transparent 10px 20px),
    rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
}
/* The pending label doubles as the shot list: slot code, where it appears, the
   brief, and the resolution to supply. It exists only while data-pending is
   set, so it leaves with the first real photograph — there is nothing here to
   remember to remove before launch. */
.fig__pending {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 20px 18px; text-align: center;
}
.fig__pending svg { width: 26px; height: 26px; stroke: var(--gray-500); fill: none; stroke-width: 1.4; }
.fig__pending b {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-500);
}
/* Slot code — the one line that ties this frame to the designer brief. */
.fig__pending i {
  font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent-text); max-width: 32ch; line-height: 1.4;
}
.fig__pending span {
  font-size: 0.78125rem; color: var(--gray-500); max-width: 34ch; line-height: 1.5;
}
/* Supply resolution — boxed so it reads as an instruction, not a caption. */
.fig__pending em {
  font-style: normal; font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--gray-500); text-transform: uppercase;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.on-dark .fig__pending svg { stroke: var(--on-dark-faint); }
.on-dark .fig__pending b, .on-dark .fig__pending span { color: var(--on-dark-faint); }
.on-dark .fig__pending i { color: var(--accent); }
.on-dark .fig__pending em {
  color: rgba(255,255,255,0.46);
  border-color: rgba(255,255,255,0.18);
}

/* ── Proof composition ───────────────────────────────────────────────────
   Used once, on the home page. Inset to the same max-width as the rest of the
   content rather than bleeding to the viewport edge — edge-to-edge made it read
   as though it came from a different design system. */
/* The card is lifted into the hero's lower edge: it reads as the evidence that
   closes the hero rather than a stranded band, and it removes ~200px of dead
   space that opened up between the two. */
.proof-section {
  /* No bottom padding: the following section supplies its own top padding, and
     having both opened a 264px gap under the card. */
  padding-block: 0;
  margin-top: -76px;
  position: relative;
  z-index: 2;
}

.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(32px, 3.6vw, 52px) clamp(24px, 2.6vw, 40px);
  gap: clamp(24px, 3vw, 48px);
}
.proof__cell { position: relative; }
.proof__cell + .proof__cell { padding-left: clamp(24px, 3vw, 48px); }
.proof__cell + .proof__cell::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: rgba(255,255,255,0.12);
}
.proof__value {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--accent);
  margin-bottom: 12px;
}
/* The third cell is categorical, not a third invented number, so it takes its
   own treatment rather than pretending to be a metric. */
.proof__markets {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 12px;
  padding-top: clamp(0px, 1.2vw, 16px);
}
html[lang="ja"] .proof__value, html[lang="zh-Hans"] .proof__value,
html[lang="ja"] .proof__markets, html[lang="zh-Hans"] .proof__markets {
  letter-spacing: 0;
}
/* Japanese renders these as 2,500台以上 — far longer than "2,500+". */
html[lang="ja"] .proof__value { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.proof__label { font-size: 0.875rem; color: var(--on-dark-muted); }

/* ── Numbered sequence (Stellar Engine) ──────────────────────────────────
   A counted list, not three feature cards — the point is that the steps follow
   one another, which cards would flatten. */
.seq { counter-reset: seq; }
.seq__item {
  counter-increment: seq;
  position: relative;
  padding-left: 42px;
  padding-block: 18px;
  border-top: 1px solid var(--hairline);
}
.seq__item:first-child { border-top: 0; padding-top: 0; }
.seq__item::before {
  content: counter(seq, decimal-leading-zero);
  position: absolute; left: 0; top: 19px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--accent-text);
}
.seq__item:first-child::before { top: 1px; }
.seq__item p { color: var(--gray-500); font-size: 0.96875rem; margin-top: 4px; }

/* ── Headquarters (Contact) ──────────────────────────────────────────────
   Two entries, deliberately not repeating rows — four identical rows
   previously implied four offices. */
.hq-list { display: grid; gap: clamp(24px, 3vw, 36px); margin-top: 6px; }
.hq { padding-left: 16px; border-left: 2px solid var(--accent); }
.hq__role {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray-500); margin-top: 6px;
}
.hq__addr { color: var(--gray-700); font-size: 0.96875rem; margin-top: 10px; max-width: 42ch; text-wrap: pretty; }

/* ── Note — service information, not a location ──────────────────────────*/
.note { border-top: 1px solid var(--hairline); padding-top: 20px; }
.note__title { font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.note__body { color: var(--gray-500); font-size: 0.9375rem; margin-top: 6px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); }
.field .req { color: var(--accent-text); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 0.96875rem;
  transition: border-color .18s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-700); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-text); outline: none;
  box-shadow: 0 0 0 3px rgba(164,213,18,0.18);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #b91c1c;
}
.field .err { font-size: 0.78125rem; color: #b91c1c; min-height: 1px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,4.5 6,8.5 10,4.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--accent-text); }
.check label { font-size: 0.9375rem; font-weight: 400; color: var(--gray-700); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.form-note {
  padding: 14px 16px; border-radius: var(--r-sm);
  font-size: 0.875rem; line-height: 1.55;
}
.form-note[data-state="ok"]   { background: #f2f9e3; color: #33480a; border: 1px solid #cfe79a; }
.form-note[data-state="err"]  { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }
.form-note[hidden] { display: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { background: var(--ink-deep); color: var(--on-dark-muted); padding-block: clamp(56px, 6vw, 80px) 32px; }
.footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 30px; width: auto; margin-bottom: 20px; }
.footer__brand p { font-size: 0.875rem; max-width: 30ch; line-height: 1.65; color: var(--on-dark-faint); }
.footer h5 {
  font-family: inherit;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-faint); margin-bottom: 14px;
}
.footer a { display: block; font-size: 0.90625rem; color: var(--on-dark-muted); padding-block: 5px;
            transition: color .18s var(--ease); }
.footer a:hover { color: var(--white); }
/* Legal links share the bottom bar with the copyright — present and findable,
   but visually subordinate to everything else. No margin of their own: they
   are a flex item in .footer__bottom, so any top margin here would push them
   off the copyright’s baseline and read as a wrapped second line. (It did:
   this rule still carried a 36–52px margin from when the legal nav was its
   own block beneath the navigation columns.) */
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 20px;
}
.footer__legal a {
  font-size: 0.8125rem; color: var(--on-dark-faint); padding: 0;
}
.footer__legal a:hover { color: var(--on-dark); }

.footer__bottom {
  margin-top: clamp(24px, 3vw, 32px); padding-top: 26px;
  border-top: 1px solid var(--hairline-dark);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 0.8125rem; color: var(--on-dark-faint);
}

/* ── Motion — one reveal, one duration ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* Honeypot. Deliberately not display:none or visibility:hidden — both are the
   first thing a form filler checks for. Taken out of the layout and the tab
   order instead, so a person never sees it or reaches it. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Utilities ──────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 44px; }

/* ── Page hero (inner pages) ────────────────────────────────────────────── */
.page-hero { padding-top: calc(64px + 16px + clamp(56px, 7vw, 104px)); padding-bottom: clamp(40px, 5vw, 64px); }
.page-hero .t-display { max-width: 18ch; }
.page-hero .lede { margin-top: 20px; }

/* Home hero sits on the dark band so the floating nav has something to sit on.
   Stacked by default — text, then photograph — which is what phones and
   tablets get; the split below only engages where there is room for it. */
.hero {
  background: var(--ink-deep);
  color: var(--on-dark);
  padding-top: calc(64px + 16px + clamp(64px, 8vw, 116px));
  /* The proof card rides up into this padding — -56px on a phone, -76px above
     860px — so the figure above it needs that much clearance plus a gap. The
     old value bottomed out at 56px, which cancelled the phone overlap exactly
     and left the card sitting on the image. (There was a second, earlier
     padding-bottom declaration for .hero further up the sheet; it had the same
     specificity and lost to this one, so it never did anything. Removed.) */
  padding-bottom: clamp(112px, 10vw, 140px);
  overflow: hidden;              /* the panel bleeds right; never scroll for it */
}
.hero h1 { color: var(--white); max-width: 15ch; }
.hero .lede { color: var(--on-dark-muted); margin-top: 22px; max-width: 54ch; }
.hero .eyebrow { color: var(--accent); }
.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__media { margin-top: clamp(44px, 5vw, 68px); }

/* The split. Percentages resolve against .hero’s content box — the viewport
   minus any scrollbar — so the left padding lands on the same gutter as every
   other section while the right side runs off the screen.

   1200px, not 1024: once the panel fills the hero rather than floating in it,
   the text column has to live in 40% of the width, and below ~1200 that is not
   enough. At 1024 it took the headline to four lines, broke the two buttons
   onto separate rows and squeezed the panel to nearly square — a crop no wide
   deployment photograph survives. Between 1024 and 1200 the hero stacks
   instead, which it does perfectly well. */
@media (min-width: 1200px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    align-items: stretch;
    max-width: none;
    /* Symmetric: the panel stops on the page margin rather than bleeding off
       the right edge, so it lines up with the nav above it and the proof card
       below. Above 1288px this also fixes the panel’s width, which is what
       stops its crop wandering with the size of the monitor. */
    padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  }
  /* The proof card rides -76px up into the hero. In the split the text column
     is narrower and runs taller, so at ~1024px the buttons came within a few
     pixels of that card: 12vw is only 123px there. Raise the floor so the
     clearance holds across the whole split range, not just at 1440. */
  .hero { padding-bottom: clamp(150px, 12vw, 164px); }
  .hero__text { padding-right: clamp(32px, 4vw, 72px); max-width: 640px; align-self: center; }
  .hero h1 { max-width: 13ch; }
  .hero .lede { max-width: 42ch; }
  /* The panel overhangs the text block by the same amount above and below, so
     it reads as a face of the hero rather than a picture placed inside it,
     while staying visually anchored to the copy. Anchoring it to the nav
     instead pinned the top and let the bottom drift, which left it riding
     high. Negative block margins on a stretched grid item grow the border box
     past the row on both sides without changing the row’s height. */
  .hero__media { margin-block: calc(-1 * clamp(24px, 3vw, 44px)); }
}

/* Draft notice — only ever seen on an unpublished legal page. */
.draft-note {
  border: 1px solid var(--accent-text);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  padding: 18px 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-700);
  background: #f7fbe9;
}
.draft-note strong { color: var(--accent-text); }
.draft-note code { font-size: .92em; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
.prose code { font-size: .92em; background: var(--gray-100); padding: 2px 6px; border-radius: 4px; }

/* ── Legal pages — text-led, narrow measure ─────────────────────────────── */
.prose { max-width: 42rem; }
.prose h2 { font-size: 1.375rem; margin-top: clamp(36px, 4vw, 52px); }
.prose h3 { font-size: 1.0625rem; margin-top: 28px; }
.prose p, .prose li { color: var(--gray-500); margin-top: 14px; }
.prose ul { margin-top: 10px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before {
  content: ""; position: absolute; left: 4px; top: .7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gray-300);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose .meta { font-size: 0.8125rem; color: var(--gray-500); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* The bar collapses on its own breakpoint, not the page layout's. At 860px
   English was already ~20px too wide for it: the call to action wrapped to two
   lines inside its own button and pushed the bar out of its 64px rhythm, which
   is quiet enough to have gone unnoticed. 940px is where the longest of the
   three Latin-script sets still has room to breathe. Everything in the bar
   moves to the menu button together — links, language selector and call to
   action — so the bar never half-collapses. */
@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__right .lang { display: none; }
  .nav__right > .btn { display: none; }
  .nav__toggle { display: block; }
}

@media (max-width: 860px) {
  .split, .split--wide-media { grid-template-columns: 1fr; gap: 32px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .proof-section { margin-top: -56px; }
  .proof { grid-template-columns: 1fr; gap: 0; }
  .proof__cell + .proof__cell {
    padding-left: 0; padding-top: clamp(22px, 4vw, 30px); margin-top: clamp(22px, 4vw, 30px);
  }
  .proof__cell + .proof__cell::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
  }
  .proof__markets { padding-top: 0; }
}

/* Japanese is the one language whose nav set does not fit between 860px and
   ~1010px: five labels plus the call to action run roughly 80px wider than the
   bar, which is more than spacing can recover — and with nothing allowed to
   wrap, the overflow would cut the button instead. So Japanese reaches for the
   menu button a little earlier than the other two. The language selector goes
   with it, exactly as it does at 860px; the mobile menu carries its own copy,
   so nothing is stranded. <html lang> is set by yours-i18n.js at the same
   moment the Japanese text appears, so the layout never disagrees with the
   words it is sizing for. Chinese is ~100px narrower and stays at 860px. */
@media (max-width: 1010px) {
  html[lang="ja"] .nav__links,
  html[lang="ja"] .nav__right .lang,
  html[lang="ja"] .nav__right > .btn { display: none; }
  html[lang="ja"] .nav__toggle { display: block; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; --section-y: clamp(56px, 12vw, 80px); }
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .fig--interact { --fig-ratio: 4 / 3; }
  .fig--bleed { --fig-ratio: 16 / 10; }
  /* The pending label has four lines; the icon is the one part that carries no
     information, so it goes first rather than letting the brief clip. */
  .fig__pending { gap: 5px; padding: 14px 12px; }
  .fig__pending svg { display: none; }
  .fig__pending b { font-size: 0.6875rem; letter-spacing: 0.08em; }
  .fig__pending i { font-size: 0.6875rem; }
  .fig__pending span { font-size: 0.71875rem; line-height: 1.45; }
  .fig__pending em { font-size: 0.625rem; padding: 2px 8px; }
  /* Documented exception to the type scale: the home hero is capped on phones so
     the proof numbers are reachable without several screens of scrolling. */
  .hero .t-display { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .page-hero .t-display { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* ── Progressive enhancement ─────────────────────────────────────────────
   Every effect below is decorative. Where a browser lacks the feature the
   content stays fully usable — it just loses the flourish.                  */

/* Without backdrop-filter (older Firefox, some embedded webviews) the nav
   would be a translucent panel over scrolling content and unreadable, so it
   becomes opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav       { background: rgba(15,17,23,0.97); }
  .ces-strip { background: rgba(15,17,23,0.97); }
}

/* aspect-ratio has been in Safari since 15; older engines fall back to the
   padding-top ratio box so image frames keep their footprint and nothing
   collapses. */
@supports not (aspect-ratio: 16 / 10) {
  .fig__frame { height: 0; padding-top: 62.5%; }
  .fig--hero-split .fig__frame { padding-top: 75%; }
  .fig--deploy .fig__frame { padding-top: 75%; }
  .fig--interact .fig__frame { padding-top: 100%; }
  .fig--product .fig__frame { padding-top: 56.25%; }
  .fig--card .fig__frame { padding-top: 66.66%; }
  .fig--bleed .fig__frame { padding-top: 42.85%; }
}

/* :focus-visible landed in Safari 15.4. Older engines get a plain :focus ring
   rather than no visible focus at all. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent-text);
    outline-offset: 3px;
  }
}

/* iOS Safari: 100vh includes the retracting toolbars. No layout depends on vh,
   but dvh is used where a full-height panel is needed so the mobile menu can
   never be taller than the visible viewport. */
.mobile { height: 100vh; height: 100dvh; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .nav-shell, .mobile, .ces-strip { display: none; }
  body { color: #000; }
}