/* ============================================================
   PriceTool.io — Site Stylesheet
   Builds on tokens.css. All design values come from tokens.
   ============================================================ */

@import url("./tokens.css?v=20260427a");

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features-default);
  color: var(--text-primary);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; overflow-x: hidden; }

img { max-width: 100%; display: block; }

/* Long-content overflow safety: prevent a long URL / unbroken word from forcing horizontal scroll, without overly aggressive breaking of normal copy */
h1, h2, h3, h4, p, li, dt, dd { overflow-wrap: break-word; }

/* Tighter section padding on mobile for breathing room without feeling cramped */
@media (max-width: 480px) {
  .container, .container-wide, .container-narrow { padding-left: var(--space-4); padding-right: var(--space-4); }
}

a { color: var(--color-brand-blue); }
a:hover { text-decoration: underline; }

/* Tabular numerals where they matter */
.tabular,
.metric-number,
[data-numeric] {
  font-feature-settings: var(--font-features-tabular);
}

::selection { background: rgba(46,91,224,0.22); color: var(--text-primary); }

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: 8px;
  padding: 8px 12px; background: var(--color-brand-blue); color: #fff;
  font-size: 14px; font-weight: 600;
  border-radius: var(--radius-subtle);
  transform: translateY(-200%);
  transition: transform 150ms ease;
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); outline: none; box-shadow: var(--focus-ring); }

/* Layout primitives */
.container {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter-mobile); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter-mobile); }

@media (min-width: 640px) {
  .container, .container-wide, .container-narrow { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
}
@media (min-width: 1200px) {
  .container, .container-wide, .container-narrow { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
}

.section { padding: var(--space-24) 0; }
.section-tight { padding: var(--space-16) 0; }
.section-cool { background: var(--color-cool-white); }
.section-navy { background: var(--color-deep-navy); color: var(--text-on-navy); }

@media (max-width: 640px) {
  .section { padding: var(--space-16) 0; }
}

/* Eyebrow + brand-blue underline (signature) */
.eyebrow {
  display: inline-block;
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-tracking);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--color-brand-blue);
  margin-bottom: var(--space-3);
}
.eyebrow::after {
  content: "";
  display: block;
  width: 32px; height: 2px;
  background: var(--color-brand-blue);
  margin-top: var(--space-2);
}
.eyebrow.amber { color: var(--color-amber); }
.eyebrow.amber::after { background: var(--color-amber); }
.eyebrow.on-navy { color: var(--color-amber); }
.eyebrow.on-navy::after { background: var(--color-amber); }

/* Type scale utility classes */
.t-display-hero {
  font-size: var(--type-display-hero-size);
  line-height: var(--type-display-hero-lh);
  letter-spacing: var(--type-display-hero-tracking);
  font-weight: var(--weight-bold);
}
.t-display-secondary {
  font-size: var(--type-display-secondary-size);
  line-height: var(--type-display-secondary-lh);
  letter-spacing: var(--type-display-secondary-tracking);
  font-weight: var(--weight-bold);
}
.t-section {
  font-size: var(--type-section-size);
  line-height: var(--type-section-lh);
  letter-spacing: var(--type-section-tracking);
  font-weight: var(--weight-bold);
}
.t-sub-large {
  font-size: var(--type-sub-large-size);
  line-height: var(--type-sub-large-lh);
  letter-spacing: var(--type-sub-large-tracking);
  font-weight: var(--weight-bold);
}
.t-sub {
  font-size: var(--type-sub-size);
  line-height: var(--type-sub-lh);
  letter-spacing: var(--type-sub-tracking);
  font-weight: var(--weight-bold);
}
.t-card {
  font-size: var(--type-card-size);
  line-height: var(--type-card-lh);
  letter-spacing: var(--type-card-tracking);
  font-weight: var(--weight-bold);
}
.t-body-large {
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-lh);
  font-weight: var(--weight-medium);
}
.t-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--weight-regular);
}

/* Responsive display headline scaling */
@media (max-width: 960px) {
  .t-display-hero { font-size: 48px; letter-spacing: -1.25px; }
  .t-display-secondary { font-size: 40px; letter-spacing: -1.25px; }
  .t-section { font-size: 32px; letter-spacing: -0.75px; }
  .t-sub-large { font-size: 28px; letter-spacing: -0.5px; }
}
@media (max-width: 640px) {
  .t-display-hero { font-size: 36px; letter-spacing: -0.75px; }
  .t-display-secondary { font-size: 32px; letter-spacing: -0.75px; }
  .t-section { font-size: 28px; letter-spacing: -0.5px; }
}

