/* ============================================================
   NOTT SHOTS — Indie Artist Landing Page
   Mobile-first. Built on the Chay Nott design system.
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Owners XWide';
  src: url('../assets/fonts/Owners_XWide_Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Panno Text';
  src: url('../assets/fonts/Panno_Text_SemiBold_Italic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../assets/fonts/ProximaNova-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Tokens (tweakable) ────────────────────────────────── */
:root {
  --abyss:   #0E1225;
  --abyss-2: #141A33;   /* slightly raised panel */
  --horizon: #1F3B73;
  --pulse:   #80CDD1;
  --pulse-light: #A8DFE2;
  --pulse-dark:  #5AB0B5;
  --surge:   #FFFFFF;
  --ink-60:  rgba(255,255,255,0.62);
  --ink-40:  rgba(255,255,255,0.40);
  --ink-12:  rgba(255,255,255,0.12);
  --ink-08:  rgba(255,255,255,0.08);

  --font-display: 'Owners XWide', 'Impact', sans-serif;
  --font-accent:  'Panno Text', 'Georgia', serif;
  --font-body:    'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 600px;            /* phone-width column, centered on desktop */
  --pad: 22px;              /* horizontal section padding */
  --radius: 6px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --display-tracking: -0.01em;
}

/* ── Reset ─────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--abyss);
  color: var(--surge);
  font-family: var(--font-body);
  line-height: 1.55;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Page column ───────────────────────────────────────── */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  background: var(--abyss);
  min-height: 100vh;
  box-shadow: 0 0 80px rgba(0,0,0,0.5);
  overflow-x: clip;
}

/* Desktop backdrop so the centered column reads intentionally */
@media (min-width: 660px) {
  body { background: #070A16; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0;
    background:
      radial-gradient(circle at 50% 0%, rgba(128,205,209,0.10), transparent 55%),
      #070A16;
  }
  .page { z-index: 1; }
}

/* ── Type helpers ──────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  line-height: 0.98;
  font-weight: 700;
}
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 600; }
.overline {
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pulse);
}
.teal { color: var(--pulse); }

/* ── Section scaffold ──────────────────────────────────── */
section { position: relative; }
.sec {
  padding: 56px var(--pad);
}
.sec-tight { padding: 40px var(--pad); }
.panel { background: var(--abyss-2); }
.divider { height: 1px; background: var(--ink-08); }

.sec-head {
  font-size: clamp(30px, 9vw, 40px);
  margin-bottom: 28px;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700;
  font-size: 19px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--pulse); color: var(--abyss);
  min-height: 60px;
  transition: transform 120ms var(--ease), background 150ms var(--ease), box-shadow 200ms var(--ease);
  box-shadow: 0 0 0 rgba(128,205,209,0);
  will-change: transform;
}
.btn:active { transform: scale(0.97); background: var(--pulse-dark); }
.btn .arrow { font-size: 22px; line-height: 0; transition: transform 150ms var(--ease); }
.btn:active .arrow { transform: translateX(4px); }
.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; min-height: 48px; padding: 12px 18px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pulse); border: 1px solid rgba(128,205,209,0.35); border-radius: var(--radius);
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}
.btn-ghost .arrow { font-size: 16px; }
.btn-ghost:active { transform: scale(0.98); background: rgba(128,205,209,0.1); }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--pulse); background: rgba(128,205,209,0.08); } }
.hero-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.hero-ctas .btn-ghost { margin-top: 0; min-height: 60px; }
@media (min-width: 860px) { .hero-ctas { flex-direction: row; align-items: stretch; } .hero-ctas .btn, .hero-ctas .btn-ghost { width: auto; padding-left: 28px; padding-right: 28px; } }
.inline-link { color: var(--pulse); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .btn:hover { background: var(--pulse-light); box-shadow: 0 0 28px rgba(128,205,209,0.45); }
}

