/* =====================================================================
   Lead Cured — main.css
   Aesthetic: "Forensic Blueprint" — cool, drafted, one signal of "to spec".
   Paper background, Navy text, dark Navy sections (faint blueprint grid)
   with Chalk text, JetBrains Mono for dimensions, Bricolage for claims.
   No second colour. No gradients. One accent: Signal Blue.
   ===================================================================== */

/* ---- Design tokens (pasted verbatim from the brand style guide) ---- */
:root {
  /* Colour */
  --navy:#0E2A4A; --paper:#EEF2F7; --signal:#2E6FE0; --signal-deep:#1F5AC4;
  --slate:#55606E; --chalk:#FBFDFF; --hairline:rgba(14,42,74,0.12); --navy-80:rgba(14,42,74,0.80);
  /* Type */
  --font-display:'Bricolage Grotesque',Arial,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  --fs-h1:3.5rem; --lh-h1:1.05; --ls-h1:-0.02em;
  --fs-h2:2.5rem; --lh-h2:1.10; --ls-h2:-0.015em;
  --fs-h3:1.75rem; --lh-h3:1.20; --ls-h3:-0.01em;
  --fs-h4:1.25rem; --lh-h4:1.30;
  --fs-body-lg:1.25rem; --lh-body-lg:1.60;
  --fs-body:1.0625rem; --lh-body:1.65;
  --fs-small:0.9375rem; --lh-small:1.50;
  --fs-label:0.8125rem; --lh-label:1.40; --ls-label:0.08em;
  /* Spacing */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --space-10:4rem; --space-12:6rem; --space-16:8rem;
  /* Radius / shadow / layout */
  --radius-sm:3px; --radius-md:6px; --radius-lg:12px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(14,42,74,0.06);
  --shadow-md:0 4px 14px rgba(14,42,74,0.10);
  --shadow-lg:0 18px 48px rgba(14,42,74,0.14);
  --maxw:1120px; --grid-unit:8px;
}

/* Supplementary token (outside the pasted block):
   a brighter signal for SMALL text on the Navy background, where the base
   Signal only reaches ~3.1:1. This hits ~5.5:1 on Navy for WCAG AA.
   Base Signal/Signal-deep are still used everywhere on the light Paper ground. */
:root { --signal-bright:#6AA0F2; }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---- Typography ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.9vw, var(--fs-h1));
  line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
}
h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, var(--fs-h2));
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
}
h3 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, var(--fs-h3));
  line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500;
}
h4 {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
}
p { max-width: 68ch; }

/* ---- Reusable pieces ---- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }
@media (min-width: 720px) { .shell { padding-inline: var(--space-6); } }

.mono { font-family: var(--font-mono); }
.lede { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--navy-80); max-width: 60ch; }

.kicker {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--signal-deep);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.kicker::before {
  content: ""; width: 22px; height: 2px; background: var(--signal); flex: none;
}

.section { padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }
.section--tight { padding-block: clamp(var(--space-8), 4vw, var(--space-12)); }
.section--dark {
  background-color: var(--navy); color: var(--chalk);
  /* faint blueprint grid: flat lines only, no gradient */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%23FBFDFF' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 32px 32px;
}
.section--dark p { color: rgba(251,253,255,0.82); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--chalk); }
.section--dark .lede { color: rgba(251,253,255,0.82); }
.section--dark .kicker { color: var(--signal-bright); }
.section--dark { line-height: calc(var(--lh-body) + 0.06); }

.rule { height: 1px; background: var(--hairline); border: 0; }

