/* ============================================================
   Starcash — Design System CSS
   Tokens → Components → Utilities
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400;1,9..144,500;1,9..144,700&family=Inter:wght@400;500;600&family=Noto+Sans+TC:wght@400;500&family=Noto+Serif+TC:wght@700&family=Geist+Mono:wght@400;500&display=swap');

/* ── Design Tokens ── */
:root {
  /* Colors */
  --teal:        #0B3132;
  --teal-hover:  #143B3C;
  --cream:       #F2ECE1;
  --card:        #FFFBF1;
  --subsurface:  #EBE4D5;
  --coral:       #EC652B;             /* refreshed: Column 'Action Orange' — punchier on CTA, +saturation */
  --coral-hover: #D04E1E;
  --coral-soft:  #D6583A;             /* legacy coral retained for low-energy accents (border lines, subtle text tints) */
  --saffron:     #F2B33D;
  --saffron-hover: #D99B24;
  --ink:         #1A1A1A;
  --muted:       #6B6B6B;
  --line:        rgba(11,49,50,0.14);
  --success:     #44B48B;             /* refreshed: Column moss — more vivid for DBR healthy / approval / unaffected-credit tags */
  --success-deep: #2E7D54;            /* legacy success kept for low-saturation contexts */
  --warning:     #C08A2E;
  --error:       #B9462C;

  /* Refero / Column-inspired accent palette additions — adds dimension
     beyond single-coral, lets us differentiate status / category / chart
     surfaces without introducing brand drift. */
  --accent-info:    #7EA7E9;          /* educational / blog / info bands */
  --accent-callout: #167E6C;          /* hover state pairing for deep teal, secondary actions */
  --accent-action:  #EC652B;          /* alias of refreshed --coral — semantic name for conversion-critical CTAs */

  --teal-tint:   rgba(11, 49, 50, 0.05);
  --saffron-tint: rgba(242, 179, 61, 0.12);
  --cream-muted: rgba(242, 236, 225, 0.7);

  /* Typography */
  --font-display: 'Fraunces', 'Noto Serif TC', Georgia, serif;
  --font-body:    'Inter', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'Courier New', monospace;
  --font-zh-serif: 'Noto Serif TC', serif;
  --font-zh-sans:  'Noto Sans TC', sans-serif;

  /* Type Scale */
  --text-display-xl: 4.75rem;
  --text-display-lg: 3rem;
  --text-display-md: 2.25rem;
  --text-h1:         1.75rem;
  --text-h2:         1.375rem;
  --text-body-lg:    1.125rem;
  --text-body:       1rem;
  --text-body-sm:    0.875rem;
  --text-caption:    0.75rem;
  --text-micro:      0.6875rem;

  /* Spacing (4px base) */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-subtle: 0 1px 2px rgba(15,61,62,.06);
  --shadow-raised: 0 1px 2px rgba(15,61,62,.06), 0 8px 24px rgba(15,61,62,.08);

  /* Easing */
  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);
  --ease-move:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Duration */
  --dur-micro:  80ms;
  --dur-short:  180ms;
  --dur-medium: 320ms;
  --dur-long:   560ms;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
  background-color: var(--cream);
  line-height: 1.6;
  position: relative;
}

/* Grain texture on cream bg */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 500; }
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, var(--text-display-xl));
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--text-display-lg));
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;             /* tightened from -0.015em — Column / SuisseIntl convention for ≥28px display */
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, var(--text-display-md));
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;            /* tightened — applies once ≥28px clamp value reaches the upper bound */
}
.h1 { font-size: var(--text-h1); font-weight: 500; }
.h2 { font-size: var(--text-h2); font-weight: 500; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.text-muted { color: var(--muted); }
.text-teal  { color: var(--teal); }
.text-coral { color: var(--coral); }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
@media (min-width: 640px)  { .container { padding-inline: 20px; } }
@media (min-width: 1024px) { .container { padding-inline: 28px; } }

.section {
  padding-block: var(--space-2xl);
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .section { padding-block: 72px; } }

.grid-12 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (min-width: 640px)  { .grid-12 { grid-template-columns: repeat(8, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .grid-12 { grid-template-columns: repeat(12, 1fr); gap: 24px; } }

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: 64px;
}
.nav-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-wordmark img {
  height: 56px;
  width: auto;
  display: block;
}
@media (min-width: 640px) {
  .nav-wordmark img { height: 36px; }
}
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-xl);
  flex: 1;
}
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur-short) var(--ease-move);
}
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}
.license-badge {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
  display: none;
}
@media (min-width: 1024px) { .license-badge { display: block; } }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  border: none;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-move), transform var(--dur-micro) var(--ease-move);
  min-height: 44px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.btn:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--coral);
  color: #fff;
  font-size: var(--text-body-sm);
  letter-spacing: 0.01em;
}
.btn-primary:hover { background: var(--coral-hover); }

.btn-secondary {
  background: var(--teal);
  color: var(--cream);
  font-size: var(--text-body-sm);
}
.btn-secondary:hover { background: var(--teal-hover); }

.btn-ghost {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  font-size: var(--text-body-sm);
}
.btn-ghost:hover { background: rgba(15,61,62,0.06); }

.btn-ghost-cream {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(242, 236, 225, 0.4);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: border-color var(--dur-short) var(--ease-move), background var(--dur-short) var(--ease-move);
}
.btn-ghost-cream:hover {
  border-color: var(--cream);
  background: rgba(242, 236, 225, 0.08);
}
.btn-ghost-cream:focus-visible {
  outline: 3px solid rgba(242, 236, 225, 0.5);
  outline-offset: 2px;
}

.btn-full { width: 100%; }

/* ── Cards ── */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-xl);
}
.card-raised {
  box-shadow: var(--shadow-raised);
}

.card-accent {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-color, var(--teal));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-xl);
}
.card-accent h3 {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--teal);
  margin: 0 0 var(--space-sm);
}
.card-accent p {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.card-accent ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.card-accent ul li {
  font-size: var(--text-body-sm);
  color: var(--muted);
  padding-left: var(--space-md);
  position: relative;
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}
.card-accent ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-color, var(--teal));
  opacity: 0.5;
}

/* ── Hero ── */
.hero {
  min-height: 80vh;
  display: grid;
  align-items: center;
  padding-block: 72px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) { .hero { padding-block: var(--space-2xl); min-height: auto; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-3xl);
  }
}

.hero-eyebrow {
  margin-bottom: var(--space-lg);
}
.hero-headline {
  margin-bottom: var(--space-lg);
  color: var(--teal);
}
.hero-body {
  color: var(--muted);
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-xl);
  max-width: 48ch;
  line-height: 1.7;
}
.hero-cta { margin-bottom: var(--space-md); }
.hero-fine {
  font-size: var(--text-caption);
  color: var(--muted);
}

/* Portrait placeholder */
.portrait-placeholder {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: linear-gradient(145deg, #0F3D3E 0%, #1d5c5e 45%, #c8b99a 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
  position: relative;
  min-height: 320px;
}
.portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Faint film grain noise overlay */
.portrait-noise-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}
/* Subtle bottom-left caption */
.portrait-caption {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.08em;
  color: rgba(245,240,232,0.45);
  line-height: 1;
}
/* Legacy label — kept muted for any remaining uses */
.portrait-placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  background: rgba(15,61,62,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

/* ── Trust Strip ── */
.trust-strip {
  background: var(--teal);
  color: var(--cream);
  padding-block: var(--space-lg);
  position: relative;
  z-index: 1;
}
.trust-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .trust-strip-inner { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.trust-item-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: var(--cream);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  margin-top: 2px;
}
.trust-item-content {}
.trust-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.7);
  display: block;
  margin-bottom: var(--space-xs);
}
.trust-value {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.4;
}
.trust-warning {
  font-family: var(--font-zh-sans);
  font-size: var(--text-body-sm);
  color: rgba(245,240,232,0.9);
}

/* ── Calculator ── */
.calc-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
  padding: var(--space-xl);
}
.calc-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.calc-value {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--subsurface);
  outline: none;
  margin-block: var(--space-sm);
  cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,61,62,0.3);
  transition: transform var(--dur-short) var(--ease-enter);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(15,61,62,0.3);
}
.range-slider:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 4px;
}
.calc-result-box {
  background: var(--subsurface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.calc-result-item {}
@media (min-width: 768px) { .calc-result-box--4col { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.calc-result-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--space-xs);
}
.calc-result-value {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.calc-result-value.highlight {
  color: var(--coral);
}
.calc-fineprint {
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: var(--space-md);
  line-height: 1.5;
}

/* Calculator collapsible details */
.calc-details {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
}
.calc-details-summary {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  min-height: 44px;
  transition: color var(--dur-short) var(--ease-move);
}
.calc-details-summary::-webkit-details-marker { display: none; }
.calc-details-summary::before {
  content: '+';
  font-size: 0.875rem;
  line-height: 1;
  transition: transform var(--dur-short) var(--ease-move);
  display: inline-block;
}
.calc-details[open] .calc-details-summary::before { transform: rotate(45deg); }
.calc-details-summary:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}
.calc-details-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  overflow: hidden;
  animation: details-open var(--dur-medium) var(--ease-enter);
}
@keyframes details-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Product type pills */
.pill-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.pill {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--dur-short) var(--ease-move);
  min-height: 44px;
}
.pill:hover { border-color: var(--teal); color: var(--teal); }
.pill.active { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.pill:focus-visible { outline: 3px solid rgba(15,61,62,0.4); outline-offset: 2px; }

/* ── Stats Band ── */
.stats-band {
  background: var(--subsurface);
  padding-block: var(--space-2xl);
  position: relative;
  z-index: 1;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  text-align: center;
  align-items: center;
  position: relative;
}
/* Coral dot dividers between stats on desktop */
@media (min-width: 640px) {
  .stats-grid > div:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    opacity: 0.5;
  }
  .stats-grid > div { position: relative; }
}
.stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, var(--text-display-lg));
  font-weight: 500;
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  display: block;
  margin-bottom: var(--space-sm);
  text-shadow: 0 1px 0 rgba(11,49,50,0.08);
}
/* CJK / suffix unit inside stat-num — upright Noto Serif TC, no synth slant */
.stat-unit {
  font-family: var(--font-zh-serif, var(--font-zh-sans));
  font-style: normal;
  font-size: 0.65em;
  letter-spacing: 0;
}
.stat-label {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin-top: var(--space-xs);
}