/* ── Sticky urgency bar ────────────────────────────────── */
.urgency {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14,18,37,0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-12);
  padding: 9px var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.urgency-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.urgency-label {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pulse); font-weight: 600;
}
.cd { display: flex; align-items: flex-start; gap: 6px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 30px; }
.cd-num {
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  color: var(--pulse); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cd-lab { font-size: 8.5px; letter-spacing: 0.16em; color: var(--ink-40); text-transform: uppercase; margin-top: 3px; }
.cd-sep { font-family: var(--font-display); font-size: 20px; color: var(--ink-40); line-height: 1; }
.urgency-sub { font-size: 11px; color: var(--ink-40); letter-spacing: 0.04em; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 36px var(--pad) 44px;
  overflow: hidden;
  background: var(--abyss);
}
.hero-bg-mark {
  position: absolute; z-index: 0; pointer-events: none;
  width: 78%; max-width: 360px; opacity: 0.06;
  right: -8%; top: 50%; transform: translateY(-50%);
}
.hero-inner { position: relative; z-index: 2; }
.wordmark { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em; color: var(--surge); line-height: 1; white-space: nowrap; }
.wordmark img { height: 1.08em; width: auto; display: inline-block; margin-right: -0.04em; transform: translateY(-0.04em); }
.hero-logo { width: 220px; height: auto; margin-bottom: 30px; }
.hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 700; letter-spacing: var(--display-tracking);
  line-height: 0.96;
  font-size: clamp(36px, 11.5vw, 54px);
  margin-bottom: 18px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero-sub {
  font-family: var(--font-accent); font-style: italic; font-weight: 600;
  font-size: clamp(20px, 5.6vw, 24px);
  color: var(--surge); line-height: 1.25; margin-bottom: 16px;
}
.hero-qual {
  font-size: 15px; color: var(--ink-60); line-height: 1.5; max-width: 34ch;
}

/* ── Media placeholder ─────────────────────────────────── */
.ph {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 0%, #20284A 0%, transparent 60%),
    linear-gradient(160deg, #161D38 0%, #0B0F22 100%),
    var(--abyss-2);
  background-color: #141A33;
  display: flex; align-items: center; justify-content: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 12px, transparent 12px 24px);
  pointer-events: none;
}
.ph-vert { aspect-ratio: 9 / 16; width: 100%; }
.ph-label {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-40); font-weight: 600;
  background: rgba(14,18,37,0.5); padding: 4px 8px; border-radius: 3px;
  backdrop-filter: blur(4px);
}
.ph-play {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(128,205,209,0.16); border: 1.5px solid var(--pulse);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 0 24px rgba(128,205,209,0.25);
}
.ph-play svg { margin-left: 3px; }
.ph-mark {
  position: absolute; z-index: 1; width: 46%; opacity: 0.05;
  top: 50%; left: 50%; transform: translate(-50%,-58%);
}

/* ── Marquee ───────────────────────────────────────────── */
.marquee-wrap { padding: 30px 0 34px; overflow: hidden; }
.marquee-top { padding: 0 var(--pad); margin-bottom: 18px; }
.marquee {
  display: flex; gap: 12px; width: max-content;
  animation: scrollx 38s linear infinite;
}
.marquee-rev { animation-direction: reverse; }
.marquee:active { animation-play-state: paused; }
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.clip {
  width: 132px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--ink-08);
  transition: transform 150ms var(--ease);
}
.clip:active { transform: scale(0.96); }
.clip .ph { aspect-ratio: 9 / 16; }
.clip.post .ph { aspect-ratio: 4 / 5; }

/* ── YouTube embed ─────────────────────────────────────── */
.yt {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--ink-12);
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; cursor: pointer;
  background:
    radial-gradient(circle at 50% 40%, #1C2B4D, transparent 70%),
    #131A33;
  background-color: #131A33;
}
.nametag { margin-top: 18px; }
.nametag-name { font-family: var(--font-display); text-transform: uppercase; font-size: 19px; letter-spacing: 0.02em; }
.nametag-name .teal { font-weight: 700; }
.nametag-body { font-size: 14px; color: var(--ink-60); line-height: 1.55; margin-top: 8px; }
.nametag-body strong { color: var(--surge); font-weight: 600; }