.text-secondary { color: var(--text-secondary); }
.text-on-navy-secondary { color: var(--text-on-navy-secondary); }
.text-muted { color: var(--text-muted); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: var(--type-nav-size); font-weight: var(--weight-semibold); line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-subtle);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:hover { text-decoration: none; }
.btn-large { padding: 14px 24px; font-size: 16px; }

.btn-primary { background: var(--color-brand-blue); color: #fff; }
.btn-primary:hover { background: var(--color-brand-blue-hover); box-shadow: var(--shadow-button-primary-hover); }
.btn-primary:active { background: var(--color-brand-blue-active); transform: scale(0.98); }

.btn-secondary { background: #fff; color: var(--color-deep-navy); border-color: rgba(15,27,61,0.12); }
.btn-secondary:hover { background: var(--color-cool-white); border-color: rgba(15,27,61,0.2); }
.btn-secondary:active { transform: scale(0.98); }

.btn-on-navy-primary { background: var(--color-brand-blue); color: #fff; }
.btn-on-navy-primary:hover { background: #5A82FF; }
.btn-on-navy-primary:active { background: var(--color-brand-blue-active); transform: scale(0.98); }

.btn-on-navy-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.btn-on-navy-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.btn-on-navy-secondary:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent; color: var(--color-brand-blue);
  padding: 12px 4px; min-height: auto;
}
.btn-ghost:hover { text-decoration: underline; }
.btn-ghost .arrow { display: inline-block; transition: transform var(--duration-fast); }
.btn-ghost:hover .arrow { transform: translateX(4px); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--type-badge-size);
  line-height: 1;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--type-badge-tracking);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-managed { background: var(--color-amber-soft); color: var(--color-amber-deep); }
.badge-managed::before { content: "●"; color: var(--color-amber); font-size: 10px; }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-neutral { background: var(--color-slate-100); color: var(--color-slate-600); }
.badge-blue { background: var(--color-brand-blue-subtle); color: var(--color-brand-blue-hover); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #fff;
  border: var(--border-whisper);
  border-radius: var(--radius-comfortable);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.card-feature {
  border-radius: var(--radius-large);
  padding: var(--space-8);
}
.card-link {
  transition: transform var(--duration-default) var(--easing-default), box-shadow var(--duration-default);
  text-decoration: none; color: inherit; display: block;
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.card-metric {
  background: #fff;
  border: var(--border-whisper);
  border-radius: var(--radius-comfortable);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.card-metric .metric-label {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-slate-600);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: 8px;
}
.card-metric .metric-label.has-amber::before {
  content: "";
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--color-amber);
}
.card-metric .metric-number {
  font-size: 48px;
  font-weight: var(--weight-bold);
  letter-spacing: -1.25px;
  color: var(--color-slate-950);
  font-feature-settings: var(--font-features-tabular);
  line-height: 1.05;
  margin-bottom: var(--space-3);
}
.card-metric .metric-desc {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-slate-600);
  max-width: 28ch;
}

/* Pain quote block */
.pain-quote {
  border-left: 4px solid var(--color-deep-navy);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  max-width: 720px;
}
.pain-quote .quote-line {
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--color-slate-800);
  line-height: 1.45;
  margin-bottom: var(--space-3);
}
.pain-quote .quote-line:last-child { margin-bottom: 0; }
.pain-quote .quote-line.dim { color: var(--color-slate-600); }

/* Rotating supplier name — amber accent, the one bright moment in the pain quote */
.supplier-rotator {
  display: inline-block;
  color: var(--color-amber-deep);
  font-weight: var(--weight-semibold);
  font-feature-settings: "tnum";
  transition: opacity 320ms ease;
  white-space: nowrap;
}
.supplier-rotator.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .supplier-rotator { transition: none; }
}
@media (max-width: 640px) {
  .pain-quote .quote-line { font-size: 18px; }
  .pain-quote { padding-left: var(--space-4); }
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-6); }
.form-label {
  display: block;
  font-size: var(--type-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
  margin-bottom: var(--space-2);
}
.form-label .req { font-weight: var(--weight-regular); color: var(--color-slate-400); margin-left: 4px; }

.form-input, .form-textarea, .form-select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--color-slate-950);
  background: #fff;
  border: var(--border-input);
  border-radius: var(--radius-subtle);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-slate-400); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: var(--focus-ring-input);
}
.form-textarea { min-height: 96px; resize: vertical; }
.form-hint { font-size: var(--type-caption-size); color: var(--color-slate-600); margin-top: var(--space-2); }
.form-error { font-size: var(--type-caption-size); color: var(--color-danger-text); margin-top: var(--space-2); }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.checkbox-group { display: flex; flex-direction: column; gap: 10px; }
.checkbox-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}
@media (max-width: 480px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; }
.checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--color-slate-400); background: #fff;
  cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin: 0;
}
.checkbox input[type="checkbox"]:checked { background: var(--color-brand-blue); border-color: var(--color-brand-blue); }
.checkbox input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox input[type="checkbox"]:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.checkbox span { font-size: 15px; color: var(--color-slate-800); }