/* ── Section Headings ── */
.section-heading { margin-bottom: var(--space-2xl); }
.section-heading .eyebrow { margin-bottom: var(--space-sm); }
.section-heading h2 { color: var(--teal); }
.section-heading p {
  color: var(--muted);
  margin-top: var(--space-md);
  font-size: var(--text-body-lg);
  max-width: 52ch;
}

/* ── Use Case Grid — editorial asymmetric ── */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .usecase-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 1024px) {
  .usecase-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg);
  }
  /* Row 1: card 1 spans 8 cols, card 2 spans 4 cols */
  .usecase-card:nth-child(1) { grid-column: span 8; }
  .usecase-card:nth-child(2) { grid-column: span 4; }
  /* Row 2: cards 3+4 each span 4 cols, card 5 spans 4 cols */
  .usecase-card:nth-child(3) { grid-column: span 4; }
  .usecase-card:nth-child(4) { grid-column: span 4; }
  .usecase-card:nth-child(5) { grid-column: span 4; }
  /* Row 3: card 6 full 12 col */
  .usecase-card:nth-child(6) { grid-column: span 12; flex-direction: row; align-items: center; gap: var(--space-xl); }
  .usecase-card:nth-child(6) .usecase-icon { flex-shrink: 0; margin-bottom: 0; }
  .usecase-card:nth-child(6) .usecase-card-text { flex: 1; }
}

/* On tablet: 2+2+2 layout */
@media (min-width: 640px) and (max-width: 1023px) {
  .usecase-card:nth-child(1) { grid-column: span 2; }
  .usecase-card:nth-child(2) { grid-column: span 2; }
}

.usecase-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: background var(--dur-short) var(--ease-move), box-shadow var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
}
.usecase-card:hover {
  background: var(--subsurface);
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}
.usecase-icon {
  width: 32px;
  height: 32px;
  stroke: var(--teal);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: var(--space-md);
}
.usecase-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  color: var(--teal);
  margin-bottom: var(--space-sm);
}
.usecase-card p { font-size: var(--text-body-sm); color: var(--muted); line-height: 1.6; }

/* ── Team Grid ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
/* 3-portrait override: never creates empty 4th column */
.team-grid-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .team-grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* Varied gradient angles per portrait slot */
.team-portrait-01 { background: linear-gradient(120deg, #c8bfb0 0%, #a89a8d 100%); }
.team-portrait-02 { background: linear-gradient(160deg, #b8c4c4 0%, #8aacac 60%, #c8b99a 100%); }
.team-portrait-03 { background: linear-gradient(200deg, #c4b8a0 0%, #9aacac 60%, #b0a890 100%); }

.team-card { text-align: center; }
.team-portrait {
  --team-overlay-a: rgba(12, 61, 62, 0.20);
  --team-overlay-b: rgba(200, 185, 154, 0.26);
  --team-grain-opacity: 0.07;
  border-radius: var(--radius-lg);
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #c8bfb0 0%, #a89a8d 100%);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.team-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  filter: saturate(0.84) contrast(0.93) brightness(0.94);
}
.team-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(165deg, var(--team-overlay-a) 0%, transparent 56%),
    linear-gradient(220deg, transparent 28%, var(--team-overlay-b) 100%);
}
.team-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--team-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
}
.team-portrait-label {
  position: relative;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
}
.team-name {
  font-weight: 500;
  color: var(--teal);
  font-size: var(--text-body-sm);
}
.team-title {
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: var(--space-2xs);
}
.team-years {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: var(--space-2xs);
}
.team-quote {
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* ── Accordion / FAQ ── */
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-body);
  gap: var(--space-md);
  min-height: 44px;
}
.accordion-trigger:hover { color: var(--teal); }
.accordion-trigger:focus-visible { outline: 3px solid rgba(15,61,62,0.4); outline-offset: 2px; }
.accordion-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--muted);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  transition: transform var(--dur-medium) var(--ease-move);
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-medium) var(--ease-move);
}
.accordion-item.open .accordion-body { max-height: 600px; }
.accordion-content {
  padding-bottom: var(--space-lg);
  color: var(--muted);
  font-size: var(--text-body-sm);
  line-height: 1.7;
}

/* ── Filter Chips ── */
.filter-chips {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--dur-short) var(--ease-move);
  min-height: 44px;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.active,
.chip[aria-pressed="true"] {
  background: var(--saffron);
  color: var(--teal);
  border-color: var(--saffron);
  font-weight: 600;
}
.chip:focus-visible { outline: 3px solid rgba(11,49,50,0.4); outline-offset: 2px; }

/* ── Product Grid ── */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Use-case link grid ── */
.uc-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px)  { .uc-link-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .uc-link-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Product Cards ── */
.product-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-short) var(--ease-move);
}
.product-card:hover { box-shadow: var(--shadow-raised); }
.product-card-tag {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--space-sm);
}
.product-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h1);
  color: var(--teal);
  margin-bottom: var(--space-md);
}
.product-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  background: var(--subsurface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.product-meta-item {}
.product-meta-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--space-2xs);
}
.product-meta-value {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.product-bullets { margin-bottom: var(--space-xl); flex: 1; }
.product-bullets li {
  font-size: var(--text-body-sm);
  color: var(--muted);
  padding-block: var(--space-xs);
  padding-left: var(--space-md);
  position: relative;
  line-height: 1.5;
}
.product-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}

/* ── Rep Example Table ── */
.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}
.rep-table th {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.rep-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.rep-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
@media (max-width: 639px) {
  .rep-table th, .rep-table td {
    white-space: normal;
    word-break: break-word;
    padding: var(--space-sm);
    font-size: var(--text-body-sm);
  }
}
.review-value { word-break: break-word; overflow-wrap: break-word; }

/* ── Checklist ── */
.checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) { .checklist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .checklist-grid { grid-template-columns: repeat(3, 1fr); } }

.checklist-item {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.checklist-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(46,125,84,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.checklist-check svg {
  width: 14px;
  height: 14px;
  stroke: var(--success);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.checklist-text h4 {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--teal);
  margin-bottom: var(--space-2xs);
}
.checklist-text p { font-size: var(--text-caption); color: var(--muted); line-height: 1.5; }
/* ── DBR example box (criteria page) ── */
.dbr-example-box {
  background: var(--subsurface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
/* Neutral (outline) check — signals criterion to verify, not auto-approved */
.checklist-check--neutral {
  background: var(--subsurface);
  border: 1.5px solid var(--line);
}
.checklist-check--neutral svg {
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  stroke-width: 1.5;
}
/* Optional/non-mandatory criterion */
.checklist-check--optional svg { stroke: var(--teal); opacity: 0.5; }

/* ── Wizard Step Indicator ── */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-2xl);
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
}
.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 1px;
  background: var(--line);
}
.wizard-step.done::after, .wizard-step.active::after { background: var(--teal); }
.wizard-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  position: relative;
  z-index: 1;
}
.wizard-step.active .wizard-num { border-color: var(--teal); color: var(--teal); background: rgba(15,61,62,0.06); }
.wizard-step.done .wizard-num { border-color: var(--teal); background: var(--teal); color: var(--cream); }
.wizard-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
.wizard-step.active .wizard-label { color: var(--teal); font-weight: 500; }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

/* ── Form ── */
.form-group { margin-bottom: var(--space-lg); }
.form-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--space-sm);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: var(--text-body);
  color: var(--ink);
  transition: border-color var(--dur-short) var(--ease-move), box-shadow var(--dur-short) var(--ease-move);
  min-height: 44px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,61,62,0.1);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-hint { font-size: var(--text-caption); color: var(--muted); margin-top: var(--space-xs); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }

/* Checkbox */
.checkbox-group { display: flex; gap: var(--space-sm); align-items: flex-start; }
.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--teal);
  margin-top: 2px;
}
.checkbox-label { font-size: var(--text-body-sm); color: var(--muted); line-height: 1.5; }
.checkbox-label a { color: var(--teal); text-decoration: underline; }

