/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --bg:          #f5f5f7;        /* Apple gray */
  --bg-white:    #ffffff;
  --bg-section:  #f0f0f2;

  --slate:       #2b3245;        /* deep slate — main accent */
  --slate-mid:   #3d4760;
  --slate-light: #5a657d;

  --text:        #1d1d1f;        /* Apple near-black */
  --text-mid:    #4a4a52;
  --text-light:  #86868b;       /* Apple secondary */

  --border:      rgba(0,0,0,0.08);
  --border-card: rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);

  --radius:      16px;
  --radius-sm:   10px;

  --f: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(245,245,247,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo-mark {
  width: 26px; height: 26px;
}

.nav-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}

.nav-name span { color: var(--slate); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-right a {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.18s;
  letter-spacing: -0.1px;
}

.nav-right a:hover { color: var(--text); }

.nav-cta {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bg-white) !important;
  background: var(--slate);
  padding: 8px 20px;
  border-radius: 980px;
  transition: background 0.18s, transform 0.18s !important;
}

.nav-cta:hover {
  background: var(--slate-mid) !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
}

/* Subtle radial glow behind text */
.hero::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(43,50,69,0.06) 0%,
    transparent 70%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius: 980px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0.02em;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.6s 0.1s ease forwards;
}

.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--slate);
  opacity: 0.5;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 820px;
  opacity: 0;
  animation: fadeUp 0.6s 0.25s ease forwards;
}

.hero h1 .highlight {
  color: var(--slate);
}

.hero-sub {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-light);
  max-width: 560px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: fadeUp 0.6s 0.4s ease forwards;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: fadeUp 0.6s 0.55s ease forwards;
}

.btn-primary {
  font-family: var(--f);
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-white);
  background: var(--slate);
  border: none;
  border-radius: 980px;
  padding: 14px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(43,50,69,0.25);
}

.btn-primary:hover {
  background: var(--slate-mid);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(43,50,69,0.3);
}

.btn-secondary {
  font-family: var(--f);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.btn-secondary:hover { gap: 10px; }

.btn-secondary::after { content: '→'; }

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeIn 1s 1.2s ease forwards;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--border), transparent);
}

.scroll-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ═══════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════ */
.stats-strip {
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-cell {
  padding: 36px 40px;
  border-right: 1px solid var(--border);
  text-align: center;
  transition: background 0.2s;
}

.stat-cell:last-child { border-right: none; }
.stat-cell:hover { background: var(--bg); }

.stat-n {
  font-size: 36px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-n sup {
  font-size: 18px;
  font-weight: 600;
  vertical-align: super;
}

.stat-l {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.5;
  max-width: 160px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════ */
.sec {
  padding: 96px 40px;
}

.sec.alt { background: var(--bg); }
.sec.white { background: var(--bg-white); }

.sec-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.sec-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 16px;
}

.sec-title {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 20px;
  max-width: 640px;
}

.sec-title .muted { color: var(--text-light); }

.sec-desc {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-light);
  max-width: 520px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  margin-bottom: 56px;
}

/* ═══════════════════════════════════════════
   PAIN CARDS
═══════════════════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 20px;
  transition: background 0.2s;
}

.card:hover .card-icon {
  background: var(--slate);
  color: white;
}

.card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.3;
}

.card p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.72;
}

/* ═══════════════════════════════════════════
   PROCESS STEPS — horizontal card row
═══════════════════════════════════════════ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.step-card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 36px 28px 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.step-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  opacity: 0.6;
}

.step-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.3;
}

.step-card p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.72;
}

/* Connector dot between steps */
.step-card::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 44px;
  width: 18px;
  height: 1px;
  background: var(--border);
  z-index: 2;
}

.step-card:last-child::after { display: none; }

/* ═══════════════════════════════════════════
   CAPABILITIES — 2-col feature list
═══════════════════════════════════════════ */
.cap-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 48px;
}

.cap-right-text {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.7;
  letter-spacing: -0.01em;
  padding-top: 16px;
}

.cap-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cap-card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cap-card:first-child {
  grid-column: span 2;
  background: var(--slate);
  color: var(--bg-white);
  border-color: transparent;
}

