/* SORVO — phase 8 sections, retargeted onto the shared token scale (phase 9).
 *
 * Loaded last on all 14 routes, after sorvo-theme.css and sorvo-foundation.css.
 * Nuxt injects each page's scoped CSS at runtime *after* every static
 * stylesheet, so `!important` is required wherever a rule has to beat a
 * Nuxt-authored declaration of equal specificity. Rules that only need to beat
 * our own earlier layers rely on source order instead and carry no !important.
 *
 * Phase 8 shipped this file with its own values — 40px/400 section titles where
 * the rest of the site uses 42px/600, eleven radii, ten body greys, three blues
 * and three teals. Everything below now resolves through the token block.
 */

/* Tokens live in sorvo-tokens.css, which loads before this file. Phase 8
   shipped this file with its own values -- 40px/400 section titles where the
   rest of the site uses 42px/600, eleven radii, ten body greys, three blues
   and three teals. Everything below resolves through the shared scale. */

/* ============================================================================
   PART 1 — phase 8 case, company and contact sections
   ========================================================================= */

.p8-wrap { width: min(1200px, calc(100% - 48px)); margin: auto; }

.p8-heading { margin: 0 0 var(--sp-7); }
.p8-heading > p,
.p8-kicker {
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.14em;
  color: var(--sorvo-teal) !important;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-3);
}
.p8-heading h2 {
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.3 !important;
  color: var(--sorvo-ink) !important;
  margin: 0 !important;
}
.p8-intro {
  max-width: 780px;
  font-size: var(--fs-lead) !important;
  line-height: 1.8 !important;
  color: var(--sorvo-ink-muted) !important;
}

.p8-about { padding: 72px 0 !important; min-height: 0 !important; background: var(--sorvo-surface) !important; }
.p8-vision { padding: 72px 0 !important; min-height: 0 !important; background: var(--sorvo-navy) !important; }
.p8-vision .p8-heading h2,
.p8-vision .p8-heading > p { color: var(--sorvo-white) !important; }

.p8-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.p8-stats article {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 26px;
  color: var(--sorvo-white);
}
.p8-stats strong { font-size: var(--fs-3xl); font-weight: var(--fw-medium); }
.p8-stats span { font-size: var(--fs-lead); }

.p8-team { padding: 80px 0 !important; background: var(--sorvo-surface-alt) !important; }
.p8-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.p8-roles article {
  background: var(--sorvo-surface);
  padding: 28px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.p8-roles h3 { font-size: var(--fs-h3) !important; margin: var(--sp-5) 0 var(--sp-3); }
.p8-roles p { font-size: var(--fs-base) !important; line-height: 1.7; color: var(--sorvo-ink-muted); }

.p8-role-mark { position: relative; width: 86px; height: 72px; }
.p8-role-mark span {
  display: block;
  position: absolute;
  width: 55px;
  height: 55px;
  background: var(--sorvo-cobalt);
  border-radius: 50%;
  top: 4px;
  left: 0;
}
.p8-role-mark i {
  position: absolute;
  width: 45px;
  height: 45px;
  background: rgb(var(--sorvo-mint-rgb) / 60%);
  border-radius: var(--r-md);
  top: 25px;
  left: 34px;
  transform: rotate(25deg);
}
.p8-role-1 span { border-radius: var(--r-md); transform: rotate(-20deg); }
.p8-role-2 span { border-radius: var(--r-sm); width: 75px; height: 45px; }
.p8-role-3 span { border-radius: 50% 50% var(--r-sm) var(--r-sm); }

.p8-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  padding: 36px 0 0;
  margin: var(--sp-6) 0 0;
  border-top: 1px solid var(--sorvo-border);
  gap: var(--sp-4);
}
.p8-stages li { font-size: var(--fs-base); }
.p8-stages span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--sorvo-teal);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