/* ── Compliance block ── */
.compliance-warn {
  background: rgba(232,112,92,0.08);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
/* Full-width strip variant (no left accent, top/bottom hairlines) */
.compliance-warn--full {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-top: 1px solid rgba(15,61,62,0.15);
  border-bottom: 1px solid rgba(15,61,62,0.15);
}
.compliance-warn p {
  font-family: var(--font-zh-sans);
  font-size: var(--text-body-sm);
  color: var(--ink);
  line-height: 1.7;
}
.compliance-warn strong { color: var(--teal); }

.compliance-warn--warning {
  background: rgba(192, 138, 46, 0.08);
  border-left-color: var(--warning, #C08A2E);
}
.compliance-warn--warning strong {
  color: var(--warning, #C08A2E);
}

/* ── Footer ── */
.footer {
  background: var(--teal);
  color: var(--cream);
  padding-top: var(--space-3xl);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-bottom: var(--space-md);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-links a {
  font-size: var(--text-body-sm);
  color: rgba(245,240,232,0.75);
  transition: color var(--dur-short) var(--ease-move);
}
.footer-links a:hover { color: var(--cream); }
.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--cream);
  margin-bottom: var(--space-sm);
}
.footer-tagline { font-size: var(--text-body-sm); color: rgba(245,240,232,0.6); line-height: 1.6; }
.footer-bottom {
  margin-top: var(--space-2xl);
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(245,240,232,0.12);
}
.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-warn {
  font-family: var(--font-zh-sans);
  font-size: var(--text-caption);
  color: rgba(245,240,232,0.7);
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: rgba(245,240,232,0.45);
  text-align: right;
}
.footer-address {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  color: rgba(245,240,232,0.35);
  text-align: right;
  margin-top: 2px;
}

/* ── Map placeholder ── */
.map-placeholder {
  background: var(--subsurface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.map-placeholder iframe {
  width: 100%;
  height: 320px;
  border: none;
  border-radius: var(--radius-lg);
}
.map-placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* ── Contact channels ── */
.contact-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) { .contact-channels { grid-template-columns: repeat(3, 1fr); } }
.channel-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: var(--space-xl);
  text-align: center;
  transition: box-shadow var(--dur-short) var(--ease-move);
}
.channel-card:hover { box-shadow: var(--shadow-raised); }
.channel-icon {
  width: 40px;
  height: 40px;
  stroke: var(--teal);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}
.channel-card h3 {
  font-weight: 500;
  color: var(--teal);
  margin-bottom: var(--space-sm);
  font-size: var(--text-body-sm);
}
.channel-card a {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--coral);
  display: block;
  margin-bottom: var(--space-xs);
}
.channel-card p { font-size: var(--text-caption); color: var(--muted); line-height: 1.5; }

/* ── Utilities ── */
.divider { border: none; border-top: 1px solid var(--line); margin-block: var(--space-xl); }

.divider-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.divider-list li {
  font-size: var(--text-body-sm);
  color: var(--muted);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.divider-list li:last-child { border-bottom: none; }
.bg-subsurface { background: var(--subsurface); }
.bg-card { background: var(--card); }
.bg-teal { background: var(--teal); }
.rounded-lg { border-radius: var(--radius-lg); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }

/* ── APR callout ── */
.apr-callout {
  background: var(--teal);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  flex-wrap: wrap;
}
.apr-callout h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h1);
  margin-bottom: var(--space-sm);
}
.apr-callout p { font-size: var(--text-body-sm); color: rgba(245,240,232,0.8); line-height: 1.7; }

/* ── Office Hours ── */
.hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-xl);
  font-size: var(--text-body-sm);
}
.hours-day { color: var(--muted); }
.hours-time { font-family: var(--font-mono); color: var(--teal); font-variant-numeric: tabular-nums; }

/* ── Compliance sections ── */
.compliance-section {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.compliance-section h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h1);
  color: var(--teal);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.compliance-section p, .compliance-section li {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}
.compliance-section li { padding-left: var(--space-md); position: relative; }
.compliance-section li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--coral);
}

/* Review section */
.review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body-sm);
}
.review-row:last-child { border-bottom: none; }
.review-label { color: var(--muted); }
.review-value { font-family: var(--font-mono); color: var(--teal); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ============================================================
   NEW COMPONENTS — Press Strip · Reviews · Ways · Sticky CTA
                    DBR Tool
   ============================================================ */

/* ── Press Strip ── */
.press-strip {
  padding-block: var(--space-2xl);
  background: var(--cream);
  position: relative;
  z-index: 1;
}
.press-strip-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--space-xl);
}
.press-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
}
.press-logo {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--teal);
  opacity: 0.7;
  padding: 10px 18px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-short) var(--ease-move);
}
.press-logo:hover { opacity: 1; }
.press-disclaimer {
  font-size: var(--text-caption);
  color: var(--muted);
  text-align: center;
  margin-top: var(--space-lg);
  line-height: 1.5;
}

/* ── Review Cards ── */
.review-cards-section {
  padding-block: var(--space-2xl);
  background: var(--subsurface);
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .review-cards-section { padding-block: 72px; } }

.review-cards-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.review-cards-header .eyebrow { margin-bottom: 0; }
.review-cards-link {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-short) var(--ease-move);
}
.review-cards-link:hover { color: var(--coral); }

.review-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) { .review-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .review-cards { grid-template-columns: repeat(3, 1fr); } }

.review-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow var(--dur-short) var(--ease-move);
}
.review-card:hover { box-shadow: var(--shadow-raised); }

.review-stars {
  font-size: 1rem;
  color: var(--coral);
  letter-spacing: 2px;
  line-height: 1;
}
.review-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--teal);
  line-height: 1.5;
  flex: 1;
}
.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.review-author {
  font-size: var(--text-body-sm);
  color: var(--ink);
  font-weight: 500;
}
.review-google-link {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-short) var(--ease-move);
}
.review-google-link:hover { color: var(--teal); }

/* ── Ways Grid (3 種方式申請) ── */
.ways-section {
  padding-block: var(--space-2xl);
  background: var(--cream);
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .ways-section { padding-block: 72px; } }

.ways-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, var(--text-display-md));
  font-weight: 500;
  color: var(--teal);
  line-height: 1.15;
  margin-bottom: var(--space-2xl);
  text-align: center;
}
.ways-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) { .ways-grid { grid-template-columns: repeat(3, 1fr); } }

.way-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
}
.way-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}
.way-icon {
  width: 32px;
  height: 32px;
  stroke: var(--teal);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.way-title {
  font-weight: 500;
  color: var(--teal);
  font-size: var(--text-body);
}
.way-desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}
.ways-compliance {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

/* ── WhatsApp Floating Action Button ── */
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 210;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4), 0 1px 4px rgba(0,0,0,0.12);
  transition: transform var(--dur-short) var(--ease-move),
              box-shadow var(--dur-short) var(--ease-move),
              background var(--dur-short) var(--ease-move);
}
.wa-fab:hover {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.5), 0 2px 6px rgba(0,0,0,0.15);
}
.wa-fab:focus-visible {
  outline: 3px solid rgba(15,61,62,0.45);
  outline-offset: 3px;
}
.wa-fab-icon {
  width: 28px;
  height: 28px;
  display: block;
}
@media (max-width: 639px) {
  .wa-fab {
    bottom: 80px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
  .wa-fab-icon { width: 26px; height: 26px; }
}

/* ── Sticky CTA ── */
.sticky-cta {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 200;
  /* Animated gradient bg — Action Orange → coral-soft → Action Orange,
     drifts left-to-right every 3.6s. Subtle but draws the eye. */
  background: linear-gradient(110deg, var(--coral) 0%, #FF8050 35%, var(--coral) 65%, #FF8050 100%);
  background-size: 220% 100%;
  animation: stickyShimmer 3.6s linear infinite;
  color: #fff;
  font-weight: 500;
  font-size: var(--text-body-sm);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: 0 4px 16px rgba(232,112,92,0.35), 0 1px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  min-width: 44px;
  transition: background-color var(--dur-short) var(--ease-move),
              opacity var(--dur-medium) var(--ease-move),
              transform var(--dur-medium) var(--ease-move);
  white-space: nowrap;
}
@keyframes stickyShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
@keyframes stickyPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(232,112,92,0.35), 0 1px 4px rgba(0,0,0,0.1); }
  50%      { box-shadow: 0 6px 24px rgba(232,112,92,0.55), 0 1px 4px rgba(0,0,0,0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    animation: none;
    background: var(--coral);
  }
}
.sticky-cta:hover { background: var(--coral-hover); }
.sticky-cta:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 3px;
}
.sticky-cta.hidden-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
/* Mobile: full-width bar at bottom + pulse glow on top edge */
@media (max-width: 639px) {
  .sticky-cta {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    justify-content: center;
    padding: 16px 24px;
    /* Pair shimmer with vertical pulse so the bar 'breathes' on mobile */
    animation: stickyShimmer 3.6s linear infinite, stickyPulseMobile 2.4s ease-in-out infinite;
  }
  @keyframes stickyPulseMobile {
    0%, 100% { box-shadow: 0 -2px 12px rgba(232,112,92,0.25); }
    50%      { box-shadow: 0 -4px 22px rgba(232,112,92,0.55); }
  }
  .sticky-cta .sticky-cta-desktop { display: none; }
  .sticky-cta .sticky-cta-mobile  { display: inline; }
}
@media (min-width: 640px) {
  .sticky-cta .sticky-cta-desktop { display: inline; }
  .sticky-cta .sticky-cta-mobile  { display: none; }
}
/* Mobile: reserve space so sticky CTA doesn't cover footer WhatsApp link */
@media (max-width: 639px) {
  .footer { padding-bottom: 80px; }
}

/* ── Grid modules (consolidated from inline .njk <style>) ── */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
@media (min-width: 768px) {
  .story-grid { grid-template-columns: 1fr 1fr; }
}

.team-full-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
@media (min-width: 640px) { .team-full-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-full-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── DBR Tool Page ── */
.dbr-hero {
  padding-block: 72px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) { .dbr-hero { padding-block: var(--space-2xl); } }

.dbr-hero-inner {
  max-width: 680px;
}
.dbr-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-lg);
}
.dbr-hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, var(--text-display-lg));
  color: var(--teal);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}
.dbr-hero-sub {
  font-size: var(--text-body-lg);
  color: var(--muted);
  line-height: 1.7;
  max-width: 52ch;
}

.dbr-tool {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
  padding: var(--space-xl);
  max-width: 680px;
  margin-inline: auto;
}
@media (min-width: 640px) { .dbr-tool { padding: var(--space-3xl); } }

.dbr-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
@media (min-width: 540px) { .dbr-inputs { grid-template-columns: 1fr 1fr; } }

.dbr-input-group {}
.dbr-input-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--space-sm);
}
.dbr-input-field {
  width: 100%;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  color: var(--teal);
  min-height: 44px;
  transition: border-color var(--dur-short) var(--ease-move),
              box-shadow var(--dur-short) var(--ease-move);
}
.dbr-input-field:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,61,62,0.1);
}

