/* =========================================================================
   Amberroad website — page styles
   Consumes tokens from colors_and_type.css
   ========================================================================= */

* { box-sizing: border-box; }

body {
  background: var(--color-midnight-ink);
  color: var(--color-white-frost);
  margin: 0;
  overflow-x: hidden;
}

main { display: block; }
main:focus { outline: none; }   /* focus target for the skip link only */

a { color: inherit; text-decoration: none; }

/* Keyboard-only escape hatch past the floating nav. Off-screen until focused. */
.skip-link {
  position: fixed;
  top: var(--nav-offset);
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 1000;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-pewter-accent);
  color: var(--color-pure-white);
  font: 600 14px/1 var(--font-sans);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 1px solid var(--color-amber-warm);
  outline-offset: 2px;
}

/* =========================================================================
   Buttons
   ========================================================================= */

/* V04 · Dark Pill · Amber Hairline
   Default: pewter surface, amber hairline ring, white text.
   Hover: surface lifts to slate, hairline brightens to amber-light,
   a soft amber halo sits outside the ring. Text never changes color. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-pewter-accent);
  color: var(--color-pure-white);
  border: none;
  border-radius: 9999px;
  padding: 14px 30px;
  font: 600 15px/1 var(--font-sans);
  letter-spacing: -0.013em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(174, 147, 87, 0.55),
              0 0 0 0 rgba(174, 147, 87, 0);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn-primary:hover {
  background: var(--color-slate-gray);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 204, 0.85),
              0 0 0 4px rgba(174, 147, 87, 0.10),
              0 6px 20px -8px rgba(174, 147, 87, 0.45);
}
.btn-primary:active {
  background: var(--color-pewter-accent);
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 204, 0.85),
              0 0 0 2px rgba(174, 147, 87, 0.14);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 204, 0.95),
              0 0 0 4px rgba(174, 147, 87, 0.28);
}
/* Trailing → arrow inside .btn-primary. The arrow slides ~5px on hover
   while its color climbs the amber ramp. */
.btn-primary .arrow {
  display: inline-block;
  color: var(--color-amber-warm);
  font-weight: 400;
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn-primary:hover .arrow {
  transform: translateX(5px);
  color: var(--color-amber-light);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--color-pure-white);
  border: 1px solid var(--color-pure-white);
  border-radius: 9999px;
  padding: 7px 16px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-pure-white);
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -0.013em;
  padding: 6px 2px;
}
.btn-text .arrow {
  color: var(--color-amber-warm);
  font-weight: 400;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-text:hover .arrow { transform: translateX(4px); }

/* =========================================================================
   Floating glass nav
   ========================================================================= */

.nav-wrap {
  position: fixed;
  top: var(--nav-offset);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 24px;
}

.nav {
  pointer-events: auto;
  position: relative;      /* containing block for .nav-menu */
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 10px 14px 10px 24px;
  background: rgba(8, 8, 10, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  box-shadow: var(--shadow-float), var(--shadow-glass);
}

.nav-brand img { display: block; height: 22px; width: auto; }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav-links li { position: relative; }
.nav-links a {
  display: inline-block;
  font: 400 14px/1 var(--font-sans);
  color: var(--color-white-frost);
  letter-spacing: -0.013em;
  padding: 8px 2px;
  position: relative;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gradient-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--color-pure-white); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-links li.has-sub { position: relative; }
/* Invisible bridge so the cursor can travel from the nav link
   down into the submenu without leaving the <li> hover area. */
.nav-links li.has-sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  padding: 10px;
  background: rgba(18, 19, 23, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  display: grid;
  gap: 2px;
}
.submenu a {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
}
.submenu a:hover { background: rgba(255, 255, 255, 0.04); }
.submenu a::after { display: none; }
.sub-label { color: #fff; font-size: 14px; font-weight: 500; }
.sub-desc  { color: var(--color-stone-text); font-size: 12.5px; }

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

/* Nav-sized variant of the primary CTA — same dark pill + amber hairline
   identity, but compact to fit the floating glass nav. No arrow.
   Height tuned to match the 34px .globe sibling. */
.btn-primary.nav-contact {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Globe (language) button — visually paired with .btn-primary.nav-contact:
   pewter pill, amber hairline, identical hover lift + halo. */
.globe {
  width: 34px; height: 34px;
  border-radius: 9999px;
  border: none;
  background: var(--color-pewter-accent);
  color: var(--color-pure-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(174, 147, 87, 0.55),
              0 0 0 0 rgba(174, 147, 87, 0);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.globe:hover {
  background: var(--color-slate-gray);
  color: var(--color-amber-light);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 204, 0.85),
              0 0 0 4px rgba(174, 147, 87, 0.10),
              0 6px 20px -8px rgba(174, 147, 87, 0.45);
}
.globe:active {
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 204, 0.85),
              0 0 0 2px rgba(174, 147, 87, 0.14);
}
.globe svg { width: 16px; height: 16px; }

.lang-menu {
  position: absolute;
  right: 0;
  top: 44px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Same backdrop-root caveat as .nav-menu — the blur here never applied. */
  background: rgba(16, 17, 21, 0.985);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
  min-width: 80px;
  box-shadow: var(--shadow-float);
}
.lang-menu a {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-porcelain-text);
}
.lang-menu a.active { color: var(--color-pure-white); background: rgba(255,255,255,0.04); }

/* =========================================================================
   Compact nav — below 700px the four links no longer fit in the pill, so
   they move into a panel that drops out from under it. Above that width the
   burger and the panel do not exist.
   ========================================================================= */

.nav-burger { display: none; }

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 10px;
  /* No backdrop-filter here: .nav already declares one, which makes it a
     backdrop root, so a child's blur samples nothing and silently no-ops.
     Without that blur a translucent panel lets sharp hero type read straight
     through, so this panel carries its own near-opaque surface instead. */
  background: rgba(16, 17, 21, 0.985);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;              /* softer than the inner rows */
  box-shadow: var(--shadow-float), var(--shadow-glass);
  display: grid;
  gap: 2px;
  transform-origin: top center;
  animation: nav-menu-in var(--dur-base) var(--ease-out) both;
}

@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.nav-menu a {
  font: 400 15px/1 var(--font-sans);
  color: var(--color-white-frost);
  letter-spacing: -0.013em;
  padding: 14px;
  border-radius: 12px;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.nav-menu a:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-pure-white); }
.nav-menu a:focus-visible {
  outline: 1px solid var(--color-amber-warm);
  outline-offset: -1px;
}

.nav-menu-rule {
  height: 1px;
  margin: 6px 8px;
  background: rgba(255, 255, 255, 0.08);
}

/* The CTA keeps .nav-contact so the modal handler still picks it up. */
.nav-menu-cta { width: 100%; }

/* Burger — same pewter pill + amber hairline as .globe, two bars that
   cross into an X when the panel is open. */
.nav-burger {
  width: 34px; height: 34px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 9999px;
  background: var(--color-pewter-accent);
  color: var(--color-pure-white);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(174, 147, 87, 0.55);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.nav-burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-burger:hover {
  background: var(--color-slate-gray);
  color: var(--color-amber-light);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 204, 0.85),
              0 0 0 4px rgba(174, 147, 87, 0.10);
}
.nav-burger.is-open span:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav-burger.is-open span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-actions .nav-contact { display: none; }   /* lives in the panel instead */
  .nav-burger { display: flex; }
  .nav { gap: 12px; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { animation: none; }
  .nav-burger span { transition: none; }
}

/* =========================================================================
   Hero — dashboard background with amber spotlight
   ========================================================================= */

.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  max-height: 1080px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-midnight-ink);
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Directional amber light cast from the upper-LEFT corner of the hero,
   sweeping down to the lower-right. Two layers: a soft warm wash across
   the whole dashboard (so nothing reads as a single bright spot), and a
   diagonal "god-ray" band that gives the light its direction. Screen
   blend keeps everything additive — the dashboard underneath is brighter,
   not dimmer. */
