:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --text-secondary: #aaa79e;
  --text-meta: #918f87;
  --action-paper: #f4f0e6;
  --action-paper-bright: #fffaf0;
  --action-paper-deep: #d8d1c4;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

.container {
  width: min(1160px, calc(100% - 48px));
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.button {
  min-height: 48px;
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--action-paper-bright), var(--action-paper-deep));
  color: #151208;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.75);
  transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out, background .18s ease-out;
}

.button:hover {
  border-color: rgba(246,184,26,.62);
  background: linear-gradient(180deg, #fffdf8, #e7e0d4);
  box-shadow: 0 15px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(246,184,26,.12);
  transform: translateY(-1px);
}

.button:active {
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
  transform: translateY(1px);
}

.button-small {
  min-height: 44px;
  padding: 11px 16px !important;
}

.button-ghost {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.025);
  color: #d7d2c7;
  box-shadow: none;
}

.button-ghost:hover {
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.055);
  color: var(--paper);
}

.nav-links {
  gap: var(--space-6);
}

.nav-links > a {
  color: #c8c4ba;
  font-size: 15px;
}

.hero {
  padding-block: 152px var(--space-24);
}

.hero-grid {
  gap: var(--space-16);
}

.hero h1 {
  line-height: .93;
}

.hero-lead,
.section-heading > p,
.report-copy > p {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.trust-row {
  gap: var(--space-6);
  margin-top: var(--space-6);
  color: var(--text-meta);
  font-size: 13px;
  line-height: 1.5;
}

.brand-bridge {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

.brand-bridge span,
.brand-bridge small {
  color: var(--text-meta);
  font-size: 10px;
}

.section,
.contact-section {
  padding-block: clamp(72px, 8vw, 120px);
}

.section-heading {
  margin-bottom: var(--space-12);
}

.section-heading > p {
  margin-bottom: 0;
}

.feature-grid,
.plans-grid {
  gap: var(--space-4);
}

.feature-card,
.plan-card {
  padding: var(--space-8);
}

.feature-card p,
.timeline-step p,
.boundary-panel p,
.plan-intro,
.accordion details p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.boundary-lists li,
.plan-card li {
  color: #c8c4ba;
  font-size: 15px;
  line-height: 1.5;
}

.signal-track span,
.mono-label,
.proof-status,
.plan-note,
.currency-switch > span,
.plan-price .from-label,
.plan-price small {
  color: var(--text-meta);
  font-size: 12px;
  line-height: 1.5;
}

.currency-switch {
  gap: var(--space-2);
}

.currency-switch button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  color: #b7b3aa;
  font-size: 12px;
}

.currency-switch button.active {
  border-color: rgba(246,184,26,.55);
  background: rgba(246,184,26,.12);
  color: #f2d986;
}

.plan-note {
  margin-top: var(--space-6);
}

.accordion summary {
  min-height: 56px;
  padding-block: var(--space-6);
}

.contact-form {
  padding: var(--space-8);
}

.field-row {
  gap: var(--space-4);
}

.contact-form label {
  margin-bottom: var(--space-6);
  color: #aaa79e;
  font-size: 12px;
  line-height: 1.5;
}

.contact-form input,
.contact-form select {
  min-height: 48px;
  margin-top: var(--space-2);
  font-size: 16px;
}

.contact-form .form-note {
  color: var(--text-meta);
  font-size: 13px;
}

.contact-section .button {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, #1a1a17, #0d0d0b);
  color: var(--paper);
  box-shadow: 0 12px 28px rgba(55,36,0,.28);
}

.contact-section .button:hover {
  border-color: #17130b;
  background: #090908;
}

.footer-grid > p,
.footer-links {
  color: #aaa79e;
  font-size: 14px;
  line-height: 1.6;
}

.brand-footer-lockup small,
.footer-bottom {
  color: var(--text-meta);
  font-size: 12px;
  line-height: 1.5;
}

/* Editorial surfaces keep the same readable metadata and rhythm. */
.blog-hero,
.article-hero {
  padding-block: clamp(64px, 7vw, 96px) clamp(48px, 5vw, 64px);
}

.blog-deskline,
.issue-rail small,
.story-meta,
.archive-heading span,
.story-row time,
.story-row > span,
.article-back,
.brief-rail > span,
.brief-rail dt {
  color: var(--text-meta);
  font-size: 12px;
  line-height: 1.5;
}

.blog-feature {
  gap: var(--space-12);
  padding-block: clamp(64px, 7vw, 88px);
}

.feature-story > p,
.editorial-method p {
  color: var(--text-secondary);
  font-size: 17px;
}

.story-row {
  padding-block: var(--space-6);
}

.article-layout {
  padding-block: var(--space-16) var(--space-24);
}

.article-sources li,
.brief-rail dd {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.story-link,
.text-link {
  min-height: 44px;
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid,
  .report-grid,
  .contact-grid,
  .proof-grid {
    gap: var(--space-12);
  }
}

@media (max-width: 680px) {
  .container {
    width: calc(100% - 32px);
  }

  .hero {
    padding-block: 120px var(--space-16);
  }

  .hero h1,
  .blog-hero h1,
  .article-hero h1 {
    font-size: clamp(46px, 13vw, 52px);
    line-height: .96;
    letter-spacing: -.055em;
  }

  .hero-actions {
    gap: var(--space-3);
  }

  .section,
  .contact-section {
    padding-block: var(--space-16);
  }

  .section-heading {
    margin-bottom: var(--space-8);
  }

  .section h2,
  .feature-story h2 {
    font-size: 40px;
    line-height: 1;
  }

  .feature-card,
  .boundary-panel,
  .plan-card,
  .contact-form,
  .editorial-method {
    padding: var(--space-6);
  }

  .blog-feature,
  .article-layout {
    gap: var(--space-12);
    padding-block: var(--space-12) var(--space-16);
  }

  .footer-grid {
    gap: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}