/* ==========================================================================
   Full Signal — site stylesheet
   Brand: blue → cyan gradient sampled from the Full Signal mark.
   Canvas: near-black (OLED dark), high contrast, minimal glow.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Surfaces */
  --bg:            #08090B;
  --bg-1:          #0D0F13;
  --bg-2:          #14171D;
  --bg-3:          #1B1F27;

  /* Lines */
  --line:          rgba(255, 255, 255, .085);
  --line-mid:      rgba(255, 255, 255, .14);
  --line-strong:   rgba(255, 255, 255, .24);

  /* Text */
  --fg:            #F2F5F8;
  --fg-muted:      #9BA5B3;
  --fg-dim:        #79828F;   /* 5.12:1 on --bg. Do not darken below this. */

  /* Brand — sampled from fullsignal-mark.svg gradient stops */
  --brand-deep:    #0C4F9C;
  --brand-mid:     #2176C0;
  --brand:         #36C4F0;
  --brand-soft:    rgba(54, 196, 240, .12);
  --brand-line:    rgba(54, 196, 240, .32);

  /* Two gradients, deliberately.
     --brand-grad      carries text, so it is clipped to the light half of the
                       brand ramp: 5.8:1 against the page and 5.9:1 under the
                       near-black button ink at its darkest stop.
     --brand-grad-deco is the full mark ramp. Decorative fills only, never
                       behind or as text. The deep blue end is 2.5:1 and will
                       fail any text placed on it. */
  --brand-grad:    linear-gradient(135deg, #2A93D0 0%, #36C4F0 100%);
  --brand-grad-deco: linear-gradient(135deg, #0C4F9C 0%, #2176C0 46%, #36C4F0 100%);

  /* Editorial flags (build-time markers, not brand colours) */
  --flag:          #E8A33D;
  --flag-soft:     rgba(232, 163, 61, .09);
  --flag-line:     rgba(232, 163, 61, .34);

  /* Type */
  --font-display:  "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Body text scale. Three steps only.
     lead  17.6px  section sublines and opening paragraphs
     body  17.0px  default prose
     sm    15.6px  compact contexts: cards, chips, footer, stat captions */
  --text-lead:     1.1rem;
  --text-body:     1.0625rem;
  --text-sm:       .975rem;

  /* Space */
  --gutter:        clamp(20px, 4vw, 32px);
  --section:       clamp(72px, 9vw, 128px);
  --container:     1180px;
  --prose:         720px;

  /* Shape */
  --r-sm:          10px;
  --r:             16px;
  --r-lg:          22px;
  --r-pill:        999px;

  /* Motion */
  --ease:          cubic-bezier(.22, .61, .36, 1);
  --fast:          160ms;
  --mid:           280ms;
}

/* ---------- 2. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 6.2vw, 4.5rem); line-height: 1.01; letter-spacing: -.036em; }
h2 { font-size: clamp(1.95rem, 4.1vw, 3.05rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -.012em; }

/* Visual size of an h4 on a semantically correct h3. Keeps heading order
   sequential (WCAG heading-hierarchy) without shouting the sub-item. */
.h4 { font-size: 1.0625rem; letter-spacing: -.012em; font-weight: 700; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.02em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #04070A; }

/* ---------- 3. Layout ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--prose); }

section { position: relative; }

.section    { padding-block: var(--section); }
.section-sm { padding-block: clamp(48px, 6vw, 80px); }

.rule { border-top: 1px solid var(--line); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #04070A;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Backdrop sails ------------------------------------------- */

.sail {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .55;
  filter: blur(2px) saturate(115%);
}

.sail-hero {
  top: -22%;
  right: -18%;
  width: min(880px, 88vw);
  opacity: .72;
  filter: blur(1px) saturate(120%);
}

.sail-mid {
  top: 4%;
  left: -26%;
  width: min(700px, 76vw);
  opacity: .3;
  filter: blur(28px) saturate(120%);
}

/* Mirror of .sail-mid for sections that want the wash on the right. */
.sail-mid-r {
  left: auto;
  right: -26%;
}

.sail-cta {
  bottom: -34%;
  left: 50%;
  translate: -50% 0;
  width: min(960px, 108vw);
  opacity: .42;
  filter: blur(16px) saturate(120%);
}

.sail-wrap { position: relative; overflow: hidden; z-index: 0; }
.sail-wrap > .container { position: relative; z-index: 2; }

/* ---------- 5. Navigation ------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 16px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 9px 9px 18px;
  background: rgba(13, 15, 19, .72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: .925rem;
  font-weight: 500;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-links a:hover { color: var(--fg); background: rgba(255, 255, 255, .05); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--fg); background: rgba(255, 255, 255, .07); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  color: var(--fg);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}

/* ---------- 6. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease),
              background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--brand-grad);
  color: #04070A;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.12); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-mid);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-strong); }

.btn-sm { padding: 10px 18px; min-height: 40px; font-size: .9rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand);
  font-weight: 600;
  font-size: .95rem;
}
.arrow-link svg { width: 15px; height: 15px; transition: transform var(--fast) var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- 7. Kicker & section heads ------------------------------------ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brand);
  opacity: .55;
}

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head p { color: var(--fg-muted); font-size: var(--text-lead); margin-top: 18px; }

.lead {
  font-size: clamp(1.075rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  color: var(--fg-muted);
}

/* ---------- 8. Hero ------------------------------------------------------ */

.hero { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 8vw, 112px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 { margin-bottom: 26px; }
.hero .lead { max-width: 52ch; }
.hero .btn-row { margin-top: 34px; }

.hero-note {
  margin-top: 26px;
  font-size: .875rem;
  color: var(--fg-dim);
  max-width: 46ch;
}

/* The sail sits in the hero grid's right column and is justified to the LEFT
   of that column, so it stays beside the headline on wide monitors instead of
   drifting to the far edge of the screen. */
.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.hero-sail {
  width: min(600px, 118%);
  height: auto;   /* the img height attribute otherwise fixes it and stretches */
  max-width: none;
  filter: saturate(118%);
}

/* Near-square sails (b, c) run tall at full width and open up too much
   vertical space around the headline. This cap keeps the hero row compact. */
.hero-sail-sm {
  width: min(460px, 96%);
  height: auto;
}


/* ==========================================================================
   Hero atmosphere
   Aurora wash: coloured depth bleeding out from behind the sail, in the sail's
   own palette. A single static painted layer, no JS and no animation, masked
   with a radial fade so it dissolves before the section edge instead of
   stopping at a line. Sits behind all hero content.
   ========================================================================== */

.hero { position: relative; isolation: isolate; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(46% 52% at 68% 34%, rgba(54,196,240,.16) 0%, rgba(54,196,240,0) 100%),
    radial-gradient(38% 44% at 82% 62%, rgba(139,127,232,.14) 0%, rgba(139,127,232,0) 100%),
    radial-gradient(34% 40% at 52% 18%, rgba(232,143,208,.09) 0%, rgba(232,143,208,0) 100%),
    radial-gradient(60% 60% at 20% 70%, rgba(28,86,150,.14) 0%, rgba(28,86,150,0) 100%);
  -webkit-mask-image: radial-gradient(120% 95% at 62% 42%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 95% at 62% 42%, #000 30%, transparent 78%);
}



/* ---------- 8b. Where are you stuck? ------------------------------------- */

/* Three symptom cards. The whole card is the link; the circled arrow is the
   click affordance, filling with the brand gradient on hover. */
.stuck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.stuck-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 26px;
  min-height: 190px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease),
              transform var(--mid) var(--ease);
}
.stuck-card:hover {
  border-color: var(--brand-line);
  background: var(--bg-2);
  transform: translateY(-3px);
  text-decoration: none;
}

.stuck-say {
  color: var(--fg);
  font-size: var(--text-body);
  line-height: 1.55;
}

.stuck-go {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-mid);
  color: var(--fg-muted);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.stuck-go svg { width: 15px; height: 15px; }
.stuck-card:hover .stuck-go {
  background: var(--brand-grad);
  border-color: transparent;
  color: #04070A;
  transform: translateX(3px);
}

.stuck-unsure { margin-top: 22px; color: var(--fg-dim); font-size: var(--text-sm); }

@media (max-width: 860px) {
  .stuck { grid-template-columns: 1fr; }
  .stuck-card { min-height: 0; gap: 18px; }
}

/* ---------- 9. Cards ----------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 30px);
  transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease),
              transform var(--mid) var(--ease);
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--fg-muted); font-size: var(--text-sm); }

.card-hover:hover {
  border-color: var(--line-mid);
  background: var(--bg-2);
  transform: translateY(-3px);
}

.card-num {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--fg-dim);
  margin-bottom: 16px;
  display: block;
}

.card-tag {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  border-radius: var(--r-pill);
  color: var(--brand);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card-link:hover { text-decoration: none; }

/* Offer cards get the gradient hairline at the top.
   Flex column so the "Read more" link pins to the bottom of every card and the
   three align on one baseline regardless of how long the body copy runs. */
.card-offer {
  padding-top: calc(clamp(22px, 2.6vw, 30px) + 4px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-offer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-grad-deco);
  opacity: .85;
}
.card-offer .arrow-link { margin-top: auto; padding-top: 22px; }

/* ---------- 10. Audience switch ------------------------------------------ */

.switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-bottom: 32px;
  max-width: 100%;
  flex-wrap: wrap;
}

.switch button {
  padding: 10px 20px;
  min-height: 42px;
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: .925rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.switch button:hover { color: var(--fg); }
.switch button[aria-selected="true"] {
  background: var(--brand-grad);
  color: #04070A;
  font-weight: 700;
}

.panel[hidden] { display: none; }

/* ---------- 10b. Persona panels ------------------------------------------- */

/* No illustration: the toggle and the marker tint carry the differentiation,
   and the list gets the full width back as two columns. */
.persona[hidden] { display: none; }

/* Each persona tints its own list marker so the two states differ at a glance
   even before the copy registers. */
.persona-isv .symptoms li::before { background: linear-gradient(135deg, #7C7BE8, #E88FD0); }

/* ---------- 10c. Featured offer card -------------------------------------- */

/* GTM Leadership reads as the default choice without a "most popular" badge:
   brighter surface, brand-tinted border, and a full-strength top rule. */
.card-featured {
  background: linear-gradient(180deg, rgba(54,196,240,.07), rgba(54,196,240,.02));
  border-color: var(--brand-line);
}
.card-featured::before { height: 4px; opacity: 1; }
.card-featured:hover { background: linear-gradient(180deg, rgba(54,196,240,.11), rgba(54,196,240,.03)); border-color: var(--brand); }
.card-featured .card-tag { background: var(--brand-grad); border-color: transparent; color: #04070A; }

/* ---------- 11. Symptom list (triage) ------------------------------------ */

.symptoms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.symptoms li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.symptoms li:hover { border-color: var(--brand-line); background: var(--bg-2); }

.symptoms li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--brand-grad-deco);
}

.triage-close {
  margin-top: 22px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-1);
  color: var(--fg-muted);
  font-size: var(--text-body);
}
.triage-close strong { color: var(--fg); font-weight: 600; }

/* ---------- 12. Argument (long-form prose) ------------------------------- */

.argument p {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--fg-muted);
}
/* Opening paragraph reads as the lead, matching a section subline. */
.argument p:first-of-type { font-size: var(--text-lead); color: var(--fg); }

/* ---------- 12b. Engagement headers with artwork -------------------------- */

.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.head-art { display: flex; justify-content: flex-end; }
.head-art img {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: lighten;   /* drops the render's black surround */
}

@media (max-width: 760px) {
  .head-split { grid-template-columns: 1fr; gap: 20px; }
  .head-art { justify-content: flex-start; }
  .head-art img { max-width: 130px; }
}

/* ---------- 13. Change list (numbered) ----------------------------------- */

.changes-coda {
  margin-top: 34px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--fg);
  max-width: 30ch;
}