/* ============================================================
   WORDMARK
   ============================================================ */
.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.wordmark .price { color: var(--color-brand-blue); }
.wordmark .tool { color: var(--wm-tool, var(--color-deep-navy)); }
.wordmark .dot  { color: var(--color-amber); }
.wordmark .io   {
  color: var(--wm-io, var(--color-brand-blue));
  font-size: 0.62em;
  margin-left: 0.04em;
}
.wordmark.on-navy .tool { color: #fff; }
.wordmark.on-navy .io { color: var(--color-brand-blue); }
.nav-wordmark { font-size: 24px; }
.footer-wordmark {
  font-size: 26px;
  margin-bottom: var(--space-3);
  display: inline-flex;
}

/* ============================================================
   NAV BAR
   ============================================================ */
.site-nav {
  background: #fff;
  border-bottom: var(--border-whisper);
  position: relative;
  z-index: var(--z-sticky-nav);
}
.site-nav-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  height: 72px;
  display: flex; align-items: center; gap: var(--space-8);
}
@media (min-width: 640px) { .site-nav-inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1200px) { .site-nav-inner { padding: 0 var(--gutter-desktop); } }
@media (max-width: 640px) { .site-nav-inner { height: 64px; } }

.site-nav .brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.site-nav .brand img { height: 28px; width: auto; }

.site-nav .nav-links {
  display: flex; gap: var(--space-6); align-items: center; flex: 1;
  list-style: none;
}
.site-nav .nav-links a {
  font-size: var(--type-nav-size);
  font-weight: var(--weight-medium);
  color: rgba(15,27,61,0.75);
  text-decoration: none;
  padding: 8px 4px;
  position: relative;
  transition: color var(--duration-fast);
}
.site-nav .nav-links a:hover { color: var(--color-deep-navy); text-decoration: none; }
.site-nav .nav-links a[aria-current="page"] { color: var(--color-deep-navy); }
.site-nav .nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 0;
  height: 2px; background: var(--color-brand-blue);
}
.site-nav .nav-cta { margin-left: auto; }
.site-nav .nav-links > li.cta-li { display: none !important; }

.nav-toggle {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; margin-left: auto;
  border-radius: var(--radius-subtle);
}
.nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-toggle svg { width: 24px; height: 24px; color: var(--color-slate-800); }

@media (max-width: 880px) {
  .site-nav .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: #fff;
    padding: var(--space-4) var(--gutter-mobile);
    gap: 0;
    border-bottom: var(--border-whisper);
    box-shadow: var(--shadow-card);
  }
  .site-nav .nav-links.open { display: flex; }
  .site-nav .nav-links li { width: 100%; }
  .site-nav .nav-links a { display: block; padding: 12px 0; font-size: 16px; }
  .site-nav .nav-cta { display: none; }
  .site-nav .nav-links > li.cta-li { display: list-item !important; padding-top: var(--space-3); }
  .site-nav .nav-links > li.cta-li a { padding: 0; }
  .nav-toggle { display: inline-flex; }
}

/* ============================================================
   NAV DROPDOWN (Features menu)
   Matches the visual weight of the existing <a> nav items —
   same padding, same color states, same active-page underline.
   ============================================================ */
.site-nav .nav-links .has-dropdown { position: relative; }

