/* GhostGate Airlock — foundation shared styles.
   Provides reusable responsive primitives for hero, model cards, offers,
   compare, quiz, FAQ and sticky controls. Downstream tasks add page content
   but reuse these classes and selectors rather than forking styles. */

:root {
  --bg: #020617;
  --bg-elev: #0A0A0F;
  --ink: #F8FAFC;
  --ink-dim: #BDC8D2;
  --line: #23304a;
  --brand: #1f6f5f;
  --brand-2: #22C55E;
  --accent: #4ADE80;
  --node-cyan: #00D5FF;
  --pocket: #2f8f7a;
  --link: #3a6fb0;
  --node: #00D5FF;
  --warn: #f0d78a;
  --danger: #ff7a7a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --focus: 3px solid var(--brand-2);
  --container: 1200px;
  --gutter: 48px;
  --control-border: #64748B;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #041016;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container,
.site-main > .page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 4rem;
}

/* ---------- header / nav ---------- */
.site-header {
  background: rgba(11,18,32,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-brand__mark { width: 28px; height: 28px; color: var(--accent); }
.site-menu-toggle {
  display: none;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
}
.site-nav { margin-left: auto; }
.site-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.site-nav__list a {
  color: var(--ink);
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
}
.site-nav__list a:hover { background: var(--bg-elev); text-decoration: none; }

/* ---------- hero ---------- */
.hero {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1200px 500px at 80% -100px, rgba(47,143,122,0.18), transparent 60%),
    radial-gradient(900px 400px at 0% -80px, rgba(58,111,176,0.16), transparent 60%);
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 2rem;
  align-items: center;
}
.hero__eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  margin: 0 0 0.75rem;
}
h1 {
  margin: 0 0 0.9rem;
  font-size: 3.5rem;
  line-height: 1.107143;
}
.hero__lede { color: var(--ink-dim); margin: 0 0 1.4rem; max-width: 46ch; }
.hero__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero__media { margin: 0; }
.hero__media img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 2;
  object-fit: contain;
  width: 100%;
}
.hero__caption {
  color: var(--ink-dim);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* ---------- buttons ---------- */
.button {
  display: inline-block;
  padding: 0.6rem 0.95rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.button--primary { background: var(--brand-2); color: #04120e; border-color: var(--brand-2); }
.button--primary:hover { background: var(--accent); text-decoration: none; }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button--ghost:hover { background: var(--bg-elev); text-decoration: none; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------- sections ---------- */
h2, .section-heading {
  font-size: 36px;
  line-height: 44px;
  margin: 0 0 0.5rem;
}
.section-lede { color: var(--ink-dim); margin: 0 0 1.5rem; max-width: 60ch; }

/* ---------- model cards ---------- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.model-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.model-card__media { margin: 0; }
.model-card__media img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #0a1322;
  width: 100%;
}
.model-card__head h3 { margin: 0; font-size: 1.1rem; }
.model-card__purpose { color: var(--ink-dim); margin: 0.15rem 0 0; font-size: 0.9rem; }
.model-card__body { color: var(--ink-dim); margin: 0; font-size: 0.95rem; }
.model-card__price { margin: 0; font-weight: 700; color: var(--accent); }
.model-card__link { margin-top: auto; font-weight: 600; }

/* per-model accent for group identity without recoloring text only */
[data-offer-model="pocket"] .model-card__head h3 { color: var(--pocket); }
[data-offer-model="link"] .model-card__head h3 { color: var(--link); }
[data-offer-model="node"] .model-card__head h3 { color: var(--node); }

/* ---------- offer panels (used by offers task) ---------- */
.offer-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--bg-elev);
  display: grid;
  gap: 0.5rem;
}
.offer-panel__status { font-size: 0.85rem; color: var(--ink-dim); }
.offer-panel__status[data-offer-status="current"] { color: var(--accent); }
.offer-panel__status[data-offer-status="sold_out"] { color: var(--warn); }
.offer-panel__status[data-offer-status="stale"],
.offer-panel__status[data-offer-status="unavailable"] { color: var(--danger); }
.offer-panel__prices { display: flex; gap: 1rem; flex-wrap: wrap; }
.offer-panel__price, .model-card__price, .price-value { font-weight: 700; font-size: 28px; line-height: 34px; font-variant-numeric: tabular-nums; }
.offer-panel__action { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.offer-panel__reference { font-size: 0.875rem; line-height: 1.5; color: var(--ink-dim); }

/* ---------- sticky phone CTA ---------- */
.sticky-offer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: rgba(11,18,32,0.92);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
  z-index: 40;
}
.sticky-offer .button { flex: 1; text-align: center; }

/* ---------- compare table ---------- */
.compare {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.compare table { border-collapse: collapse; width: 100%; min-width: 640px; }
.compare th, .compare td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare thead th { background: #0a1322; position: sticky; top: 0; }
.compare [data-differences] { color: var(--warn); }
.compare__scroll-label { display: block; font-size: 0.8rem; color: var(--ink-dim); margin-bottom: 0.4rem; }

/* ---------- quiz ---------- */
.quiz { display: grid; gap: 1rem; }
.quiz fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem; }
.quiz legend { padding: 0 0.4rem; font-weight: 600; }
.quiz label { display: block; padding: 0.3rem 0; }
.quiz__error { color: var(--danger); font-size: 0.9rem; }
.quiz__result { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--bg-elev); }
.quiz__result[data-quiz-result] { border-color: var(--accent); }
.quiz__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq__search {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.faq__search input[type="search"] {
  flex: 1 1 260px;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
}
.faq__list { display: grid; gap: 0.5rem; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  background: var(--bg-elev);
}
.faq__item[hidden] { display: none; }
.faq__item summary { cursor: pointer; font-weight: 600; }
.faq__item[data-open="true"] { border-color: var(--accent); }
.faq__noresults { color: var(--ink-dim); }

/* ---------- disclosures / footer ---------- */
.disclosures { margin-top: 3rem; }
.disclosures__list { color: var(--ink-dim); padding-left: 1.1rem; }
.disclosures__list li { margin: 0.2rem 0; }
.disclosures__note { color: var(--ink-dim); font-size: 0.9rem; }

.site-footer {
  border-top: 1px solid var(--line);
  background: #070d18;
  color: var(--ink-dim);
  margin-top: 3rem;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2rem;
  display: grid;
  gap: 0.6rem;
}
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer__legal { font-size: 0.85rem; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  :root { --gutter: 32px; }
  .model-grid { grid-template-columns: 1fr 1fr; }
  .hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; line-height: 26px; }
  h2, .section-heading { font-size: 28px; line-height: 36px; }
  .hero__inner { grid-template-columns: 1fr; padding-top: 2rem; }
  .model-grid { grid-template-columns: 1fr; }
  h1 { font-size: 2.25rem; line-height: 1.166667; }
  .nav-ready .site-menu-toggle { display: inline-block; margin-left: auto; }
  .site-nav { width: 100%; margin-left: 0; }
  .site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0;
  }
  .nav-ready .site-nav__list { display: none; }
  .nav-ready .site-nav__list--open { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Preserve native hidden states even on grid/flex primitives. */
[hidden] { display: none !important; }
.site-main { min-width: 0; }
.hero__inner > *, .model-grid > * { min-width: 0; }
body { overflow-wrap: break-word; }
button, input { font: inherit; }
button, summary, .site-nav__list a { min-height: 44px; }
.site-nav__list a { display: inline-flex; align-items: center; }
[id] { scroll-margin-top: 9rem; }
@media (max-width: 767px) {
  .nav-ready .site-nav__list--open { max-height: 65vh; overflow-y: auto; }
  .sticky-offer { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
}

/* Preserve all pricing columns within a keyboard-accessible local scroller. */
.table-wrap { max-width: 100%; overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table th, .pricing-table td { padding: .65rem; text-align: left; }

/* Reserve the measured shortcut height even while it is hidden. */
@media (max-width: 767px) {
  .has-product-offer { padding-bottom: max(6rem, var(--offer-bar-space, 6rem)); }
}

/* The approved disclosure tier applies to every rendered qualification/helper. */
.hero__caption, .offer-panel__status, .site-footer__legal, .compare__scroll-label {
  font-size: 14px;
  line-height: 21px;
}
.button--ghost, .site-menu-toggle, input, .faq__search input[type="search"], .quiz fieldset {
  border-color: var(--control-border);
}
main p { max-width: 65ch; }

/* Give the family introduction room at compact desktop widths. Preserve the
   approved two-column breakpoint and full contained media without shrinking type. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero[aria-labelledby="hero-heading"] .hero__inner {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    align-items: start;
  }
}