/* ---------- 14. Stats ---------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

.stat { background: var(--bg); padding: 28px 26px; }

.stat-fig {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

.stat p { color: var(--fg-muted); font-size: var(--text-sm); margin: 0; }

/* ---------- 15. Accordion ------------------------------------------------ */

.accordion { border-top: 1px solid var(--line); }

.acc-item { border-bottom: 1px solid var(--line); }

.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  padding: 24px 4px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--fg);
  transition: color var(--fast) var(--ease);
}
.acc-trigger:hover { color: var(--brand); }

.acc-num {
  flex-shrink: 0;
  margin-right: 18px;
  font-size: 1.05rem;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.acc-icon {
  flex-shrink: 0;
  margin-left: auto;
  width: 26px;
  height: 26px;
  position: relative;
  border: 1px solid var(--line-mid);
  border-radius: 50%;
  transition: border-color var(--fast) var(--ease), transform var(--mid) var(--ease);
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  inset: 50% 7px auto 7px;
  height: 1.5px;
  background: currentColor;
  translate: 0 -50%;
  transition: opacity var(--fast) var(--ease);
}
.acc-icon::after { rotate: 90deg; }
.acc-trigger[aria-expanded="true"] .acc-icon { border-color: var(--brand); transform: rotate(180deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { opacity: 0; }

/* Animated open/close via max-height. Deliberately not `height` with a
   measured value, and not the grid 0fr/1fr technique: both were tried and
   both had failure modes here (a stuck transitionend releasing height to
   auto during a close, and min-height:0 collapsing the open track). This
   needs no measurement and cannot get stuck.
   The cap is kept close to the tallest real panel (~140px). Set it far higher
   and most of the transition is spent travelling through empty space, which
   reads as a fast open followed by a laggy close. If a panel's copy ever grows
   past this, it will clip: raise the cap to match. */
.acc-panel {
  overflow: hidden;
  max-height: 0;
  /* Keep collapsed content out of the accessibility tree, but only once the
     closing animation has finished. */
  visibility: hidden;
  transition: max-height 340ms var(--ease), visibility 0s linear 340ms;
}
.acc-panel.open {
  max-height: 260px;
  visibility: visible;
  transition: max-height 340ms var(--ease), visibility 0s linear 0s;
}

.acc-inner { padding: 0 4px; }
.acc-inner > :last-child { padding-bottom: 26px; }

.acc-panel p { color: var(--fg-muted); font-size: var(--text-sm); }
.acc-panel p + p { margin-top: .9em; }

/* ---------- 16. Editorial flags (unwritten copy) ------------------------- */

.flag {
  position: relative;
  border: 1px dashed var(--flag-line);
  background: var(--flag-soft);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 34px);
}

.flag-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--flag);
  margin-bottom: 16px;
}
.flag-label svg { width: 14px; height: 14px; }