.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* diagonal ray, upper-left → lower-right */
    linear-gradient(135deg,
      rgba(255, 235, 180, 0.18) 0%,
      rgba(255, 220, 155, 0.10) 18%,
      rgba(204, 145, 102, 0.04) 38%,
      transparent 60%),
    /* warm anchor in the top-left quadrant */
    radial-gradient(ellipse 55% 45% at 18% 12%,
      rgba(255, 235, 180, 0.32) 0%,
      rgba(204, 145, 102, 0.10) 45%,
      transparent 75%);
  mix-blend-mode: screen;
}

.hero-spotlight-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* faint full-width amber wash, slightly stronger top-left */
    radial-gradient(ellipse 90% 80% at 25% 15%,
      rgba(174, 147, 87, 0.10) 0%,
      rgba(174, 147, 87, 0.04) 45%,
      transparent 80%);
  mix-blend-mode: plus-lighter;
}

/* Heavy bottom + edge fade so the dashboard recedes behind the hero text. */
.hero-side-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0)   42%,
      rgba(0,0,0,0)   80%,
      rgba(0,0,0,0.5) 100%);
}

/* Bottom protection so the hero text sits on a near-black plate.
   Stops track --color-midnight-ink; if that token ever moves off pure black,
   move these with it or the plate bands against the section below. */
.hero-bottom-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.6) 65%,
    rgba(0,0,0,0.96) 92%);
}

/* Foreground content — bottom-left layout, slash-style */
.hero-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 32px 64px;
  display: grid;
  gap: 22px;
  justify-items: start;
  text-align: left;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-silver-text);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-pure-white);
  text-wrap: balance;
  margin: 0;
  max-width: 16ch;
}
.hero-title em {
  font-style: italic;
  background: var(--gradient-amber-sheen);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.hero-sub {
  font: 400 18px/1.5 var(--font-sans);
  letter-spacing: -0.013em;
  color: var(--color-porcelain-text);
  max-width: 560px;
  margin: 0;
  text-wrap: pretty;
  white-space: pre-line;
}

.hero-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin-top: 4px;
}

/* The hero now contains the email pill + divider + stat row.
   Force the inlined impact-row and divider to fill the hero-content width
   (which is otherwise justify-items: start). */
.hero-content .impact-rule,
.hero-content .impact-row {
  width: 100%;
}
.hero-content .impact-rule { margin-bottom: 0; }
.hero-content .impact-row { margin-top: 0; }

/* Email capture pill inside the hero (replaces hero-cta-row) */
.hero-capture {
  margin: 8px 0 0;
  width: 100%;
  max-width: 520px;
}

/* =========================================================================
   Customer strip
   ========================================================================= */

.strip {
  padding: 80px 24px 60px;
  max-width: var(--page-max);
  margin: 0 auto;
}

.strip-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-silver-text);
  margin-bottom: 32px;
  justify-content: center;
}

.strip-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  overflow: hidden;
}
.strip-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: strip-scroll 30s linear infinite;
}
.strip-track:hover { animation-play-state: paused; }
.strip-track img {
  height: 26px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(1) brightness(1.4);
  transition: opacity var(--dur-base) var(--ease-out);
}
.strip-track img:hover { opacity: 1; }
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================================
   Impact band — email capture + stat + static customer logos
   ========================================================================= */

.impact {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* divider sits flush under the hero's email CTA */
.impact-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin-bottom: 36px;
}