.dbr-output {
  background: var(--subsurface);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.dbr-output-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.dbr-output-row:last-of-type { border-bottom: none; }
.dbr-output-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.dbr-new-payment {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dbr-ratio-wrap {
  text-align: center;
  padding: var(--space-xl) 0 var(--space-md);
}
.dbr-ratio-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-md);
  display: block;
}
.dbr-ratio-number {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-sm);
  transition: color var(--dur-medium) var(--ease-move);
}
.dbr-ratio-number.zone-healthy  { color: var(--success); }
.dbr-ratio-number.zone-warning  { color: var(--warning); }
.dbr-ratio-number.zone-danger   { color: var(--error); }

.dbr-zone-label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  margin-bottom: var(--space-lg);
  display: block;
  transition: color var(--dur-medium) var(--ease-move);
}
.dbr-zone-label.zone-healthy { color: var(--success); }
.dbr-zone-label.zone-warning { color: var(--warning); }
.dbr-zone-label.zone-danger  { color: var(--error); }

/* DBR visual bar */
.dbr-bar {
  width: 100%;
  height: 12px;
  background: var(--line);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-lg);
}
.dbr-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--dur-medium) var(--ease-move),
              background var(--dur-medium) var(--ease-move);
  background: var(--success);
  min-width: 4px;
}
.dbr-bar-fill.zone-healthy { background: var(--success); }
.dbr-bar-fill.zone-warning { background: var(--warning); }
.dbr-bar-fill.zone-danger  { background: var(--error); }
/* DBR > 100%: striped red to signal catastrophic overflow */
.dbr-bar-fill--overflow {
  background: repeating-linear-gradient(
    45deg,
    var(--error),
    var(--error) 4px,
    rgba(196,74,53,0.4) 4px,
    rgba(196,74,53,0.4) 8px
  );
}

.dbr-bar-markers {
  display: flex;
  position: relative;
  margin-top: var(--space-xs);
  min-height: 20px;
}
.dbr-bar-marker {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
  position: absolute;
  transform: translateX(-50%);
}

/* DBR contextual advice */
.dbr-advice {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  display: none;
}
.dbr-advice.active { display: block; }
.dbr-advice.advice-healthy {
  background: rgba(46,125,84,0.08);
  border-left: 3px solid var(--success);
  color: var(--ink);
}
.dbr-advice.advice-warning {
  background: rgba(192,138,46,0.08);
  border-left: 3px solid var(--warning);
  color: var(--ink);
}
.dbr-advice.advice-danger {
  background: rgba(196,74,53,0.08);
  border-left: 3px solid var(--error);
  color: var(--ink);
}

/* DBR advanced expandable */
.dbr-advanced {
  margin-bottom: var(--space-xl);
}
.dbr-advanced-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  min-height: 44px;
  transition: color var(--dur-short) var(--ease-move);
}
.dbr-advanced-trigger:hover { color: var(--teal); }
.dbr-advanced-trigger:focus-visible { outline: 3px solid rgba(15,61,62,0.4); outline-offset: 2px; }
.dbr-advanced-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-medium) var(--ease-move);
}
.dbr-advanced.open .dbr-advanced-body { max-height: 200px; }
.dbr-advanced-content {
  padding-top: var(--space-md);
}

/* DBR explain section */
.dbr-explain {
  padding-block: var(--space-2xl);
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .dbr-explain { padding-block: 72px; } }

.dbr-explain-inner {
  max-width: 680px;
  margin-inline: auto;
}
.dbr-explain h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, var(--text-display-md));
  font-weight: 500;
  color: var(--teal);
  margin-bottom: var(--space-2xl);
}
.dbr-explain-item {
  margin-bottom: var(--space-xl);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--line);
}
.dbr-explain-item h3 {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--teal);
  margin-bottom: var(--space-sm);
}
.dbr-explain-item p {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.7;
}

/* ============================================================
   REVIEWS PAGE
   ============================================================ */

/* Page wrapper */
.reviews-page {}

/* Stats row */
.rating-stat {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-xl);
  text-align: center;
}
.rating-stat-number {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-sm);
}
.rating-stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rating-stars {
  color: var(--coral);
  font-size: 1.1rem;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: var(--space-xs);
  display: block;
}
.rating-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 640px) {
  .rating-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Review grid — CSS grid 2-col desktop (tolerates display:none on filter) */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}

.review-full-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow var(--dur-short) var(--ease-move);
}
.review-full-card:hover { box-shadow: var(--shadow-raised); }

.review-full-stars {
  font-size: 1rem;
  color: var(--coral);
  letter-spacing: 2px;
  line-height: 1;
}
.review-full-stars .star-empty {
  color: var(--line);
  opacity: 0.6;
}
.review-full-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--teal);
  line-height: 1.55;
  flex: 1;
}
.review-full-name {
  font-weight: 500;
  color: var(--ink);
  font-size: var(--text-body-sm);
}
.review-full-meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Company response box */
.review-response {
  background: rgba(15,61,62,0.05);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md);
  margin-top: var(--space-xs);
}
.review-response-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-xs);
  display: block;
}
.review-response p {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================
   BLOG PAGE
   ============================================================ */

.blog-page {}

/* Category chips */
.blog-category-chip {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(15,61,62,0.08);
  color: var(--teal);
  display: inline-block;
  line-height: 1.6;
}

/* Featured article */
.blog-featured {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  margin-bottom: var(--space-2xl);
  transition: box-shadow var(--dur-short) var(--ease-move);
}
@media (min-width: 768px) {
  .blog-featured { grid-template-columns: 1.1fr 0.9fr; }
}
.blog-featured:hover { box-shadow: var(--shadow-raised); }

.blog-featured-img {
  min-height: 240px;
  background: linear-gradient(135deg, #0F3D3E 0%, #1a5f61 50%, #e8705c 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl);
  position: relative;
}
@media (min-width: 768px) { .blog-featured-img { min-height: 360px; } }

.blog-featured-img-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  background: rgba(15,61,62,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.blog-featured-body {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

.blog-featured-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 2.5vw, var(--text-display-md));
  font-weight: 500;
  color: var(--teal);
  line-height: 1.2;
}

.blog-featured-summary {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.7;
}

.blog-featured-meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Article grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-grid .blog-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
}
.blog-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }

.blog-card-img {
  height: 140px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.75);
  position: relative;
}

/* Blog stub badge — "即將推出" */
.blog-stub-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Blog card CTA link (for DBR tool pivot) */
.blog-card-cta {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: var(--space-xs);
}

.blog-card-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.blog-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--teal);
  line-height: 1.25;
}

.blog-card-summary {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}

.blog-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.05em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

/* Newsletter subscribe block */
.blog-subscribe {
  background: var(--teal);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .blog-subscribe { grid-template-columns: 1fr auto; }
}
.blog-subscribe h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, var(--text-h1));
  color: var(--cream);
  margin-bottom: var(--space-sm);
}
.blog-subscribe p {
  font-size: var(--text-body-sm);
  color: rgba(245,240,232,0.75);
  line-height: 1.7;
  max-width: 52ch;
}
.blog-subscribe-form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.blog-subscribe-input {
  background: rgba(245,240,232,0.12);
  border: 1.5px solid rgba(245,240,232,0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--cream);
  font-size: var(--text-body-sm);
  min-width: 240px;
  min-height: 44px;
  transition: border-color var(--dur-short) var(--ease-move);
}
.blog-subscribe-input::placeholder { color: rgba(245,240,232,0.5); }
.blog-subscribe-input:focus {
  outline: none;
  border-color: rgba(245,240,232,0.6);
}

/* ============================================================
   AWARDS / ABOUT ADDITIONS
   ============================================================ */

.disclosure-banner {
  background: rgba(192,138,46,0.1);
  border: 1.5px solid rgba(192,138,46,0.4);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.disclosure-banner p {
  font-size: var(--text-body-sm);
  color: var(--ink);
  line-height: 1.7;
}
.disclosure-banner strong { color: var(--warning); }

.awards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
@media (min-width: 640px) { .awards-grid { grid-template-columns: repeat(3, 1fr); } }

.award-cell {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
}
.award-cell:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }

.award-cell-org {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}
.award-cell-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body-sm);
  color: var(--teal);
  line-height: 1.4;
  font-weight: 500;
}
.award-cell-year {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.award-disclaimer {
  font-size: var(--text-caption);
  color: var(--muted);
  line-height: 1.6;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

/* ── Expandable ── */
.expandable { margin-bottom: var(--space-md); }
.expandable-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--teal);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 500;
  padding: 0;
  min-height: 44px;
}
.expandable-trigger:focus-visible { outline: 3px solid rgba(15,61,62,0.4); outline-offset: 2px; }
.expandable-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-medium) var(--ease-move);
}
.expandable.open .expandable-body { max-height: 400px; }
.expandable-content {
  padding-top: var(--space-md);
  padding-left: var(--space-lg);
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.8;
}

/* ============================================================
   Use-case pages — .uc-* namespace
   Added for src/usecase/*.html pages only.
   MUST NOT modify classes above this block.
   ============================================================ */

/* ── Use-case hero ── */
.uc-hero {
  padding-block: 72px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) { .uc-hero { padding-block: var(--space-2xl); } }

.uc-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 768px) {
  .uc-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-3xl);
  }
}

.uc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--space-lg);
  display: block;
}

.uc-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin-bottom: var(--space-lg);
}

.uc-body {
  color: var(--muted);
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-xl);
  max-width: 46ch;
  line-height: 1.7;
}

.uc-cta-group {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.uc-portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
  min-height: 300px;
}