.flag-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--flag-line);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--fg-dim);
}
.flag-note strong { color: var(--flag); font-weight: 600; }

.flag .holding { color: var(--fg-muted); }
.flag .holding h3 { color: var(--fg); margin-bottom: 14px; }


/* ---------- 16b. Testimonials -------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: .6;
  height: .5em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quote p {
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--fg);
  margin: 0;
  flex: 1;
}

.quote cite {
  font-style: normal;
  font-size: .9rem;
  color: var(--fg-muted);
  line-height: 1.5;
}
.quote cite b {
  display: block;
  color: var(--fg);
  font-weight: 600;
  font-size: .95rem;
}

/* ---------- 17. Definition rows (how we work detail) --------------------- */

.detail { display: grid; gap: 0; }

.detail-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.detail-row:last-child { border-bottom: 1px solid var(--line); }

.detail-key {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: 4px;
}

.detail-val p { color: var(--fg-muted); }
.detail-val p:first-child { color: var(--fg); }

.detail-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.detail-list li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-muted);
  font-size: var(--text-body);
  line-height: 1.55;
}
/* Miniature signal-strength glyph: three ascending bars in the brand ramp.
   The bullet is the brand. */
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 12px;
  height: 12px;
  background-image: var(--brand-grad), var(--brand-grad), var(--brand-grad);
  background-repeat: no-repeat;
  background-size: 2.5px 5px, 2.5px 8.5px, 2.5px 12px;
  background-position: 0 100%, 4.75px 100%, 9.5px 100%;
}

