/* ==========================================================================
   rds-system.css — the Robo Lab design system, applied
   ==========================================================================

   WHY THIS FILE EXISTS
   --------------------
   The site was assembled from three sources (a hand-built marketing site, a
   WordPress/Elementor export, and a separate white-paper template). Each
   invented its own scale. Measured across styles.css and the 25 inline
   article templates:

       font sizes    25 distinct values   0.94rem AND 0.95rem; 0.875 AND 0.88
       font weights  400 500 600 700 800 850 900   (850 is not a real weight —
                     the browser synthesises it, which is why headings looked
                     smeared)
       radii         2 8 10 12 14 15 18 20 26 28 50 999
       greys         #56657b #a6b1c0 #3a4a68 #aab8ce #d7deec #bbc7d8 #8b98ab
                     #8793a5 — eight, none from the palette

   Nothing there is a *bug*. It renders. It is simply not a system, and that
   is precisely what "unpolished" looks like: no two things agree, so the eye
   never finds a rhythm to trust.

   Every value below is read from tokens/brands/robo-lab.json via
   rds-tokens.css. Nothing here is invented. The scale is the repo's:

       80 / 43 / 32 / 21 / 18 / 16 / 14 / 12 / 10        px
       300 / 400 / 500 / 700                             weight
       4 / 8 / 16 / 24 / pill                            radius
       4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128   space

   LOAD ORDER — this file must come LAST, after styles.css and article.css.
   It is deliberately written at low specificity so page-level intent still
   wins; it only replaces values that were arbitrary to begin with.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY
   --------------------------------------------------------------------------
   H2 WEIGHT — reversed decision, on review of how it actually looked.

   The token scale reads H1 700, H2 400, H3 700, H4 700. An earlier pass here
   treated the H2 400 as intentional and honoured it, on the reading that a
   light 32px title between bold neighbours gives the page air.

   On the page it does not. Because H2 is the one heading in the scale that is
   not bold, every section title rendered LIGHTER than the card headings sitting
   under it — the homepage "Explore Our Services" / "サービスを探す" at 400 above
   card titles at 700. The eye reads the smaller, heavier text as the more
   important one, so the hierarchy inverts.

   The mapping explains why. tokens/core.json aliases H2 to the `subtitle` role,
   and that role's stated purpose is "Standfirst beneath a title" — the deck
   under a headline, where regular weight is right. This site uses H2 as section
   headings throughout, which is a different role: the repo calls that
   `section-header`, and specifies it bold.

   So H2 takes the heading weight below. Nothing is invented — this repoints one
   repo token at another repo token, `--rds-text-heading-weight`, the weight H1,
   H3 and H4 already use. Size is untouched; 32px was always right.
   -------------------------------------------------------------------------- */

:root {
  --rds-text-h2-weight: var(--rds-text-heading-weight);
}

body {
  font-family: var(--rds-font-latin);
  font-size: var(--rds-text-body);              /* 16px — was 11.5–14.5px */
  font-weight: var(--rds-weight-regular);
  line-height: var(--rds-leading-relaxed);
  color: var(--rds-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Form controls do not inherit font-family. Every browser supplies its own for
   button/input/select/textarea — Arial on Windows — so `body { font-family }`
   above never reaches them, and any control without its own declaration renders
   off-brand. Measured: .filter-btn on the use-cases and alliance pages was
   painting Arial while everything around it was Roboto.

   .dropdown-toggle already carried `font: inherit`, which is why the nav was
   never affected and the problem stayed narrow enough to miss.

   Only the family is inherited here. Inheriting font-size too would resize
   1,196 buttons against their own type scales. */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
}

/* Japanese sets denser than Latin at the same size and must not carry
   negative tracking — it closes the counters on kana. */
:lang(ja) body,
[lang="ja"] body {
  line-height: var(--rds-leading-ja);
}

/* --------------------------------------------------------------------------
   JAPANESE LINE BREAKING
   --------------------------------------------------------------------------
   Japanese is written without spaces, so a browser's default is to allow a
   break between almost any two characters. Left alone it splits words down the
   middle and strands fragments: measured on the homepage cards,
   「ITソリューショ / ン」 broke inside a katakana word, and the ecosystem lead
   ended 「…エコシステムの一員で / す。」 with two characters alone on the last
   line.

     word-break: auto-phrase   breaks at phrase boundaries, using the browser's
                               own Japanese segmenter, instead of anywhere at
                               all. This is the property that stops mid-word
                               splits. It falls back to normal breaking for any
                               phrase too long for the column, so it cannot
                               cause overflow.
     line-break: strict        kinsoku shori: no break before ー, small kana
                               (ゃゅょっ), or closing punctuation 。、）」.
     text-wrap: pretty         the last line may not be left shorter than the
                               others, which is what removed the stranded す。.

   Unsupported browsers ignore all three and get exactly today's behaviour, so
   there is nothing to fall back from.

   Set on :root, NOT on a bare :lang(ja). This matters more than it looks:
   :lang() matches every element in a Japanese document, not just <html>. Written
   as `:lang(ja) { text-wrap: pretty }` it therefore matched .marquee-container
   itself at equal specificity (0,1,0) from a later sheet — and text-wrap is a
   shorthand, so it reset text-wrap-mode to wrap, which is the very component
   `white-space: nowrap` sets. The client-logo marquee lost its nowrap and broke
   into stacked, overlapping rows on the Japanese pages only.

   Anchored at :root the declarations apply once and inherit, so any element with
   its own white-space or wrapping rule still wins on itself. Inheritance is also
   why this is enough: it reaches spans, divs and table cells that an
   element-list version kept missing — a Fortune Global credit line in a <span>
   was still breaking mid-word while every <p> around it had been fixed.

   Headings are unaffected by text-wrap: pretty here. The h1–h6 rule below sets
   text-wrap: balance, and a rule matching an element always beats a value
   inherited from an ancestor, so display lines still balance rather than merely
   guarding their last line. */
:root:lang(ja),
:root[lang="ja"] {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rds-font-latin);
  text-wrap: balance;
  margin-block-start: 0;
}

