/* ============================================================
   Cinematic Prompt Drops — Drop 01 page
   Theme tokens are written to :root by page.js from theme.json.
   Defaults below match Drop 01 so the page renders gracefully
   even if JS fails or before fonts arrive.

   COLOR-SIGNAL SYSTEM — read this before touching the palette:
     beacon (orange)  = CONVERSION. Buy CTAs only. Nowhere else
                        on the page, including hover states.
     status (green)   = INFORMATIONAL STATE. "This is the state"
                        indicators (live, copied, ready, image-
                        required). Never an action signal.
     signal (blue)    = METHODOLOGICAL ALTERNATIVE / cold accent.
                        Not status, not action.
     reds             = RESERVED for genuine errors. None used on
                        this product — it has no error states.
   If a future Drop introduces error states, add a new palette
   entry (e.g. "warn") rather than overloading existing colors.
   ============================================================ */

:root {
  --c-asphalt:   #0E1216;
  --c-hangar:    #181E25;
  --c-fog:       #8C97A3;
  --c-headlight: #E6ECF2;
  --c-beacon:    #E84A2A;
  --c-status:    #39FF14;
  --c-signal:    #4A7FA8;

  --ff-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display-xl: clamp(40px, 6vw, 72px);
  --fs-display:    clamp(28px, 4vw, 44px);
  --fs-heading:    clamp(22px, 2.4vw, 32px);
  --fs-body:       17px;
  --fs-small:      14px;
  --fs-mono-label: 13px;
  --fs-mono-micro: 12px;

  --lh-display: 1.05;
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --lh-mono:    1.5;

  --col:        880px;
  --col-wide:   1120px;
  --rule:        1px solid rgba(140, 151, 163, 0.20);
  --rule-strong: 1px solid rgba(140, 151, 163, 0.35);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--c-asphalt); overflow-x: clip; }

body {
  color: var(--c-headlight);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- Load state ---------- */
#app[data-state="loading"]::before {
  content: "Loading drop data…";
  position: fixed; inset: 0;
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  color: var(--c-fog);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#app[data-state="error"] {
  padding: clamp(48px, 8vw, 96px);
}
.error-block {
  /* Load-failure fallback (dev-time only). This IS a genuine error
     state, so reds-for-errors applies — the one exception to the
     "beacon reserved for buy CTAs" rule. Users should never see this
     in production. */
  font-family: var(--ff-mono);
  font-size: var(--fs-body);
  color: var(--c-beacon);
  border: 1px solid var(--c-beacon);
  padding: 24px;
  max-width: 64ch;
}

/* ---------- Layout shells ---------- */
section { padding: clamp(56px, 8vw, 112px) clamp(24px, 5vw, 48px); }
.col      { max-width: var(--col);      margin: 0 auto; }
.col-wide { max-width: var(--col-wide); margin: 0 auto; }

/* ---------- Hero ---------- */
.hero {
  padding: 0;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  max-height: 92vh;
  min-height: 60vh;
  overflow: hidden;
}
.hero img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  display: block;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 25%;
  background: linear-gradient(to bottom, transparent, rgba(14,18,22,0.55));
  pointer-events: none;
}
.brand-mark {
  position: absolute; z-index: 2;
  top: clamp(20px, 3vw, 36px);
  left: clamp(24px, 5vw, 48px);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-headlight);
  text-shadow: 0 1px 14px rgba(14,18,22,0.7);
}
.brand-mark a { text-decoration: none; }
.brand-mark .sep { color: var(--c-fog); margin: 0 8px; }

/* ---------- Spec strip ---------- */
.spec-strip {
  padding: 0;
  background: var(--c-hangar);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.spec-cell {
  padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
  border-right: var(--rule);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 88px;
}
.spec-cell:last-child { border-right: none; }
.spec-cell .label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.spec-cell .value {
  font-family: var(--ff-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-headlight);
  letter-spacing: 0.04em;
}
.spec-cell[data-highlight="true"] .value {
  color: var(--c-status);
  display: inline-flex; align-items: center; gap: 8px;
}
.spec-cell[data-highlight="true"] .value::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-status);
  /* Soft outer halo — low opacity, modest spread. The neon does the work;
     the glow only gives it a faint atmospheric bloom. */
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-status) 55%, transparent);
  animation: status-pulse 1.8s ease-in-out infinite;
}