/* ── Stats ─────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-08); border: 1px solid var(--ink-08); border-radius: 10px; overflow: hidden; }
.stat { background: var(--abyss); padding: 24px 10px; text-align: center; min-width: 0; }
.stat-num {
  font-family: var(--font-display); font-size: clamp(24px, 7.2vw, 36px);
  color: var(--pulse); line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  display: flex; justify-content: center; align-items: baseline;
}
.stat-val { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.stat-suf { display: inline-block; padding-right: 2px; }
.stat-lab { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); margin-top: 10px; font-weight: 600; }
.stats-credit {
  margin-top: 24px; text-align: center; font-size: 15px; line-height: 1.55;
  color: var(--ink-60); max-width: 42ch; margin-left: auto; margin-right: auto;
}
.stats-credit strong { color: var(--pulse); font-weight: 600; }

/* ── Full-width media slot ─────────────────────────────── */
.media-slot { width: 100%; }
.media-slot .ph { aspect-ratio: 9 / 16; }
.media-slot.short .ph { aspect-ratio: 4 / 5; }
.media-cap { padding: 12px var(--pad) 0; font-size: 12px; color: var(--ink-40); letter-spacing: 0.04em; text-align: center; }

/* ── Lists (for/not-for) ───────────────────────────────── */
.qlist { display: flex; flex-direction: column; gap: 18px; }
.qitem { display: flex; gap: 14px; align-items: flex-start; }
.qicon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.qicon.yes { background: rgba(128,205,209,0.14); border: 1.5px solid var(--pulse); }
.qicon.no  { background: rgba(255,255,255,0.05); border: 1.5px solid var(--ink-40); }
.qitem p { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.88); }

/* ── Offer intro ───────────────────────────────────────── */
.offer-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.offer-list .qitem p { font-size: 17px; }

/* ── Value stack cards ─────────────────────────────────── */
.vcards { display: flex; flex-direction: column; gap: 16px; }
.vcard {
  background: var(--abyss-2); border: 1px solid var(--ink-08);
  border-radius: 12px; padding: 24px 22px; position: relative; overflow: hidden;
}
.vcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pulse);
}
.vtag {
  display: inline-block; font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.08em; color: var(--abyss); background: var(--pulse);
  padding: 5px 12px; border-radius: var(--radius); margin-bottom: 14px;
}
.vcard h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 23px; letter-spacing: 0; margin-bottom: 10px; line-height: 1.05; }
.vcard p { font-size: 15px; color: var(--ink-60); line-height: 1.55; }

/* ── Reveal ────────────────────────────────────────────── */
.reveal { text-align: center; }
.reveal-tag {
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40);
  font-weight: 600; line-height: 1.5; max-width: 30ch; margin: 0 auto 22px;
}
.reveal-tag s { color: var(--ink-40); }
.reveal-banner {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(46px, 16vw, 72px); line-height: 0.9; color: var(--pulse);
  letter-spacing: -0.02em; margin-bottom: 18px;
  text-shadow: 0 0 40px rgba(128,205,209,0.35);
}
.reveal-sub { font-family: var(--font-accent); font-style: italic; font-size: 19px; color: var(--surge); margin-bottom: 30px; }

/* ── Risk reversal ─────────────────────────────────────── */
.risk { background: var(--horizon); }
.risk .sec-head { color: var(--surge); }
.risk-body { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 24px; }
.risk-power {
  font-family: var(--font-accent); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 6.5vw, 28px); line-height: 1.25; color: var(--surge);
  border-top: 1px solid rgba(255,255,255,0.2); padding-top: 24px;
}