h1 {
  font-size: clamp(32px, 4.2vw, var(--rds-text-h1));
  font-weight: var(--rds-text-h1-weight);
  line-height: var(--rds-leading-tight);
  letter-spacing: var(--rds-tracking-tighter);
}

h2 {
  font-size: clamp(26px, 3.2vw, var(--rds-text-h2));
  font-weight: var(--rds-text-h2-weight);
  line-height: var(--rds-leading-snug);
  letter-spacing: var(--rds-tracking-tight);
}

h3 {
  font-size: var(--rds-text-h3);
  font-weight: var(--rds-text-h3-weight);
  line-height: var(--rds-leading-snug);
  letter-spacing: var(--rds-tracking-tight);
}

h4 {
  font-size: var(--rds-text-h4);
  font-weight: var(--rds-text-h4-weight);
  line-height: var(--rds-leading-normal);
  letter-spacing: var(--rds-tracking-normal);
}

:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4,
[lang="ja"] h1, [lang="ja"] h2, [lang="ja"] h3, [lang="ja"] h4 {
  letter-spacing: var(--rds-tracking-normal);
  line-height: var(--rds-leading-ja-tight);
}

p { line-height: inherit; }

/* Long-form measure. Unconstrained line length was the single most common
   readability failure on the article pages — some ran the full 1300px.

   FAQ answers were missed by the original pass. They sit inside
   details.faq-item, which the card-prose rule below gives a font-size but no
   max-width, so they ran the full card: measured 1116px at 14px, which is
   161 characters per line against the 77 every other paragraph on the same
   page gets. Comfortable reading is 45–75; 161 is more than double it. */
.hero-lead,
.section-head p,
.callout p,
details.faq-item p,
details.faq-item li,
/* Careers card prose had no measure either: .benefit-desc ran 1008px wide,
   126 characters per line, and .bento-desc 91. */
.benefit-desc,
.bento-desc,
.disclaimer {
  max-width: 68ch;
}

/* A max-width with no auto margins parks the box at the START of its block. In
   a centred block that reads as broken alignment, and it was: measured off
   centre by 185px on the English homepage section lead, 104px on the Japanese
   one, and 777px on the white-paper footer disclaimer — the text looked
   left-shifted under a perfectly centred heading.

   Scoped, not blanket. 38 of the 42 .section-head p on the site are the
   white-paper ones, which are left-aligned inside a 760px block; giving those
   auto margins would shove the text right instead. Every centred one sits
   inside .robo-section and none of the left-aligned ones do, so that ancestor
   separates them exactly. */
.robo-section .section-head p,
.footer-bottom .disclaimer {
  margin-inline: auto;
}

:lang(ja) .hero-lead,
:lang(ja) .section-head p,
:lang(ja) details.faq-item p,
:lang(ja) details.faq-item li,
:lang(ja) .benefit-desc,
:lang(ja) .bento-desc,
[lang="ja"] .hero-lead,
[lang="ja"] .section-head p,
[lang="ja"] details.faq-item p,
[lang="ja"] details.faq-item li,
[lang="ja"] .benefit-desc,
[lang="ja"] .bento-desc {
  max-width: 44em;              /* CJK glyphs are full-width; 68ch is far too wide */
}