.p8-testimonials { background: var(--sorvo-surface) !important; padding: 80px 0 !important; min-height: 0 !important; }
.p8-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.p8-quotes figure { margin: 0; padding: 30px; background: var(--sorvo-surface-alt); border-radius: var(--r-lg); }
.p8-quote-brand { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--sorvo-ink); }
.p8-quotes blockquote { font-size: var(--fs-base); line-height: 1.8; margin: 28px 0; color: var(--sorvo-ink-muted); }
.p8-quotes figcaption { font-size: var(--fs-base); color: var(--sorvo-ink); }
.p8-quotes figcaption span { display: block; font-size: var(--fs-sm); color: var(--sorvo-ink-soft); margin-top: 7px; }

.p8-contact { padding: 150px 0 80px; background: linear-gradient(135deg, #f3f8fc, #fff); }
.p8-contact .p8-heading h1,
.p8-contact .p8-heading h2 {
  max-width: 820px;
  font-size: var(--fs-3xl) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.22 !important;
  color: var(--sorvo-ink) !important;
  margin: 0 !important;
}
.p8-contact-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: 56px; }
.p8-contact-methods article {
  background: var(--sorvo-surface);
  border: 1px solid var(--sorvo-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.p8-contact-methods article > span:first-child {
  font-size: var(--fs-xs);
  color: var(--sorvo-teal);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
}
.p8-contact-methods h3 { margin: var(--sp-5) 0 var(--sp-4); font-size: var(--fs-lg) !important; }
.p8-contact-methods p { font-size: var(--fs-base); overflow-wrap: anywhere; color: var(--sorvo-ink-muted); }
.p8-contact-methods button,
.p8-pending {
  display: inline-flex;
  margin-top: 25px;
  min-height: 48px;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
}
.p8-contact-methods button { background: var(--sorvo-cobalt); color: var(--sorvo-white); border: 0; cursor: pointer; }
.p8-pending { background: var(--sorvo-surface-alt); color: var(--sorvo-ink-soft); }

.p8-office { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.p8-office h2 { font-size: var(--fs-xl) !important; font-weight: var(--fw-semibold) !important; }
.p8-office p { line-height: 1.8; color: var(--sorvo-ink-muted); }
.p8-office-art {
  height: 310px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, #dceef0, #eef4fb);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p8-office-art i { position: absolute; display: block; width: 210px; height: 130px; border: 2px solid rgba(23, 139, 141, 0.27); transform: rotate(-28deg); }
.p8-office-art i:nth-child(2) { transform: rotate(32deg); width: 300px; height: 200px; }
.p8-office-art i:nth-child(3) { width: 100%; height: 80px; transform: rotate(-28deg); background: rgba(255, 255, 255, 0.53); }
.p8-office-art span { z-index: 1; font-size: var(--fs-2xl); letter-spacing: 0.08em; color: var(--sorvo-ink); font-weight: var(--fw-bold); }
.p8-contact-symbol {
  width: 140px;
  height: 140px;
  border-radius: var(--r-2xl);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--sorvo-cobalt), var(--sorvo-mint));
  color: var(--sorvo-white);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin: var(--sp-5) auto;
}

.components-card__inner[data-p8-project] { cursor: pointer; position: relative; }
.components-card__cover { object-position: center !important; }
.components-card__inner[data-p8-project]:focus-visible { outline: 3px solid var(--sorvo-cobalt); outline-offset: 4px; }
.components-card__inner[data-p8-project]::after {
  content: '查看项目 ↗';
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  background: rgba(255, 255, 255, 0.93);
  color: var(--sorvo-ink);
  padding: 10px var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-card);
  pointer-events: none;
}
.p8-case-caption { padding: var(--sp-4) var(--sp-1); display: block; color: var(--sorvo-ink); background: var(--sorvo-surface); }
.p8-case-caption strong { display: block; font-size: var(--fs-lead); }
.p8-case-caption span { font-size: var(--fs-sm); color: var(--sorvo-ink-soft); }

.p8-project-dialog {
  border: 0;
  border-radius: var(--r-lg);
  padding: 0;
  width: min(1120px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  color: var(--sorvo-ink);
  background: var(--sorvo-surface);
  box-shadow: var(--sh-overlay);
}
.p8-project-dialog::backdrop { background: rgba(7, 21, 38, 0.72); }
.p8-dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--sorvo-surface);
  z-index: 2;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--sorvo-border);
}
.p8-dialog-bar h2 { font-size: var(--fs-h3) !important; margin: 0; }
.p8-dialog-bar button,
.p8-gallery-controls button {
  height: var(--tap-min);
  min-width: var(--tap-min);
  border: 1px solid var(--sorvo-border);
  border-radius: var(--r-sm);
  background: var(--sorvo-surface);
  color: var(--sorvo-ink);
  cursor: pointer;
}
.p8-dialog-image { width: 100%; height: min(57vh, 620px); object-fit: contain; background: var(--sorvo-surface-alt); display: block; }
.p8-gallery-controls { display: flex; justify-content: center; align-items: center; gap: var(--sp-5); padding: var(--sp-3); }
.p8-project-copy { padding: var(--sp-3) 30px 30px; }
.p8-project-copy h3 { font-size: var(--fs-md) !important; margin: var(--sp-5) 0 var(--sp-2); }
.p8-project-copy p { line-height: 1.75; color: var(--sorvo-ink-muted); }
.p8-project-copy ul { display: flex; gap: var(--sp-3); flex-wrap: wrap; list-style: none; padding: 0; }
.p8-project-copy li { padding: 7px var(--sp-3); background: var(--sorvo-surface-alt); border-radius: var(--r-sm); font-size: var(--fs-sm); }