/* ── Proof carousel (Instagram embeds + branded fallback) ─ */
.carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.car-track {
  flex: 1; min-width: 0; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.car-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--abyss-2); border: 1px solid var(--ink-12); color: var(--pulse);
  transition: background 150ms var(--ease), transform 120ms var(--ease), opacity 150ms var(--ease);
}
.car-arrow:active { transform: scale(0.94); background: rgba(128,205,209,0.12); }
.car-arrow:disabled { opacity: 0.25; pointer-events: none; }
.car-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.car-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-12); padding: 0; transition: background 150ms var(--ease), transform 150ms var(--ease); }
.car-dot.on { background: var(--pulse); transform: scale(1.35); }
@media (min-width: 560px) { .car-slide { flex-basis: calc(50% - 8px); } }

/* Instagram's injected embed — fit it to our grid */
.proof-embed.instagram-media {
  margin: 0 !important; min-width: 0 !important; width: 100% !important;
  max-width: 540px !important; background: #0E1225 !important;
  border: 1px solid var(--ink-08) !important; border-radius: 12px !important;
  box-shadow: none !important;
}
/* Branded fallback shown until the embed renders (or if blocked) */
.proof-fallback {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; aspect-ratio: 9 / 16;
  width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--ink-08);
  background:
    radial-gradient(120% 80% at 30% 0%, #20284A 0%, transparent 60%),
    linear-gradient(160deg, #161D38 0%, #0B0F22 100%), #141A33;
  transition: transform 150ms var(--ease);
}
.proof-fallback:active { transform: scale(0.97); }
.proof-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--surge); background: rgba(14,18,37,0.6); padding: 4px 8px 4px 7px; border-radius: 20px;
  backdrop-filter: blur(4px); border: 1px solid var(--ink-12);
}
.ig-glyph { flex: 0 0 auto; color: var(--pulse); }
.ph-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.proof-cap { text-align: center; font-family: var(--font-accent); font-style: italic; font-size: 16px; color: var(--ink-60); margin-top: 22px; }

/* ── Reviews / Senja ───────────────────────────────────── */
.senja-ph {
  border: 1px dashed var(--ink-12); border-radius: 12px; background: var(--abyss-2);
  padding: 40px 24px; text-align: center; color: var(--ink-40);
}
.senja-ph .overline { color: var(--ink-40); margin-bottom: 10px; }
.senja-ph p { font-size: 13px; line-height: 1.5; }

/* ── FAQ ───────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--abyss-2); border: 1px solid var(--ink-08); border-radius: 10px; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 20px; text-align: left;
  font-family: var(--font-display); text-transform: uppercase; font-size: 16px; letter-spacing: 0;
  min-height: 60px; line-height: 1.1;
}
.faq-icon { flex: 0 0 auto; width: 22px; height: 22px; position: relative; transition: transform 250ms var(--ease); color: var(--pulse); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease); }
.faq-a-inner { padding: 0 20px 20px; font-size: 15px; color: var(--ink-60); line-height: 1.6; }

/* ── Final CTA ─────────────────────────────────────────── */
.final { text-align: center; padding-bottom: 120px; }
.final-quote { font-family: var(--font-accent); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--surge); margin-bottom: 8px; }
.final-quote .who { display: block; font-style: normal; font-family: var(--font-body); font-size: 13px; color: var(--ink-40); letter-spacing: 0.06em; margin-top: 12px; text-transform: uppercase; }
.final-line { font-size: 15px; color: var(--ink-60); margin: 30px 0 18px; }