.uc-portrait-bg {
  position: absolute;
  inset: 0;
}
.uc-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.uc-portrait-caption {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-lg);
  right: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
  background: rgba(15,61,62,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

/* ── Scenario section ── */
.uc-scenarios {
  padding-block: var(--space-2xl);
  background: var(--subsurface);
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .uc-scenarios { padding-block: 72px; } }

.uc-scenario-list {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px)  { .uc-scenario-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .uc-scenario-list { grid-template-columns: repeat(3, 1fr); } }

.uc-scenario-item {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.uc-scenario-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  margin-top: 6px;
}

.uc-scenario-item p {
  font-size: var(--text-body-sm);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 500;
}

.uc-scenario-item span {
  display: block;
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: var(--space-xs);
  font-weight: 400;
  line-height: 1.5;
}

/* ── Range + APR card ── */
.uc-range-card {
  background: #FFFBF3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
  padding: var(--space-xl);
}

.uc-range-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
@media (min-width: 640px) { .uc-range-grid { grid-template-columns: repeat(3, 1fr); } }

.uc-range-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--space-xs);
}

.uc-range-value {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.uc-range-value.accent { color: var(--coral); }

/* ── Differentiator 3-strip ── */
.uc-diff-strip {
  background: var(--teal);
  color: var(--cream);
  padding-block: var(--space-2xl);
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .uc-diff-strip { padding-block: 72px; } }

.uc-diff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
@media (min-width: 640px) { .uc-diff-grid { grid-template-columns: repeat(3, 1fr); } }

.uc-diff-number {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--coral);
  display: block;
  margin-bottom: var(--space-sm);
}

.uc-diff-title {
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--cream);
  margin-bottom: var(--space-sm);
}

.uc-diff-desc {
  font-size: var(--text-body-sm);
  color: rgba(245,240,232,0.7);
  line-height: 1.7;
}

/* ── Related cross-links ── */
.uc-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
@media (min-width: 640px) { .uc-related-grid { grid-template-columns: repeat(3, 1fr); } }

.uc-related-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: var(--space-lg);
  transition: box-shadow var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}

.uc-related-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.uc-related-card:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}

.uc-related-tag {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
}

.uc-related-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  color: var(--teal);
  font-weight: 500;
}

.uc-related-desc {
  font-size: var(--text-caption);
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.uc-related-arrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--coral);
  margin-top: var(--space-sm);
}

/* ── CTA block ── */
.uc-cta-block {
  background: var(--subsurface);
  padding-block: var(--space-2xl);
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .uc-cta-block { padding-block: 72px; } }

/* ── Secured loan — .secured-* ── */
.secured-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.secured-compare-table th {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--space-md);
  border-bottom: 2px solid var(--line);
}

.secured-compare-table th.highlight-col {
  color: var(--teal);
  background: rgba(15,61,62,0.05);
}

.secured-compare-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.55;
}

.secured-compare-table td.highlight-col {
  background: rgba(15,61,62,0.04);
  font-weight: 500;
  color: var(--teal);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.secured-compare-table tr:last-child td { border-bottom: none; }

.secured-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
@media (min-width: 640px) { .secured-process-grid { grid-template-columns: repeat(3, 1fr); } }

.secured-process-step {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: var(--space-xl);
}

.secured-step-num {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 500;
  color: rgba(15,61,62,0.1);
  line-height: 1;
  margin-bottom: var(--space-md);
  font-variant-numeric: tabular-nums;
}

.secured-step-title {
  font-weight: 500;
  color: var(--teal);
  margin-bottom: var(--space-sm);
  font-size: var(--text-body);
}

.secured-step-desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.7;
}

.secured-warning-card {
  background: rgba(196,74,53,0.06);
  border: 1.5px solid rgba(196,74,53,0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.secured-warning-card h3 {
  font-weight: 600;
  color: var(--error);
  margin-bottom: var(--space-md);
  font-size: var(--text-body);
}

.secured-warning-card p {
  font-size: var(--text-body-sm);
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}

.secured-warning-card p:last-child { margin-bottom: 0; }

.secured-eligibility-list {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.secured-eligibility-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.secured-eligibility-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  stroke: var(--success);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.secured-eligibility-text {
  font-size: var(--text-body-sm);
  color: var(--ink);
  line-height: 1.6;
}

.secured-eligibility-text strong {
  color: var(--teal);
  font-weight: 500;
}

/* ============================================================
   PASS 2 + PASS 3 ADDITIONS
   FINDING-004 trust strip · FINDING-005 stats · FINDING-007 calc
   FINDING-009 lang toggle · FINDING-010 sticky CTA
   FINDING-011 FAQ teaser · RWD sweep · a11y sweep
   ============================================================ */

/* ── FINDING-010: Sticky CTA label update ── */
/* Label changed in HTML — no extra CSS needed */

/* ── Mobile hamburger nav (Pass 3 RWD) ── */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--teal);
  border-radius: 1px;
  transition: transform var(--dur-short) var(--ease-move),
              opacity var(--dur-short) var(--ease-move);
}
/* X state when open */
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-hamburger:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}
/* Only show hamburger below 768px */
@media (min-width: 768px) { .nav-hamburger { display: none; } }

/* ── Mercury-style mobile nav: full-screen overlay + section eyebrows + sticky CTA ── */
.nav-section-title { display: none; }
.nav-mobile-cta { display: none; }

@media (max-width: 767px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    flex-direction: column;
    align-items: stretch; /* override desktop's align-items:center */
    gap: 0;
    padding: 8px 0 96px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 99;
    border: none;
    box-shadow: none;
  }
  body.nav-open .nav-links { display: flex; }
  /* Make .nav-dropdown wrapper fill width so child trigger can stretch */
  .nav-links .nav-dropdown { width: 100%; display: block; }

  /* Section eyebrow — uppercase mono, very muted */
  .nav-section-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(15,61,62,0.42);
    padding: 28px 24px 10px;
    text-align: left;
  }
  .nav-section-title:not(:first-child) {
    margin-top: 12px;
  }

  /* Top-level items (DIRECT children of nav-links + dropdown triggers).
     Use `>` to scope so the bottom-pinned CTA buttons keep their .btn-primary
     / .btn-secondary styling instead of being flattened to transparent text. */
  .nav .nav-links > a,
  .nav .nav-links > .nav-dropdown > .nav-dropdown-trigger {
    padding: 18px 24px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-zh-sans, var(--font-sans));
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    border: none;
    border-bottom: 1px solid rgba(15,61,62,0.08);
    background: transparent;
  }
  .nav .nav-links > a:hover,
  .nav .nav-links > a.active,
  .nav .nav-links > .nav-dropdown > .nav-dropdown-trigger.active {
    color: var(--teal);
  }
  /* Chevron sits at right edge of dropdown trigger */
  .nav .nav-links > .nav-dropdown > .nav-dropdown-trigger {
    justify-content: space-between;
    gap: 0;
  }
  .nav .nav-links > .nav-dropdown > .nav-dropdown-trigger .chevron {
    width: 18px;
    height: 18px;
    transition: transform var(--dur-short) var(--ease-move);
  }
  .nav .nav-links > .nav-dropdown > .nav-dropdown-trigger[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }
  .nav-links .nav-dropdown-trigger .chevron {
    width: 18px;
    height: 18px;
    transition: transform var(--dur-short) var(--ease-move);
  }
  .nav-links .nav-dropdown-trigger[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }

  /* Sub-menu items (inside dropdown) — smaller, indented, hidden by default on mobile */
  .nav-links .nav-dropdown-menu {
    display: none;
    background: rgba(15,61,62,0.03);
    padding: 4px 0 12px;
  }
  .nav-links .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
    display: block;
  }
  .nav-links .nav-dropdown-menu .nav-dropdown-item,
  .nav-links .nav-dropdown-menu .nav-dropdown-all {
    padding: 12px 24px 12px 40px;
    min-height: 48px;
    font-size: 16px;
    font-weight: 400;
    color: var(--muted);
    border-bottom: none;
  }
  .nav-links .nav-dropdown-menu .nav-dropdown-all {
    color: var(--teal);
    font-weight: 500;
  }
  .nav-links .nav-dropdown-menu .nav-dropdown-group-title {
    display: block;
    padding: 8px 24px 4px 40px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    opacity: 0.7;
  }

  /* Bottom-pinned dual CTA bar */
  .nav-mobile-cta {
    display: flex;
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid rgba(15,61,62,0.08);
    z-index: 100;
  }
  .nav-mobile-cta .btn {
    flex: 1;
    min-height: 52px;
    padding: 14px 12px;
    font-size: 16px;
    border-bottom: none !important;
    /* Re-assert button sizing & shape (override .nav-links a font-size 22px) */
    border-radius: var(--radius-sm);
    text-align: center;
    justify-content: center;
  }
  /* Re-apply button color schemes (defeated by generic .nav-links a rules) */
  .nav-mobile-cta .btn-primary {
    background: var(--teal);
    color: var(--cream);
    border: none;
  }
  .nav-mobile-cta .btn-secondary {
    background: transparent;
    color: var(--teal);
    border: 1.5px solid var(--teal);
  }

  /* Hide top-right CTA + license badge while mobile menu is open
     (the bottom-pinned bar already covers the apply-conversion path). */
  body.nav-open .nav-right { display: none; }

  /* Hide WhatsApp FAB when menu open so it doesn't cover bottom CTA */
  body.nav-open .wa-fab { display: none; }

  /* Nav must be sticky for fixed mobile panel */
  .nav { position: sticky; }
  /* Lock body scroll when menu open */
  body.nav-open { overflow: hidden; }

  /* ── 理財學堂 right-aligned "查看全部" mini-text (signals article hub to bots + users) ── */
  .nav .nav-links > a:has(.nav-link-aside) {
    justify-content: space-between;
  }
  .nav-link-aside {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--muted);
  }

  /* ── 精選文章 (Featured Articles) sub-section under 理財學堂 ── */
  .nav-featured-articles {
    background: rgba(11,49,50,0.035);
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(15,61,62,0.08);
    position: relative;
  }
  .nav-featured-articles::before {
    content: '★ 精選文章';
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--saffron);
    padding: 10px 24px 6px;
  }
  .nav-featured-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 24px;
    min-height: 44px;
    text-decoration: none;
    color: var(--ink);
    box-sizing: border-box;
    transition: background var(--dur-short) var(--ease-move);
  }
  .nav-featured-item:hover,
  .nav-featured-item:focus-visible {
    background: rgba(11,49,50,0.06);
    outline: none;
  }
  .nav-featured-chip {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--saffron);
    background: rgba(242,179,61,0.14);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 38px;
    text-align: center;
  }
  .nav-featured-text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
  }
}

