/* ══════════════════════════════════════════════════════════════════════════
   homepage.css — The Defense Brief public homepage (marketing)
   Reuses tokens.css / components.css. Everything here is static marketing
   chrome: the homepage loads no live data and links into no member tool.
   All animation is CSS + a single IntersectionObserver (see homepage.js).

   SHARED WITH teams.html. That page also links this stylesheet, for the two
   dark bands only — .landing-hero (with .landing-hero--compact) and
   .final-cta-section — so the bookend treatment has a single definition.
   Two things to keep true if you edit this file:
     • no bare element selectors (h2, ul, a…), or they leak into that page;
     • .hp-reveal must stay gated behind html.js-reveal, since teams.html
       does NOT load homepage.js and would otherwise render at opacity 0.
   ══════════════════════════════════════════════════════════════════════════ */

.landing-page { background: var(--db-bg); }

/* ── Landing header (index.html only): wordmark + social icons left, nav and
   account/lang/theme controls right, single aligned row. .landing-header
   previously had no base layout rule, so its children (each internally flex)
   stacked as separate rows — this is the fix. ── */
.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--db-space-lg);
  padding: var(--db-space-lg) var(--db-space-xl);
}
/* Four children now, and space-between alone would strand the social bar in
   the middle of the row. Pushing the auto margin onto the social bar groups it
   with the wordmark on the left and leaves nav + account controls on the
   right, without needing a wrapper element in site-header.js. */
.landing-header .social-bar { margin-right: auto; }
.landing-header .db-brand {
  font-size: var(--db-text-base);
  letter-spacing: var(--db-tracking-widest);
}

/* ── Hero: cinematic dark intelligence band (always dark, both themes) ── */
.landing-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 72vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 11vh, 120px) 20px clamp(40px, 8vh, 80px);
  background:
    radial-gradient(1200px 600px at 50% -10%, #11304f 0%, rgba(17,48,79,0) 60%),
    linear-gradient(180deg, #081627 0%, #06101d 60%, #050c16 100%);
  color: #eaf1f8;
  isolation: isolate;
}
/* The grid lattice, the two blurred glow orbs and the scanline overlay were
   removed in the 2026-09 refinement pass. Between them they were four infinite
   animations behind a headline, and they pulled the band toward a sci-fi
   console when the page is meant to read as an intelligence publication.
   The radar sweep below is kept deliberately -- it is the one figure in the
   set that means something here. */



.hero-radar {
  position: absolute; top: 50%; left: 50%; width: 760px; height: 760px;
  margin: -380px 0 0 -380px; border-radius: var(--db-radius-round); z-index: -2; opacity: .16;
  background: conic-gradient(from 0deg, rgba(120,180,230,.45) 0deg, rgba(120,180,230,0) 55deg, transparent 360deg);
  mask-image: radial-gradient(circle, #000 0%, #000 58%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 58%, transparent 70%);
  animation: radarSweep 14s linear infinite;
}
@keyframes radarSweep { to { transform: rotate(360deg); } }


/* Interior-page variant (teams.html): same band, less vertical drama. The
   homepage hero is a full first impression; a sub-page hero sits above real
   content the visitor came for, so it should not fill the viewport. */
.landing-hero--compact {
  min-height: clamp(340px, 46vh, 460px);
  padding: clamp(44px, 8vh, 84px) 20px clamp(36px, 6vh, 64px);
}

.hero-content { position: relative; z-index: 1; max-width: 940px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--db-text-xs); font-weight: var(--db-weight-label); letter-spacing: var(--db-tracking-widest); text-transform: uppercase;
  color: var(--db-ink-inverse-muted); margin-bottom: 20px;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--db-red); box-shadow: 0 0 0 0 rgba(139,30,30,.7); animation: liveDot 2.4s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(139,30,30,.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(139,30,30,0); } }