/* Section heading, ledger style: claim left, meta pinned right on a rule */
.ledger-head {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  align-items: end; padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-8);
  position: relative;
}
/* dimension end-cap ticks on the title-block rule, like a drawing's datum line */
.ledger-head::before, .ledger-head::after {
  content: ""; position: absolute; bottom: -4px; width: 1px; height: 9px; background: var(--hairline);
}
.ledger-head::before { left: 0; }
.ledger-head::after { right: 0; }
@media (min-width: 860px) {
  .ledger-head { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-8); }
  .ledger-head__meta { text-align: right; }
}
.ledger-head__meta {
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--slate);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
  padding: 0.85em 1.4em; border-radius: var(--radius-md);
  border: 1.5px solid transparent; text-align: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--sm { padding: 0.62em 1.05em; font-size: var(--fs-small); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn--signal { background: var(--signal); color: var(--chalk); border-color: var(--signal); }
.btn--signal:hover { background: var(--signal-deep); border-color: var(--signal-deep); }

.btn--navy { background: var(--navy); color: var(--chalk); border-color: var(--navy); }
.btn--navy:hover { background: #0A1F38; }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--navy); background: rgba(14,42,74,0.04); }

.btn--ghost-light { background: transparent; color: var(--chalk); border-color: rgba(251,253,255,0.35); }
.btn--ghost-light:hover { border-color: var(--chalk); background: rgba(251,253,255,0.08); }

/* Outlined signal CTA — for the persistent nav action, so the single solid
   signal fill per view stays the page's primary button, not the chrome. */
.btn--signal-line { background: transparent; color: var(--signal-deep); border-color: var(--signal); }
.btn--signal-line:hover { background: var(--signal); color: var(--chalk); border-color: var(--signal); }

.btn__arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* A text link with the signal "spec line" underscore (solid, transform-animated) */
.cure-link {
  font-weight: 600; color: var(--navy); position: relative;
  padding-bottom: 3px; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color .2s ease;
}
.cure-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.cure-link:hover { color: var(--signal-deep); }
.cure-link:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .cure-link::after { transition: none; } }
.cure-link .btn__arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cure-link:hover .btn__arrow { transform: translateX(3px); }
.section--dark .cure-link { color: var(--chalk); }
.section--dark .cure-link:hover { color: var(--chalk); }

/* =====================================================================
   Skip link
   ===================================================================== */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--navy); color: var(--chalk); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); transition: top .2s ease;
}
.skip-link:focus { top: var(--space-4); }

/* =====================================================================
   Header / nav
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: var(--space-4);
}
.brand__logo { height: 30px; width: auto; }
.nav { display: flex; align-items: center; }
.nav__menu { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  font-size: var(--fs-small); font-weight: 500; color: var(--navy-80);
  padding: var(--space-2) 0; position: relative; letter-spacing: -0.005em;
  transition: color .2s ease;
}
.nav__link:hover { color: var(--navy); }
.nav__link.is-current { color: var(--navy); }
.nav__link.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--signal);
}
.nav__cta-item { margin-left: var(--space-2); }
.nav__toggle {
  display: none; align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  font-size: var(--fs-label); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.nav__toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav__toggle-bars span { height: 2px; background: var(--navy); transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
    padding: var(--space-3) var(--space-5) var(--space-6);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu li { border-bottom: 1px solid var(--hairline); }
  .nav__link { display: block; padding: var(--space-4) 0; font-size: var(--fs-body); }
  .nav__link.is-current::after { display: none; }
  .nav__link.is-current { color: var(--signal-deep); }
  .nav__cta-item { margin: var(--space-4) 0 0; border-bottom: 0; }
  .nav__cta { width: 100%; }
  .nav[data-open="true"] .nav__toggle-bars span:first-child { transform: translateY(3px) rotate(45deg); }
  .nav[data-open="true"] .nav__toggle-bars span:last-child { transform: translateY(-3px) rotate(-45deg); }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  padding-block: clamp(var(--space-10), 8vw, var(--space-16)); position: relative;
  /* faint graph-paper grid so the drafting language reads on paper too */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%230E2A4A' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-12); }
}
.hero__claim { max-width: 16ch; }
.hero h1 .soft { color: var(--slate); }
.hero__strap { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--signal-deep); margin-top: var(--space-4); }
.hero__lede { margin-top: var(--space-5); }
.hero__ctas { margin-top: var(--space-8); }
.hero__foot {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--slate);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.hero__foot b { color: var(--navy); font-weight: 500; }