/* email capture pill (used in hero + reusable elsewhere) */
.impact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  padding: 6px;
  width: 100%;
  max-width: 520px;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.impact-pill:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.impact-pill input {
  flex: 1;
  /* An <input> reports a ~20-character intrinsic width as its min-content
     contribution, and min-width:0 does not clear it — it only permits flex
     shrinking. Without an explicit width the pill's min-content pins the hero's
     grid track at 401px and every sibling stretches past the viewport on
     phones. Width 0 + flex:1 lets it grow into whatever space is left. */
  width: 0;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-pure-white);
  font: 400 15px/1 var(--font-sans);
  letter-spacing: -0.013em;
  padding: 14px 22px;
}
.impact-pill input::placeholder {
  color: var(--color-stone-text);
}
.impact-pill .impact-go {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 14px;
  white-space: nowrap;
}

/* stat + logos row — stat is smaller, sits left; logos scroll on the right */
.impact-row {
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.impact-stat-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-pure-white);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* live-ticker digits inside the impact stat — tabular nums so the integer
   width is stable while it counts. */
.impact-stat-value .live-counter-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.impact-stat-caption {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--color-stone-text);
  letter-spacing: -0.013em;
  margin: 0;
  max-width: 280px;
  text-wrap: pretty;
  white-space: pre-line;
}

/* single-row scrolling logos with edge fade */
.impact-logos-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%);
}
.impact-logos-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: strip-scroll 38s linear infinite;
}
.impact-logos-track img {
  height: 22px;
  width: auto;
  opacity: 0.6;
  /* Real CIs arrive in every colour (Kia black, BCG green, POSCO blue…).
     Flatten each to a white silhouette so the strip reads as one row. */
  filter: brightness(0) invert(1);
  flex-shrink: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.impact-logos-track img.small { height: 17px; }
.impact-logos-track img.mid   { height: 28px; }
.impact-logos-track img.tall  { height: 36px; }
.impact-logos-track img:hover { opacity: 1; }

@media (max-width: 920px) {
  .impact-row { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================================
   Offer section
   ========================================================================= */

.offer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px 24px;
}

.offer-header { margin-bottom: 64px; max-width: 720px; }
.offer-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-pure-white);
  margin: 0 0 16px;
}
.offer-sub {
  font: 400 18px/1.5 var(--font-sans);
  color: var(--color-porcelain-text);
  margin: 0;
  letter-spacing: -0.015em;
  max-width: 540px;
  white-space: pre-line;
}

.offer-stack { display: flex; flex-direction: column; gap: 16px; }

.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  background: var(--color-pewter-accent);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 56px;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.offer-card:hover {
  background: var(--color-slate-gray);
  border-color: rgba(255, 255, 255, 0.06);
}
.offer-card-text { display: grid; gap: 14px; }
.offer-card-eyebrow {
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber-warm);
}
.offer-card-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--color-pure-white);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.offer-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--color-pure-white);
  margin: 4px 0;
  text-wrap: balance;
}
.offer-card-desc {
  font: 400 16px/1.55 var(--font-sans);
  color: var(--color-porcelain-text);
  margin: 0 0 8px;
  letter-spacing: -0.013em;
  max-width: 520px;
}

/* =========================================================================
   Offer visuals — product / stages / marketplace mocks
   ========================================================================= */

.offer-card-visual { display: flex; align-items: center; }
.mock {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
}
.mock-frame {
  position: relative;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204, 145, 102, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0e 0%, #050507 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  padding: 14px;
}

/* product mock */
.mock-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mock-toolbar span {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
}
.mock-toolbar em {
  margin-left: 14px;
  font-style: normal;
  font: 500 11px/1 var(--font-mono);
  color: var(--color-stone-text);
  letter-spacing: 0.04em;
}
.mock-body {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding-top: 14px;
  height: calc(100% - 26px);
}
.mock-sidebar { display: flex; flex-direction: column; gap: 3px; }
.ms-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font: 500 11.5px/1 var(--font-sans);
  color: var(--color-silver-text);
}
.ms-item svg { width: 13px; height: 13px; }
.ms-item.active { background: rgba(204, 145, 102, 0.08); color: var(--color-pure-white); }
.ms-item.active svg { color: var(--color-amber-warm); }