.p8-related { padding: 60px 0; background: var(--sorvo-surface-alt); }
.p8-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.p8-related button {
  padding: 0;
  border: 0;
  text-align: left;
  background: var(--sorvo-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  color: var(--sorvo-ink);
}
.p8-related img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.p8-related button span { display: block; padding: var(--sp-5); font-size: var(--fs-md); }
.p8-related button small { display: block; font-size: var(--fs-sm); color: var(--sorvo-ink-soft); margin-top: var(--sp-2); }

@media (max-width: 767px) {
  .p8-wrap { width: calc(100% - 32px); }
  .p8-heading { margin-bottom: 28px; }
  .p8-about, .p8-team, .p8-testimonials, .p8-vision { padding: 48px 0 !important; }
  .p8-intro { font-size: var(--fs-base) !important; }
  .p8-stats { gap: var(--sp-3); }
  .p8-stats article { display: block; }
  .p8-stats strong { display: block; }
  .p8-stats span { font-size: var(--fs-sm); }
  .p8-roles { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .p8-roles article { padding: var(--sp-5) var(--sp-4); }
  .p8-roles h3 { font-size: var(--fs-md) !important; }
  .p8-roles p { font-size: var(--fs-base) !important; }
  .p8-stages { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) var(--sp-3); }
  .p8-stages li { font-size: var(--fs-base); }
  .p8-quotes, .p8-contact-methods, .p8-office, .p8-related-grid { grid-template-columns: 1fr; }
  .p8-quotes figure { padding: var(--sp-5); }
  .p8-contact { padding: 116px 0 48px; }
  .p8-contact-methods { margin-top: 30px; gap: var(--sp-4); }
  .p8-office { margin-top: 44px; gap: var(--sp-5); }
  .p8-office h2 { font-size: var(--fs-lg) !important; }
  .p8-office-art { height: 240px; }
  .p8-dialog-bar { padding: var(--sp-3) var(--sp-4); }
  .p8-dialog-bar h2 { font-size: var(--fs-base) !important; }
  .p8-project-copy { padding: 0 var(--sp-5) var(--sp-5); }
  .p8-dialog-image { height: 35vh; }
  .p8-related { padding: var(--sp-7) 0; }
}

/* ============================================================================
   PART 2 — phase 9 render fixes
   Each rule below corresponds to a defect reproduced in a real browser at
   1440x900 and 390x844; the measured numbers are in the comments.
   ========================================================================= */

/* --- Hero wash. The client-logo marquee was rebuilt by
   scripts/apply-project-content.py without the data-v-da354a90 scope
   attribute, so the compiled rule .hero-logos__container[data-v-da354a90]
   {display:flex} stopped matching. The container fell back to display:block,
   its 24 items stacked into a 1922px column, and .hero-logos__panel — a
   rgba(255,255,255,.58) surface at z-index 3 — painted straight over the hero
   copy. Measured: the title computed rgb(20,33,57) but painted
   rgb(156,162,172); the primary CTA computed rgb(34,81,229) but painted
   rgb(162,182,244), reading as disabled. 20 * .42 + 255 * .58 = 156.
   The attribute is restored in the markup and in the generator; these rules
   make the layout independent of it, and size the new project wordmarks
   (280x80 intrinsic) to the 220px item box. */
body .home-page .hero-logos__container,
body .home-page .hero-logos__item {
  display: flex !important;
  align-items: center !important;
}
body .home-page .hero-logos__item {
  flex: 0 0 200px !important;
  justify-content: center !important;
  min-width: 200px !important;
  width: 200px !important;
}
body .home-page .hero-logos__item img {
  height: 30px !important;
  width: auto !important;
  max-width: 100% !important;
}
body .home-page .hero-preview__copy {
  position: relative;
  z-index: 2;
}

/* --- Weights. Only Plus Jakarta Sans 400/600/700 and Noto Sans SC 400/700 are
   declared, so the 200 / 270 / 275 / 300 found on ~30 elements had no matching
   face and rendered inconsistently from page to page. */
body main p[class*="description"]:not(.hero-preview__subtitle),
body main p[class*="subtitle"]:not(.hero-preview__subtitle),
body main p[class*="intro"],
body main p[class*="headline"] {
  font-weight: var(--fw-regular) !important;
}
/* A 56px line still needs some weight to hold the hierarchy. */
body .global-resources__headline {
  font-weight: var(--fw-medium) !important;
}
body .hero-preview__eyebrow {
  font-weight: var(--fw-medium) !important;
}

/* --- Families. Zen Dots, Inter and Manrope are referenced by the Nuxt build
   but have no @font-face anywhere in the mirror. Inter and Manrope are not
   installed at all (verified by fallback-width comparison), so two page H1s
   and the ziki stat row were rendering in a generic sans; Zen Dots resolves
   only on machines that happen to have it. */
body .service-card__number,
body .b2b-brand-hero__title,
body .b2b-marketing-hero__title,
body .stat-card__value,
body .p8-stats strong {
  font-family: var(--sorvo-font) !important;
}

/* --- Section labels. Five near-identical blue-violets plus two teals, all
   measuring 3.98-4.37 against the light surfaces they sit on. One colour,
   one size, AA-clear. Dark-background eyebrows are excluded — the vision
   section and testimonial cards keep their light-on-dark treatment. */
body .b2b-brand-hero__eyebrow,
body .b2c-growth__eyebrow,
body .brand-strategic-tiers__eyebrow,
body .geo-hero-section__eyebrow,
body .hero-section__eyebrow,
body .logistics-hero__eyebrow,
body .service-content__eyebrow,
body .service-content-card__eyebrow,
body .solutions-diagram__eyebrow {
  color: var(--sorvo-teal) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.08em !important;
}

/* --- Footer copyright measured 3.05-3.12 against the footer gradient. */
body .site-footer__copyright {
  color: rgba(255, 255, 255, 0.74) !important;
}

/* --- /private-domain-marketing feature copy measured 2.93-3.08 on the
   mid-blue panel: rgba(244,247,255,.72) at weight 300. */
body .feature-card__description {
  color: var(--sorvo-white) !important;
}

/* --- /website-development copy set over photography measured 1.96-2.44. */
body .website-process__card-description,
body .website-process__card-output,
body .website-comparison__item,
body .website-comparison__text {
  color: var(--sorvo-ink) !important;
}

/* --- Service numbers. 01/02/04 were rgba(10,16,32,.23) — 1.64-1.67, close to
   invisible — while 03 was solid cobalt on the cobalt card at 1.45. One rule
   for the light cards, white for the dark one. */
.service-section .service-card__number {
  color: rgba(10, 16, 32, 0.5) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: -0.02em !important;
}
.service-section .service-card:nth-child(3) .service-card__number {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* --- The phase 8 testimonials block is inserted as the footer's first content
   child, so the footer's own 72px top padding showed as a bare dark band above
   a white section. The block brings its own 80px padding. */
body .site-footer--with-testimonials .site-footer__surface {
  padding-top: 0 !important;
}

/* --- Closing CTA. The light corridor card was sitting on an unrelated
   logistics photograph — visible warehouse signage, customs gates, trucks and
   a SORVO wordmark burnt into the picture. Replaced with the brand gradient so
   the corridor card is the only image in the block. */
body .site-footer__surface {
  background-color: var(--sorvo-navy) !important;
  background-image:
    radial-gradient(120% 90% at 78% 8%, rgb(var(--sorvo-cobalt-rgb) / 28%) 0%, rgb(var(--sorvo-cobalt-rgb) / 0%) 62%),
    radial-gradient(90% 70% at 8% 96%, rgb(var(--sorvo-mint-rgb) / 14%) 0%, rgb(var(--sorvo-mint-rgb) / 0%) 58%),
    linear-gradient(158deg, var(--sorvo-navy) 0%, #101b3a 52%, #14275c 100%) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* --- The arrow was a 50px circle absolutely positioned in a 44px pill, so it
   overhung the button top and bottom. Matching the pill to the cap turns the
   overlap into the intended shape and lifts the hit area to 56px. */
body .site-footer__cta-button {
  min-height: 56px !important;
  border-radius: var(--r-pill) !important;
}
body .site-footer__cta-arrow {
  top: 50% !important;
  bottom: auto !important;
  right: 3px !important;
  transform: translateY(-50%) !important;
}
body .site-footer__cta-title {
  font-size: var(--fs-4xl) !important;
  font-weight: var(--fw-semibold) !important;
}
body .site-footer__cta-copy {
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-regular) !important;
}

/* --- Scene backdrops. Each of these sections lays a white veil over a scene
   photograph, but the veils were light enough (79-96%) that wordmarks burnt
   into the source images stayed legible through them: a half-cropped giant
   SORVO at the left edge of the marketing section, "Aa / Localize / Global"
   colliding with the 04 and 05 process steps, and "Reach / Engage / Convert"
   with Convert clipped by the right edge. Deepening the veil keeps the tonal
   depth and drops the artefacts below the threshold where they read as text. */
body .about-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(245 247 251 / 98.5%)),
    url("/brand/simple-suite/brand-simple-desktop.webp") !important;
}
body .service-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(244 248 255 / 98.5%)),
    url("/brand/simple-suite/website-simple-desktop.webp") !important;
}
body .why-choose-section {
  background-image:
    linear-gradient(180deg, rgb(247 248 251 / 96%), rgb(255 255 255 / 98.5%)),
    url("/brand/experience/sorvo-home-about-desktop.webp") !important;
}
body .marketing-flow-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(247 250 255 / 98.5%)),
    url("/brand/experience/sorvo-marketing-growth-desktop.webp") !important;
}
body .precise-inquiries {
  background-image:
    linear-gradient(180deg, rgb(245 247 251 / 96%), rgb(236 243 249 / 98.5%)),
    url("/brand/simple-suite/lead-generation-simple.webp") !important;
}