/* The asymmetric ledger receipt pinned right */
.receipt {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--chalk); box-shadow: var(--shadow-md);
  padding: var(--space-6); position: relative;
}
@media (min-width: 940px) { .receipt { margin-top: var(--space-3); } }
.receipt__head {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--slate);
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-4); border-bottom: 1px dashed var(--hairline);
}
.receipt__stamp { color: var(--signal-deep); }
.receipt__line {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: baseline; padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--hairline);
}
.receipt__line:last-child { border-bottom: 0; padding-bottom: 0; }
.receipt__idx { font-family: var(--font-mono); color: var(--slate); font-size: var(--fs-small); }
.receipt__k { font-weight: 600; }
.receipt__v { color: var(--navy-80); font-size: var(--fs-small); display: block; margin-top: 2px; }
.receipt__total {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 2px solid var(--navy);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.receipt__total b { font-weight: 600; }

/* =====================================================================
   Broken band — a numbered ledger, not cards
   ===================================================================== */
.broken__list { display: grid; grid-template-columns: 1fr; }
.broken__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-5);
  padding: var(--space-6) 0; border-top: 1px solid var(--hairline); align-items: start;
}
.broken__item:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 760px) {
  .broken__item { grid-template-columns: auto minmax(0,22ch) 1fr; align-items: baseline; }
}
.broken__num { font-family: var(--font-mono); color: var(--signal-deep); font-size: var(--fs-small); padding-top: 3px; }
.broken__h { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.broken__p { color: var(--navy-80); }

/* =====================================================================
   Pillars — five, on hairlines, mono indices
   ===================================================================== */
.pillars { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); } }
@media (min-width: 1040px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar {
  padding: var(--space-6) 0; border-top: 1px solid rgba(251,253,255,0.16);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
}
.pillar__n { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--signal-bright); }
.pillar__h { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.25; }
.pillar__p { color: rgba(251,253,255,0.78); font-size: var(--fs-small); margin-top: var(--space-2); }

/* =====================================================================
   Definition — the signature dark receipt block
   ===================================================================== */
.definition__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 940px) { .definition__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); } }
.definition__note {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: rgba(251,253,255,0.7); margin-top: var(--space-6);
  padding-top: var(--space-4); border-top: 1px dashed rgba(251,253,255,0.2);
}
.def-list { border-top: 1px solid rgba(251,253,255,0.18); }
.def-list__row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-5);
  padding: var(--space-5) 0; border-bottom: 1px solid rgba(251,253,255,0.18);
  align-items: baseline;
}
.def-list__n { font-family: var(--font-mono); color: var(--signal-bright); font-size: var(--fs-body); }
.def-list__k {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-label);
  font-size: var(--fs-label); color: var(--chalk);
}
.def-list__t { color: rgba(251,253,255,0.82); font-size: var(--fs-small); margin-top: var(--space-2); }
@media (min-width: 620px) {
  .def-list__row { grid-template-columns: auto 14ch 1fr; }
  .def-list__t { margin-top: 0; }
}

/* =====================================================================
   Services — teaser rows (home) and full offers (services page)
   ===================================================================== */
.svc-teasers { border-top: 1px solid var(--hairline); }
.svc-teaser {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline);
  align-items: baseline; transition: padding-left .3s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 800px) {
  .svc-teaser { grid-template-columns: minmax(0, 20ch) 1fr auto; gap: var(--space-6); }
}
.svc-teaser:hover { padding-left: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .svc-teaser:hover { padding-left: 0; } }
.svc-teaser__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.svc-teaser__price { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--signal-deep); display: block; margin-top: var(--space-2); }
.svc-teaser__desc { color: var(--navy-80); }
.svc-teaser__link { white-space: nowrap; }

/* Full service offers */
.offer {
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
  border-top: 1px solid var(--hairline);
}
.offer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) { .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-12); } }
.offer__aside { position: relative; }
@media (min-width: 900px) { .offer__aside { position: sticky; top: 96px; align-self: start; } }
.offer__name { margin-top: var(--space-3); }
.offer__price {
  font-family: var(--font-mono); font-size: var(--fs-body-lg); color: var(--navy);
  margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
}
.offer__price .unit { font-size: var(--fs-small); color: var(--slate); }
.offer__attacks {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  background: var(--chalk); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  font-size: var(--fs-small); color: var(--navy-80);
}
.offer__attacks b { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--signal-deep); display: block; margin-bottom: var(--space-2); }
.offer__lede { margin-bottom: var(--space-6); }
.incl-head {
  font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--slate); margin-bottom: var(--space-3);
}
.incl { margin-bottom: var(--space-6); }
.incl li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); align-items: baseline;
}
.incl li::before { content: "✓"; color: var(--signal-deep); font-weight: 700; }
.excl li::before { content: "✗"; color: var(--slate); }
.excl li { color: var(--navy-80); }
.offer__note {
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--signal-deep);
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--hairline);
}