/* ── Footer ────────────────────────────────────────────── */
.footer { background: #090C1A; padding: 40px var(--pad) 110px; text-align: center; }
.footer-logo { width: 190px; height: auto; margin: 0 auto 24px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-bottom: 22px; }
.footer-links a { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; }
.footer-links a:active { color: var(--pulse); }
.footer-email { font-size: 15px; color: var(--pulse); letter-spacing: 0.02em; }

/* ── Persistent Apply bar ──────────────────────────────── */
.apply-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; justify-content: center;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--abyss) 55%, rgba(14,18,37,0));
  transform: translateY(140%); transition: transform 320ms var(--ease);
  pointer-events: none;
}
.apply-bar.show { transform: translateY(0); pointer-events: auto; }
.apply-bar .btn { max-width: var(--maxw); }

/* ── Apply modal (Typeform popup host) ─────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: stretch; justify-content: center;
  background: rgba(7,10,22,0.8); backdrop-filter: blur(6px);
}
.modal.open { display: flex; animation: fade 180ms var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative; width: 100%; max-width: 560px; background: var(--abyss);
  display: flex; flex-direction: column;
  animation: slideup 280ms var(--ease);
}
@keyframes slideup { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; color: var(--surge);
}
.modal-close:active { background: rgba(255,255,255,0.16); }
#tf-host { flex: 1; width: 100%; }
.tf-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 40px 30px; color: var(--ink-60);
}
.tf-placeholder .overline { color: var(--pulse); }
.tf-placeholder h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; color: var(--surge); }
.tf-placeholder p { font-size: 14px; line-height: 1.6; max-width: 34ch; }
.tf-placeholder code { font-family: monospace; color: var(--pulse-light); font-size: 12px; }

/* ── Entrance reveal ───────────────────────────────────── */
/* Content is static and always visible — no opacity/transform
   gating. This guarantees zero layout shift and that nothing can
   ever be stuck hidden. Liveliness comes from the marquee, the
   animated counters, the sticky apply bar, FAQ expand and hovers.
   (.r / .in retained as harmless hooks.) */