/* --- The glance band sets white type over a dashboard screenshot that was
   only 79-82% veiled, so the chart labels behind the copy competed with it. */
body .data-intelligence,
body .vision-section {
  background-image:
    linear-gradient(145deg, rgb(7 16 51 / 93%), rgb(18 45 104 / 90%)),
    url("/brand/simple-suite/trade-data-simple-desktop.webp") !important;
}

/* --- Snapping the remaining one-off values onto the ladder. Each selector
   below was found by walking all 13 routes and collecting every rendered
   font-size and border-radius that was not already a token value. */

/* 13px and 15px -> --fs-sm / --fs-base */
body .website-process__badge,
body .website-process__output,
body .chat-message__meta {
  font-size: var(--fs-sm) !important;
}
body .sorvo-service-link,
body .website-development-tabs__button,
body .brand-localization__intro {
  font-size: var(--fs-base) !important;
}
/* 56px and 86px display numerals -> the section and page display steps */
body .global-resources__headline {
  font-size: var(--fs-2xl) !important;
}
body .stat-card__value {
  font-size: var(--fs-3xl) !important;
}

/* Radii: 4 / 5 / 6.4 / 10 / 16 / 20 / 21 / 22 / 34 / 36 / 56 px and two
   compound values, all resolved onto --r-sm / --r-md / --r-lg / --r-2xl /
   --r-pill. */