.addons { display: grid; grid-template-columns: 1fr; }
.addon {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-5);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); align-items: baseline;
}
.addon:first-child { border-top: 1px solid var(--hairline); }
.addon__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); }
.addon__desc { color: var(--navy-80); font-size: var(--fs-small); margin-top: var(--space-2); max-width: 52ch; }
.addon__price { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--navy); text-align: right; }
.addon__unit { display: block; font-size: var(--fs-label); color: var(--slate); margin-top: 2px; }

/* =====================================================================
   Proof — honest "results coming soon"
   ===================================================================== */
.proof__panel {
  border: 1px dashed var(--hairline); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--chalk); display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 820px) { .proof__panel { grid-template-columns: auto 1fr; gap: var(--space-10); align-items: center; } }
.proof__stamp {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--fs-small); color: var(--signal-deep);
  border: 1.5px solid var(--signal); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5); display: inline-block;
  white-space: nowrap;
}
.proof__body h2 { margin-bottom: var(--space-3); }

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--space-10); } }
.cta-band h2 { max-width: 18ch; }
.cta-band__sub { margin-top: var(--space-4); }

/* =====================================================================
   Pricing table
   ===================================================================== */
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--chalk); }
.rate-card { width: 100%; border-collapse: collapse; min-width: 720px; font-size: var(--fs-small); }
.rate-card caption { text-align: left; padding: var(--space-5) var(--space-5) 0; color: var(--slate); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); }
.rate-card th, .rate-card td { padding: var(--space-4) var(--space-5); text-align: left; vertical-align: top; }
.rate-card thead th {
  font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--slate); font-weight: 500;
  border-bottom: 2px solid var(--navy);
}
.rate-card tbody tr { border-bottom: 1px solid var(--hairline); }
.rate-card tbody tr:nth-child(even) { background: rgba(14,42,74,0.02); }
.rate-card tbody tr:hover { background: rgba(46,111,224,0.05); }
.rate-card .offer-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); color: var(--navy); }
.rate-card .inr { font-family: var(--font-mono); color: var(--navy); white-space: nowrap; }
.rate-card .usd { font-family: var(--font-mono); color: var(--slate); white-space: nowrap; }
.rate-note { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--navy-80); max-width: 76ch; }
.rate-note b { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--signal-deep); }

/* FAQ */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; gap: var(--space-4);
  align-items: center; padding: var(--space-5) 0; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4);
  background: transparent; border: 0;
}
.faq__q:hover { color: var(--signal-deep); }
.faq__sign { font-family: var(--font-mono); color: var(--signal-deep); flex: none; transition: transform .3s ease; }
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-6); color: var(--navy-80); max-width: 72ch; }
.faq__item summary { list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }

/* =====================================================================
   Process page
   ===================================================================== */
.step {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  padding: clamp(var(--space-6), 4vw, var(--space-10)) 0; border-top: 1px solid var(--hairline);
}
@media (min-width: 860px) { .step { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-10); } }
.step__idx { font-family: var(--font-mono); color: var(--signal-deep); font-size: var(--fs-small); }
.step__h { margin-top: var(--space-2); }
.step__body p { margin-bottom: var(--space-4); }
.spec-list { margin-top: var(--space-4); }
.spec-list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); align-items: baseline;
  font-size: var(--fs-small);
}
.spec-list li .m { font-family: var(--font-mono); color: var(--signal-deep); font-size: var(--fs-label); white-space: nowrap; }

/* =====================================================================
   Forms / contact
   ===================================================================== */
.contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 940px) { .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-12); align-items: start; } }
.contact__aside .lede { margin-top: var(--space-5); }
.contact__ledger { margin-top: var(--space-8); }
.contact__ledger dt { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.contact__ledger dd { margin: var(--space-1) 0 0; font-size: var(--fs-body); }
.contact__ledger dd a { font-weight: 600; }

.form { background: var(--chalk); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 4vw, var(--space-8)); box-shadow: var(--shadow-sm); }
.field { margin-bottom: var(--space-5); }
.field > label { display: block; font-weight: 500; font-size: var(--fs-small); margin-bottom: var(--space-2); }
.field .req { color: var(--signal-deep); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--navy);
  background: var(--paper); border: 1.5px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); transition: border-color .2s ease, background-color .2s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); background: var(--chalk); box-shadow: 0 0 0 3px rgba(46,111,224,0.14); }
.field textarea { min-height: 130px; resize: vertical; }
.field--error input, .field--error textarea { border-color: var(--signal-deep); }
.field__err { color: var(--signal-deep); font-size: var(--fs-small); margin-top: var(--space-2); }
.field__hint { color: var(--slate); font-size: var(--fs-small); margin-top: var(--space-2); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; font-size: var(--fs-small); color: var(--navy-80); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 3px; accent-color: var(--signal); }

/* Honeypot: hidden from humans, present for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }
.form__note { font-size: var(--fs-small); color: var(--slate); font-family: var(--font-mono); }

.alert {
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); font-size: var(--fs-small);
}
.alert--error { background: rgba(46,111,224,0.06); border-color: rgba(46,111,224,0.4); color: var(--signal-deep); }
.alert h2 { font-size: var(--fs-h4); font-family: var(--font-body); margin-bottom: var(--space-2); color: var(--signal-deep); }
.alert ul { list-style: disc; padding-left: 1.2em; }

/* =====================================================================
   Thank-you / 404 / generic hero
   ===================================================================== */
.page-hero {
  padding-block: clamp(var(--space-10), 6vw, var(--space-12));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%230E2A4A' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.page-hero .lede { margin-top: var(--space-5); }
.page-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 860px) { .page-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-10); align-items: end; } }

.next-steps { border-top: 1px solid var(--hairline); margin-top: var(--space-8); }
.next-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
.next-steps__n { font-family: var(--font-mono); color: var(--signal-deep); }
.next-steps__t b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); }
.next-steps__t p { color: var(--navy-80); font-size: var(--fs-small); margin-top: var(--space-1); }

.cal-embed { margin-top: var(--space-8); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--chalk); }
.cal-embed iframe { width: 100%; min-height: 640px; border: 0; display: block; }
.cal-placeholder { padding: clamp(var(--space-6), 5vw, var(--space-10)); text-align: center; color: var(--slate); font-family: var(--font-mono); font-size: var(--fs-small); }

.notfound__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--signal); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--navy); color: var(--chalk); padding-top: var(--space-12); }
.site-footer a { color: rgba(251,253,255,0.72); transition: color .2s ease; }
.site-footer a:hover { color: var(--chalk); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: var(--space-10); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) auto auto; gap: var(--space-12); } }
.site-footer__logo { height: 34px; width: auto; margin-bottom: var(--space-5); }
.site-footer__boiler { color: rgba(251,253,255,0.72); font-size: var(--fs-small); line-height: 1.7; max-width: 46ch; }
.site-footer__heading { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: rgba(251,253,255,0.5); margin-bottom: var(--space-4); }
.site-footer__nav ul { display: grid; gap: var(--space-3); }
.site-footer__who { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; margin-bottom: var(--space-2); }
.site-footer__who span { display: block; font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: rgba(251,253,255,0.5); margin-top: 2px; }
.site-footer__email { font-weight: 600; }
.site-footer__sla { font-size: var(--fs-label); color: rgba(251,253,255,0.5); margin: var(--space-3) 0 var(--space-5); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid rgba(251,253,255,0.14); }
.site-footer__tag { color: var(--signal-bright); font-size: var(--fs-small); }
.site-footer__legal { color: rgba(251,253,255,0.5); font-size: var(--fs-small); }
.site-footer__legal a { margin-left: var(--space-3); }

/* =====================================================================
   Entrance reveal (progressive, reduced-motion safe)
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; } }

/* Utility */
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-4 > * + * { margin-top: var(--space-4); }
.eyebrow-gap { margin-bottom: var(--space-5); }
.mt-8 { margin-top: var(--space-8); }
.text-slate { color: var(--slate); }