/* Heartbeat — only the dot pulses, the label stays solid.
   Honors prefers-reduced-motion below. */
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-cell[data-highlight="true"] .value::before {
    animation: none;
  }
}
@media (max-width: 960px) {
  .spec-grid { grid-template-columns: repeat(3, 1fr); }
  .spec-cell:nth-child(3n) { border-right: none; }
  .spec-cell:nth-child(n+4) { border-top: var(--rule); }
}
@media (max-width: 560px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-cell { border-right: none; border-bottom: var(--rule); }
  .spec-cell:nth-child(odd) { border-right: var(--rule); }
  .spec-cell:nth-last-child(-n+2) { border-bottom: none; }
  .spec-cell:nth-child(n+4) { border-top: none; }
}

/* ---------- Module header pattern ---------- */
.module-header {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 36px;
  border-bottom: var(--rule-strong);
}
.module-header .num {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.module-header h2 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-headlight);
}
.module-header .meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  color: var(--c-fog);
  letter-spacing: 0.04em;
}

/* ---------- Identity ---------- */
.identity h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--c-headlight);
}
.identity .subtitle {
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  color: var(--c-fog);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  max-width: 28ch;
}
.identity .description {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--c-headlight);
  max-width: 62ch;
  margin: 0;
}

/* ---------- Tagline callout ---------- */
.tagline {
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: clamp(80px, 11vw, 144px) clamp(24px, 5vw, 48px);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(74,127,168,0.10), transparent 60%),
    var(--c-asphalt);
}
.tagline .kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-fog);
  margin-bottom: 28px;
}
.tagline blockquote {
  margin: 0 auto; padding: 0;
  font-family: var(--ff-display);
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 800;
  color: var(--c-headlight);
  max-width: 18ch;
}

/* ---------- Sponsor block ---------- */
.sponsor {
  padding: 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  background: var(--c-asphalt);
}
.sponsor-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 48px);
}
.sponsor-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: clamp(36px, 5vw, 52px) clamp(40px, 6vw, 80px);
  background: var(--c-hangar);
  border: 1px solid rgba(140, 151, 163, 0.22);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease;
  min-width: min(320px, 80vw);
}
.sponsor-card:hover {
  border-color: rgba(230, 236, 242, 0.45);
}
.sponsor-card:focus-visible {
  outline: none;
  border-color: var(--c-headlight);
}
.sponsor-card img {
  display: block;
  height: 56px;
  width: auto;
  max-width: min(420px, 70vw);
  opacity: 0.90;
  transition: opacity 180ms ease;
}
.sponsor-card:hover img {
  opacity: 1;
}
.sponsor-cta {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--c-headlight);
  letter-spacing: -0.005em;
  line-height: 1.2;
  transition: color 180ms ease, letter-spacing 180ms ease;
}
.sponsor-card:hover .sponsor-cta {
  color: #FFFFFF;
}
@media (max-width: 480px) {
  .sponsor-card img { height: 44px; }
}

/* ---------- Usage ---------- */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 56px;
}
.usage-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 24px 28px;
  border: var(--rule);
  background: var(--c-hangar);
}
.usage-card .index {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.18em;
  color: var(--c-fog);
}
.usage-card .tag {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  align-self: flex-start;
  border: 1px solid currentColor;
}
.usage-card[data-method="image"] .tag { color: var(--c-status); }
.usage-card[data-method="text"]  .tag { color: var(--c-signal); }
.usage-card[data-method="tool"]  .tag { color: var(--c-fog); }
.usage-card .phrase {
  font-family: var(--ff-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-headlight);
}
.usage-card .detail {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-fog);
}
.usage-detail {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px 48px;
  padding-top: 36px;
  border-top: var(--rule);
}
.usage-detail dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.usage-detail dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-headlight);
}
.usage-detail code {
  font-family: var(--ff-mono);
  font-size: 14px;
  background: var(--c-hangar);
  padding: 2px 6px;
  border: var(--rule);
  color: var(--c-headlight);
}
@media (max-width: 880px) {
  .usage-grid    { grid-template-columns: 1fr; gap: 16px; }
  .usage-detail  { grid-template-columns: 1fr; gap: 8px 0; }
  .usage-detail dt { margin-top: 20px; }
}

/* ---------- Free prompt module ---------- */
.free-prompt .prompt-meta {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  margin-bottom: 24px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.04em;
  color: var(--c-fog);
}
.free-prompt .prompt-meta .v { color: var(--c-headlight); font-weight: 500; }

.free-prompt .summary {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--c-headlight);
  max-width: 62ch;
  margin: 0 0 32px;
}