.cap-card:first-child h3 { color: var(--bg-white); }
.cap-card:first-child p { color: rgba(255,255,255,0.62); }

.cap-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 18px;
}

.cap-card:first-child .cap-card-icon {
  background: rgba(255,255,255,0.12);
  font-size: 22px;
}

.cap-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.3;
}

.cap-card p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.72;
}

/* ═══════════════════════════════════════════
   STATEMENT BAND
═══════════════════════════════════════════ */
.statement-band {
  background: var(--slate);
  padding: 80px 40px;
  text-align: center;
}

.statement-band blockquote {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 500;
  color: var(--bg-white);
  line-height: 1.55;
  letter-spacing: -0.02em;
  max-width: 780px;
  margin: 0 auto 20px;
}

.statement-band blockquote em {
  font-style: italic;
  color: rgba(255,255,255,0.65);
}

.statement-source {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.cta-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.cta-left h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-left h2 em {
  font-style: italic;
  color: var(--slate);
}

.cta-left p {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.7;
  letter-spacing: -0.01em;
  margin-bottom: 40px;
  max-width: 380px;
}

.cta-bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
}

.bullet-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(43,50,69,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--slate);
  flex-shrink: 0;
}

/* Form card */
.form-card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: var(--shadow-md);
}

.form-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

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

.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.f-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.f-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-mid);
}

.f-field input,
.f-field select,
.f-field textarea {
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 14px;
  font-family: var(--f);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
  background: var(--bg-white);
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(43,50,69,0.08);
}

.f-field input::placeholder,
.f-field textarea::placeholder {
  color: var(--text-light);
  font-weight: 300;
}

.f-field select option { background: white; }

.f-field textarea {
  resize: none;
  height: 96px;
  line-height: 1.6;
}

.f-submit {
  font-family: var(--f);
  font-size: 15px;
  font-weight: 600;
  color: white;
  background: var(--slate);
  border: none;
  border-radius: 980px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  width: 100%;
  box-shadow: 0 4px 16px rgba(43,50,69,0.22);
  letter-spacing: -0.01em;
}

.f-submit:hover {
  background: var(--slate-mid);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(43,50,69,0.28);
}

.f-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-light);
  text-align: center;
}

.form-success {
  display: none;
  text-align: center;
  padding: 60px 20px;
}

.success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(43,50,69,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--slate);
  margin: 0 auto 20px;
}

.form-success h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.form-success p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.footer-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}

.footer-name span { color: var(--slate); }

.footer-right {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.r {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.r.on { opacity: 1; transform: none; }

/* staggered children */
.stagger > * { transition-delay: 0s; }
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.12s; }
.stagger > *:nth-child(3) { transition-delay: 0.19s; }
.stagger > *:nth-child(4) { transition-delay: 0.26s; }
.stagger > *:nth-child(5) { transition-delay: 0.33s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cards-grid    { grid-template-columns: 1fr 1fr; }
  .steps-grid    { grid-template-columns: 1fr 1fr; }
  .cap-cards     { grid-template-columns: 1fr 1fr; }
  .cap-card:first-child { grid-column: span 2; }
  .cap-header    { grid-template-columns: 1fr; gap: 16px; }
  .stats-strip   { grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(2) { border-right: none; }
}

@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-right a:not(.nav-cta) { display: none; }
  .sec { padding: 64px 20px; }
  .cards-grid    { grid-template-columns: 1fr; }
  .steps-grid    { grid-template-columns: 1fr; }
  .cap-cards     { grid-template-columns: 1fr; }
  .cap-card:first-child { grid-column: span 1; }
  .cta-layout    { grid-template-columns: 1fr; gap: 40px; }
  .stats-strip   { grid-template-columns: 1fr 1fr; }
  .f-row         { grid-template-columns: 1fr; }
  .form-card     { padding: 28px 20px; }
  footer         { flex-direction: column; gap: 12px; text-align: center; }
  .step-card::after { display: none; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 36px; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════════ */
#cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  width: calc(100% - 48px);
  max-width: 720px;
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: opacity 0.3s, transform 0.3s;
}

#cookie-banner.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}

.cookie-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
}

.cookie-text a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 980px;
  padding: 9px 20px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}