/* Eyebrows / kickers / labels — one treatment, was six. */
.eyebrow,
.section-kicker,
.badge,
.tag,
.subnav a,
.step-link-card small {
  font-weight: var(--rds-weight-medium);
  letter-spacing: var(--rds-tracking-widest);
}

/* --------------------------------------------------------------------------
   2. WEIGHT NORMALISATION
   --------------------------------------------------------------------------
   800 / 850 / 900 collapse to 700. Roboto ships 300/400/500/700/900; 850 was
   being synthesised by the browser (faux-bold), which thickens strokes
   unevenly and is why small bold text looked muddy — especially kanji, where
   synthetic weight fills in the strokes and destroys legibility at 12px.
   -------------------------------------------------------------------------- */

.btn,
.badge,
.tag,
.eyebrow,
.section-kicker,
.card-link,
.compare-toggle .label,
.carousel-card h4,
.fit-carousel-card h4,
details.faq-item summary,
.cta-nextstep a,
.step-link-card .card-link {
  font-weight: var(--rds-weight-bold);          /* was 800 / 850 / 900 */
}

/* --------------------------------------------------------------------------
   3. GEOMETRY
   --------------------------------------------------------------------------
   Twelve radii collapse to the repo's four plus pill. Consistent corner
   radius is most of what separates "designed" from "assembled".
   -------------------------------------------------------------------------- */

.card,
.usecase-card,
.kpi-card,
.fit-card,
.compare-item,
.compare-cta,
.callout,
details.faq-item,
.glow-card,
.eco-card-inner {
  border-radius: var(--rds-radius-lg);          /* 16px — was 12/14/18/20 */
}

.carousel-card,
.fit-carousel-card,
.gov-carousel-card,
.consider-item,
.step-link-card,
.step-cta,
.compare-panel .card {
  border-radius: var(--rds-radius-md);          /* 8px — was 12/14/18 */
}

.cta-box,
.hero-illustration {
  border-radius: var(--rds-radius-xl);          /* 24px — was 26/28 */
}

.btn,
.badge,
.tag,
.subnav a,
.country-chip,
.lang-switch {
  border-radius: var(--rds-radius-pill);
}

.flow span,
.consider-num,
.compare-icon {
  border-radius: var(--rds-radius-sm);          /* 4px — was 8/9 */
}

/* --------------------------------------------------------------------------
   4. ELEVATION
   --------------------------------------------------------------------------
   Shadows were warm-black at up to 0.22 alpha with 70px blur, which reads as
   grubby against a cool palette. The repo's shadow is tinted with the brand's
   own shadow-rgb, so it sits *in* the palette rather than on top of it.
   -------------------------------------------------------------------------- */

.card,
.usecase-card,
.kpi-card,
.compare-item,
details.faq-item {
  box-shadow: var(--rds-elevation-1);
  transition: box-shadow var(--rds-duration-base) var(--rds-ease-standard),
              border-color var(--rds-duration-base) var(--rds-ease-standard),
              transform var(--rds-duration-base) var(--rds-ease-standard);
}

a.card:hover,
.usecase-card:hover,
.kpi-card:hover,
.card-link:hover {
  box-shadow: var(--rds-elevation-3);
  border-color: var(--rds-color-border-strong);
}

.cta-box {
  box-shadow: var(--rds-elevation-4);
}

/* --------------------------------------------------------------------------
   5. VERTICAL RHYTHM
   --------------------------------------------------------------------------
   Sections were a flat 64px at every breakpoint and grid gaps ranged 12–16px
   with no reason. Both now step through the repo's spacing scale.
   -------------------------------------------------------------------------- */

section,
.robo-section {
  padding-block: var(--rds-space-24);           /* 96px — was 64px */
}

.section-head {
  margin-bottom: var(--rds-space-12);           /* 48px — was 30px */
}

.section-head h2 { margin-block: var(--rds-space-3) 0; }
.section-head p  { margin-block: var(--rds-space-4) 0; }

.grid-2, .grid-3, .grid-4,
.consider-grid, .usecase-grid, .fit-grid, .kpi-grid,
.step-link-grid, .philosophy-grid {
  gap: var(--rds-space-6);                      /* 24px — was 12/14/16 */
}

.card,
.usecase-card,
.fit-card {
  padding: var(--rds-space-6);                  /* 24px — was 20/22 */
}