.mock-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mock-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-kpi {
  display: grid; gap: 2px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.k-label { font: 500 10px/1 var(--font-sans); color: var(--color-stone-text); letter-spacing: 0.06em; text-transform: uppercase; }
.k-value { font: 600 22px/1.1 var(--font-sans); color: #fff; letter-spacing: -0.025em; }
.k-value small { font-size: 13px; font-weight: 500; color: var(--color-silver-text); margin-left: 1px; }
.k-delta { font: 500 10.5px/1 var(--font-mono); color: var(--color-amber-warm); }

.chart { width: 100%; flex: 1; min-height: 0; }

/* stages mock — list + interactive preview.
   Slightly taller than the default 4/3 mock so the 02 readiness preview
   has room for a properly proportioned regression chart. */
.stages-mock .mock { aspect-ratio: 4 / 3.4; }
.stages-mock .mock-frame { padding: 0; }
.stages-frame {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 10px;
  height: 100%;
  padding: 16px 16px 16px 18px;
}
.stages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 0;
  padding-right: 4px;
}
.stage-row {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 10px;
  padding: 14px 10px;
  border-radius: 8px;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.stage-row:hover { background: rgba(255, 255, 255, 0.03); }
.stage-n {
  grid-row: 1 / 3;
  font: 500 16px/1 var(--font-mono);
  color: var(--color-stone-text);
  letter-spacing: 0.02em;
  align-self: center;
  transition: color var(--dur-base) var(--ease-out);
}
.stage-label { font: 600 13px/1.2 var(--font-sans); color: #fff; letter-spacing: -0.015em; white-space: nowrap; }
.stage-desc  { font: 400 11px/1.4 var(--font-sans); color: var(--color-silver-text); margin-top: 2px; white-space: nowrap; }
.stage-row.current .stage-n,
.stage-row.current .stage-label { color: var(--color-amber-warm); }
.stage-row.current {
  background: rgba(204, 145, 102, 0.08);
  box-shadow: 0 10px 24px -12px rgba(204, 145, 102, 0.55),
              inset 0 0 0 1px rgba(204, 145, 102, 0.28);
  animation: stage-float 3.6s ease-in-out infinite;
}
@keyframes stage-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.stage-bar {
  position: absolute;
  left: 22px;
  top: 100%;
  width: 1px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}

/* preview frame */
.stages-preview-frame {
  position: relative;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  container-type: inline-size;
}
.stages-preview {
  position: absolute;
  inset: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: preview-in 0.32s ease-out both;
}
@keyframes preview-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* product tabs mock — icon column instead of number */
.prod-ic {
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-stone-text);
  transition: color var(--dur-base) var(--ease-out);
}
.prod-ic svg { width: 16px; height: 16px; }
.stage-row.current .prod-ic { color: var(--color-amber-warm); }
.prod-svg { width: 100%; flex: 1; min-height: 0; display: block; }

/* product three-section mock — all layers shown together, one per section */
.product-mock.mock {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}
.product-tri {
  flex: 1;
  min-height: 380px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
}
.tri-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 16px 16px 14px;
}
.tri-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tri-ic {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(204, 145, 102, 0.1);
  border: 1px solid rgba(204, 145, 102, 0.28);
  color: var(--color-amber-warm);
}
.tri-ic svg { width: 16px; height: 16px; }
.tri-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tri-step { font: 500 9px/1 var(--font-mono); letter-spacing: 0.16em; color: var(--color-stone-text); }
.tri-label { font: 600 13px/1.15 var(--font-sans); color: #fff; letter-spacing: -0.015em; }
.tri-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* the per-layer previews already carry their own eyebrow row; suppress it here
   since each section now has its own header */
.tri-body .line-eyebrow { display: none; }
.tri-body .preview-line { gap: 0; flex: 1; min-height: 0; }
.tri-divider {
  position: absolute;
  top: 16px;
  bottom: 16px;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0.08) 82%, transparent);
}

@media (max-width: 720px) {
  .product-tri { grid-template-columns: 1fr; min-height: 0; }
  .tri-panel { padding: 14px 16px; }
  .tri-divider { top: auto; bottom: 0; left: 16px; right: 16px; width: auto; height: 1px; }
  .tri-body { min-height: 180px; }
}