.cookie-btn.accept {
  background: var(--slate);
  color: white;
}

.cookie-btn.accept:hover { background: var(--slate-mid); }

.cookie-btn.reject {
  background: var(--bg);
  color: var(--text-mid);
}

.cookie-btn.reject:hover { background: var(--border); }

@media (max-width: 600px) {
  #cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    bottom: 16px;
    width: calc(100% - 32px);
  }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}



.site-hero{padding:160px 40px 88px;background:var(--bg-white);position:relative;overflow:hidden}.site-hero-inner{max-width:1120px;margin:auto;display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}.site-hero h1{font-size:clamp(42px,5.5vw,72px);letter-spacing:-.045em;line-height:1.04;max-width:700px}.site-hero p{font-size:18px;color:var(--text-light);max-width:560px;margin:24px 0 32px}.hero-image{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg)}.article-hero{padding:136px 40px 64px;background:var(--bg-white)}.article-hero-inner{max-width:900px;margin:auto}.article-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:16px}.article-hero h1{font-size:clamp(36px,5vw,62px);line-height:1.08;letter-spacing:-.04em}.article-intro{font-size:19px;color:var(--text-light);max-width:720px;margin:24px 0 32px}.article-image{max-width:1120px;margin:0 auto 76px;padding:0 40px}.article-image img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md)}.article-body{max-width:760px;margin:auto;padding:0 24px 96px}.article-body h2{font-size:30px;line-height:1.15;letter-spacing:-.025em;margin:56px 0 16px}.article-body p,.article-body li{font-size:17px;color:var(--text-mid);line-height:1.8}.article-body p{margin:0 0 20px}.article-body ul{padding-left:22px;margin:16px 0}.flow{padding:22px 26px;background:var(--bg);border:1px solid var(--border-card);border-radius:var(--radius-sm);font-weight:600;color:var(--slate);margin:28px 0}.article-cta{background:var(--slate);color:white;border-radius:var(--radius);padding:38px;margin-top:56px}.article-cta h2{color:white!important;margin-top:0}.article-cta p{color:rgba(255,255,255,.7)}.article-cta .btn-primary{background:white;color:var(--slate);box-shadow:none}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.resource-card{display:block;background:var(--bg-white);padding:25px;border:1px solid var(--border-card);border-radius:var(--radius);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:.2s}.resource-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.resource-card small{color:var(--slate);font-weight:600;text-transform:uppercase;letter-spacing:.07em}.resource-card h3{font-size:18px;line-height:1.3;margin-top:9px}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}.filter{border:1px solid var(--border);background:var(--bg-white);color:var(--text-mid);padding:8px 15px;border-radius:980px;font:500 13px var(--f);cursor:pointer}.filter.active,.filter:hover{background:var(--slate);color:white;border-color:var(--slate)}.hidden-card{display:none}.site-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.site-form .wide{grid-column:span 2}.site-form label{font-size:12px;font-weight:600;color:var(--text-mid);display:block;margin-bottom:6px}.site-form input,.site-form select,.site-form textarea{width:100%;font:14px var(--f);padding:12px;border:1px solid var(--border);border-radius:10px;background:white}.site-form textarea{min-height:130px;resize:vertical}.site-form .consent{font-size:12px;color:var(--text-light);display:flex;gap:8px;align-items:start}.site-form button{justify-self:start}.form-success{display:none;color:var(--slate);font-weight:600}.plain-page{padding:140px 40px 90px;background:var(--bg-white);min-height:70vh}.plain-page-inner{max-width:760px;margin:auto}.plain-page h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.04em;line-height:1.08;margin-bottom:26px}.plain-page h2{font-size:26px;margin:42px 0 12px}.plain-page p{color:var(--text-mid);margin:0 0 16px;line-height:1.8}@media(max-width:760px){.nav-right a:not(.nav-cta){display:none}nav{padding:0 20px}.site-hero,.article-hero,.plain-page{padding-left:20px;padding-right:20px}.site-hero-inner{grid-template-columns:1fr}.hero-image{order:-1}.article-image{padding:0 20px;margin-bottom:44px}.article-image img{aspect-ratio:16/10}.resource-grid{grid-template-columns:1fr}.site-form{grid-template-columns:1fr}.site-form .wide{grid-column:auto}.sec{padding:72px 20px}.cards-grid,.cap-cards,.steps-grid{grid-template-columns:1fr}.cap-card:first-child{grid-column:auto}.stats-strip{grid-template-columns:1fr 1fr}.stat-cell{padding:24px 12px}.footer-right{margin-top:10px}.article-body{padding-bottom:72px}}