/* The toggle is a <button> that must read like a sibling <a>. */
.site-nav .nav-links .dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-nav-size);
  font-weight: var(--weight-medium);
  color: rgba(15,27,61,0.75);
  padding: 8px 4px;            /* match .nav-links a */
  position: relative;
  letter-spacing: inherit;
  transition: color var(--duration-fast);
}
.site-nav .nav-links .dd-toggle:hover { color: var(--color-deep-navy); }
.site-nav .nav-links .dd-toggle[aria-current="page"] { color: var(--color-deep-navy); }
.site-nav .nav-links .dd-toggle[aria-current="page"]::after {
  content: ""; position: absolute; left: 4px; right: 16px; bottom: 0;
  height: 2px; background: var(--color-brand-blue);
}
.site-nav .nav-links .dd-toggle .dd-caret {
  width: 12px; height: 12px;
  transition: transform var(--duration-fast);
  flex-shrink: 0;
}
.site-nav .nav-links .has-dropdown[aria-expanded="true"] .dd-toggle .dd-caret {
  transform: rotate(180deg);
}

/* Menu — flush against the toggle so hover doesn't fall into a gap.
   The visible offset is achieved by an INVISIBLE padding-top inside
   the absolutely-positioned wrapper, so the cursor never leaves the
   parent <li> when traversing from toggle to menu. */
.site-nav .nav-links .dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;            /* hover-bridge — invisible */
  display: none;
  z-index: var(--z-sticky-nav);
}
.site-nav .nav-links .has-dropdown[aria-expanded="true"] .dd-menu { display: block; }
.site-nav .nav-links .dd-menu-inner {
  min-width: 320px;
  background: #fff;
  border: var(--border-whisper);
  border-radius: var(--radius-comfortable);
  box-shadow: 0 24px 48px -16px rgba(15, 27, 61, .18), 0 6px 16px -8px rgba(15, 27, 61, .1);
  padding: var(--space-3);
}
/* Menu items — override the global .nav-links a rules cleanly. */
.site-nav .nav-links .dd-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-subtle);
  color: var(--color-slate-800);
  text-decoration: none;
  position: static;
}
.site-nav .nav-links .dd-menu a::after { display: none; }   /* kill underline */
.site-nav .nav-links .dd-menu a:hover {
  background: var(--color-cool-white);
  color: var(--color-deep-navy);
}
.site-nav .nav-links .dd-menu a[aria-current="page"] {
  background: var(--color-brand-blue-subtle);
  color: var(--color-deep-navy);
}
.site-nav .nav-links .dd-menu a strong {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: 14px;
  color: var(--color-slate-950);
  margin-bottom: 2px;
}
.site-nav .nav-links .dd-menu a span.desc {
  display: block;
  font-size: 12px;
  color: var(--color-slate-500);
  font-weight: var(--weight-regular);
  line-height: 1.4;
}

/* Mobile: dropdown becomes inline children of the open nav drawer. */
@media (max-width: 880px) {
  .site-nav .nav-links .dd-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 16px;
    color: rgba(15,27,61,0.75);
  }
  .site-nav .nav-links .dd-menu {
    position: static;
    padding-top: 0;
  }
  .site-nav .nav-links .dd-menu-inner {
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--color-cool-white);
    border-radius: 0;
    margin: 0 0 var(--space-2) var(--space-3);
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
  }
  .site-nav .nav-links .dd-menu a { padding: 8px 0; }
}

/* ============================================================
   HERO BAND
   ============================================================ */
.hero-band {
  background: var(--color-deep-navy);
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  color: #fff;
  padding: var(--space-24) 0 var(--space-24);
  position: relative;
  overflow: hidden;
}
.hero-band .accent-dot {
  position: absolute;
  right: 8%; top: 96px;
  width: 14px; height: 14px;
  border-radius: 9999px;
  background: var(--color-amber);
  box-shadow: 0 0 40px rgba(245,165,15,0.55);
}
.hero-band .hero-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter-mobile); position: relative; }
@media (min-width: 640px) { .hero-band .hero-inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1200px) { .hero-band .hero-inner { padding: 0 var(--gutter-desktop); } }

.hero-band h1 {
  color: #fff;
  margin-bottom: var(--space-6);
  max-width: 18ch;
}
.hero-band .subhead {
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-medium);
  line-height: 1.55;
  color: var(--text-on-navy-secondary);
  max-width: 56ch;
  margin-bottom: var(--space-8);
}
.hero-band .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 640px) {
  .hero-band { padding: var(--space-16) 0; }
  .hero-band .accent-dot { right: 24px; top: 56px; }
  .hero-band .cta-row .btn { flex: 1 1 100%; }
}