.prompt-frame {
  background: var(--c-hangar);
  border: var(--rule);
}
.prompt-frame-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: var(--rule);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.prompt-frame-head .left { display: flex; gap: 16px; align-items: center; }
.prompt-frame-head .dot {
  /* Solid color, no glow — the LIVE dot is the only haloed indicator on the page. */
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-status);
}
.prompt-frame-body {
  padding: 28px clamp(24px, 4vw, 36px) 32px;
  font-family: var(--ff-mono);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-headlight);
  overflow-x: auto;
}
.prompt-frame-body p {
  margin: 0 0 1.2em;
}
.prompt-frame-body p:last-child { margin-bottom: 0; }

/* Buttons */
.btn {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  border: 1px solid var(--c-headlight);
  background: transparent;
  color: var(--c-headlight);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  min-height: 44px;
}
.btn:hover { background: var(--c-headlight); color: var(--c-asphalt); }
.btn[data-state="copied"] {
  border-color: var(--c-status);
  color: var(--c-status);
  background: transparent;
}
.btn[data-state="copied"]:hover { background: transparent; }

.copy-row {
  margin-top: 20px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.copy-row .help {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  color: var(--c-fog);
  letter-spacing: 0.04em;
}

/* ---------- Email capture ---------- */
.email-capture {
  margin-top: 56px;
  padding: 28px 32px 32px;
  border: var(--rule);
  background: var(--c-hangar);
  display: flex; flex-direction: column; gap: 16px;
}
.email-capture .head {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.email-capture .pitch {
  font-size: var(--fs-body);
  color: var(--c-headlight);
  max-width: 60ch;
  margin: 0;
}
.email-capture form {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 4px;
}
.email-capture input[type="email"] {
  flex: 1 1 280px;
  min-height: 52px;
  background: var(--c-asphalt);
  border: 1px solid var(--c-fog);
  border-right: none;
  color: var(--c-headlight);
  font-family: var(--ff-display);
  font-size: 17px;
  padding: 0 18px;
  outline: none;
  letter-spacing: -0.005em;
}
.email-capture input[type="email"]:focus {
  border-color: var(--c-headlight);
}
.email-capture input[type="email"]::placeholder { color: var(--c-fog); }
.email-capture button {
  min-height: 52px;
  background: var(--c-headlight);
  color: var(--c-asphalt);
  border: 1px solid var(--c-headlight);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 24px;
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms ease;
}
.email-capture button:hover {
  /* Not a buy CTA — beacon is reserved. Lift to pure white for the engaged state. */
  background: #FFFFFF; border-color: #FFFFFF;
}
.email-capture .confirm {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.04em;
  color: var(--c-fog);
  min-height: 1.2em;
}
/* Success is an informational STATE → status-neon. A bad-input or
   failure message stays neutral (fog), never neon — color-signal
   discipline, matching the series page's .cap-confirm behaviour. */
.email-capture .confirm[data-state="ok"] { color: var(--c-status); }
@media (max-width: 480px) {
  .email-capture input[type="email"] { border-right: 1px solid var(--c-fog); }
}

/* ---------- Paid sequence ---------- */
.paid .preamble {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--c-headlight);
  max-width: 62ch;
  margin: 0 0 36px;
}
.paid-stack {
  display: grid; gap: 20px;
}
.paid-card {
  border: var(--rule);
  background: var(--c-hangar);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.paid-card-head {
  padding: 24px clamp(24px, 4vw, 32px) 0;
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline;
}
.paid-card-head .num {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.18em;
  color: var(--c-fog);
}
.paid-card-head h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--c-headlight);
}
.paid-card-head .pill {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.08em;
  color: var(--c-headlight);
  padding: 5px 10px;
  border: 1px solid var(--c-fog);
}
.paid-card .summary {
  padding: 16px clamp(24px, 4vw, 32px) 0;
  font-size: var(--fs-body);
  color: var(--c-headlight);
  line-height: var(--lh-body);
  max-width: 70ch;
  margin: 0;
}
.paid-specs {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 32px;
  margin: 0;
  padding: 20px clamp(24px, 4vw, 32px);
  border-top: var(--rule);
  border-bottom: var(--rule);
  margin-top: 24px;
}
.paid-specs dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.paid-specs dd {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 13.5px;
  color: var(--c-headlight);
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .paid-specs { grid-template-columns: 1fr; gap: 2px 0; }
  .paid-specs dt { margin-top: 10px; }
  .paid-specs dt:first-child { margin-top: 0; }
}

