:root {
  --white: #fbfcfd;
  --paper: #f5f7fa;
  --steel: #dce3eb;
  --focus: #ffcf4a;
  --touch-target: 44px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.25, 1, 0.5, 1);
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports not (overflow-x: clip) {
  html,
  body { overflow-x: hidden; }
}

button,
input,
textarea,
select { font: inherit; }

button,
[type="button"],
[type="submit"] {
  touch-action: manipulation;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.wrap { width: min(1180px, calc(100% - 40px)); }

.nav { z-index: 40; }

.brand {
  min-width: 0;
  min-height: var(--touch-target);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.brand-mark { flex: 0 0 auto; }

.brand small {
  line-height: 1.2;
  letter-spacing: 0.035em;
}

.nav-links a,
.links a {
  min-height: var(--touch-target);
  align-items: center;
}

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--graphite, #141619);
  cursor: pointer;
  line-height: 1;
}

.nav-label {
  color: var(--muted, #65707b);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.btn {
  border: 1px solid transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    transform 180ms var(--ease-press),
    box-shadow 180ms var(--ease-out),
    border-color 180ms ease,
    background 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(20, 22, 25, 0.18);
}

.btn:active { transform: translateY(0) scale(0.98); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.line { color: inherit; }

section { scroll-margin-top: 88px; }

p,
li,
label,
input,
textarea,
select,
.check,
.panel-item,
.brand,
.btn {
  overflow-wrap: anywhere;
  hyphens: auto;
}

input,
textarea,
select {
  min-width: 0;
}

textarea {
  overflow: auto;
}

[hidden] {
  display: none !important;
}

.is-busy {
  cursor: wait;
}

h1,
h2,
h3,
.result-card strong {
  line-height: 1.03;
}

.card h3,
.stage h3,
.step h3,
.program-card h3,
.director-card h3,
.path-step h3,
.faq-card h3,
.buying-card h3,
.case-card h3 {
  line-height: 1.02;
}

.card,
.stage,
.step,
.panel,
.scorecard-panel,
.result-card,
.lead-card {
  min-width: 0;
}

.card h3,
.stage h3,
.step h3 {
  overflow-wrap: normal;
  word-break: normal;
}

.card p,
.stage p,
.step p,
.panel p,
.scorecard-panel p,
.result-card p,
.lead-card p {
  text-wrap: pretty;
}

.hero .label,
.dark .label,
.cta .label,
.scorecard-panel .label,
.result-card .label,
.lead-card .label {
  color: #ffbbb9;
}

.cta .section-head p { color: #c8ced7; }

footer { background: #101316; }

@media (max-width: 860px) {
  .wrap { width: min(100% - 28px, 1180px); }

  body.locked { overflow: hidden; }

  .nav-inner {
    min-height: 64px;
    align-items: center;
    flex-direction: row;
    padding: 0;
  }

  .mobile-toggle {
    display: inline-flex;
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .links,
  .nav-links {
    position: fixed;
    inset-block-start: 64px;
    inset-inline: 0;
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    width: auto;
    max-width: 100vw;
    padding: 18px 20px 22px;
    border-bottom: 1px solid rgba(21, 21, 21, 0.1);
    background: var(--white);
    box-shadow: 0 18px 38px rgba(20, 22, 25, 0.12);
    z-index: 39;
  }

  .links.open,
  .nav-links.open {
    display: grid;
  }

  .links a,
  .nav-links a {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding-inline: 4px;
    text-align: left;
  }

  .links .btn,
  .nav-links .btn {
    justify-content: center;
    width: 100%;
    margin-top: 2px;
  }

  .hero-inner { gap: 24px; }

  h1,
  h2,
  h3,
  .result-card strong {
    line-height: 1.04;
  }

  .section-head p { margin-top: 12px; }
}

@media (max-width: 380px) {
  .wrap { width: min(100% - 24px, 1180px); }

  .brand {
    gap: 9px;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}