/* shared doc layout (01 & 02) */
.preview-doc { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.doc-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.doc-title  { font: 600 11.5px/1.2 var(--font-sans); color: #fff; letter-spacing: -0.01em; }
.doc-meta {
  font: 500 9.5px/1 var(--font-mono);
  color: var(--color-stone-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-foot {
  font: 400 10px/1.2 var(--font-sans);
  color: var(--color-stone-text);
  padding-top: 2px;
}

/* diagnostic table (01) */
.doc-table { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.doc-row {
  display: grid;
  grid-template-columns: 1fr 42px 38px;
  gap: 4px;
  align-items: center;
  padding: 5px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font: 400 11px/1.2 var(--font-sans);
  color: var(--color-porcelain-text);
}
.doc-row:last-child { border-bottom: 0; }
.doc-row-head {
  font: 500 9px/1 var(--font-mono);
  color: var(--color-stone-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.doc-task { color: #fff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl-pill {
  display: inline-block;
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  padding: 3px 5px;
  border-radius: 999px;
}
.lvl-high { background: rgba(204, 145, 102, 0.20); color: #f0c19a; }
.lvl-med  { background: rgba(255, 255, 255, 0.06); color: #d6d3cc; }
.lvl-low  { background: rgba(255, 255, 255, 0.03); color: #807e79; }

/* diagnostic PoC report (01) — scatter + quick-wins list */
.preview-diag { gap: 6px; }
.doc-head-diag {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.doc-head-left { min-width: 0; }
.doc-stamp {
  flex: 0 0 auto;
  align-self: center;
  font: 600 7.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: rgba(204, 145, 102, 0.85);
  padding: 3px 6px;
  border: 1px solid rgba(204, 145, 102, 0.45);
  border-radius: 3px;
  text-transform: uppercase;
}
.diag-scatter {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.diag-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.diag-a-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: diagAPulse 2.6s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes diagAPulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .diag-a-pulse { animation: none; opacity: 0; }
}
.diag-quickwins {
  margin-top: 2px;
  padding: 7px 8px 8px;
  background: rgba(204, 145, 102, 0.07);
  border: 1px solid rgba(204, 145, 102, 0.28);
  /* Was an off-scale 7px; --radius-xs is the scale's small-inner step. */
  border-radius: var(--radius-xs);
}
.diag-qw-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.diag-qw-dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--color-amber-warm, #cc9166);
  box-shadow: 0 0 0 2px rgba(204, 145, 102, 0.20);
  flex: 0 0 auto;
}
.diag-qw-title {
  font: 600 10px/1 var(--font-sans);
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diag-qw-note {
  font: 400 9px/1 var(--font-sans);
  color: var(--color-stone-text);
  font-style: italic;
  margin-left: auto;
  padding-right: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diag-qw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diag-qw-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font: 500 10.5px/1.15 var(--font-sans);
  color: #fff;
  letter-spacing: -0.005em;
}
.diag-qw-row + .diag-qw-row { border-top: 1px dashed rgba(204, 145, 102, 0.18); }
.diag-qw-tag {
  font: 700 9px/1 var(--font-mono);
  color: var(--color-amber-warm, #cc9166);
  letter-spacing: 0.06em;
  background: rgba(204, 145, 102, 0.18);
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  text-align: center;
}
.diag-qw-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diag-qw-roi {
  font: 600 10px/1 var(--font-mono);
  color: var(--color-amber-warm, #cc9166);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.diag-qw-roi em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-stone-text);
  margin-left: 1px;
}

/* data readiness report (02) — 1×4 audit list + regression scatter + savings strip */
.preview-dr { gap: 6px; }
.dr-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.dr-check {
  display: grid;
  grid-template-columns: 13px auto 1fr auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dr-check-ic {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(204, 145, 102, 0.16);
  border: 1px solid rgba(204, 145, 102, 0.45);
  color: var(--color-amber-warm);
}
.dr-check-ic svg { width: 8px; height: 8px; stroke-width: 3; }
.dr-check-label {
  font: 500 10.5px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dr-check-leader {
  height: 0;
  min-width: 8px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.16);
  transform: translateY(1px);
}
.dr-check-val {
  font: 500 8.5px/1.2 var(--font-mono);
  color: var(--color-silver-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* regression performance chart — fixed aspect so nothing distorts */
.dr-chart {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dr-chart-cap {
  font: 500 8.5px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dr-chart-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 134;
  max-height: 210px;
  display: block;
}
.dr-foot {
  margin-top: auto;
  margin-bottom: 10px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(204, 145, 102, 0.10);
  border: 1px solid rgba(204, 145, 102, 0.32);
  border-radius: 8px;
}
.dr-stat {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.dr-stat-label {
  font: 600 11px/1.2 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 224, 189, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dr-stat-val {
  font: 600 17px/1.1 var(--font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.dr-stat-val em {
  font-style: normal;
  font-weight: 600;
  font-size: inherit;
  margin-left: 1px;
  color: inherit;
}
.dr-stat-val.hot { color: var(--color-amber-warm); }

/* Narrow preview frame — the offer grid can squeeze this box to ~170px.
   Stack the audit grid to one column, let the chart shrink, and wrap the
   projection strip. */
@container (max-width: 320px) {
  .preview-dr .doc-meta { display: none; }
  .preview-dr .doc-stamp { display: none; }
  .preview-dr .doc-title {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dr-checks { gap: 3px; }
  .dr-check { grid-template-columns: 13px minmax(0, 1fr); row-gap: 1px; column-gap: 6px; }
  .dr-check-label { font-size: 10px; }
  .dr-check-leader { display: none; }
  .dr-check-val {
    grid-column: 2;
    justify-self: stretch;
    font-size: 8px;
  }
  .dr-chart-svg { max-height: 126px; }
  .dr-foot { gap: 3px; padding: 9px 11px; }
  .dr-stat { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dr-stat-val { font-size: 14px; }
}

/* pilot — live single line (03) */
.preview-line { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.line-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-silver-text);
}
.line-eyebrow svg { width: 11px; height: 11px; color: var(--color-amber-warm); }
.live-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #cc9166;
  box-shadow: 0 0 0 3px rgba(204, 145, 102, 0.18);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.line-svg { width: 100%; flex: 1; min-height: 0; }
/* product-applied strip — MinerReport running on the line(s) above */
.line-product {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(204, 145, 102, 0.10);
  border: 1px solid rgba(204, 145, 102, 0.32);
  min-width: 0;
}
.line-product-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(204, 145, 102, 0.18);
  border: 1px solid rgba(204, 145, 102, 0.50);
  color: var(--color-amber-warm);
}
.line-product-mark svg { width: 12px; height: 12px; }
.line-product-name {
  font: 600 13px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.line-product-leader {
  flex: 1 1 auto;
  min-width: 8px;
  height: 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
}
.line-product-applied {
  flex: 0 1 auto;
  min-width: 0;
  font: 600 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 224, 189, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Narrow preview frame — stack the product strip into two rows so the
   applied-status text never collides with the wordmark */
@container (max-width: 320px) {
  .line-product { flex-wrap: wrap; row-gap: 3px; padding: 8px 10px; }
  .line-product-leader { display: none; }
  .line-product-applied {
    flex: 1 1 100%;
    font-size: 8.5px;
  }
}

/* scale-up — grid (04) */
.preview-scale { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.scale-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  min-height: 0;
}
.scale-svg { width: 100%; flex: 1; min-height: 0; }
.scale-meta {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--color-silver-text);
}
.scale-meta svg { width: 11px; height: 11px; color: var(--color-amber-warm); }

/* marketplace mock */
.mp-mock .mock-frame {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Industry tabs */
.mp-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.mp-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 10px;
  border-radius: 7px;
  font: 500 12px/1 var(--font-sans);
  color: var(--color-silver-text);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.mp-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.mp-tab.active {
  color: #fff;
  background: rgba(204, 145, 102, 0.14);
  box-shadow: inset 0 0 0 1px rgba(204, 145, 102, 0.35);
}
.mp-tab-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  color: var(--color-stone-text);
  cursor: default;
}
.mp-tab-more-dots {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-silver-text);
}
.mp-tab-more-count {
  font: 500 10.5px/1 var(--font-mono);
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-porcelain-text);
  white-space: nowrap;
}

/* Process cards */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.mp-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: border-color .18s ease, background .18s ease;
  min-width: 0;
}
.mp-tile:hover {
  border-color: rgba(204, 145, 102, 0.25);
  background: rgba(204, 145, 102, 0.04);
}
.mp-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: var(--gradient-amber);
  flex: 0 0 auto;
}
.mp-proc {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-stone-text);
}
.mp-task {
  font: 600 13.5px/1.25 var(--font-sans);
  color: #fff;
  letter-spacing: -0.015em;
}
.mp-metric {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.mp-metric-value {
  font: 600 13px/1 var(--font-mono);
  color: var(--color-amber-warm);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mp-metric-label {
  font: 400 10.5px/1.2 var(--font-sans);
  color: var(--color-silver-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* =========================================================================
   Final CTA
   ========================================================================= */

.final-cta {
  padding: 120px 24px 160px;
  max-width: var(--page-max);
  margin: 0 auto;
  text-align: center;
}
.final-cta-inner { display: grid; gap: 24px; justify-items: center; }
.final-cta-logo {
  height: 24px;
  width: auto;
  opacity: 0.9;
  margin-bottom: -4px;
}
.final-cta .amber-rule { margin: 0 auto; }
.final-cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-pure-white);
  margin: 0;
  max-width: none;
  /* Shared across all four pages — Korean must break at word boundaries. */
  word-break: keep-all;
}
.final-cta-title .line-one {
  white-space: nowrap;
}
.final-cta-title .line {
  display: block;
  line-height: 1.1;
  white-space: nowrap;
}
.final-cta-title .line-plain {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  color: var(--color-pure-white);
}
.final-cta-title .line-plain strong { font-weight: 700; }
.final-cta-title em {
  font-style: normal;
  color: var(--color-pure-white);
}
.final-cta-sub {
  font: 400 18px/1.5 var(--font-sans);
  color: var(--color-porcelain-text);
  max-width: 540px;
  margin: 0;
  letter-spacing: -0.013em;
}
.final-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
}

/* Email capture pill inside the final CTA, centered to match the heading above */
.final-cta-capture {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
  border-top: 1px solid var(--color-slate-gray);
  padding: 64px 24px 32px;
  background: var(--color-midnight-ink);
}
.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 64px;
  padding-bottom: 48px;
}
.footer-brand img { height: 24px; display: block; margin-bottom: 16px; }
.footer-brand p {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--color-silver-text);
  margin: 0;
  max-width: 280px;
}
.col-h {
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-stone-text);
  margin-bottom: 8px;
}
/* Office location is an address, not a destination — same rhythm, no link affordance. */

.footer-foot {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--color-slate-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 12.5px/1 var(--font-sans);
  color: var(--color-stone-text);
  letter-spacing: -0.01em;
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Diagnostic modal
   ========================================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modal-fade var(--dur-base) var(--ease-out);
}
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  background: #121317;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-rise 320ms var(--ease-out);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-stone-text);
  cursor: pointer;
  border-radius: 9999px;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  z-index: 1;
}
.modal-x:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.modal-x svg { width: 16px; height: 16px; }

.modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal-head {
  padding: 36px 36px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-logo {
  height: 18px;
  width: auto;
  opacity: 0.9;
  display: block;
  margin-bottom: 18px;
}
.modal-title {
  /* Sans, not the display serif: Playfair has no Hangul, so the serif fallback
     made this one heading a different face from every other modal text. */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-pure-white);
  margin: 0 0 8px;
}
.modal-sub {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--color-stone-text);
  letter-spacing: -0.013em;
  margin: 0;
  max-width: 480px;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  padding: 28px 36px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field-full { grid-column: 1 / -1; }

.field-label {
  font: 500 12px/1 var(--font-sans);
  color: var(--color-porcelain-text);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.field-label em {
  font-style: normal;
  color: var(--color-amber-warm);
}

.field-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  font: 400 14px/1.4 var(--font-sans);
  letter-spacing: -0.013em;
  color: var(--color-pure-white);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  width: 100%;
  font-family: inherit;
}
.field-input::placeholder { color: var(--color-stone-text); }
.field-input:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.field-input:focus {
  border-color: var(--color-amber-warm);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(204, 145, 102, 0.16);
}
.field-textarea .field-input {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}

.modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 36px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-foot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.modal-foot .btn-primary { padding: 12px 24px; font-size: 14px; }
.modal-foot .btn-ghost { padding: 10px 18px; font-size: 13px; }

/* Sent state */
.modal-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 36px 40px;
  gap: 14px;
}
.modal-sent-icon {
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: rgba(204, 145, 102, 0.12);
  color: var(--color-amber-warm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.modal-sent-icon svg { width: 22px; height: 22px; }
.modal-sent .modal-title { margin: 0; }
.modal-sent .modal-sub { margin: 0 0 8px; max-width: 380px; }

@media (max-width: 620px) {
  .modal { max-height: calc(100vh - 24px); border-radius: 14px; }
  .modal-head { padding: 28px 24px 16px; }
  .modal-grid { grid-template-columns: 1fr; padding: 22px 24px; gap: 16px; }
  .modal-foot { padding: 16px 24px 22px; flex-wrap: wrap; }
  .modal-consent { flex: 1 1 100%; }
  .modal-foot-actions { margin-left: auto; }

  /* The closing headline's line breaks are placed by hand for desktop. The
     nowrap that holds them pins a 499px min-content, which drags the whole
     .final-cta-inner grid track past the viewport — let it wrap on phones. */
  .final-cta-title .line,
  .final-cta-title .line-one { white-space: normal; }

  /* Product mocks are drawn at a fixed design width and can't reflow. Squashing
     them distorts the diagrams and cropping them looks broken, so each one
     scrolls inside its own card instead — the page itself never scrolls
     sideways, which is what actually breaks the layout. */
  .offer-card-visual { overflow-x: auto; }

  /* 100vh ignores the iOS address bar, so the hero jumps as it hides. */
  .hero { height: 100dvh; min-height: 560px; }

  /* .hero-content is anchored to the bottom and grows upward, so on a short
     phone the eyebrow ends up under the floating nav. Tightening the stack
     buys back the clearance instead of letting the two collide. */
  .hero-content { gap: 16px; padding: 0 20px 40px; }
  .hero-title { font-size: clamp(32px, 9vw, 44px); }
  .hero-sub { font-size: 16px; }

  /* The rule reads as a stray dash once the label wraps — drop it and let the
     eyebrow stand on its own. */
  .hero-eyebrow .amber-rule { display: none; }
}

/* Landscape phones: the bottom-anchored hero stack is taller than the viewport
   can clear, so the eyebrow slides under the nav. It only restates what the
   headline already says, so it is the right thing to drop. */
@media (max-width: 620px) and (max-height: 600px) {
  .hero-eyebrow { display: none; }
}

/* =========================================================================
   Tweak variants — hero backgrounds
   ========================================================================= */

/* Canvas-based hero backgrounds fill the stage. */
.hero-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-bg-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The heatmap canvas is the hero background; the CSS spotlight haze would
   just muddy it — suppress it. Side + bottom fades stay so the hero copy still
   sits on a near-black plate. */
.hero-v-heatmap2 .hero-spotlight,
.hero-v-heatmap2 .hero-spotlight-haze {
  display: none;
}
.hero-v-heatmap2 .hero-side-fade {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.45) 20%,
    rgba(0,0,0,0)    40%,
    rgba(0,0,0,0)    82%,
    rgba(0,0,0,0.45) 100%);
}

/* =========================================================================
   Hero picker — temporary chip bar for switching between the 5 variants
   ========================================================================= */

/* =========================================================================
   Tweak variants — amber intensity
   ========================================================================= */

body.amber-muted .hero-spotlight { opacity: 0.5; }
body.amber-muted .hero-spotlight-haze { opacity: 0.5; }
body.amber-muted .amber-rule { opacity: 0.65; }

body.amber-bold .hero-spotlight { filter: saturate(1.25) brightness(1.15); }
body.amber-bold .hero-spotlight-haze { opacity: 1.4; }

/* =========================================================================
   Tweak variants — Offer layout
   ========================================================================= */

/* Vertical: image on top, copy below. Wider single column, narrower stack. */
body.offer-vertical .offer-card {
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 40px;
}
body.offer-vertical .offer-card-visual { order: -1; }
body.offer-vertical .offer-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.offer-vertical .offer-card-title { font-size: 22px; }
body.offer-vertical .offer-card-desc  { font-size: 14.5px; }
body.offer-vertical .offer-card-logo  { font-size: 22px; }
body.offer-vertical .mock { aspect-ratio: 16 / 10; }

/* Compact: text-only horizontal rows — no big product mocks, just numbered list */
body.offer-compact .offer-card {
  grid-template-columns: 56px 1fr auto;
  gap: 32px;
  padding: 36px 40px;
  align-items: center;
  counter-increment: offer;
}
body.offer-compact .offer-stack { counter-reset: offer; }
body.offer-compact .offer-card-visual { display: none; }
body.offer-compact .offer-card::before {
  content: "0" counter(offer);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--color-amber-warm);
  letter-spacing: -0.02em;
  align-self: center;
}
body.offer-compact .offer-card-text {
  grid-column: 2 / 3;
}
body.offer-compact .offer-card-title { font-size: 24px; margin-top: 0; }
body.offer-compact .offer-card-desc { font-size: 15px; max-width: 640px; }

/* The CTA moves into a third column on the right */
body.offer-compact .offer-card .btn-text {
  grid-column: 3 / 4;
  align-self: center;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 920px) {
  /* Links stay in the pill down to 700px — they still fit. Below that the
     compact-nav rules above swap them for the burger + panel. */
  .nav { padding: 8px 12px 8px 18px; }
  .offer-card {
    grid-template-columns: 1fr;
    padding: 36px;
  }
  .offer-card-visual { order: 2; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* Must follow the 920px block — same specificity, so order decides the winner. */
@media (max-width: 400px) {
  /* Three columns need ~318px because hello@amberroad.ai offers no break
     opportunity. Two clear it without hyphenating the address. */
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* Pressed feedback for the shared chrome. The nav and footer had :hover but no
   :active, so a tap gave no confirmation until the page changed. */
.nav-brand:active { transform: scale(0.98); }
.nav-links a:active,
.nav-menu a:active,
.nav-burger:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .nav-brand:active, .nav-burger:active { transform: none; }
}

/* Key factors — a feature-importance bar per input, so relative weight reads at
   a glance. Bar length is the whole claim; no importance figure is printed,
   because the site does not state one. */
.dr-factors { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; min-width: 0; }
/* Not in the home-page teaser card: at 305x200 the four bars took 107px and
   crushed the regression plot to a 20px strip. The solution page's stage card
   is where this evidence has room. */
.stages-mock .dr-factors { display: none; }
.dr-factors-label {
  font: 600 9px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone-text);
}
.dr-factor-bars {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.dr-factor { display: grid; gap: 2px; min-width: 0; }
.dr-factor-name {
  font: 500 9.5px/1.2 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--color-silver-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-factor-track {
  display: block; height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.dr-factor-fill {
  display: block; height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(174,147,87,0.85), rgba(255,240,204,0.9));
  transform-origin: left center;
  animation: drFactorGrow 800ms var(--ease-out) both;
}
@keyframes drFactorGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The accuracy stat is supporting evidence; the saving stays the loud one. */
.dr-stat-acc .dr-stat-val { color: var(--color-porcelain-text); }
.dr-stat-acc .dr-stat-val.hot { color: var(--color-amber-warm); }

@media (prefers-reduced-motion: reduce) {
  .dr-factor-fill { animation: none; }
}

/* Personal-data consent row in the inquiry modal, and the privacy link in the
   footer strip. The submit button stays visibly parked until the box is
   checked — disabled state included so the gate is perceivable, not silent. */
.modal-consent {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-width: 0;
  font: 400 12.5px/1.55 var(--font-sans);
  color: var(--color-stone-text);
  cursor: pointer;
  word-break: keep-all;
}
.modal-consent input {
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--color-amber-warm);
  cursor: pointer;
}
.modal-consent a {
  color: var(--color-amber-warm);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal-consent a:hover { color: var(--color-amber-light); }
.modal-foot .btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.footer-privacy {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-privacy:hover { color: var(--color-porcelain-text); }

/* =========================================================================
   AUDIT FIXES (impeccable audit) — touch targets & keyboard focus
   1. Small controls keep their visual size; an invisible ::after pad
      extends the hit area to ≥44px (icon buttons) / ≥24px height (links)
      per WCAG 2.5.8 without moving any layout.
   2. Site-wide :focus-visible for the controls that had none.
   ========================================================================= */

.globe,
.nav-burger,
.footer-privacy,
.footer-col a,
.founder-email,
.founder-linkedin {
  position: relative;
}
.globe::after,
.nav-burger::after {
  content: "";
  position: absolute;
  inset: -5px;               /* 34px visual → 44px hit area */
}
.footer-privacy::after,
.footer-col a::after,
.founder-email::after,
.founder-linkedin::after {
  content: "";
  position: absolute;
  inset: -6px 0;             /* thin text links → ≥25px tap height */
}

.globe:focus-visible,
.nav-burger:focus-visible,
.mp-tab:focus-visible,
.hist-tab:focus-visible,
.footer-privacy:focus-visible,
.footer-col a:focus-visible,
.founder-email:focus-visible,
.founder-linkedin:focus-visible {
  outline: 2px solid var(--color-amber-warm, #cc9166);
  outline-offset: 2px;
}

/* =========================================================================
   PRODUCT MOCK — V1 / V2 comparison
   v1 keeps the shipped 3-row split; v2 adds Dashboard and arranges the four
   modules as a 2×2 board read in an S (01→02, down, 03→04), with hairline
   dividers and small amber flow markers on the seams.
   ========================================================================= */

.product-mock { position: relative; }
.product-quad {
  position: relative;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 380px;
}
.product-quad .tri-panel { padding: 16px 18px 14px; }
.product-quad .tri-panel:nth-child(1) { grid-area: 1 / 1; }
.product-quad .tri-panel:nth-child(2) { grid-area: 1 / 2; }
.product-quad .tri-panel:nth-child(3) { grid-area: 2 / 1; }
.product-quad .tri-panel:nth-child(4) { grid-area: 2 / 2; }
.product-quad .tri-head { min-height: 0; padding-bottom: 10px; margin-bottom: 10px; }
.product-quad .tri-step { font: 600 16px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--color-amber-warm); }
.product-quad .tri-meta { flex-direction: row; align-items: baseline; gap: 9px; }
.product-quad .tri-body { align-items: center; justify-content: center; }
.product-quad .preview-line { justify-content: center; flex: 1; min-height: 0; }
.product-quad .prod-svg { max-height: 118px; flex: 0 1 auto; }

.quad-div-v {
  position: absolute;
  left: 50%;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08) 14%, rgba(255, 255, 255, 0.08) 86%, transparent);
}
.quad-div-h {
  position: absolute;
  top: 50%;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 12%, rgba(255, 255, 255, 0.08) 88%, transparent);
}
@media (max-width: 720px) {
  .product-quad { grid-template-columns: 1fr; grid-template-rows: none; }
  .product-quad .tri-panel:nth-child(1),
  .product-quad .tri-panel:nth-child(2),
  .product-quad .tri-panel:nth-child(3),
  .product-quad .tri-panel:nth-child(4) { grid-area: auto; }
  .quad-div-v, .quad-div-h { display: none; }
  .product-quad .tri-panel { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .product-quad .tri-panel:last-child { border-bottom: 0; }
}

/* Home card fit — the stages preview frame is an inline-size container about
   305px wide there; the solution page has no container ancestor, so this
   never fires on it. Instead of ellipsizing stat labels, let each stat sit
   compact on its own line: label, then value, left-aligned. */
@container (max-width: 440px) {
  .dr-foot { justify-content: center; }
  .dr-stat { flex: 0 1 auto; min-width: max-content; justify-content: center; gap: 10px; }
}

/* Footer — company info rows replace the old link columns */
.footer-info {
  /* one shared label column sized to the longest label, both languages */
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  margin: 0;
  align-content: start;
}
.footer-info-row { display: contents; }
.footer-info-row dt {
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone-text);
  white-space: nowrap;
}
.footer-info-row dd {
  margin: 0;
  font: 400 13.5px/1.6 var(--font-sans);
  color: var(--color-silver-text);
}
.footer-info-row dd a {
  color: inherit;
  text-decoration: none;
}
.footer-info-row dd a:hover { color: var(--color-porcelain-text); }
@media (max-width: 640px) {
  .footer-info { grid-template-columns: 1fr; gap: 2px; }
  .footer-info-row dd { margin-bottom: 8px; }
}

/* Footer brand — corporate name under the logo, info rows in the old
   tagline's place */
.footer-company {
  font: 600 14px/1.4 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-porcelain-text);
  margin: 14px 0 4px;
}
.footer-brand .footer-info { margin-top: 6px; }

/* Contact form — inline send failure notice */
.modal-error {
  margin: 12px 0 0;
  font: 400 12.5px/1.5 var(--font-sans);
  color: #c2554a;
  word-break: keep-all;
}