.topic-explorer{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:48px;align-items:start}.explorer-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin:0 0 12px}.topic-list{border:1px solid var(--border);border-radius:var(--radius);padding:8px;background:var(--bg-white)}.topic-list .explorer-label{padding:14px 16px 6px}.topic-choice{font:inherit;width:100%;border:0;border-top:1px solid var(--border);background:transparent;text-align:left;padding:18px 16px;display:grid;grid-template-columns:34px 1fr 18px;gap:10px;align-items:center;color:var(--text);cursor:pointer;border-radius:10px;transition:background .2s,color .2s}.topic-choice:first-of-type{border-top:0}.topic-choice span{font-size:12px;color:var(--text-light)}.topic-choice strong{font-size:14px;line-height:1.36;font-weight:600;letter-spacing:-.015em}.topic-choice i{font-style:normal;color:var(--text-light);font-size:18px}.topic-choice:hover,.topic-choice.active{background:var(--slate);color:var(--bg-white)}.topic-choice:hover span,.topic-choice:hover i,.topic-choice.active span,.topic-choice.active i{color:rgba(255,255,255,.65)}.topic-detail{display:none}.topic-detail.active{display:block;animation:topicIn .35s ease}.topic-detail img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;object-position:right center;border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-bottom:22px}.topic-detail h3{font-size:clamp(25px,3vw,38px);line-height:1.15;letter-spacing:-.035em;max-width:690px;margin:8px 0 12px}.topic-detail>p:not(.article-kicker){font-size:16px;color:var(--text-light);max-width:620px;margin:0 0 24px}.topic-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 16px}.topic-tags span{font-size:12px;font-weight:600;color:var(--slate);background:var(--bg);border:1px solid var(--border);border-radius:980px;padding:5px 10px}.topic-detail .btn-primary{display:inline-block}@keyframes topicIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:760px){.topic-explorer{display:block}.topic-list{display:flex;overflow-x:auto;gap:8px;padding:8px;margin-bottom:24px;border:0;background:transparent;scroll-snap-type:x mandatory}.topic-list .explorer-label{display:none}.topic-choice{flex:0 0 240px;border:1px solid var(--border)!important;scroll-snap-align:start;background:var(--bg-white)}.topic-detail h3{font-size:27px}}