.hero-title {
  font-weight: var(--db-weight-title);
  font-size: clamp(1.85rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: var(--db-tracking-tight);
  margin: 0;
  color: #fff;
  display: flex; flex-direction: column;
}
.hero-lede {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  font-weight: var(--db-weight-medium);
  line-height: 1.55;
  letter-spacing: var(--db-tracking-normal);
  margin: 20px auto 0;
  max-width: 64ch;
  color: rgba(214,226,240,.92);
}
.hero-cta-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 30px 0 18px;
}
.hero-cta-row .db-btn { min-width: 200px; }

/* The account-aware hero rows. Only one is ever in the layout (the
   [data-auth-only] rules in components.css remove the others outright), so the
   row below the lede keeps its single-row geometry in every account state and
   the hero never gains or loses vertical space when auth resolves. */
.hero-cta-row[data-auth-only="unverified"] { flex-direction: column; gap: 14px; }
.hero-verify-note {
  margin: 0; max-width: 46ch;
  font-size: var(--db-text-sm); line-height: var(--db-leading-body);
  color: rgba(214,226,240,.92);
}
.hero-btn-secondary {
  background: rgba(255,255,255,.04);
  color: #eaf1f8;
  border-color: rgba(234,241,248,.28);
}
.hero-btn-secondary:hover { background: rgba(255,255,255,.09); border-color: rgba(234,241,248,.45); }

/* Tertiary hero action (Sign In) — text-weight, no box, so the two primary
   paths above it stay visually dominant. */
.hero-btn-tertiary {
  background: none; border: 0; padding: 10px 8px; cursor: pointer;
  font-family: var(--db-font); font-size: var(--db-text-base); font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide); color: rgba(214,226,240,.86);
  border-bottom: 1px solid rgba(234,241,248,.30);
  transition: color var(--db-transition), border-color var(--db-transition);
}
.hero-btn-tertiary:hover { color: #fff; border-bottom-color: rgba(234,241,248,.7); }
.hero-btn-tertiary:focus-visible { outline: 2px solid rgba(234,241,248,.8); outline-offset: 3px; border-radius: var(--db-radius-xs); }

.hero-trust-line {
  font-size: var(--db-text-base); font-weight: var(--db-weight-label); letter-spacing: var(--db-tracking-normal); line-height: 1.5;
  color: rgba(190,210,232,.72); margin: 0 auto 30px; max-width: 60ch;
}

.hero-title, .hero-eyebrow, .hero-lede, .hero-cta-row, .hero-trust-line { animation: heroIn .9s ease both; }
.hero-eyebrow    { animation-delay: .05s; }
.hero-title      { animation-delay: .15s; }
.hero-lede        { animation-delay: .26s; }
.hero-cta-row     { animation-delay: .36s; }
.hero-trust-line  { animation-delay: .44s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.hero-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1; color: rgba(200,216,234,.6); animation: cueBob 2.6s ease-in-out infinite; }
.hero-cue svg { width: 22px; height: 22px; display: block; }
@keyframes cueBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ══════════════════════════════════════════════════════════════════════════
   Shared section chrome (sections 2–8)
   ══════════════════════════════════════════════════════════════════════════ */
.hp-section { padding: clamp(40px, 6.5vh, 76px) var(--db-space-xl); }
.hp-inner { max-width: var(--db-max-width-wide); margin: 0 auto; }
.hp-kicker {
  font-size: var(--db-text-xs); font-weight: var(--db-weight-label); letter-spacing: var(--db-tracking-widest); text-transform: uppercase;
  color: var(--db-muted); margin: 0 0 6px;
}
.hp-kicker-red { color: var(--db-red-ink); }
.hp-heading {
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-tight);
  color: var(--db-char); margin: 0 0 10px;
}
.hp-sub { font-size: var(--db-text-md); line-height: var(--db-leading-body); color: var(--db-muted); margin: 0 0 28px; max-width: 68ch; }

/* Reveal-on-scroll utility.
   The hidden state is deliberately gated behind html.js-reveal, which
   homepage.js only adds once it has confirmed it can actually reveal these
   again (IntersectionObserver present, motion not reduced). Almost every card
   on this page carries .hp-reveal, so an unconditional `opacity: 0` here would
   blank the entire page if the script failed to load or the observer never
   delivered. Fail open instead: visible unless JS opts in. */