/* Hide mobile-only 精選文章 + 查看全部 on desktop */
@media (min-width: 768px) {
  .nav-featured-articles { display: none; }
  .nav-link-aside { display: none; }
}

/* ── FINDING-011: FAQ teaser — collapse answers by default ── */
/* Already handled by existing accordion JS — no extra CSS needed.
   The accordion starts closed by default (no .open class). */

/* ── Blog carousel (horizontal scroll-snap, Mercury / Stripe style) ── */
.blog-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.blog-carousel-all {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
}
.blog-carousel-all:hover { text-decoration: underline; }
.blog-carousel-track-wrap {
  /* full-bleed: break out of container so scroll edge meets viewport */
  width: 100%;
  overflow: hidden;
}
.blog-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 4px 16px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blog-carousel-track::-webkit-scrollbar { display: none; }
.blog-card {
  flex: 0 0 85%;
  max-width: 360px;
  min-width: 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(15,61,62,0.08);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--dur-short) var(--ease-move),
              border-color var(--dur-short) var(--ease-move),
              box-shadow var(--dur-short) var(--ease-move);
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15,61,62,0.18);
  box-shadow: 0 8px 24px rgba(15,61,62,0.06);
}

/* Gradient cover banner — distinct color per topic */
.blog-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.blog-card-cover::before {
  /* subtle radial highlight for depth */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
  z-index: 1;
}
.blog-card-cover-num {
  position: relative;
  z-index: 2;
  font-family: var(--font-display, var(--font-sans));
  font-size: 64px;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Topic-specific gradients */
.blog-card[data-topic="apr"] .blog-card-cover {
  background: linear-gradient(135deg, #0F3D3E 0%, #2A6B6C 100%);
}
.blog-card[data-topic="dbr"] .blog-card-cover {
  background: linear-gradient(135deg, #3F2A6B 0%, #6B4FA0 100%);
}
.blog-card[data-topic="tu"] .blog-card-cover {
  background: linear-gradient(135deg, #B8801E 0%, #E8A93E 100%);
}
.blog-card[data-topic="self-employed"] .blog-card-cover {
  background: linear-gradient(135deg, #1F5D3E 0%, #4A8E6D 100%);
}
.blog-card[data-topic="redflag"] .blog-card-cover {
  background: linear-gradient(135deg, #B8412C 0%, #E8705C 100%);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 20px 22px 24px;
}
.blog-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral, #E8705C);
  background: rgba(232,112,92,0.08);
  padding: 4px 10px;
  border-radius: 999px;
}
.blog-card-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--teal);
  margin: 4px 0 0;
}
.blog-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  flex: 1;
}
.blog-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 8px 0 0;
}
@media (min-width: 640px) {
  .blog-carousel-track { padding-inline: 20px; gap: 20px; }
  .blog-card { flex-basis: 320px; }
  .blog-card-title { font-size: 22px; }
}
@media (min-width: 1024px) {
  .blog-carousel-track { padding-inline: 28px; gap: 24px; }
  .blog-card { flex-basis: 340px; }
}

/* ── Pass 3: usecase grid mobile ── */
/* Already covered in FINDING-002 grid rules.
   Ensure single column at <640px: */
@media (max-width: 639px) {
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase-card:nth-child(n) { grid-column: auto; flex-direction: column; }
}

/* ── Pass 3: hero mobile stack ── */
/* Already handled: .hero-grid is 1fr at <768px */

/* ── Pass 3: calculator mobile ── */
@media (max-width: 639px) {
  .calc-result-box {
    grid-template-columns: 1fr;
  }
}

/* ── Pass 3: wizard step indicator mobile ── */
@media (max-width: 639px) {
  .wizard-steps {
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: flex-start;
  }
  .wizard-step:not(:last-child)::after {
    display: none;
  }
}

/* ── Pass 3: press strip mobile ── */
@media (max-width: 639px) {
  .press-logo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }
  .press-logo { padding: 8px 12px; font-size: var(--text-micro); }
}

/* ── Pass 3: footer mobile ── */
/* Already: .footer-grid is 1fr at mobile via responsive rule */

/* ── Pass 3: review masonry mobile ── */
/* Already: .review-grid columns:1 at <768px */

/* ── Pass 3: stats mobile ── */
@media (max-width: 639px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .stats-grid > div:not(:last-child)::after { display: none; }
}

/* ── Pass 3: trust strip mobile ── */
/* Already: stacks to 1fr at <640px */

/* ── Pass 3: nav .nav relative needed for mobile panel ── */
@media (max-width: 767px) {
  .nav { position: sticky; overflow: visible; }
}

/* ── a11y sweep: focus rings on all interactive elements ── */
.nav-links a:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
  border-radius: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}
.accordion-trigger:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
  border-radius: 2px;
}
details summary:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}
.sticky-cta:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 3px;
}
.press-logo:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}
.uc-related-card:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
}

/* ── a11y: ensure all nav links have >=44px tap target at mobile ── */
@media (max-width: 767px) {
  .nav-links a { min-height: 44px; }
}

/* ── Usecase card text wrapper ── */
.usecase-card-text { flex: 1; }

/* ── Nav Dropdowns ── */

/* Parent item wrapper (desktop) */
.nav-dropdown {
  position: relative;
}

/* Parent trigger link */
.nav-dropdown > .nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* Chevron SVG */
.nav-dropdown-trigger .chevron {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-short) var(--ease-move);
  flex-shrink: 0;
}
.nav-dropdown-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: #FFFBF3;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: var(--space-sm) 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-enter),
              transform var(--dur-short) var(--ease-enter);
}
/* Invisible bridge — fills the 12px gap between trigger and menu so
   the cursor can travel between them without losing :hover. Stripe /
   Mercury / Linear all use this pattern to fix the "menu closes mid-
   cursor-travel" bug. Only active on hover so it doesn't intercept
   clicks above the page when the menu is closed. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -16px;        /* bridge the 12px gap + 4px slack */
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

/* Open state — toggled by JS (desktop click) and CSS hover */
@media (min-width: 768px) {
  /* Hover open with slight delay on close */
  .nav-dropdown:hover > .nav-dropdown-menu,
  .nav-dropdown-menu:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* Also open when trigger has aria-expanded=true (keyboard / click) */
  .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* Group title eyebrow */
.nav-dropdown-group-title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-md) var(--space-md) var(--space-xs);
  display: block;
}
.nav-dropdown-group-title:not(:first-child) {
  margin-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

/* Divider line inside menu */
.nav-dropdown-divider {
  height: 1px;
  background: var(--line);
  margin: var(--space-sm) 0;
}

/* Individual item */
.nav-dropdown-item {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--teal);
  padding: 10px var(--space-md);
  transition: background var(--dur-short) var(--ease-move);
  cursor: pointer;
  white-space: nowrap;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background: var(--subsurface);
  outline: none;
}
.nav-dropdown-item.active {
  color: var(--coral);
}

/* "All products" top link with arrow */
.nav-dropdown-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--teal);
  padding: 10px var(--space-md);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-xs);
  transition: background var(--dur-short) var(--ease-move);
}
.nav-dropdown-all:hover { background: var(--subsurface); }

/* ── Mobile dropdown sub-items ── */
@media (max-width: 767px) {
  /* Hide dropdown panels — mobile uses inline expand */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: none;
  }
  .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
    display: block;
  }
  .nav-dropdown-group-title {
    padding: var(--space-sm) var(--space-xl) var(--space-xs) calc(var(--space-xl) + var(--space-md));
    font-size: 0.6rem;
  }
  .nav-dropdown-group-title:not(:first-child) {
    border-top: none;
  }
  .nav-dropdown-item {
    padding: var(--space-sm) var(--space-xl) var(--space-sm) calc(var(--space-xl) + var(--space-md));
    font-size: var(--text-body-sm);
    color: var(--teal);
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .nav-dropdown-all {
    padding: var(--space-md) var(--space-xl) var(--space-md) calc(var(--space-xl) + var(--space-md));
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
  }
  .nav-dropdown-divider { display: none; }
  /* Parent trigger in mobile panel */
  .nav-dropdown > .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-xl);
    min-height: 44px;
    font-size: var(--text-body);
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  /* Remove border-bottom on trigger when expanded (sub-items provide borders) */
  .nav-dropdown > .nav-dropdown-trigger[aria-expanded="true"] {
    border-bottom: none;
  }
  .nav-dropdown .chevron { margin-left: auto; }
}