.r { }
@media (prefers-reduced-motion: reduce) {
  .marquee, .hero-cue { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥ 860px)
   Mobile stays the priority; this widens the canvas and
   re-flows sections into multi-column grids on big screens.
   ════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  :root { --pad: 48px; }

  .page { max-width: none; box-shadow: none; }
  body { background: var(--abyss); }
  body::before { display: none; }

  /* Centred, capped content inside full-bleed sections */
  .sec { padding: 104px 48px; }
  .sec > * { max-width: 860px; margin-left: auto; margin-right: auto; }
  .sec-head { font-size: clamp(46px, 4.4vw, 62px); margin-bottom: 36px; }

  /* ── Urgency bar: one row ── */
  .urgency { flex-direction: row; gap: 24px; padding: 12px 48px; }
  .urgency-label { font-size: 13px; }
  .cd-num { font-size: 26px; }
  .cd-unit { min-width: 38px; }
  .urgency-sub { font-size: 13px; }

  /* ── Hero ── */
  .hero { padding: 56px 72px 64px; }
  .hero-inner { max-width: 1100px; margin: 0 auto; }
  .hero-bg-mark { right: 6%; }
  .hero-logo { width: 300px; margin-bottom: 36px; }
  .hero h1 { font-size: clamp(58px, 5.4vw, 96px); margin-bottom: 24px; }
  .hero-sub { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 20px; }
  .hero-qual { font-size: 20px; max-width: 46ch; }
  .hero-bg-mark { max-width: 480px; opacity: 0.07; right: -2%; }

  /* ── Marquee: taller clips read better on wide screens ── */
  .marquee-wrap { padding: 44px 0 48px; }
  .marquee-top { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 48px; }
  .clip { width: 200px; }

  /* ── Founder video ── */
  .yt { max-width: 820px; }

  /* ── Stats: 4 across ── */
  .stats { grid-template-columns: repeat(4, 1fr); max-width: 1040px; }
  .stat { padding: 40px 14px; }
  .stat-num { font-size: 38px; }

  /* ── For / Not-for: 2-column item grid ── */
  .qlist { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; max-width: 1000px; }
  .qitem p { font-size: 18px; }
  /* Offer intro stays a single readable column */
  .offer-list { display: flex; max-width: 660px; }
  .offer-list .qitem p { font-size: 19px; }

  /* ── Value cards: 2 across ── */
  .vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1000px; align-items: start; }
  .vcard { padding: 36px 32px; }
  .vcard h3 { font-size: 28px; }
  .vcard p { font-size: 17px; }

  /* ── Reveal ── */
  .reveal-banner { font-size: clamp(80px, 9vw, 120px); }
  .reveal-sub { font-size: 24px; }

  /* ── Risk reversal ── */
  .risk-body { font-size: 20px; }

  /* ── Proof carousel: 3 across ── */
  .carousel { max-width: 1120px; gap: 16px; }
  .car-track { gap: 22px; }
  .car-slide { flex-basis: calc((100% - 44px) / 3); }
  .car-arrow { width: 52px; height: 52px; }
  .proof-cap { font-size: 19px; margin-top: 30px; }

  /* ── Full-width vertical media → centred phone-width frame ── */
  .media-slot { padding: 0 48px; }
  .media-slot .ph { max-width: 420px; margin-left: auto; margin-right: auto; border-radius: 14px; }
  .media-slot.short .ph { max-width: 720px; }
  .media-cap { font-size: 13px; }

  /* ── Reviews / Senja ── */
  #senja-host { max-width: 1040px; }

  /* ── FAQ ── */
  .faq { max-width: 800px; }
  .faq-q { font-size: 18px; padding: 24px 26px; }
  .faq-a-inner { font-size: 16px; padding: 0 26px 24px; }

  /* ── Final CTA ── */
  .final-quote { font-size: 24px; max-width: 720px; }
  .final-line { font-size: 17px; }

  /* ── CTAs: centred, not full-bleed ── */
  .sec .btn { max-width: 460px; }

  /* ── Footer ── */
  .footer { padding: 56px 48px 64px; }
  .footer-logo { width: 220px; }

  /* ── Persistent apply bar ── */
  .apply-bar { padding: 16px 48px calc(16px + env(safe-area-inset-bottom)); }
  .apply-bar .btn { max-width: 460px; }
}

/* Extra breathing room on very wide screens */
@media (min-width: 1320px) {
  .sec > * { max-width: 920px; }
  .hero { padding: 80px 96px 88px; }
  .stats, .qlist, .vcards { max-width: 1100px; }
}


/* Subtle button glow + hero gradient */
.btn { box-shadow: 0 0 18px rgba(128,205,209,0.18); }
.btn-ghost { box-shadow: 0 0 14px rgba(128,205,209,0.08); }
.hero {
  background:
    radial-gradient(80% 70% at 90% 0%, rgba(128,205,209,0.12), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(31,59,115,0.45), transparent 65%),
    var(--abyss);
}

/* ── Artist logo slider ──────────────────────────────── */
.logo-wrap { padding: 34px 0 38px; overflow: hidden; }
.logo-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-marquee { display: flex; align-items: center; gap: 48px; width: max-content; padding-right: 48px; animation: scrollx 32s linear infinite; }
.logo-item { flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: center; }
.logo-item img { height: 100%; width: auto; max-width: 150px; object-fit: contain; opacity: 0.8; transition: opacity 150ms var(--ease); }
@media (hover: hover) { .logo-item img:hover { opacity: 1; } }
@media (min-width: 860px) {
  .logo-wrap { padding: 48px 0 52px; }
  .logo-marquee { gap: 80px; padding-right: 80px; }
  .logo-item { height: 72px; }
  .logo-item img { max-width: 210px; }
}
@media (prefers-reduced-motion: reduce) { .logo-marquee { animation: none; } }
.logo-text { font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: var(--surge); opacity: 0.8; white-space: nowrap; line-height: 1; }
@media (min-width: 860px) { .logo-text { font-size: 34px; } }