@media (max-width: 1020px) {
  section, .robo-section { padding-block: var(--rds-space-16); }   /* 64px */
}

@media (max-width: 740px) {
  section, .robo-section { padding-block: var(--rds-space-12); }   /* 48px */
  .section-head { margin-bottom: var(--rds-space-8); }
  .grid-2, .grid-3, .grid-4,
  .consider-grid, .usecase-grid, .fit-grid, .kpi-grid,
  .step-link-grid, .philosophy-grid { gap: var(--rds-space-4); }
}

/* --------------------------------------------------------------------------
   6. SMALL TEXT
   --------------------------------------------------------------------------
   Card body copy sat at 11.5px and footnotes at 9.5–10.5px. At those sizes
   Japanese is genuinely unreadable — kanji at 11.5px lose interior strokes on
   a standard-density display. Everything steps up to the repo's 14px body-sm
   and 12px caption.
   -------------------------------------------------------------------------- */

.card p,
.usecase-card p,
.kpi-card p,
.consider-item p,
.carousel-card p,
.gov-carousel-card p,
.fit-carousel-card p,
.compare-panel .card p,
details.faq-item p,
.step-link-card p,
.step-cta p,
.cta-box p,
.hero-lead,
.callout p,
.section-head p {
  font-size: var(--rds-text-body-sm);           /* 14px — was 11.5/12/12.5 */
  line-height: var(--rds-leading-relaxed);
}

:lang(ja) .card p,
:lang(ja) .usecase-card p,
:lang(ja) .consider-item p,
:lang(ja) .carousel-card p,
:lang(ja) details.faq-item p,
:lang(ja) .step-link-card p,
[lang="ja"] .card p,
[lang="ja"] .usecase-card p,
[lang="ja"] .consider-item p {
  line-height: var(--rds-leading-ja);
}

.eyebrow,
.section-kicker,
.badge,
.tag,
.breadcrumb,
.carousel-hint,
.subnav a,
.footer-links,
.disclaimer,
.flow span,
.step-link-card small {
  font-size: var(--rds-text-caption);           /* 12px — was 9.5/10.5/11 */
}

.card h4,
.usecase-card h4,
.kpi-card h4,
.carousel-card h4,
.fit-carousel-card h4,
.gov-carousel-card h4,
.consider-item h4,
.compare-panel .card h4,
details.faq-item summary,
.compare-toggle .label {
  font-size: var(--rds-text-h4);                /* 16px — was 13/13.5/14 */
  line-height: var(--rds-leading-snug);
}

/* --------------------------------------------------------------------------
   7. OFF-PALETTE PURGE
   --------------------------------------------------------------------------
   Leftovers from the imported violet theme and from ad-hoc "semantic" tints.
   #c7d4ff in particular is periwinkle — it was the border of the old #3157f6
   theme and sat directly beside Robo Lab blue, which is what made the page
   look like two brands arguing.
   -------------------------------------------------------------------------- */

.callout,
.compare-cta {
  background: var(--rds-color-primary-subtle);
  border-color: var(--rds-color-border);        /* was #c7d4ff periwinkle */
}

/* "Good fit" — brand teal, not the sage #f2f9f4 / #d3ecdb */
.fit-yes,
.fit-carousel-card.yes {
  background: color-mix(in srgb, var(--rds-color-success) 8%, var(--rds-color-surface));
  border: 1px solid color-mix(in srgb, var(--rds-color-success) 30%, transparent);
}
.fit-yes p, .fit-yes li,
.fit-carousel-card.yes p,
.carousel-head.yes h3,
.carousel-head.yes .carousel-hint {
  color: var(--rds-color-success-text);         /* was #1f6b3c / #5b7268 */
}

/* "Poor fit" — Tech Orange, not the beige #f9f5f2 / #ecdfd3 */
.fit-no,
.fit-carousel-card.no {
  background: color-mix(in srgb, var(--rds-color-danger) 7%, var(--rds-color-surface));
  border: 1px solid color-mix(in srgb, var(--rds-color-danger) 28%, transparent);
}
.fit-no p, .fit-no li,
.fit-carousel-card.no p,
.carousel-head.no h3,
.carousel-head.no .carousel-hint {
  color: var(--rds-color-danger-text);          /* was #a3341f / #7a5c53 */
}

/* Approval step in a process flow — Alert Yellow, not the #826B34 mud */
.flow span.approve {
  background: color-mix(in srgb, var(--rds-color-warning) 16%, var(--rds-color-surface));
  color: var(--rds-color-warning-text);
}

.flow-arrow { color: var(--rds-color-text-subtle); }   /* was #a6b1c0 */