body .service-card__tags li,
body .logistics-showcase__warehouse-card,
body .social-hero-showcase__badge,
body .ziki-screen {
  border-radius: var(--r-sm) !important;
}
body .home-components-placeholder__card,
body .integration-workspace__main,
body .brand-case-study__footer-button,
body .inquiry-row__icon-wrap,
body .why-shift-card,
body .lead-showcase__query,
body .lead-showcase__send {
  border-radius: var(--r-lg) !important;
}
body .geo-hero-showcase__frame {
  border-radius: var(--r-2xl) !important;
}
body .brand-package-card__badge,
body .logistics-showcase__badge {
  border-radius: var(--r-pill) !important;
}
body .website-technology__screen {
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm) !important;
}
body .website-technology__screen-image {
  border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-sm) !important;
}
body .brand-package-card__topbar {
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}

/* --- Mobile had its own set of one-offs, including 9px and 11px labels that
   are below the readable floor on a 390px viewport. */
@media (max-width: 767px) {
  body .brand-package-card__badge {
    font-size: var(--fs-xs) !important;
  }
  body .brand-package-card__button,
  body .brand-package-card__topbar,
  body .service-content-card__eyebrow,
  body .site-footer__nav-link,
  body .site-footer__copyright {
    font-size: var(--fs-sm) !important;
  }
  body .sorvo-service-link,
  body .hero-section__description {
    font-size: var(--fs-base) !important;
  }
  body main h3:not([class]) {
    font-size: var(--fs-md) !important;
  }
}