/* Locked body — redaction pattern (no body text in DOM) */
.locked-body {
  position: relative;
  padding: 26px clamp(24px, 4vw, 32px) 30px;
}
.locked-body .lock-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fog);
}
.locked-body .lock-bar .left { display: flex; align-items: center; gap: 8px; }
.locked-body .lock-bar .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-status);
}
.locked-body .lock-bar .lines { color: var(--c-fog); }
.locked-body .redacted {
  display: flex; flex-direction: column; gap: 8px;
  user-select: none;
}
.locked-body .redacted span {
  display: block;
  height: 12px;
  background: rgba(140, 151, 163, 0.16);
}
.locked-body .redacted span.gap { background: transparent; height: 6px; }

/* ---------- CTA bar ---------- */
.cta-bar {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--c-hangar);
  border: var(--rule);
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.identity .cta-bar { margin-top: 48px; }
.cta-bar .price {
  font-family: var(--ff-display);
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--c-headlight);
  line-height: 1;
}
.cta-bar .terms {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.04em;
  color: var(--c-fog);
  line-height: 1.5;
  flex: 1; min-width: 240px;
}
.cta-bar .terms .one { color: var(--c-headlight); display: block; margin-bottom: 4px; }
.cta-bar button {
  background: var(--c-beacon);
  color: var(--c-asphalt);
  border: 1px solid var(--c-beacon);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 28px;
  cursor: pointer;
  min-height: 56px;
  transition: opacity 120ms ease, background 120ms ease;
  font-weight: 500;
}
.cta-bar button:hover { background: #FF6240; border-color: #FF6240; }
.cta-bar .pending {
  flex-basis: 100%;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  color: var(--c-fog);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ---------- Assembly note ---------- */
.assembly {
  background: var(--c-hangar);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.assembly-frame {
  padding: clamp(28px, 4vw, 40px);
  border: var(--rule);
  background: var(--c-asphalt);
  font-family: var(--ff-mono);
  font-size: var(--fs-body);
  color: var(--c-headlight);
  line-height: var(--lh-body);
  letter-spacing: 0.005em;
}
.assembly-frame .kicker {
  display: block;
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fog);
  margin-bottom: 14px;
}
.assembly-frame strong {
  color: var(--c-headlight);
  font-weight: 500;
}

/* ---------- Follow block ---------- */
.follow {
  border-top: var(--rule-strong);
  background: var(--c-asphalt);
}
.follow h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-headlight);
  margin: 0 0 18px;
  max-width: 22ch;
}
.follow p {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--c-headlight);
  max-width: 56ch;
  margin: 0 0 32px;
}
.social-links {
  display: flex; flex-wrap: wrap; gap: 28px 36px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.social-links a {
  color: var(--c-headlight);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-fog);
  transition: border-color 120ms ease, color 120ms ease;
}
.social-links a:hover {
  /* Editorial hover — underline lifts from fog to pure white, text brightens.
     Beacon stays reserved for buy CTAs. */
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

/* ---------- License clause ---------- */
.license {
  background: var(--c-hangar);
  border-top: var(--rule);
  padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 48px);
}
.license-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fog);
  margin: 0 0 14px;
}
.license p {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-headlight);
  letter-spacing: 0.005em;
  max-width: 82ch;
  margin: 0;
}

/* ---------- Brand footer ---------- */
.brand-footer {
  border-top: var(--rule);
  background: var(--c-asphalt);
  padding: clamp(36px, 4vw, 56px) clamp(24px, 5vw, 48px) clamp(44px, 5vw, 64px);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-label);
  color: var(--c-fog);
  letter-spacing: 0.06em;
}
.brand-footer .col {
  display: flex; flex-direction: column; gap: 8px;
}
.brand-footer .line {
  line-height: 1.7;
}
.brand-footer .line.identity-line {
  color: var(--c-headlight);
  letter-spacing: 0.08em;
}
.brand-footer .line a {
  color: var(--c-headlight);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.brand-footer .line a:hover {
  /* Editorial hover — beacon reserved for buy CTAs. */
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
.brand-footer .line.social {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 4px; margin-bottom: 4px;
}
/* Utility footer links — minimal / mono / fog, identical
   treatment on the series, Drop 01, and success pages. Not a
   .line, so the headlight .brand-footer .line a rule above
   does not apply — these stay fog by design. */
.brand-footer .foot-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-micro, 12px);
  letter-spacing: 0.06em;
  color: var(--c-fog);
}
.brand-footer .foot-links a {
  color: var(--c-fog); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.brand-footer .foot-links a:hover { color: var(--c-headlight); border-bottom-color: var(--c-headlight); }
.brand-footer .foot-links .sep { color: color-mix(in srgb, var(--c-fog) 50%, transparent); }