/* The oversized step numerals used to declare a third typeface. That
   declaration is now gone from the 40 pages themselves, so this rule no longer
   overrides anything — it stays as the single place the numerals' face is set. */
.step-link-num {
  font-family: var(--rds-font-latin);
  font-weight: var(--rds-weight-light);
  color: rgb(255 255 255 / 0.10);
}

/* --------------------------------------------------------------------------
   8. DARK BANDS
   --------------------------------------------------------------------------
   Eight different greys were in use on dark sections. Rescoping the tokens
   fixes text colour everywhere inside the band at once — including inline
   style attributes, which no ordinary rule can reach.
   -------------------------------------------------------------------------- */

.steps-dark,
.cta-section,
.robo-footer,
footer {
  --rds-color-text: #FFFFFF;
  --rds-color-text-muted: #A9B4CC;
  --rds-color-text-subtle: #8794B0;
  --rds-color-border: rgb(255 255 255 / 0.14);
  --rds-color-border-strong: rgb(255 255 255 / 0.28);
  --rds-color-primary-text: #7CC4F2;             /* 6.8:1 on Midnight Blue */
  --rds-color-success-text: #5FD3CB;
  --rds-color-danger-text: #FF9270;
  --rds-color-warning-text: #FFD166;
  --rds-color-accent-text: #6FDCFF;
}

.steps-dark { background: var(--rds-palette-midnight-blue); }
.cta-section { background: var(--rds-palette-midnight-blue); }

.step-link-card p,
.step-cta p,
.cta-box p,
.cta-nextstep span,
.disclaimer,
.footer-links a {
  color: var(--rds-color-text-muted);
}

.step-link-card small { color: var(--rds-color-primary-text); }   /* was #8fb0ff */

footer {
  background: var(--rds-palette-deep-navy);      /* was #08111f, off-palette */
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

/* --------------------------------------------------------------------------
   9. IN-PAGE SUBNAV
   --------------------------------------------------------------------------
   BUG: the inline template painted the active pill with a solid --primary
   fill and white text, while this override layer separately set its colour to
   --rds-color-primary-text. Because the override loads later at equal
   specificity, the text colour won and the fill did not — leaving #006FBA
   text on a #007DD1 fill. 1.19:1. Effectively invisible.

   The fix is not just to repair the contrast but to correct the hierarchy.
   Two solid blue pills in one row — the active section and the CTA — read as
   two competing actions. A section marker is *state*, not an action, so it
   now takes a tinted treatment and the CTA is the only filled element in the
   row. One filled thing, one action.
   -------------------------------------------------------------------------- */

.subnav {
  top: 80px;
  background: color-mix(in srgb, var(--rds-color-surface) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--rds-color-border);
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }

.subnav-inner { gap: var(--rds-space-2); padding-block: var(--rds-space-3); }

.subnav a {
  min-height: 36px;
  padding-inline: var(--rds-space-4);
  background: transparent;
  border: 1px solid transparent;
  color: var(--rds-color-text-muted);
  font-weight: var(--rds-weight-medium);
  letter-spacing: var(--rds-tracking-normal);
  transition: color var(--rds-duration-fast) var(--rds-ease-standard),
              background var(--rds-duration-fast) var(--rds-ease-standard),
              border-color var(--rds-duration-fast) var(--rds-ease-standard);
}

.subnav a:hover {
  color: var(--rds-color-primary-text);
  background: var(--rds-color-primary-subtle);
  border-color: transparent;
}

/* State, not action: tinted fill + brand-blue label. 5.29:1.
   Explicit palette values rather than the 8%-alpha token — a translucent
   tint over a blurred backdrop takes its final colour from whatever is
   scrolling underneath, so the same pill measured differently down the page. */
.subnav a.active,
.subnav a.active:hover {
  background: var(--rds-palette-ice-blue);      /* #D0E8FA, opaque */
  border-color: rgb(0 125 209 / 0.32);
  color: var(--rds-color-primary-text);         /* #006FBA on #D0E8FA = 4.7:1 */
  font-weight: var(--rds-weight-bold);
}

/* The single filled element in the row. 4.57:1 with white. */
.subnav a.subnav-cta {
  background: var(--rds-color-primary-strong);
  border-color: var(--rds-color-primary-strong);
  color: var(--rds-color-on-primary);
  font-weight: var(--rds-weight-bold);
  margin-inline-start: auto;                    /* pushes the action to the end */
}

.subnav a.subnav-cta:hover {
  background: var(--rds-color-primary-active);
  border-color: var(--rds-color-primary-active);
  color: var(--rds-color-on-primary);
}

@media (max-width: 740px) {
  .subnav { top: 70px; }
  .subnav a.subnav-cta { margin-inline-start: 0; }   /* no auto-margin while scrolling */
}

/* --------------------------------------------------------------------------
   10. BUTTONS
   --------------------------------------------------------------------------
   --primary (#007DD1) filled with white measures 4.33:1 — below AA. The repo
   ships --primary-strong (#0079CB, 4.57:1) precisely for fills. They are not
   interchangeable and the site was using one for both.
   -------------------------------------------------------------------------- */

.btn {
  min-height: 48px;
  padding-inline: var(--rds-space-6);
  font-size: var(--rds-text-body-sm);
  font-weight: var(--rds-weight-bold);
  letter-spacing: var(--rds-tracking-normal);
  border-radius: var(--rds-radius-pill);
  transition: background var(--rds-duration-base) var(--rds-ease-standard),
              box-shadow var(--rds-duration-base) var(--rds-ease-standard),
              transform var(--rds-duration-base) var(--rds-ease-standard);
}

.btn-primary {
  background: var(--rds-color-primary-strong);
  color: var(--rds-color-on-primary);
  box-shadow: 0 8px 20px rgb(0 125 209 / 0.24);
}

.btn-primary:hover {
  background: var(--rds-color-primary-active);
  box-shadow: 0 12px 28px rgb(0 125 209 / 0.30);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--rds-color-surface);
  border: 1px solid var(--rds-color-border-strong);
  color: var(--rds-color-primary-text);
}

