/* =========================================================================
   STEADY STATE · ad creative scripts (extends brand.css, system B)
   Five script cards: three hooks, a body, a call to action. Every line is
   one spoken sentence, double-spaced so a presenter can read it cold.
   ========================================================================= */

.ads { position: relative; overflow: hidden; padding: clamp(64px, 10vh, 112px) 0 clamp(72px, 11vh, 128px); }
.ads .container { position: relative; z-index: 1; max-width: calc(820px + 2 * var(--gutter)); }
.ads__glow {
  position: absolute; left: 50%; top: -120px; z-index: 0; pointer-events: none;
  width: min(1100px, 150vw); height: 620px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(12, 191, 240, 0.12), rgba(12, 191, 240, 0.03) 60%, transparent 100%);
}

/* ------------------------------------------------------------------ intro */
.ads__intro { text-align: center; margin: 0 auto clamp(48px, 7vh, 72px); }
.ads__title { max-width: 16ch; }
.ads__band { margin-top: 26px; }
.ads__intro .lead { margin-top: 22px; max-width: 54ch; }

.anav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px auto 0; max-width: 980px; }
.anav a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(238, 243, 246, 0.03);
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: calc(12.5px + var(--bump)); color: var(--ink);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.anav a b { font-weight: 600; color: var(--accent); letter-spacing: 0.06em; }
.anav a:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------------- list */
.ads__list { display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 36px); }

.script {
  position: relative; scroll-margin-top: 28px;
  padding: clamp(26px, 4vw, 48px);
  border-radius: 22px; border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(19, 27, 32, 0.92), rgba(14, 20, 24, 0.92));
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, 0.95);
}
.script::before {
  content: ""; position: absolute; left: clamp(26px, 4vw, 48px); right: clamp(26px, 4vw, 48px); top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(12, 191, 240, 0.55), transparent);
}

.script__head { display: flex; align-items: center; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
.script__num {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(12, 191, 240, 0.45); background: var(--accent-soft);
  font-family: var(--display); font-weight: 600; font-size: calc(16px + var(--bump)); letter-spacing: 0.04em; color: var(--accent);
}
.script__name { min-width: 0; }
.script__title {
  margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: calc(clamp(1.3rem, 2.3vw, 1.75rem) + var(--bump)); line-height: 1.1; letter-spacing: 0.02em;
}
.script__angle {
  margin: 6px 0 0; font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: calc(12px + var(--bump)); letter-spacing: 0.2em; color: var(--accent-2);
}

/* section labels */
.script__part { margin-top: 30px; }
.script__label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: calc(12.5px + var(--bump)); letter-spacing: 0.22em; color: var(--muted);
}
.script__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hair); }

/* the spoken lines: one sentence per line, double-spaced */
.lines p {
  margin: 0 0 1.05em; max-width: 64ch;
  font-size: calc(17px + var(--bump)); line-height: 1.7; color: #d6dee3; text-wrap: pretty;
}
.lines p:last-child { margin-bottom: 0; }

/* three hooks */
.hooks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hook {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 20px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(6, 8, 10, 0.45);
}
.hook__key {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; margin-top: 2px;
  font-family: var(--display); font-weight: 600; font-size: calc(14px + var(--bump)); color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.hook .lines p { color: var(--ink); font-weight: 500; }

/* call to action */
.script__cta .lines {
  padding: 20px 22px; border-radius: 14px;
  border: 1px solid rgba(12, 191, 240, 0.32); background: linear-gradient(120deg, rgba(12, 191, 240, 0.10), rgba(12, 191, 240, 0.03));
}
.script__cta .lines p { color: var(--ink); }
.script__cta .script__label { color: var(--accent); }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 760px) {
  .ads { padding-top: 56px; }
  .anav { gap: 8px; }
  .anav a { padding: 9px 14px; letter-spacing: 0.08em; }
  .script { border-radius: 18px; padding: 24px 18px 26px; }
  .script::before { left: 18px; right: 18px; }
  .script__head { gap: 14px; padding-bottom: 20px; }
  .script__num { width: 44px; height: 44px; }
  .hook { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 15px 14px 16px 12px; }
  .hook__key { width: 28px; height: 28px; border-radius: 8px; }
  .lines p { font-size: calc(16px + var(--bump)); line-height: 1.65; }
  .script__cta .lines { padding: 16px; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
.brandfoot .brand__mark { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .anav a { transition: none; }
}