.hp-reveal { transition: opacity .5s ease, transform .5s ease; }
html.js-reveal .hp-reveal { opacity: 0; transform: translateY(18px); }
html.js-reveal .hp-reveal.in-view { opacity: 1; transform: translateY(0); }

/* Alternating bands give the page an institutional rhythm without adding
   markup — sections land on the card surface, page surface, card, page… */
.receive-section,
.teams-section,
.audience-section { background: var(--db-card); }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 2 — WHAT MEMBERS RECEIVE
   ══════════════════════════════════════════════════════════════════════════ */
.receive-grid {
  display: grid; gap: var(--db-space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.receive-card { display: flex; flex-direction: column; gap: 12px; }
.receive-card-title {
  font-size: var(--db-text-xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-widest); text-transform: uppercase;
  color: var(--db-red-ink); margin: 0; padding-bottom: 10px;
  border-bottom: 1px solid var(--db-border);
}
.receive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.receive-list li {
  position: relative; padding-left: 18px;
  font-size: var(--db-text-base); line-height: 1.45; color: var(--db-char);
}
.receive-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; background: var(--db-red); opacity: .6;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 3 — INDIVIDUAL MEMBERSHIP
   ══════════════════════════════════════════════════════════════════════════ */
.individual-grid {
  display: grid; gap: var(--db-space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.individual-plan { position: relative; text-align: left; }
.individual-plan-featured { border-color: var(--db-border-red); box-shadow: var(--db-shadow-card); }
.individual-plan-flag {
  display: inline-block; margin: 0 0 8px; padding: 3px 9px;
  border-radius: var(--db-radius-pill); background: var(--db-red); color: #fff;
  font-size: var(--db-text-2xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-wider); text-transform: uppercase;
}
.individual-plan-label {
  font-size: var(--db-text-xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-widest); text-transform: uppercase;
  color: var(--db-muted); margin: 0 0 6px;
}
.individual-plan-price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-tight);
  color: var(--db-char); margin: 0 0 8px; line-height: 1;
}
.individual-plan-price small {
  font-size: var(--db-text-sm); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase; color: var(--db-muted);
}
.individual-plan-note { font-size: var(--db-text-sm); line-height: 1.5; color: var(--db-muted); margin: 0; }

/* The "everything included" panel spans both plan columns beneath them. */
.individual-includes { grid-column: 1 / -1; padding-top: 4px; }
.individual-includes-title {
  font-size: var(--db-text-xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-widest); text-transform: uppercase;
  color: var(--db-muted); margin: 0 0 12px;
}
.individual-includes-list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.individual-includes-list li {
  position: relative; padding-left: 22px;
  font-size: var(--db-text-base); line-height: 1.45; color: var(--db-char);
}
.individual-includes-list li::before {
  content: ""; position: absolute; left: 2px; top: .34em;
  width: 10px; height: 6px; border: 2px solid var(--db-red);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.individual-cta { min-width: 240px; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4 — TEAM WORKSPACES
   ══════════════════════════════════════════════════════════════════════════ */
.teams-grid {
  display: grid; gap: 24px;
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
}
.teams-config-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.teams-config-list li {
  position: relative; padding: 11px 12px 11px 30px;
  border: 1px solid var(--db-border); border-radius: var(--db-radius-md);
  background: var(--db-bg);
  font-size: var(--db-text-base); line-height: 1.4; color: var(--db-char);
}
.teams-config-list li::before {
  content: ""; position: absolute; left: 12px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: var(--db-radius-xs); background: var(--db-red); opacity: .6;
}
.teams-pricing-card { text-align: left; }
.teams-pricing-label {
  font-size: var(--db-text-xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-wider); text-transform: uppercase;
  color: var(--db-muted); margin: 0 0 6px;
}
.teams-pricing-value {
  font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-tight);
  color: var(--db-char); margin: 0 0 10px; line-height: 1;
}
.teams-pricing-note { font-size: var(--db-text-base); line-height: var(--db-leading-body); color: var(--db-muted); margin: 0 0 20px; }
.teams-cta { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 5 — HOW TEAMS USE THE PLATFORM
   ══════════════════════════════════════════════════════════════════════════ */
.how-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--db-space-lg); grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: none;
}
.how-step {
  position: relative; padding: 22px 18px 20px;
  border-top: 2px solid var(--db-border-strong);
}
.how-step-num {
  display: block; font-size: var(--db-text-xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-widest);
  color: var(--db-red-ink); margin-bottom: 10px;
}
.how-step-title { font-size: var(--db-text-lg); font-weight: var(--db-weight-label); color: var(--db-char); margin: 0 0 8px; line-height: 1.25; }
.how-step-body { font-size: var(--db-text-base); line-height: var(--db-leading-body); color: var(--db-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 6 — WHO IT IS FOR
   ══════════════════════════════════════════════════════════════════════════ */
.audience-grid {
  display: grid; gap: var(--db-space-lg);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.audience-card {
  padding: 20px 20px 22px;
  border: 1px solid var(--db-border); border-radius: var(--db-radius-lg);
  background: var(--db-bg);
  transition: border-color var(--db-transition), box-shadow var(--db-transition);
}
.audience-card:hover { border-color: var(--db-border-hover); box-shadow: var(--db-shadow-sm); }
.audience-card-title { font-size: var(--db-text-md); font-weight: var(--db-weight-label); color: var(--db-char); margin: 0 0 8px; line-height: 1.3; }
.audience-card-body { font-size: var(--db-text-base); line-height: var(--db-leading-body); color: var(--db-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 7 — PLATFORM PREVIEW
   Branded cover art for three member surfaces. Not screenshots, not live data,
   no links into any tool. The art is already dark navy/red, so the frame is
   kept near-black in BOTH themes rather than inheriting --db-card: a white
   card around a full-bleed dark image reads as an unintended border.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-preview-grid {
  display: grid; gap: var(--db-space-lg);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hp-preview-panel { margin: 0; }
.hp-preview-frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--db-border); border-radius: var(--db-radius-lg);
  background: #06101d;
  box-shadow: var(--db-shadow-card);
  transition: transform var(--db-transition), box-shadow var(--db-transition);
}
.hp-preview-panel:hover .hp-preview-frame {
  transform: translateY(-3px);
  box-shadow: var(--db-shadow-elevated);
}
.hp-preview-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* There is deliberately no padlock badge or "members only" scrim here. Both
   imply the art is the live interface behind a gate; it is a branded title
   card, and framing it as a locked screenshot would be the one dishonest
   thing this section could do. */

.hp-preview-figcaption { display: block; margin: 12px 2px 0; }
.hp-preview-name {
  display: block;
  font-size: var(--db-text-base); font-weight: var(--db-weight-label); color: var(--db-char);
  letter-spacing: var(--db-tracking-tight); margin-bottom: 3px;
}
.hp-preview-caption {
  display: block;
  font-size: var(--db-text-sm); line-height: 1.45; color: var(--db-muted);
}
.hp-preview-disclaimer {
  margin: 26px 0 0;
  font-size: var(--db-text-xs); font-weight: var(--db-weight-title); letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase; color: var(--db-muted); opacity: .8;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 8 — FINAL CTA
   Dark band that bookends the hero. Always dark in both themes, same as the
   hero, so its hardcoded values need no dark-mode override.
   ══════════════════════════════════════════════════════════════════════════ */
.final-cta-section {
  background:
    radial-gradient(900px 400px at 50% 120%, #11304f 0%, rgba(17,48,79,0) 62%),
    linear-gradient(180deg, #06101d 0%, #081627 100%);
  color: #eaf1f8;
}
.final-cta-inner { text-align: center; max-width: var(--db-max-width-narrow); }
.final-cta-heading { color: #fff; margin-bottom: 12px; }
.final-cta-sub {
  font-size: var(--db-text-md); line-height: var(--db-leading-body);
  color: rgba(214,226,240,.86); margin: 0 auto 26px; max-width: 56ch;
}
.final-cta-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.final-cta-row .db-btn { min-width: 220px; }
/* The non-primary CTA inherits the hero's translucent outline treatment. */
.final-cta-row .db-btn:not(.db-btn-primary) {
  background: rgba(255,255,255,.04);
  color: #eaf1f8;
  border-color: rgba(234,241,248,.28);
}
.final-cta-row .db-btn:not(.db-btn-primary):hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(234,241,248,.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark mode — only for the hardcoded light-surface values above. Everything
   else is token-driven and flips automatically via tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */
/* Red-as-text on a dark ground is now handled at the token layer:
   --db-red stays the brand fill, --db-red-ink lightens for type and edges.
   These three rules used to hand-patch #ff7575 here; they now just point at
   the token, so a change to the readable red reaches the whole site. */
html.dark-mode .hp-kicker-red,
html.dark-mode .how-step-num { color: var(--db-red-ink); }

/* The preview art is dark in both themes, so only its frame edge needs to
   change: the light-mode navy hairline disappears against the dark page. */
html.dark-mode .hp-preview-frame { border-color: var(--db-border-strong); }
html.dark-mode .hp-preview-panel:hover .hp-preview-frame {
  box-shadow: var(--db-shadow-elevated);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Counteracts components.css's unscoped ".db-header-right { display:none }"
     mobile-nav rule — that rule targets the non-landing .db-header (replaced
     by a hamburger there), but isn't scoped, so it also hits this header's
     .db-header-right. Do not remove. */
  .landing-header .db-header-right { display: flex !important; }
  /* Same reasoning for the primary nav: the .db-header version is replaced by
     a hamburger + drawer at this width, but the landing header has neither, so
     its nav must stay on-screen and wrap instead. */
  .landing-header .db-header-nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  /* Third rule of the same kind: components.css centres the wordmark with
     "flex:1" for the non-landing mobile header, which has a hamburger and an
     account button flanking it. This header has neither, so the wordmark stays
     left-aligned at its natural width. */
  .landing-header .db-brand {
    flex: 0 0 auto;
    text-align: left;
    font-size: var(--db-text-sm);
  }
  .teams-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hp-section { padding-left: 16px; padding-right: 16px; }
  .receive-grid { grid-template-columns: 1fr; }
  .individual-grid { grid-template-columns: 1fr; }
  .individual-includes-list { grid-template-columns: 1fr; }
  .teams-config-list { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .hero-cta-row .db-btn { min-width: 0; width: 100%; max-width: 320px; }
  .final-cta-row .db-btn { min-width: 0; width: 100%; max-width: 320px; }
  .individual-cta { width: 100%; max-width: 320px; justify-content: center; }
}
@media (max-width: 600px) {
  .landing-header { row-gap: 8px; }
  .landing-header .db-header-nav { width: 100%; }
  .landing-header .db-header-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-radar, .hero-cue,
  .hero-title, .hero-eyebrow, .hero-lede, .hero-cta-row, .hero-trust-line,
  .hero-eyebrow .dot { animation: none !important; }
  .hp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LANDING CHROME — design-system alignment (2026-09)
   The page itself is unchanged: same eight sections, same copy, same i18n
   keys. What follows reconciles it with the shared interface language now
   that the header is de-pilled and the geometry scale is 2-6px.
   ══════════════════════════════════════════════════════════════════════════ */

/* The masthead sits on the hero's dark band, so it takes the inverse
   treatment rather than the light surface the shared .db-header uses. */
.landing-header {
  background: var(--db-surface-inverse);
  border-bottom: var(--db-rule) solid rgba(234, 241, 248, .10);
  position: relative;
}
.landing-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--db-rule-strong);
  background: linear-gradient(90deg, var(--db-red) 0%, var(--db-red) 10%, transparent 40%);
  opacity: .75;
  pointer-events: none;
}
.landing-header .db-brand { color: var(--db-ink-inverse); }
.landing-header .db-nav-pill { color: rgba(214, 226, 240, .80); }
.landing-header .db-nav-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border-bottom-color: rgba(234, 241, 248, .40);
}
.landing-header .db-nav-pill.active { color: #fff; border-bottom-color: var(--db-red-ink); }
.landing-header .db-nav-pill-outline {
  color: var(--db-ink-inverse);
  border-color: rgba(234, 241, 248, .34);
}
.landing-header .db-nav-pill-outline:hover {
  border-color: rgba(234, 241, 248, .70);
  background: rgba(255, 255, 255, .06);
}
.landing-header .social-link { color: rgba(214, 226, 240, .72); }
.landing-header .social-link:hover { color: #fff; }
/* theme.js and i18n.js inject their toggles into .db-header-right */
.landing-header .db-theme-toggle,
.landing-header .db-lang-toggle { color: rgba(214, 226, 240, .78); }
.landing-header .db-theme-toggle:hover,
.landing-header .db-lang-toggle:hover { color: #fff; }

/* The hero band now runs straight out of the masthead with no seam. */
.landing-hero { border-top: 0; }

/* Hero actions. The shared .db-btn-primary is a navy fill, which all but
   disappears against the hero's navy ground — here the primary inverts to
   the light surface instead, and the secondary stays a hairline outline. */
.landing-hero .db-btn-primary {
  background: var(--db-ink-inverse);
  border-color: var(--db-ink-inverse);
  color: var(--db-surface-inverse);
}
.landing-hero .db-btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--db-surface-inverse);
}
.final-cta-section .db-btn-primary {
  background: var(--db-ink-inverse);
  border-color: var(--db-ink-inverse);
  color: var(--db-surface-inverse);
}
.final-cta-section .db-btn-primary:hover { background: #fff; border-color: #fff; }

/* The "how teams use it" steps are the source of the .db-module--rule motif;
   keep the two visually identical so the language reads as one. */
.how-step { border-top-width: var(--db-rule-strong); }

/* The featured plan is marked by a red edge rather than a shadow — the same
   escalation/emphasis edge used across the dashboards. */
.individual-plan-featured {
  border-color: var(--db-border);
  border-left: var(--db-edge-width) solid var(--db-red);
  box-shadow: none;
}

@media (max-width: 900px) {
  /* The landing header has no drawer of its own, so it wraps. Keep the two
     rows deliberate: identity above, navigation and controls below. */
  .landing-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  right"
      "nav    nav"
      "social social";
    gap: var(--db-space-sm) var(--db-space-md);
    padding: var(--db-space-md) var(--db-space-lg);
  }
  .landing-header .db-brand { grid-area: brand; }
  .landing-header .social-bar { grid-area: social; margin-right: 0; }
  .landing-header .db-header-nav { grid-area: nav; gap: 2px; }
  .landing-header .db-header-right { grid-area: right; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE REBUILD (2026-09)
   Three things this adds, all token-driven, so none of it needs a dark-mode
   block: the hero's live readout, the module showcase that replaced the
   capability list, and the inverse evidence band.

   The one place raw rgba appears below is on .landing-hero, which is dark in
   BOTH themes — the light-mode ink tokens would be invisible there, and the
   dark-mode ones are not exposed on :root. Every such value matches one
   already used by the hero rules above.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: the live readout ───────────────────────────────────────────────
   Rendered by the live-readout block in marketing-blocks.js from two public
   health endpoints. It is empty until they answer, and stays empty if they do
   not, so the trust line below it carries the slot on its own. ── */
.hp-live-slot { margin: 0 auto 14px; min-height: 0; }
.hp-live-slot:empty { display: none; }
.hp-live {
  justify-content: center;
  color: var(--db-ink-inverse-muted);
}
/* The hero band's own ink, not the page's — .db-meta defaults to --db-muted,
   which is a dark grey and disappears here. */
.landing-hero .db-meta-key { color: rgba(190, 210, 232, .62); }
.landing-hero .db-meta-val { color: var(--db-ink-inverse); }
.landing-hero .db-meta > * + *::before { background: rgba(234, 241, 248, .26); }
/* The word LIVE takes the hero's ink; the pulsing red square carries the
   signal. --db-red-ink is the brand red on a light page and would go nearly
   black against this ground. */
.landing-hero .db-live-on { color: rgba(214, 226, 240, .86); }
.landing-hero .db-live-on::before { background: var(--db-red); }
.hp-live-spark { display: inline-block; width: 76px; height: 18px; }
/* sparkline() writes its colour as an SVG presentation attribute, which any CSS
   `stroke` outranks. --db-chart-1 is authored for the page surface and vanishes
   on this band, so it is restated here in the hero's own blue rather than the
   block being taught where it was drawn. */
.landing-hero .hp-live-spark path { stroke: rgba(120, 180, 230, .95); }
.landing-hero .hp-live-spark circle { fill: rgba(120, 180, 230, .95); }

/* ══════════════════════════════════════════════════════════════════════════
   MODULE SHOWCASE
   Replaces the eight-category capability list. Two halves: three modules that
   publish a figure, drawn by the module-cards block; four that do not, shown
   as the branded cover art below.
   ══════════════════════════════════════════════════════════════════════════ */

.hp-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--db-space-xl);
}
.hp-mod { display: flex; flex-direction: column; min-width: 0; }
.hp-mod-name {
  margin: 0 0 var(--db-space-md);
  font-size: var(--db-text-lg);
  font-weight: var(--db-weight-label);
  line-height: var(--db-leading-snug);
  letter-spacing: var(--db-tracking-tight);
  color: var(--db-char);
}
/* The figure is the point of the card, so it gets the type scale a heading
   would normally take, in mono because it is a measurement. */
/* The unit sits UNDER the numeral rather than beside it. Three of the five
   units are long enough to wrap, and a unit that wraps beside a 34px figure
   reads as a second, broken number. */
.hp-mod-figure {
  margin: 0 0 var(--db-space-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-mod-figure .db-num {
  font-size: var(--db-text-3xl);
  font-weight: var(--db-weight-label);
  line-height: 1;
  letter-spacing: var(--db-tracking-tight);
  color: var(--db-char);
}
.hp-mod-unit {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
}
.hp-mod-note {
  margin: 0 0 var(--db-space-lg);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-body);
  color: var(--db-muted);
}
.hp-mod-viz { margin-top: auto; }
.hp-mod-spark { display: block; width: 100%; height: 30px; }
.hp-mod-ratio {
  display: block;
  height: 10px;
  background: var(--db-surface-sunken);
  border: var(--db-rule) solid var(--db-border);
}
.hp-mod-ratio-fill { display: block; height: 100%; background: var(--db-chart-1); }
.hp-mod-vizcap {
  margin: var(--db-space-sm) 0 0;
  font-size: var(--db-text-xs);
  line-height: var(--db-leading-snug);
  color: var(--db-muted);
}
.hp-mod-link {
  margin: var(--db-space-lg) 0 0;
  padding-top: var(--db-space-md);
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-sm);
}
.hp-mod-link a {
  color: var(--db-char);
  font-weight: var(--db-weight-title);
  text-decoration: none;
  border-bottom: var(--db-rule) solid var(--db-border-strong);
  transition: border-color var(--db-transition);
}
.hp-mod-link a:hover { border-bottom-color: var(--db-red-ink); }

/* ── The four modules with nothing public to count ────────────────────────
   Branded cover art, not screenshots and never framed as any. The tool name
   is burned into each image as English text, so the caption repeats it as
   real text — that is what carries fr-CA and the accessible name, and it is
   why the image itself is decorative. ── */
.hp-artgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--db-space-lg);
  margin-top: var(--db-space-3xl);
}
.hp-artsub {
  margin: var(--db-space-3xl) 0 var(--db-space-md);
  padding-top: var(--db-space-md);
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
}
.hp-artgrid + .hp-artsub { margin-top: var(--db-space-3xl); }

/* ── What is not running yet ──────────────────────────────────────────────
   The availability vocabulary, reduced to the half that carries information.
   Rendered from the catalogue by the availability-note block. ── */
.hp-avail {
  margin-top: var(--db-space-2xl);
  padding-top: var(--db-space-lg);
  border-top: var(--db-rule) solid var(--db-border);
}
.hp-avail:empty { display: none; }
.hp-avail-line {
  display: flex;
  align-items: baseline;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  margin: 0 0 var(--db-space-sm);
}
.hp-avail-line:last-child { margin-bottom: 0; }
.hp-avail-names {
  flex: 1 1 320px;
  min-width: 0;
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  color: var(--db-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   EVIDENCE — inverse band
   The headline figures move onto the dark ground so the page has an anchor
   between the hero and the final CTA rather than six grey sections in a row.
   Dark in both themes, like the hero and the final CTA, so nothing here takes
   a dark-mode override.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-section-inverse { padding-bottom: clamp(32px, 5vh, 56px); }
.hp-section-inverse .hp-kicker { color: var(--db-ink-inverse-muted); }
.hp-section-inverse .hp-sub { color: rgba(214, 226, 240, .82); }

/* .mkt-stats draws its hairline grid with each tile's own outline on the page
   surface. On the dark band the light-mode border token is a near-black line
   that vanishes, so the rules are restated in the band's own ink. Scoped here
   rather than in marketing.css, which is shared with three other pages and is
   deliberately free of any surface-specific rule. */
.hp-section-inverse .mkt-stats { border-color: rgba(234, 241, 248, .16); }
.hp-section-inverse .mkt-stat {
  background: none;
  outline-color: rgba(234, 241, 248, .16);
}
.hp-section-inverse .mkt-stat-value {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  color: #fff;
}
.hp-section-inverse .mkt-stat-label { color: rgba(234, 241, 248, .92); }
.hp-section-inverse .mkt-stat-note,
.hp-section-inverse .mkt-asof { color: rgba(190, 210, 232, .70); }

/* The chart that follows the band, on the page surface where its own tokens
   are correct. */
.hp-more { margin: var(--db-space-lg) 0 0; font-size: var(--db-text-sm); }
.hp-more a {
  color: var(--db-char);
  font-weight: var(--db-weight-title);
  text-decoration: none;
  border-bottom: var(--db-rule) solid var(--db-border-strong);
}
.hp-more a:hover { border-bottom-color: var(--db-red-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   AUDIENCE — a strip, not a grid
   Twelve roles, no blurbs. The twelve one-line descriptions this replaced all
   shared one grammatical mould and none of them changed what a reader does.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-audience { line-height: 2.2; }
.hp-audience > * { color: var(--db-char); font-weight: var(--db-weight-medium); gap: 8px; }
/* .db-meta separates items with a hairline placed BEFORE each one after the
   first. That is right for a strip that fits on one line; with twelve roles
   this wraps at every width, and the separator then lands at the start of a
   line where it reads as a stray glyph. So every role takes its own square
   marker instead — a marker at a line start is correct, a separator is not. */
.hp-audience > * + *::before,
.hp-audience > *::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 0;
  flex: 0 0 auto;
  background: var(--db-red);
  opacity: .55;
}

/* The art disclaimer is a footnote, not a label. Uppercase at three lines is
   louder than the thing it is qualifying. */
.hp-preview-disclaimer {
  text-transform: none;
  letter-spacing: var(--db-tracking-normal);
  font-weight: var(--db-weight-medium);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  max-width: var(--db-read-measure);
}

@media (max-width: 1000px) {
  .hp-artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hp-artgrid { grid-template-columns: 1fr; }
  .hp-modgrid { gap: var(--db-space-2xl); }
}