/* ============================================================
   PROCESS FLOW STRIP
   ============================================================ */
.process-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
}
.process-step .step-circle {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--color-amber);
  color: #fff;
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 32px;
  text-align: center;
  margin-bottom: var(--space-4);
  font-feature-settings: var(--font-features-tabular);
}
.process-step h4 {
  font-size: var(--type-card-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--type-card-tracking);
  color: var(--color-slate-950);
  margin-bottom: var(--space-2);
}
.process-step p {
  font-size: var(--type-body-size);
  color: var(--color-slate-600);
  line-height: 1.55;
}
.process-step .step-line {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-slate-400);
  margin-top: var(--space-3);
}
.step-connector {
  align-self: start; margin-top: 16px;
  width: 100%; height: 0;
  border-top: 2px dashed var(--color-slate-200);
}
@media (max-width: 800px) {
  .process-flow { grid-template-columns: 1fr; gap: var(--space-4); }
  .step-connector { width: 0; height: 32px; border-top: none; border-left: 2px dashed var(--color-slate-200); margin-left: 16px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-deep-navy);
  color: var(--text-on-navy-secondary);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.site-footer-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 640px) { .site-footer-inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1200px) { .site-footer-inner { padding: 0 var(--gutter-desktop); } }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .footer-brand img { height: 28px; width: auto; margin-bottom: var(--space-3); }
.site-footer .footer-brand p {
  font-size: var(--type-caption-size);
  color: var(--text-on-navy-muted);
  max-width: 32ch;
  line-height: 1.55;
}
.site-footer h5 {
  font-size: var(--type-caption-size);
  font-weight: var(--weight-semibold);
  color: #fff;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: var(--space-2); }
.site-footer ul a {
  font-size: var(--type-caption-size);
  color: var(--text-on-navy-secondary);
  text-decoration: none;
}
.site-footer ul a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand-line {
  display: flex; align-items: center; gap: 10px;
  padding-top: var(--space-6);
  font-size: var(--type-caption-size);
  color: var(--text-on-navy-muted);
}
.site-footer .brand-line::before { content: "●"; color: var(--color-amber); font-size: 10px; }
.site-footer .brand-line .legal { margin-left: auto; font-size: 13px; color: rgba(255,255,255,0.4); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .site-footer .footer-brand { grid-column: 1 / -1; }
  .site-footer .brand-line { flex-wrap: wrap; }
  .site-footer .brand-line .legal { margin-left: 0; width: 100%; }
}

/* ============================================================
   FEATURE CARDS / GRIDS
   ============================================================ */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Section header (eyebrow + title + lead, used everywhere) */
.section-header { max-width: 720px; margin-bottom: var(--space-12); }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.center .eyebrow::after { margin-left: auto; margin-right: auto; }
.section-header .lead {
  font-size: var(--type-body-large-size);
  line-height: 1.55;
  color: var(--color-slate-600);
  margin-top: var(--space-4);
  text-wrap: pretty;
}
.section-header h2 { color: var(--color-slate-950); }
.section-navy .section-header h2 { color: #fff; }
.section-navy .section-header .lead { color: var(--text-on-navy-secondary); }

/* Why-different feature cards */
.feature-card {
  background: #fff;
  border: var(--border-whisper);
  border-radius: var(--radius-large);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  height: 100%;
}
.feature-card .badge { align-self: flex-start; margin-bottom: var(--space-4); }
.feature-card h3 {
  font-size: var(--type-card-size);
  letter-spacing: var(--type-card-tracking);
  font-weight: var(--weight-bold);
  color: var(--color-slate-950);
  margin-bottom: var(--space-3);
}
.feature-card p {
  font-size: var(--type-body-size);
  line-height: 1.55;
  color: var(--color-slate-600);
}
.feature-card .feature-list {
  list-style: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-whisper);
}
.feature-card .feature-list li {
  font-size: var(--type-caption-size);
  color: var(--color-slate-600);
  padding: 6px 0 6px 18px;
  position: relative;
}
.feature-card .feature-list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--color-slate-400);
}