.nav-dropdown{position:relative}.nav-dropdown summary{list-style:none;font-size:13px;color:var(--text-mid);cursor:pointer}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown summary::after{content:'⌄';margin-left:5px}.nav-dropdown[open] summary{color:var(--text)}.nav-dropdown>div{position:absolute;top:28px;left:-18px;width:250px;padding:8px;background:var(--bg-white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md)}.nav-dropdown>div a{display:block;padding:10px 12px;border-radius:8px}.nav-dropdown>div a:hover{background:var(--bg)}.article-hero-cover{min-height:min(680px,78vh);display:flex;align-items:end;padding:170px 40px 78px;background-image:linear-gradient(90deg,rgba(10,18,31,.94) 0%,rgba(10,18,31,.72) 46%,rgba(10,18,31,.18) 100%),var(--article-hero);background-size:cover;background-position:right center}.article-hero-cover .article-hero-inner{max-width:900px;margin:0 auto;width:100%}.article-hero-cover h1{color:#fff;max-width:800px}.article-hero-cover .article-kicker{color:rgba(255,255,255,.72)}.article-hero-cover .article-intro{color:rgba(255,255,255,.78)}.article-hero-cover .topic-tags span{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24)}.article-hero-cover .btn-primary{background:#fff;color:var(--slate);box-shadow:none}@media(max-width:760px){.nav-dropdown{display:none}.article-hero-cover{min-height:620px;padding:150px 20px 56px;background-image:linear-gradient(0deg,rgba(10,18,31,.95),rgba(10,18,31,.4)),var(--article-hero);background-position:center}.article-hero-cover h1{font-size:40px}}
.problem-group{padding:38px 0 54px;border-top:1px solid var(--border);scroll-margin-top:80px}.problem-group:first-child{border-top:0}.problem-group h2{font-size:28px;letter-spacing:-.03em;margin-bottom:20px}.article-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.article-tile{display:block;overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius);background:var(--bg-white);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--text);transition:.2s}.article-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.article-tile>img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:right center;display:block}.article-tile>div{padding:20px}.article-tile h3{font-size:18px;line-height:1.32;letter-spacing:-.025em;margin:5px 0 10px}.article-tile .tile-summary{font-size:14px;line-height:1.6;color:var(--text-light);margin:0 0 14px}.article-tile>div>p:last-child{font-size:13px;color:var(--slate);font-weight:600;margin-top:14px}@media(max-width:760px){.article-tiles{grid-template-columns:1fr}.problem-group{padding:30px 0}.problem-group h2{font-size:24px}}.catalog-filter{background:var(--bg);padding:26px;border-radius:var(--radius);margin:34px 0 46px}.catalog-filter>label,.catalog-filter>div>p{font-size:13px;font-weight:600;color:var(--text);display:block;margin:0 0 9px}.catalog-filter input{width:100%;font:15px var(--f);padding:13px 15px;border:1px solid var(--border);border-radius:10px;background:white;margin-bottom:22px}.filter-options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.filter-options button{font:500 13px var(--f);background:white;color:var(--text-mid);border:1px solid var(--border);border-radius:980px;padding:8px 12px;cursor:pointer}.filter-options button.active,.filter-options button:hover{background:var(--slate);border-color:var(--slate);color:#fff}.catalog-count{font-size:13px;color:var(--text-light);margin:0}.article-tile.is-hidden{display:none}.problem-group.is-hidden{display:none}.article-tile{opacity:.01;transform:translateY(16px)}.article-tile.in-view{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease,box-shadow .2s}.article-tile.in-view>img{animation:mediaReveal .7s ease both}@keyframes mediaReveal{from{filter:saturate(.65) contrast(.9);transform:scale(1.04)}to{filter:saturate(1) contrast(1);transform:scale(1)}}.article-hero-cover{background-size:108%;transition:background-size 1.3s ease}.article-hero-cover.in-view{background-size:100%}@media(prefers-reduced-motion:reduce){.article-tile,.article-tile.in-view{opacity:1;transform:none;transition:none}.article-tile.in-view>img{animation:none}.article-hero-cover,.article-hero-cover.in-view{background-size:cover}}
/* Stable image framing */
.hero-image,
.topic-detail img,
.article-image img,
.article-tile>img {
  height: auto;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
}

.hero-image,
.topic-detail img,
.article-tile>img {
  aspect-ratio: auto;
}

.hero-image {
  display: block;
}

.article-hero-cover {
  background-position: center;
}

/* Mobile article fixes */
.article-hero-cover,
.article-hero-cover.in-view {
  background-repeat: no-repeat;
  background-size: cover;
}

.article-cta {
  overflow: hidden;
}

.article-cta .btn-primary {
  box-sizing: border-box;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

@media(max-width:760px) {
  .article-hero-cover,
  .article-hero-cover.in-view {
    min-height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }

  .article-hero-cover {
    padding: 128px 20px 42px;
  }

  .article-hero-cover h1 {
    font-size: 38px;
  }

  .article-hero-cover .article-intro {
    font-size: 18px;
    line-height: 1.65;
  }

  .article-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .article-cta {
    margin-left: -2px;
    margin-right: -2px;
    padding: 30px 24px;
    border-radius: 24px;
  }

  .article-cta .btn-primary {
    width: 100%;
    padding: 13px 18px;
    line-height: 1.35;
  }
}