/* ── Usecase card link wrapper ── */
.usecase-card-link {
  display: contents; /* lets card styling remain on .usecase-card */
  color: inherit;
  text-decoration: none;
}
/* Make the card itself the clickable block */
a.usecase-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
a.usecase-card:focus-visible {
  outline: 3px solid rgba(15,61,62,0.4);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

/* Apply Step 2 — required field asterisk */
.required-mark {
  color: var(--coral, #E8603C);
  font-weight: 700;
  margin-left: 2px;
}

/* ── Ready-to-apply band ── */
.ready-to-apply-band {
  background: var(--cream);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.ready-to-apply-inner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.ready-to-apply-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--teal);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}
.ready-to-apply-sub {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
.ready-to-apply-cta {
  min-width: 200px;
}

/* ══════════════════════════════════════════════════════════════
   Quick-apply (智能預審計算器) — New classes only
   Added below existing styles; no existing rules modified.
══════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.qa-wrap {
  max-width: 640px;
  margin-inline: auto;
  padding-block: var(--space-lg);
}

/* ── Hero ── */
.qa-hero {
  background: var(--teal);
  color: var(--cream);
  text-align: center;
  padding-block: var(--space-3xl) var(--space-xl);
}
.qa-hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  margin-bottom: var(--space-md);
}
.qa-hero-sub {
  font-size: var(--text-body-lg);
  color: rgba(242,236,225,0.75);
  letter-spacing: 0.01em;
}

/* ── Card base ── */
.qa-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
  padding: var(--space-xl);
}

/* ── Preview card ── */
.qa-preview-card {
  background: var(--teal);
  color: var(--cream);
  border-color: transparent;
}
.qa-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-md);
}

/* ── Big number ── */
.qa-big-number {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 500;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color var(--dur-short) var(--ease-move);
}

/* ── Label micro ── */
.qa-label-micro {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242,236,225,0.6);
  margin-bottom: var(--space-xs);
}

/* ── Filled indicator ── */
.qa-filled-indicator {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: rgba(242,236,225,0.7);
  background: rgba(242,236,225,0.1);
  border: 1px solid rgba(242,236,225,0.2);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  white-space: nowrap;
  align-self: center;
}

/* ── Confidence bar ── */
.qa-confidence-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.qa-confidence-track {
  flex: 1;
  height: 6px;
  background: rgba(242,236,225,0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.qa-confidence-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--coral);
  transition: width 200ms var(--ease-enter), background 300ms var(--ease-move);
  width: 0%;
}
.qa-conf-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: rgba(242,236,225,0.7);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* ── Section label inside card ── */
.qa-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* ── Input section spacing ── */
.qa-input-section {
  margin-bottom: var(--space-xl);
}
.qa-input-section:last-of-type {
  margin-bottom: 0;
}

/* ── Slider range labels ── */
.qa-slider-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
  margin-top: var(--space-2xs);
}

/* ── Pill groups (quick-apply variant) ── */
.qa-pills {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.qa-pill {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--dur-short) var(--ease-move);
  min-height: 44px;
}
.qa-pill:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(11,49,50,0.04);
}
.qa-pill--active {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
}
.qa-pill:focus-visible {
  outline: 3px solid rgba(11,49,50,0.4);
  outline-offset: 2px;
}

/* ── Evaluation overlay ── */
.qa-eval-screen {
  position: fixed;
  inset: 0;
  background: rgba(11,49,50,0.92);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-eval-inner {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-2xl);
  max-width: 380px;
  width: 90%;
  text-align: center;
}
.qa-eval-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  color: var(--teal);
  margin-bottom: var(--space-xl);
}
.qa-eval-list {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.qa-eval-tick {
  font-size: var(--text-body);
  color: var(--muted);
  padding-left: var(--space-xl);
  position: relative;
  transition: color var(--dur-medium) var(--ease-enter);
}
.qa-eval-tick::before {
  content: '○';
  position: absolute;
  left: 0;
  color: var(--line);
  font-size: 1.1rem;
  transition: color var(--dur-short) var(--ease-enter);
}
.qa-eval-tick.done {
  color: var(--teal);
  animation: qa-tick-reveal var(--dur-medium) var(--ease-enter) forwards;
}
.qa-eval-tick.done::before {
  content: '✓';
  color: var(--teal);
  animation: qa-tick-reveal var(--dur-medium) var(--ease-enter) forwards;
}

/* ── Result panel ── */
.qa-result-panel {
  margin-top: var(--space-lg);
}
.qa-preapproved-hero {
  background: linear-gradient(135deg, var(--teal) 0%, #0a2d2e 100%);
  color: var(--cream);
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15,61,62,0.2);
}
.qa-preapproved-label {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.7);
  margin: 0 0 var(--space-sm) 0;
}
.qa-preapproved-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 600;
  color: var(--coral);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md) 0;
}
.qa-preapproved-note {
  font-size: var(--text-caption);
  color: rgba(245,240,232,0.65);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 52ch;
}
@media (max-width: 639px) {
  .qa-preapproved-hero { padding: var(--space-xl) var(--space-md); }
}
.qa-inline-preapproved-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-md) 0 var(--space-2xs) 0;
}
.qa-inline-preapproved-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 600;
  color: var(--coral);
  line-height: 1.1;
  margin: 0;
}
.qa-result-top {
  background: var(--card);
}
.qa-result-score-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  gap: var(--space-lg);
}
.qa-result-apr-block {
  text-align: right;
}

/* ── Score big number ── */
.qa-score-big {
  font-family: var(--font-mono);
  font-size: 4rem;
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
}
.qa-score-bounce {
  animation: qa-score-bounce 600ms var(--ease-enter) forwards;
}

/* ── Score tag ── */
.qa-score-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-top: var(--space-sm);
}
.qa-score-tag--success {
  background: rgba(46,125,84,0.12);
  color: var(--success);
  border: 1px solid rgba(46,125,84,0.25);
}
.qa-score-tag--good {
  background: rgba(242,179,61,0.12);
  color: var(--warning);
  border: 1px solid rgba(242,179,61,0.25);
}
.qa-score-tag--neutral {
  background: rgba(11,49,50,0.06);
  color: var(--teal);
  border: 1px solid var(--line);
}
.qa-score-tag--warn {
  background: rgba(214,88,58,0.1);
  color: var(--coral);
  border: 1px solid rgba(214,88,58,0.2);
}
.qa-glow {
  box-shadow: 0 0 16px rgba(46,125,84,0.35);
}

/* ── APR result display ── */
.qa-result-apr {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ── Result numbers grid ── */
.qa-result-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  background: var(--subsurface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

/* ── Warning / success banners ── */
.qa-warning {
  background: rgba(214,88,58,0.08);
  border: 1px solid rgba(214,88,58,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--coral);
  font-size: var(--text-body-sm);
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.qa-warning-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}
.qa-warning-link {
  color: var(--coral);
  font-weight: 600;
  text-underline-offset: 3px;
}
.qa-success {
  background: rgba(46,125,84,0.08);
  border: 1px solid rgba(46,125,84,0.25);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--success);
  font-size: var(--text-body-sm);
  margin-top: var(--space-md);
}
.qa-balance-hint {
  background: rgba(242,179,61,0.1);
  border: 1px solid rgba(242,179,61,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--warning);
  font-size: var(--text-body-sm);
  margin-top: var(--space-md);
}

/* ── Breakdown rows ── */
.qa-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  animation: qa-rollup var(--dur-medium) var(--ease-enter) forwards;
}
.qa-breakdown-row:last-child { border-bottom: none; }
.qa-bd-label {
  font-size: var(--text-body-sm);
  color: var(--ink);
  font-weight: 500;
}
.qa-bd-note {
  font-size: var(--text-caption);
  color: var(--muted);
  grid-column: 1;
  grid-row: 2;
}
.qa-bd-pts {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--success);
  font-weight: 600;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}
.qa-bd-pts--neg {
  color: var(--coral);
}

/* ── Representative example table ── */
.qa-rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}
.qa-rep-table td {
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--line);
}
.qa-rep-table td:first-child {
  color: var(--muted);
  width: 50%;
}
.qa-rep-table td:last-child {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--teal);
  text-align: right;
}

/* ── Compliance block ── */
.qa-compliance-block {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--subsurface);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  color: var(--muted);
  line-height: 1.6;
}
.qa-compliance-block strong {
  color: var(--ink);
}

/* ── Keyframes ── */
@keyframes qa-rollup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qa-tick-reveal {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes qa-score-bounce {
  0%   { transform: scale(0.5); opacity: 0.5; }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1.0); opacity: 1; }
}

@keyframes qa-slot-spin {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* ── Responsive tweaks for quick-apply ── */
@media (max-width: 480px) {
  .qa-result-score-row {
    flex-direction: column;
  }
  .qa-result-apr-block {
    text-align: left;
  }
  .qa-score-big {
    font-size: 3rem;
  }
  .qa-result-numbers {
    grid-template-columns: 1fr;
  }
  .qa-breakdown-row {
    grid-template-columns: 1fr auto;
  }
  .qa-bd-note {
    grid-column: 1;
  }
}

/* ── CTA disabled state ── */
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   BLOG FILTER STRIP
   ============================================================ */

.blog-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.blog-filter-btn {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  line-height: 1.6;
  padding: 6px 14px;
  transition: background var(--dur-short) var(--ease-move),
              color var(--dur-short) var(--ease-move),
              border-color var(--dur-short) var(--ease-move);
}

.blog-filter-btn:hover {
  background: var(--subsurface);
  color: var(--teal);
  border-color: var(--teal);
}

.blog-filter-btn.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}

.blog-filter-empty {
  color: var(--muted);
  font-size: var(--text-body-sm);
  padding: var(--space-xl) 0;
  text-align: center;
}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */

/* Breadcrumb */
.article-breadcrumb {
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-md);
}

.article-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--muted);
  list-style: none;
}

.article-breadcrumb-list a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-breadcrumb-list a:hover {
  color: var(--teal-hover);
}

/* Hero */
.article-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--line);
}

.article-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 500;
  color: var(--teal);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.article-meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Body */
.article-body {
  padding-block: var(--space-2xl);
}

.article-body h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 2.5vw, var(--text-h1));
  font-weight: 500;
  color: var(--teal);
  line-height: 1.25;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}

.article-body h3 {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.article-body p {
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.article-body ul,
.article-body ol {
  list-style: none;
  margin-bottom: var(--space-md);
  padding-left: 0;
}

.article-body ul li,
.article-body ol li {
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--ink);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xs);
  position: relative;
}