/* --- The marquee item width has to step down with the viewport, the way the
   compiled rules did before the scope attribute was lost; a 200px item leaves
   room for two logos on a 390px screen. */
@media (max-width: 1024px) {
  body .home-page .hero-logos__item {
    flex: 0 0 168px !important;
    min-width: 168px !important;
    width: 168px !important;
  }
}
@media (max-width: 767px) {
  body .home-page .hero-logos__item {
    flex: 0 0 128px !important;
    min-width: 128px !important;
    width: 128px !important;
  }
  body .home-page .hero-logos__item img {
    height: 22px !important;
  }
}

/* --- Phase 10: the last off-ladder values, each measured across 13 routes ---
   Every selector below was found by walking the rendered pages and listing the
   computed radii and sizes that are not on the token ladder, so the list is
   exhaustive rather than a guess. What deliberately stays off-ladder:
     - composite radii (18px 18px 8px 8px and friends) draw a specific shape;
       their components are on the ladder
     - .hero-preview__subtitle sits between --fs-2xl and --fs-3xl; it is the one
       intentional extra step, and folding it either way collapses the hero's
       two-line hierarchy
------------------------------------------------------------------------- */

body .service-content-card__icon-wrap,
body .lead-showcase__node-pulse,
body .lead-showcase__node-card {
  border-radius: var(--r-md) !important;   /* was 12px, 39 instances */
}

body .marketing-overview__card,
body .solutions-diagram__card {
  border-radius: var(--r-xl) !important;   /* was 24px, 18 instances */
}

/* 25.2px is an em remnant: 1.8em against a 14px parent. It has a stable class
   after all, so it does not need to stay a remnant. */
body .marketing-flow-section__hub-label {
  font-size: var(--fs-lg) !important;
}

body .brand-case-study__panel img {
  border-radius: var(--r-lg) !important;   /* was 16px */
}

body .chat-panel__placeholder {
  font-size: var(--fs-xs) !important;      /* was 13px */
}

/* The carousel arrows are class-less spans; the buttons around them are not. */
body .brand-case-study__nav,
body .components-section__controls button {
  font-size: var(--fs-lg) !important;      /* was 26px */
}