html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1.5rem); }
body { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; background: #0A2240; color: #fff; overflow-x: clip; }
.btn-primary { background: #C8102E; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.15s, transform 0.15s; border: 2px solid #C8102E; }
.btn-primary:hover { background: #A00D24; border-color: #A00D24; }
.btn-outline { background: transparent; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; border: 2px solid rgba(255,255,255,0.3); transition: border-color 0.15s, background 0.15s; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
.accent-bar { height: 4px; background: linear-gradient(90deg, #C8102E 0%, #C8102E 33%, #FFFFFF 33%, #FFFFFF 66%, #0A2240 66%, #0A2240 100%); }
.spec-number { font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: #fff; }

/* Shared rhythm and readable controls across all nine pages. */
:root { --header-height: 69px; --section-space: clamp(4.5rem, 8vw, 8rem); }
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }
section.section-pad { padding-block: var(--section-space); }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-weight: 700; font-size: .75rem; color: #B8C2D1; line-height: 1.6; }
.eyebrow.eyebrow-line { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; max-width: 100%; }
.eyebrow-line::before, .eyebrow-line::after { content: ''; flex: 0 0 clamp(1rem, 3vw, 2.5rem); height: 2px; background: #C8102E; }
.bg-white .eyebrow, .product-white-block .eyebrow { color: #C8102E; }
.breadcrumb { flex-wrap: wrap; line-height: 1.8; }
a, button, summary, input, select, textarea { transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 6px #0A2240; }
:where(a):hover { text-decoration-thickness: 2px; text-underline-offset: .25em; }
a:not([class*="btn-"]):not(.block):hover { text-decoration-line: underline; }
.btn-primary, .btn-outline, .btn-outline-red { min-height: 52px; max-width: 100%; justify-content: center; text-align: center; line-height: 1.5; padding: .8rem 1.4rem; }
.btn-primary.text-xs, .btn-outline.text-xs { font-size: .75rem; }
.btn-primary svg, .btn-outline svg { flex-shrink: 0; }
.btn-primary:active, .btn-outline:active { transform: translateY(1px); }
.card-navy, .feature-card, .compare-card, .card-light { border: 1px solid #1E3A5F; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card-navy, .feature-card, .compare-card { background: #0F2B4D; }
.card-light { background: #fff; border-color: #E5E7EB; }
.card-navy.border-patriot-red, .feature-card.border-patriot-red, .compare-card.featured { border-color: #C8102E; }
@media (hover: hover) {
  :is(.card-navy, .feature-card, .compare-card, .card-light, .service-card):hover { border-color: #C8102E; transform: translateY(-3px); box-shadow: 0 12px 28px -20px rgba(10,34,64,.6); }
}
:is(.card-navy, .feature-card, .compare-card, .card-light, .service-card):focus-within { border-color: #C8102E; }
.spec-number, .spec-big, .compare-row, .spec-row { font-variant-numeric: tabular-nums; }
.compare-card { display: flex; flex-direction: column; }
.compare-card > .border-l-4 { margin-top: auto; }
.compare-desktop { display: none; }
.compare-row > div, .spec-row > div { min-width: 0; }
.compare-row .row-label, .spec-row .label { color: #B8C2D1; }
.compare-head { position: sticky; top: var(--header-height); z-index: 20; box-shadow: 0 3px 0 #1E3A5F; }
.compare-desktop .btn-primary { width: 100%; }
.compare-drones > div > :nth-child(2) { background: #0F2B4D; border-left: 2px solid #C8102E; }
@media (min-width: 768px) { :root { --header-height: 122px; } }
@media (min-width: 1024px) { .compare-desktop { display: block; } .compare-mobile { display: none; } }
@media (max-width: 767px) {
  h1.text-5xl { font-size: clamp(2.5rem, 11vw, 3rem); }
  h2.text-4xl { font-size: 2rem; }
  .btn-primary, .btn-outline { padding-inline: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up, .fade-up-delay-1, .fade-up-delay-2, .fade-up-delay-3 { opacity: 1; transform: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  :is(.card-navy, .feature-card, .compare-card, .card-light, .service-card):hover { transform: none; }
}

/* How It Works — #how-it-works */
#how-it-works { padding-block: var(--section-space); }
#how-it-works.hiw-enabled { padding-block: 0; }
#how-it-works.hiw-enabled .hiw-scroll { height: 280vh; }
#how-it-works.hiw-enabled .hiw-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-height) + clamp(0.75rem, 2.5vh, 2rem));
  padding-bottom: clamp(0.75rem, 2.5vh, 2rem);
}
#how-it-works .hiw-stage svg { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; }
#how-it-works.hiw-enabled .hiw-stage svg { width: auto; max-width: 100%; max-height: 28vh; }
#how-it-works.hiw-enabled .hiw-head { margin-bottom: 1.25rem !important; }
#how-it-works.hiw-enabled .hiw-stage { margin-bottom: 1rem !important; }
#how-it-works.hiw-enabled .hiw-progress { margin-bottom: 1rem !important; }
#how-it-works .hiw-atom { fill: rgba(255,255,255,0.07); stroke: #B8C2D1; stroke-width: 2; }
#how-it-works .hiw-lists { display: grid; gap: 1.5rem; }
#how-it-works.hiw-enabled .hiw-list { grid-area: 1 / 1; }
#how-it-works.hiw-static .hiw-list { opacity: 1 !important; }
#how-it-works .hiw-list li { position: relative; padding-left: 1.2rem; }
#how-it-works .hiw-list li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 0.55rem; height: 2px; background: #B8C2D1; }
#how-it-works .hiw-progress { display: none; height: 3px; background: #1E3A5F; }
#how-it-works.hiw-enabled .hiw-progress { display: block; }
#how-it-works .hiw-progress-fill { height: 100%; width: 0; background: #C8102E; }
/* two-column: stage+progress left, lists right (≥768px) */
@media (min-width: 768px) {
  #how-it-works .hiw-body { display: grid; grid-template-columns: 55fr 45fr; gap: 2rem; align-items: center; }
  #how-it-works .hiw-left { display: flex; flex-direction: column; }
  #how-it-works .hiw-lists { text-align: left; }
  #how-it-works .hiw-stage svg { max-width: 100%; margin-inline: 0; }
  #how-it-works.hiw-enabled .hiw-stage svg { max-height: clamp(28vh, 36vh, calc(100vh - var(--header-height) - 14rem)); }
  #how-it-works.hiw-enabled .hiw-stage { margin-bottom: 0.75rem !important; }
  #how-it-works.hiw-enabled .hiw-progress { margin-bottom: 0 !important; }
}
@media (max-width: 767px) {
  #how-it-works.hiw-enabled .hiw-stage svg { max-height: 28vh; }
  #how-it-works.hiw-enabled .hiw-intro { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  #how-it-works.hiw-enabled .hiw-scroll { height: auto; }
  #how-it-works.hiw-enabled .hiw-sticky { position: static; min-height: 0; }
}