.article-body ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 600;
}

.article-body ol {
  counter-reset: article-ol;
}

.article-body ol > li {
  counter-increment: article-ol;
}

.article-body ol > li::before {
  content: counter(article-ol) '.';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

/* Nested ul inside ol */
.article-body ol ul {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

.article-body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: var(--teal-hover);
}

.article-body strong {
  font-weight: 600;
  color: var(--ink);
}

/* Table */
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  margin-block: var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

.article-table thead {
  background: var(--teal);
  color: var(--cream);
}

.article-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.article-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-micro) var(--ease-move);
}

.article-table tbody tr:nth-child(even) {
  background: var(--subsurface);
}

.article-table tbody tr:last-child {
  border-bottom: none;
}

.article-table td {
  padding: var(--space-sm) var(--space-md);
  color: var(--ink);
  line-height: 1.5;
}

.article-table td:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--teal);
}

/* Sources block */
.article-sources {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
}

.article-sources-title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.article-sources ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.article-sources ul li {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--muted);
  padding-left: 0;
  margin-bottom: var(--space-xs);
}

.article-sources ul li::before {
  display: none;
}

.article-sources ul li a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--text-body-sm);
}

.article-sources ul li a:hover {
  color: var(--teal-hover);
}

/* CTA box */
.article-cta-box {
  background: linear-gradient(135deg, #0B3132 0%, #1F5F60 50%, #2FA38C 100%);
  border: none;
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  margin-top: var(--space-2xl);
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.article-cta-box::before {
  /* tech-style soft top-right glow */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(47,163,140,0.55), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(11,49,50,0.6), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.article-cta-box > * { position: relative; z-index: 1; }

.article-cta-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: var(--space-sm);
}

.article-cta-box p:not(.article-cta-label) {
  color: rgba(255,255,255,0.95);
  font-size: var(--text-body);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

/* Strong CTA — coral solid pops against tech-green bg */
.article-cta-box .btn-primary {
  background: var(--coral, #E8705C);
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(232,112,92,0.35);
}
.article-cta-box .btn-primary:hover {
  background: #D85A45;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(232,112,92,0.45);
}

.article-cta-box .btn-ghost {
  border-color: rgba(255,255,255,0.4);
  color: #FFFFFF;
}

.article-cta-box .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: #FFFFFF;
}

/* Responsive */
@media (max-width: 640px) {
  .article-title {
    font-size: 1.5rem;
  }

  .article-body h2 {
    font-size: 1.125rem;
  }

  .article-body p,
  .article-body ul li,
  .article-body ol li {
    font-size: var(--text-body);
  }

  .article-cta-box {
    padding: var(--space-lg);
  }

  .article-table {
    font-size: var(--text-caption);
  }

  .article-table th,
  .article-table td {
    padding: var(--space-xs) var(--space-sm);
  }
}
/* ── End Quick-apply styles ── */

/* ── TIMELINE / PROCESS STEPS ── */
.timeline { display: flex; flex-direction: column; gap: var(--space-lg); }
.timeline-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-md);
  align-items: start;
}
.timeline-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}
.timeline-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.timeline-icon {
  width: 20px; height: 20px;
  stroke: var(--teal);
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}
.timeline-head h3 {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--teal);
  margin: 0;
}
.timeline-body p {
  font-size: var(--text-body-sm);
  color: var(--muted);
  line-height: 1.7;
}

/* ── How it works section (Stripe / Mercury 3-step walkthrough) ──
   3-column grid on desktop, stacks on mobile. Each step shows
   number + title + desc + mockup screenshot. */
.how-steps {
  list-style: none;
  /* mobile carousel — horizontal scroll-snap (Toss pattern) */
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 4px 16px 24px;
  margin-inline: calc(var(--space-md) * -1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.how-steps::-webkit-scrollbar { display: none; }
.how-step {
  flex: 0 0 85%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 24px;
  background: var(--card);
  border: 1px solid rgba(15,61,62,0.08);
  border-radius: var(--radius-lg);
}
.how-step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--coral);
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--coral);
  width: max-content;
}
.how-step-title {
  font-family: var(--font-display, var(--font-sans));
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  color: var(--teal);
  margin: 0;
  letter-spacing: -0.015em;
}
.how-step-desc {
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.how-step-desc strong {
  color: var(--teal);
  font-weight: 600;
}
/* Reviews page — submission flow notice (post-2026-04-27 WhatsApp redirect) */
.reviews-notice {
  background: rgba(126, 167, 233, 0.10);    /* tinted --accent-info */
  border-left: 3px solid var(--accent-info, #7EA7E9);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: var(--space-lg);
  max-width: 60ch;
}
.reviews-notice-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-info, #7EA7E9);
  margin: 0 0 6px;
  font-weight: 600;
}
.reviews-notice-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.reviews-notice-body a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reviews-notice-body a:hover { color: var(--coral-hover); }

.how-step-highlight {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(236, 101, 43, 0.10);   /* tinted Action Orange */
  border-left: 2px solid var(--coral);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.how-step-highlight a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.how-step-highlight a:hover { color: var(--coral-hover); }
.how-step-mockup {
  width: 100%;
  height: auto;
  max-width: 100%; /* fill card width on mobile carousel */
  margin-top: var(--space-md);
  filter: drop-shadow(0 12px 32px rgba(15, 61, 62, 0.06));
}
@media (min-width: 768px) {
  .how-steps {
    display: grid; /* reset mobile flex → desktop grid */
    flex-direction: initial;
    overflow: visible;
    margin-inline: 0;
    padding: initial;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
  .how-step {
    flex: initial;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /* Cap to Stripe / Mercury step-explainer scale (~200px) so 3 mockups
     side-by-side don't dominate the viewport. Belt-and-suspenders
     max-height + softer drop-shadow tuned for the smaller size. */
  .how-step-mockup {
    max-width: 260px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-inline: auto;
    filter: drop-shadow(0 6px 20px rgba(15, 61, 62, 0.10));
  }
}

/* ── Hero with mockup illustration (Column / Brex platform pattern) ──
   Two-column grid on desktop: text left, UI mockup right.
   On mobile, mockup hidden — text-only hero, no duplicate visual noise. */
.hero-with-mockup {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.hero-mockup {
  /* Mobile-first: show mockup below hero text. 90% of traffic is
     mobile and the visual is a key conversion hook — hiding it
     would waste the asset. Capped at 280px so it stays compact
     within the single-column hero. */
  display: block;
  width: 100%;
  height: auto;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-inline: auto;
  margin-top: var(--space-xl);
  justify-self: center;
  filter: drop-shadow(0 12px 32px rgba(15, 61, 62, 0.06));
}
@media (min-width: 900px) {
  .hero-with-mockup {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-2xl);
  }
  .hero-mockup {
    /* Desktop: graduated cap, no top margin (grid handles spacing) */
    max-width: clamp(280px, 38vw, 480px);
    margin-top: 0;
  }
}

/* ── Phase 1 micro-animations (Mercury / Klarna / Stripe playbook) ──
   Progressive enhancement: opacity:0 only when JS sets .js-anim-ready
   on <body>. Without JS, content renders fully visible (no fade-out
   risk if observer fails / scripts blocked). */

/* 1. Card lift hover — Klarna pattern, lift ≤ 4px.
   Use individual transition properties (not shorthand) so they merge
   cleanly with .anim-fade-up's opacity/transform transition instead
   of being clobbered when both classes are on the same element. */
.card-lift {
  transition-property: transform, box-shadow;
  transition-duration: 200ms, 200ms;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-out;
  /* No box-shadow override at rest — let component (.way-card etc) keep
     its own --shadow-subtle token. */
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 61, 62, 0.08);
}

/* 2. fadeInUp entrance — IO adds .is-visible. Gated behind .js-anim-ready
   on body so non-JS / failed-JS users still see content. */
.js-anim-ready .anim-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
}
.js-anim-ready .anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Hero scale-in — quick-apply preapproved hero */
.js-anim-ready .anim-hero-scale {
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
}
.js-anim-ready .anim-hero-scale.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 4. Step connector fill — smooth bg-color on existing .done state */
.step-connector {
  transition: background 400ms ease-out;
}

/* 5. Number pop — Cash App-style confirmation scale (JS toggles class) */
@keyframes numPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.num-pop {
  animation: numPop 200ms ease-out;
}

/* 6. Reduced-motion safeguard — WCAG 2.1 §2.3.3 */
@media (prefers-reduced-motion: reduce) {
  .js-anim-ready .anim-fade-up,
  .js-anim-ready .anim-hero-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .num-pop {
    animation: none;
  }
  .card-lift {
    transition: none;
  }
  .card-lift:hover {
    transform: none;
    box-shadow: none;
  }
}

/* 7. Desktop nav-dropdown wrappers — must be inline-flex so dropdown
   trigger sits in horizontal row with plain links. Without this, the
   .nav-dropdown <div> renders block-level and breaks desktop layout. */
@media (min-width: 768px) {
  .nav-links .nav-dropdown {
    display: inline-flex;
    align-items: center;
    position: relative;
  }
}

/* ── DBR tool: hero-mockup slightly smaller — meter is visual focus ── */
.dbr-hero .hero-mockup {
  max-width: clamp(260px, 32vw, 380px);
  /* 1:1 image — aspect-ratio inherited from .hero-mockup keeps proportions */
}

/* ── Perf: mockup img layout containment + render hints ──
   contain:layout tells the browser each mockup is self-contained;
   changes inside won't trigger ancestor reflows (reduces CLS / reflow).
   content-visibility:auto defers off-screen rendering (lazy-render).
   picture wrapper inherits dimensions from the img's width/height attrs. */
.hero-mockup,
.how-step-mockup {
  contain: layout;
  content-visibility: auto;
  contain-intrinsic-size: 1024px 1024px;
}