.btn-secondary:hover {
  background: var(--rds-color-primary-subtle);
  border-color: var(--rds-color-primary);
  transform: translateY(-2px);
}

/* Size modifiers.
   REGRESSION FIX: .btn-lg and .btn-sm are declared only in a page's inline
   <style>. This file loads after it, and `.btn` is the same specificity as
   `.btn-lg` — so the base rule above was silently flattening both, and the
   homepage's large CTA buttons were rendering at 14px next to a 48px heading.
   Doubling the class (.btn.btn-lg) puts the modifier a full specificity step
   above the base, so load order stops mattering. */
.btn.btn-lg,
.btn-lg {
  min-height: 56px;
  padding-inline: var(--rds-space-8);            /* 32px */
  font-size: var(--rds-text-body-lg);            /* 18px */
}

.btn.btn-sm,
.btn-sm {
  min-height: 40px;
  padding-inline: var(--rds-space-4);            /* 16px */
  font-size: var(--rds-text-body-sm);            /* 14px */
}

/* Ghost button — sits on dark bands only. */
.btn.btn-ghost {
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}

.btn.btn-ghost:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.60);
  color: #fff;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   11. FOCUS
   --------------------------------------------------------------------------
   Keyboard focus was invisible sitewide — the imported CSS never styled it
   and several resets removed the UA outline. This is a blocking WCAG failure
   (2.4.7), not a nicety.
   -------------------------------------------------------------------------- */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--rds-focus-width) solid var(--rds-color-focus);
  outline-offset: var(--rds-focus-offset);
  border-radius: var(--rds-radius-sm);
}

:where(a, button, summary):focus:not(:focus-visible) { outline: none; }

/* Skip link — present in markup on some pages, styled on none. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--rds-space-4);
  inset-block-start: -100%;
  z-index: 999;
  padding: var(--rds-space-3) var(--rds-space-5);
  background: var(--rds-color-primary-strong);
  color: var(--rds-color-on-primary);
  border-radius: var(--rds-radius-md);
  font-weight: var(--rds-weight-bold);
}
.skip-link:focus { inset-block-start: var(--rds-space-4); }

/* --------------------------------------------------------------------------
   12. MOTION
   --------------------------------------------------------------------------
   Easing was `.15s ease` / `.2s ease` ad hoc. The repo's standard curve
   settles rather than stops, which is most of why a hover feels considered.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .card:hover,
  .step-link-card:hover,
  .usecase-card:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   13. TARGET SIZE  (WCAG 2.5.8)
   -------------------------------------------------------------------------- */

.subnav a,
.footer-links a,
.tag,
.badge,
.lang-switch,
.breadcrumb a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.nav-links a,
.dropdown-menu a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   14. OVERFLOW GUARD
   --------------------------------------------------------------------------
   Wide tables and carousels were the source of horizontal page scroll at
   320–375px. Contain the scroll inside the component instead of the page.
   -------------------------------------------------------------------------- */

html, body { overflow-x: clip; }

table { display: block; overflow-x: auto; max-width: 100%; }