/* ---------- 18. Layer list ----------------------------------------------- */

.layers { display: grid; gap: 14px; counter-reset: lyr; }

.layer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px 26px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  counter-increment: lyr;
}
.layer::before {
  content: counter(lyr);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
}
.layer h4 { margin-bottom: 6px; }
.layer p { color: var(--fg-muted); font-size: var(--text-sm); margin: 0; }

/* ---------- 19. CTA band ------------------------------------------------- */

.cta { text-align: center; }
.cta h2 { margin-bottom: 20px; }
.cta .lead { margin-inline: auto; max-width: 48ch; }
.cta .btn-row { justify-content: center; margin-top: 32px; }

/* ---------- 20. Footer --------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 36px;
  background: var(--bg-1);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.footer .brand { margin-bottom: 18px; }
.footer p { color: var(--fg-muted); font-size: var(--text-sm); max-width: 42ch; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0 0 22px; padding: 0; }
/* padding-block keeps the hit area at 29px, over the 24px WCAG 2.2 AA minimum */
.footer-nav a { display: inline-block; padding-block: 5px; color: var(--fg-muted); font-size: .95rem; font-weight: 500; }
.footer-nav a:hover { color: var(--fg); }

.footer-base {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  color: var(--fg-dim);
  font-size: .85rem;
}

.footer-tag {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fg-dim);
}

/* ---------- 21. Reveal animation ----------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- 22. Responsive ----------------------------------------------- */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 480px; aspect-ratio: 4 / 3; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-row { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    background: rgba(13, 15, 19, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 16px; border-radius: var(--r-sm); }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }

  .grid-2, .grid-3, .symptoms, .stats { grid-template-columns: minmax(0, 1fr); }


  .detail-row { grid-template-columns: 1fr; gap: 12px; }
  .detail-key { padding-top: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .sail-hero { top: -6%; right: -30%; width: 118vw; opacity: .5; }
  .sail-mid  { display: none; }

  /* The desktop 118% bleed overflows a phone viewport by ~40px. Contain it. */
  .hero-sail, .hero-sail-sm { width: min(420px, 100%); }
  .hero-art { justify-content: center; }
}

@media (max-width: 420px) {
  .switch { width: 100%; }
  .switch button { flex: 1 1 auto; padding: 10px 12px; font-size: .875rem; }
}

/* ---------- 23. Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 24. Print ---------------------------------------------------- */

@media print {
  .nav, .sail, .btn-row, .cta { display: none; }
  body { background: #fff; color: #000; }
  .card, .flag { border-color: #ccc; }
}