/* Deliverables list with amber bullets */
.deliverables { list-style: none; }
.deliverables li {
  display: flex; gap: var(--space-4);
  padding: var(--space-3) 0;
  align-items: baseline;
  border-bottom: var(--border-whisper);
}
.deliverables li:last-child { border-bottom: none; }
.deliverables li::before {
  content: ""; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--color-amber);
  margin-top: 8px;
}
.deliverables .item-title {
  font-size: var(--type-body-size);
  font-weight: var(--weight-medium);
  color: var(--color-slate-800);
  display: block;
}
.deliverables .item-desc {
  font-size: var(--type-caption-size);
  color: var(--color-slate-600);
  display: block;
  margin-top: 4px;
}

/* Emotional pivot section (navy) */
.pivot-band {
  background: var(--color-deep-navy);
  color: #fff;
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}
.pivot-band .pivot-inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 640px) { .pivot-band .pivot-inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1200px) { .pivot-band .pivot-inner { padding: 0 var(--gutter-desktop); } }
@media (max-width: 880px) {
  .pivot-band .pivot-inner { grid-template-columns: 1fr; gap: var(--space-8); }
}
.pivot-band h2 { color: #fff; max-width: 18ch; }
.pivot-band .pivot-sub {
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-medium);
  color: var(--text-on-navy-secondary);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
  max-width: 48ch;
  line-height: 1.55;
}
.pivot-band .pivot-illustration {
  position: relative;
  display: flex; justify-content: flex-end;
}

/* Workflow diagram label */
.diagram-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-slate-400);
  margin-bottom: var(--space-3);
  display: inline-block;
}
.diagram-label.on-navy { color: rgba(255,255,255,0.45); }

/* Misc helpers */
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.divider {
  height: 1px; background: rgba(15,27,61,0.08);
  border: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card-link:hover { transform: none; }
}


/* ============== PRICING CARDS ============== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  align-items: stretch;
}
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.price-card {
  position: relative;
  background: #fff;
  border: var(--border-whisper);
  border-radius: var(--radius-comfortable);
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  box-shadow: var(--shadow-card);
}
.price-card .price-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-slate-600);
}
.price-card .price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--space-1);
}
.price-card .price-num {
  font-size: 44px;
  font-weight: var(--weight-bold);
  letter-spacing: -1.25px;
  color: var(--color-slate-950);
  line-height: 1;
  font-feature-settings: var(--font-features-tabular);
}
.price-card .price-per {
  font-size: 15px;
  color: var(--color-slate-500);
  font-weight: var(--weight-medium);
}
.price-card .price-note {
  font-size: 14px;
  color: var(--color-slate-600);
  margin-top: -2px;
}

.price-card .price-features {
  list-style: none;
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border-whisper);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.price-card .price-features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-slate-700, var(--color-slate-600));
}
.price-card .price-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px;
  border-radius: 9999px;
  background: var(--color-cool-white);
  border: 1px solid rgba(15,27,61,0.18);
}
.price-card .price-features li::after {
  content: "";
  position: absolute;
  left: 3px; top: 11px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--color-brand-blue);
  border-bottom: 1.5px solid var(--color-brand-blue);
  transform: rotate(-45deg);
}

.price-card .btn-block {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-2);
}

/* Featured / popular plan */
.price-card-featured {
  background: var(--color-deep-navy);
  border-color: var(--color-deep-navy);
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(15,27,61,0.45);
}
@media (max-width: 960px) {
  .price-card-featured { transform: none; }
}
.price-card-featured .price-eyebrow { color: rgba(255,255,255,0.65); }
.price-card-featured .price-num { color: #fff; }
.price-card-featured .price-per { color: rgba(255,255,255,0.6); }
.price-card-featured .price-note { color: rgba(255,255,255,0.7); }
.price-card-featured .price-features {
  border-top-color: rgba(255,255,255,0.12);
}
.price-card-featured .price-features li { color: rgba(255,255,255,0.85); }
.price-card-featured .price-features li::before {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
}
.price-card-featured .price-features li::after {
  border-left-color: var(--color-amber);
  border-bottom-color: var(--color-amber);
}
.price-card-featured .price-flag {
  position: absolute;
  top: -12px;
  left: var(--space-8);
  background: var(--color-amber);
  color: var(--color-deep-navy);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 10px;
  border-radius: 9999px;
}

.pricing-foot {
  margin-top: var(--space-8);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-slate-600);
}
.pricing-foot::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--color-amber);
  margin-right: 10px;
  vertical-align: middle;
}