img, svg, video { max-width: 100%; height: auto; }

/* Long unbroken strings (URLs, product codes) were pushing cards wider than
   their grid track. */
.card, .usecase-card, .kpi-card, .carousel-card, details.faq-item {
  overflow-wrap: break-word;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   15. SCALE STRAGGLERS
   --------------------------------------------------------------------------
   A live audit of the rendered page (every leaf text node, computed values)
   found these still off-scale after the sections above. Listed with what they
   were, because each is a real value someone typed rather than a category:

       0.88rem  14.08px   nav and footer links          -> 14
       0.85rem  13.60px   language switch, footer meta  -> 14
       0.90rem  14.40px   dropdown items                -> 14
       12.5px             list items, fit-card bullets  -> 14
       15 / 14.5 / 13px   h3 in three components        -> 21 (repo h3)
       13px               h4 in cards                   -> 16 (repo h4)
       11.5px             .card-link                    -> 14
       36 / 34 / 25px     h2 in three components        -> repo h2 clamp

   The point is not that 14.08px is wrong. It is that 14.08 and 13.6 and 14.4
   and 14.5 all appear within one viewport, and no reader can tell them apart
   — so the differences buy nothing and cost coherence.
   -------------------------------------------------------------------------- */

.nav-links a,
.dropdown-menu a,
.footer-links a,
.footer-col a,
.footer-col p,
.lang-switch,
.card-link,
.breadcrumb,
.cta-nextstep a,
.cta-nextstep span,
.compare-cta p,
.carousel-hint {
  font-size: var(--rds-text-body-sm);           /* 14px */
}

/* Content prose inside every card-like container */
:where(.card, .usecase-card, .kpi-card, .fit-card, .consider-item,
       .carousel-card, .fit-carousel-card, .gov-carousel-card,
       .compare-panel .card, .step-link-card, .step-cta, .cta-box,
       details.faq-item, .callout, .glow-card) :where(p, li, dd, dt) {
  font-size: var(--rds-text-body-sm);
  line-height: var(--rds-leading-relaxed);
}

:lang(ja) :where(.card, .usecase-card, .fit-card, .consider-item,
       .carousel-card, .step-link-card, details.faq-item) :where(p, li) {
  line-height: var(--rds-leading-ja);
}

/* Headings inside components — they had drifted to 13–15px, below their own
   body copy in two cases, which inverts the hierarchy outright. */
:where(.card, .usecase-card, .kpi-card, .fit-card, .carousel-head,
       .compare-cta, .glow-card, .eco-card-inner) h3 {
  font-size: var(--rds-text-h3);                /* 21px */
  font-weight: var(--rds-text-h3-weight);
}

:where(.card, .usecase-card, .kpi-card, .consider-item, .carousel-card,
       .fit-carousel-card, .gov-carousel-card, .compare-panel .card) h4 {
  font-size: var(--rds-text-h4);                /* 16px */
  font-weight: var(--rds-text-h4-weight);
}

.cta-box h2,
.section-head h2,
.robo-section h2 {
  font-size: clamp(26px, 3.2vw, var(--rds-text-h2));
  font-weight: var(--rds-text-h2-weight);
}

/* Belt and braces against faked weights. Roboto ships 300/400/500/700/900 and
   no 800 or 600, and this comment used to claim the browser therefore
   synthesises those — it does not. Measured, same string at 64px:

       400 1030.19    600 1045.47  <- identical to 700
       500 1038.50    700 1045.47
                      800 1052.97  <- identical to 900

   CSS font matching checks weights ABOVE the request first when the request is
   over 500, so 600 draws the real Bold and 800 the real Black. The declaration
   below stays regardless: it guarantees that outcome instead of leaving it to
   the matching algorithm, and off-scale weights have now been normalised at
   source anyway. */
:where(b, strong, .consider-num, .flow span.approve, .badge, .tag,
       .step-link-card small, .eyebrow, .section-kicker, h1, h2, h3, h4, h5, h6,
       .btn, summary, .label, .card-link, th) {
  font-synthesis-weight: none;
}

b, strong,
.consider-num,
.flow span.approve,
.compare-cta h3,
.footer-col h4 {
  font-weight: var(--rds-weight-bold);          /* was 800 / 900 */
}

/* --------------------------------------------------------------------------
   16. ICONS
   --------------------------------------------------------------------------
   563 emoji were doing the work of an icon set — 24 different ones, including
   a full-colour globe in the language switch on all 255 pages.

   Emoji are drawn by the operating system, not by the page. The same 🌐 is
   Segoe UI Emoji on Windows, Apple Color Emoji on macOS and Noto on Android:
   three different drawings in three different palettes, on a brand that owns
   two colours. They also cannot inherit currentColor, so they stayed
   multicoloured inside a solid blue button, and they carry their own font
   metrics, which is why the arrows sat slightly off their labels' baseline.

   The replacements are one family: 24×24, 1.5 stroke, round caps and joins,
   currentColor. They scale with their label because the box is set in em.
   -------------------------------------------------------------------------- */

.rl-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.19em;        /* optical centre on the cap height */
  color: inherit;
  overflow: visible;
}

/* In a flex row the em-box centres itself; drop the baseline nudge. */
:where(.btn, .lang-switch, .card-link, .subnav a, .badge, .tag,
       .breadcrumb, .nav-links a, .footer-links a) .rl-icon {
  vertical-align: 0;
}

/* Standalone feature icons — larger, and given the brand tone rather than
   inheriting body ink, so they read as graphics not punctuation. */
:where(.service-icon-pro, .service-medallion, .kpi-card, .usecase-card,
       .consider-item, .glow-card) > .rl-icon:first-child {
  width: 28px;
  height: 28px;
  color: var(--rds-color-primary-text);
  margin-bottom: var(--rds-space-3);
}

/* The language switch sat at a full-colour globe plus a two-letter label with
   no gap. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--rds-space-2);
  padding-inline: var(--rds-space-4);
}

/* Motion on the one icon that signals direction. Suppressed under
   prefers-reduced-motion by section 12. */
.card-link .rl-icon,
.btn .rl-icon {
  transition: transform var(--rds-duration-base) var(--rds-ease-standard);
}
.card-link:hover .rl-icon,
.btn:hover .rl-icon {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   17. DROPDOWN TRIGGERS
   --------------------------------------------------------------------------
   "Resources" no longer links anywhere — it is a menu trigger only, so it is a
   <button>, not an <a>. A <span> would have been simpler and wrong: it would
   drop the control out of the tab order, and since these menus opened on
   :hover alone, the entire submenu would have become unreachable without a
   mouse. A button keeps it focusable; :focus-within below makes it openable.

   Buttons inherit almost nothing — not font, not colour — so everything the
   sibling <a> gets has to be restated here or the item renders as a grey
   system button in the middle of the nav.
   -------------------------------------------------------------------------- */

.dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--rds-text-body);
  font-weight: var(--rds-weight-medium);
  line-height: inherit;
  color: var(--rds-color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  min-height: 44px;
  transition: color var(--rds-duration-base) var(--rds-ease-standard);
}

.dropdown-toggle:hover,
.dropdown:hover > .dropdown-toggle {
  color: var(--rds-color-primary-text);
}

/* Matches the underline sweep on .nav-links a so the two read as one control
   type rather than a link beside a button. */
.dropdown-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--rds-color-accent);
  transition: width var(--rds-duration-base) var(--rds-ease-standard);
}

.dropdown:hover > .dropdown-toggle::after,
.dropdown-toggle:focus-visible::after,
.dropdown-toggle.active::after {
  width: 100%;
}

.dropdown-toggle.active {
  color: var(--rds-color-primary-text);
  font-weight: var(--rds-weight-bold);
}

/* Keyboard parity. The menus opened on :hover only, so before this change a
   keyboard user could never see one — they could only follow the parent link.
   With Resources having no link left, focus-within is what keeps the submenu
   reachable at all. This is a fix, not a nicety: WCAG 2.1.1. */
.dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown:focus-within > .dropdown-toggle .dropdown-icon {
  transform: rotate(180deg);
}

/* The nav sat on #334155 — Tailwind slate-700, from no palette this brand
   owns. Midnight Blue is the ink. */
.nav-links a {
  color: var(--rds-color-text);
}

.nav-links a:hover {
  color: var(--rds-color-primary-text);
}

@media (max-width: 768px) {
  .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Card titles: h3 for the outline, h4 for the eye
   --------------------------------------------------------------------------
   Every article section was built as <h2>section</h2> then <h4>card</h4>, so
   the outline jumped a level and h3 was never used. Screen-reader users
   navigating by heading level heard a level that was not there.

   The tags are now h3, which is what the structure means. The size stays at
   the subheading step, which is what the design wants. Level and size are
   different questions and this is where they part company.

   0,1,0 beats the bare h3 element rule whatever order the sheets load in, and
   an inline font-size on the element still wins over this.
   ========================================================================== */
.h-sub {
  font-size: var(--rds-text-h4);
  font-weight: var(--rds-text-h4-weight);
}