/* ─────────────────────────────────────────────────
   WikiClip — Landing page
   Editorial DNA borrowed from Echo Harbor Tech;
   WikiClip palette (cream / ink / coral / ocean / mint).
   ───────────────────────────────────────────────── */

:root {
  --ink: #0b0b0d;
  --ink-soft: #2b2a2e;
  --cream: #f8f4ee;
  --cream-warm: #fdf6e3;
  --paper: #fffdf7;
  --coral: #ff6b4a;
  --coral-dark: #e55335;
  --brass: #b78a3d;
  --ocean: #1f3c5b;
  --ocean-deep: #142640;
  --mint: #d2f7e4;
  --rule: rgba(11, 11, 13, 0.12);
  --rule-strong: rgba(11, 11, 13, 0.22);
  --shadow: 0 30px 80px -40px rgba(16, 24, 40, 0.35);
  --radius: 18px;
  --gutter: clamp(24px, 5vw, 80px);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Reset & base ────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

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

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Reveal animation ──────────────────────────────
   Fail-open: only hide when JS is confirmed available
   (html.js is set by an inline script in <head>).
   ─────────────────────────────────────────────── */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.reveal-inner {
  display: inline-block;
}

/* ── Masthead ────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 244, 238, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--gutter);
  max-width: 1320px;
  margin: 0 auto;
}

.masthead-mark img {
  height: 55px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  font-size: .92rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:hover {
  color: var(--ink);
  border-color: var(--coral);
}

.masthead-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  vertical-align: middle;
  margin-right: 6px;
}

.masthead-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.link-quiet {
  text-decoration: none;
  font-size: .92rem;
  color: var(--ink-soft);
}
.link-quiet:hover { color: var(--ink); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .masthead-meta { display: none; }
  .masthead-cta .link-quiet { display: none; }
  .menu-toggle { display: inline-block; }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 0;
    margin: 0;
    padding: 4px var(--gutter) 10px;
    background: var(--cream);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .07);
    animation: menu-drop .18s ease;
  }
  .nav-links.is-open li { padding: 0; }
  .nav-links.is-open a {
    display: block;
    padding: 13px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav-links.is-open li:last-child a { border-bottom: 0; }
}

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); border-color: var(--ink); }

.btn-solid {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn-solid:hover { background: var(--coral-dark); border-color: var(--coral-dark); }

.btn-brass {
  background: var(--brass);
  color: var(--paper);
  border-color: var(--brass);
}
.btn-brass:hover { background: #946d2d; border-color: #946d2d; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-sm { padding: 8px 14px; font-size: .85rem; }
.btn-lg { padding: 16px 24px; font-size: 1rem; }

.btn-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Dark sections invert button defaults */
.section-dark .btn {
  border-color: rgba(255, 253, 247, 0.25);
  color: var(--paper);
}
.section-dark .btn:hover { border-color: var(--paper); }
.section-dark .btn-solid {
  background: var(--paper);
  color: var(--ocean-deep);
  border-color: var(--paper);
}
.section-dark .btn-solid:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}
.section-dark .btn-ghost { color: var(--paper); }

/* ── Section shell ───────────────────────────────── */
main > section {
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--rule);
}
main > section:first-child { border-top: 0; }

.section-dark {
  background: var(--ocean-deep);
  color: rgba(255, 253, 247, 0.86);
}
.section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark .section-no { color: var(--mint); }
.section-dark .eyebrow { color: var(--paper); opacity: .72; }
.section-dark .dot { background: var(--mint); }
.section-dark .lede em { color: var(--mint); font-style: italic; }

.section-head {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
  max-width: 880px;
}
.section-head .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-no { color: var(--coral); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2 em { font-style: italic; color: var(--coral); }
h2 em i { font-style: italic; }

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.25;
}

.lede {
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.lede em { font-style: italic; color: var(--ink); }
.dark-lede { color: rgba(255, 253, 247, 0.78); }

p { color: var(--ink-soft); }
.section-dark p { color: rgba(255, 253, 247, 0.78); }

.ital { font-family: var(--font-display); font-style: italic; }
.roman {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--coral);
  font-size: 1.4rem;
  line-height: 1;
  min-width: 2.2rem;
  display: inline-block;
}

/* ── Hero ────────────────────────────────────────── */
#hero {
  padding-top: clamp(60px, 8vw, 110px);
  border-top: 0;
}

.hero-stripe {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.hero-stripe .line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 28px;
  color: var(--ink-soft);
}
.pill-glyph { color: var(--coral); width: 12px; height: 12px; display: inline-block; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.hero-title .line { display: block; }
.hero-title em { font-style: italic; font-weight: 600; }
.grad-coral {
  background: linear-gradient(120deg, var(--coral), #ffb199 70%, var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-ocean {
  background: linear-gradient(120deg, var(--ocean), #5e7ea5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-aside { display: grid; gap: 24px; }
.hero-dek {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink);
}
.hero-dek em { font-style: italic; color: var(--coral-dark); }

.hero-meta { display: grid; gap: 8px; }
.hero-meta .row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px dashed var(--rule);
  font-size: .9rem;
  color: var(--ink-soft);
}
.hero-meta .row:last-child { border-bottom: 1px dashed var(--rule); }
.hero-meta .row span:first-child {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--coral);
  padding-top: 2px;
}

.hero-cta {
  margin-top: 42px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Workspace mock ──────────────────────────────── */
.workspace-mock {
  margin-top: clamp(60px, 9vw, 120px);
  text-align: center;
}
.wm-frame {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(135deg, #fff8e0 0%, #fdecc8 100%);
  display: grid;
  grid-template-columns: 88px 1fr;
  min-height: 580px;
  box-shadow: var(--shadow);
  text-align: left;
}
@media (max-width: 720px) {
  .wm-frame { grid-template-columns: 64px 1fr; min-height: 480px; }
}

.wm-rail {
  background: linear-gradient(180deg, #fff3d6 0%, #fde2b1 100%);
  border-right: 1px solid rgba(11,11,13,0.06);
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.wm-logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6b4a 0%, #e55335 70%);
  position: relative;
  box-shadow: 0 4px 12px rgba(229, 83, 53, 0.35);
}
.wm-logo::after {
  content: "";
  position: absolute;
  inset: 16px 14px auto auto;
  width: 8px; height: 8px;
  background: var(--paper);
  border-radius: 50%;
}
.wm-rail-item {
  font-size: .62rem;
  text-transform: capitalize;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: .04em;
}
.wm-rail-item.is-active { color: var(--ink); }
.wm-rail-glyph {
  width: 22px; height: 22px;
  background: var(--ink-soft);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.wm-rail-item.is-active .wm-rail-glyph { background: var(--ink); }
.wm-rail-glyph-files {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
}
.wm-rail-glyph-folders {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
.wm-rail-glyph-more {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='12' r='1.5'/><circle cx='12' cy='12' r='1.5'/><circle cx='19' cy='12' r='1.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='12' r='1.5'/><circle cx='12' cy='12' r='1.5'/><circle cx='19' cy='12' r='1.5'/></svg>");
}

.wm-pane { padding: 22px 28px 32px; min-width: 0; }
.wm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.wm-btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.wm-btn-row-end { flex: 0; }
.wm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}
.wm-pill-solid {
  background: var(--coral);
  color: var(--paper);
  box-shadow: 0 4px 14px rgba(229, 83, 53, 0.3);
}
.wm-pill-check::before { content: "✓"; font-weight: 700; }
.wm-pill-soft {
  background: rgba(255, 107, 74, 0.12);
  color: var(--coral-dark);
  padding: 4px 8px;
  font-size: .72rem;
  border-radius: 8px;
}
.wm-search {
  background: var(--paper);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .85rem;
  color: rgba(11,11,13,0.4);
  border: 1px solid rgba(11,11,13,0.06);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wm-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a89b8, #2a4263);
  flex-shrink: 0;
}

.wm-subbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 22px;
}
.wm-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

.wm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .wm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wm-grid { grid-template-columns: 1fr; } }

.wm-card {
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid rgba(11,11,13,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  box-shadow: 0 8px 22px -16px rgba(16, 24, 40, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wm-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(16, 24, 40, 0.4); }
.wm-card-dim { opacity: .65; }

.wm-card-folder { background: #fde2c2; }
.wm-card-folder .wm-tab {
  height: 26px;
  background: #f9c688;
  border-radius: 12px 12px 0 0;
  margin: -1px -1px 0;
  position: relative;
}
.wm-card-folder .wm-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 8px;
  background: #fdd7a0;
  border-radius: 0 12px 0 0;
}
.wm-doc-glyph {
  width: 50px; height: 62px;
  border-radius: 6px;
  background: #fcd9a8;
  border: 2px solid #f4b975;
  position: relative;
  margin: 18px auto 0;
  opacity: .85;
}
.wm-doc-glyph::before,
.wm-doc-glyph::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: #f4b975;
  border-radius: 2px;
}
.wm-doc-glyph::before { top: 14px; }
.wm-doc-glyph::after { top: 22px; right: 18px; }

.wm-thumb {
  height: 96px;
  background-size: cover;
  background-position: center;
}
.wm-thumb-article {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #d9c19a 0%, #b89673 100%);
  position: relative;
}
.wm-thumb-article::before {
  content: "";
  position: absolute;
  inset: 12px;
  background:
    repeating-linear-gradient(transparent 0 14px, rgba(255,255,255,0.4) 14px 15px),
    rgba(255, 240, 210, 0.4);
  border-radius: 4px;
  opacity: .6;
}
.wm-thumb-clip {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ffd0a3 0%, #f5b07a 50%, #d97a4a 100%);
}
.wm-thumb-audio {
  background: linear-gradient(135deg, #c5d3e3 0%, #94aac6 100%);
  position: relative;
  overflow: hidden;
}
.wm-thumb-audio::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(31, 60, 91, 0.35) 0 2px,
      transparent 2px 6px,
      rgba(31, 60, 91, 0.25) 6px 9px,
      transparent 9px 14px);
  mask: linear-gradient(180deg,
    transparent 30%,
    black 45%,
    black 55%,
    transparent 70%);
}

.wm-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.wm-card-folder .wm-card-body { padding-top: 18px; align-items: center; text-align: center; }
.wm-card-title {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wm-card-meta {
  font-size: .76rem;
  color: rgba(11,11,13,0.55);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wm-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
}
.wm-status {
  font-size: .72rem;
  color: #1f7a3e;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.wm-status-pending { color: rgba(11,11,13,0.45); }
.wm-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2ea35a;
  box-shadow: 0 0 0 3px rgba(46, 163, 90, 0.18);
}

.workspace-caption {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Feature grid (What it is) ──────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.feature-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.feature-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.feature-card.featured h3 { color: var(--paper); }
.feature-card.featured p { color: rgba(255, 253, 247, 0.78); }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--cream-warm);
  color: var(--coral-dark);
  display: grid;
  place-items: center;
}
.feature-card.featured .feature-icon {
  background: rgba(255, 107, 74, 0.18);
  color: var(--coral);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card p { font-size: .94rem; }

/* ── Workspace section (dark) ───────────────────── */
.workspace-body { max-width: 920px; }
.workspace-callouts {
  list-style: none;
  display: grid;
  gap: 28px;
  margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.workspace-callouts li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.workspace-callouts h3 { margin-bottom: 6px; }
.workspace-callouts p { font-size: .98rem; }
.section-dark .workspace-callouts .roman { color: var(--mint); }

/* ── Lenses ──────────────────────────────────────── */
.lens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.lens-chip {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.lens-chip:hover,
.lens-chip[aria-expanded="true"] {
  transform: translateY(-2px);
  border-color: var(--coral);
  background: var(--cream-warm);
}
.lens-chip[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.lens-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  font-style: italic;
}
.lens-hint {
  font-size: .82rem;
  color: var(--ink-soft);
}
.lens-chip[aria-expanded="true"] .lens-hint { color: rgba(255, 253, 247, 0.75); }

.lens-detail {
  margin-top: 24px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 30px;
  min-height: 140px;
}
.lens-detail-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.lens-detail-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink);
  line-height: 1.4;
}
.lens-detail-example {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-body);
  font-style: normal;
  font-size: .92rem;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
}
.lens-detail-example b { color: var(--ink); }

/* ── How it works ────────────────────────────────── */
.how-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  counter-reset: how;
}
@media (max-width: 900px) { .how-list { grid-template-columns: 1fr; } }
.how-list li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.how-num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--coral);
}
.how-list h3 { font-size: 1.4rem; }

/* ── Built for ───────────────────────────────────── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.audience-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: grid;
  gap: 10px;
}
.audience-card h3 { font-size: 1.15rem; }

/* ── Plans ───────────────────────────────────────── */
/* --plan-columns is set inline from the number of plans the API returned;
   three (the old hard-coded layout) if it is absent. */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(var(--plan-columns, 3), minmax(0, 1fr));
  /* name · blurb · features · CTA. Cards adopt these four tracks via subgrid,
     so every card's bullets begin on the same line however far the name or
     blurb above them wrapped, and every CTA sits on the same baseline. Without
     it a two-line headline shunted one card's whole list down and the row read
     as ragged. */
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  margin-top: 40px;
}
.plan-card {
  background: rgba(255, 253, 247, 0.04);
  border: 1px solid rgba(255, 253, 247, 0.18);
  border-radius: var(--radius);
  padding: 32px 28px;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 14px;
  color: var(--paper);
  position: relative;
}
/* Stacked, there is no row to align to, so the cards go back to being plain
   flex columns. Also the fallback for anything without subgrid. */
@supports not (grid-template-rows: subgrid) {
  .plan-card { display: flex; flex-direction: column; gap: 14px; }
}
@media (max-width: 900px) {
  .plans-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .plan-card { grid-row: auto; display: flex; flex-direction: column; gap: 14px; }
  /* One column: the card is page-width, so the headline has room again. */
  .plan-name { font-size: 2.1rem; }
}
.plan-card-featured,
.section-dark .plan-card-featured p {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.section-dark .plan-card-featured p:not(.plan-badge) { background: transparent; border: 0; }
.plan-card-featured .plan-name { color: var(--ink); }
.plan-card-featured .plan-blurb { color: var(--ink-soft); }
.plan-card-featured ul li { color: var(--ink-soft); }
.plan-badge {
  position: absolute;
  top: -12px;
  left: 28px;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--paper);
}
.plan-card-featured .plan-badge { background: var(--coral); color: var(--paper); }
.plan-name {
  font-family: var(--font-display);
  /* Fluid, because the card narrows with every extra column: "Professional"
     does not fit on one line at 2.1rem in a quarter-width card, and four
     columns is the most the grid lays out. Clamped so it neither shrinks to
     nothing nor outgrows the card at wide viewports. */
  font-size: clamp(1.35rem, 1.45vw + 0.35rem, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  /* `break-word`, not `anywhere`: anywhere splits mid-word the moment a line
     is tight, which is how "Professional" came to render as "Professiona /
     l". This only breaks a word that cannot fit on a line of its own, and
     hyphenates it when it does. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.plan-blurb {
  font-size: .94rem;
  line-height: 1.45;
  color: rgba(255, 253, 247, 0.7);
  /* Bounded so one over-long description in the admin cannot stretch every
     card in the row. The full text stays in the DOM. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plan-card ul { list-style: none; display: grid; gap: 8px; font-size: .94rem; }
.plan-card ul li {
  padding-left: 18px;
  position: relative;
  color: rgba(255, 253, 247, 0.78);
}
.plan-card-featured ul li { color: var(--ink-soft); }
.plan-card ul li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--mint);
  font-weight: 700;
}
.plan-card-featured ul li::before { color: var(--coral); }
.plan-card .btn { margin-top: auto; justify-self: start; align-self: end; }
.section-dark .plan-card-featured .btn-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.section-dark .plan-card-featured .btn-solid:hover {
  background: var(--coral-dark);
  border-color: var(--coral-dark);
  color: var(--paper);
}
.section-dark .plan-card-featured .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.section-dark .plan-card-featured .btn-ghost:hover { border-color: var(--ink); }

/* ── Signup CTA card ─────────────────────────────── */
.cta-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 26px;
  padding: 56px clamp(28px, 5vw, 56px);
  box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
}
.cta-text .eyebrow { color: var(--mint); }
.cta-text .dot { background: var(--mint); }
.cta-text h2 { color: var(--paper); margin: 14px 0 14px; }
.cta-text .lead { color: rgba(255, 253, 247, 0.78); font-size: 1.05rem; }
.cta-actions { display: grid; gap: 14px; }

.cta-card .btn { border-color: rgba(255, 253, 247, 0.25); color: var(--paper); }
.cta-card .btn:hover { border-color: var(--paper); }
.cta-card .btn-solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.cta-card .btn-solid:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}

.signup-form {
  display: flex;
  gap: 8px;
  background: rgba(255, 253, 247, 0.06);
  border: 1px solid rgba(255, 253, 247, 0.18);
  padding: 6px;
  border-radius: 999px;
}
.signup-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font: inherit;
  padding: 10px 16px;
  min-width: 0;
}
.signup-form input::placeholder { color: rgba(255, 253, 247, 0.4); }
.signup-form .btn { padding: 10px 18px; font-size: .9rem; }
.form-status {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.form-status-success { color: var(--mint); }
.form-status-info { color: rgba(255, 253, 247, 0.6); }
.form-status-error { color: #ffb199; }

/* ── Contact ─────────────────────────────────────── */
.contact-body {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  margin-top: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-body { grid-template-columns: 1fr; gap: 32px; }
}

.contact-aside { display: grid; gap: 22px; }
.contact-aside .lede { font-size: 1.02rem; }

.contact-detail {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px dashed var(--rule);
  font-size: .95rem;
}
.contact-detail:last-of-type { border-bottom: 1px dashed var(--rule); }
.contact-detail > span:first-child {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--coral);
}
.contact-detail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact-detail a:hover { border-color: var(--ink); }

.contact-form {
  display: grid;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-group { display: grid; gap: 6px; }
.form-group label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-group .hint { color: rgba(11,11,13,0.4); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .82rem; }

.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(11,11,13,0.4); }
.form-group input:focus,
.form-group textarea:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--paper);
}
.form-group.is-error input,
.form-group.is-error textarea {
  border-color: #c0392b;
  background: #fff5f3;
}

.field-error {
  color: #c0392b;
  font-size: .82rem;
  font-family: var(--font-body);
}

.form-banner {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .92rem;
  background: #fdecea;
  color: #8a2118;
  border: 1px solid #f4c2bb;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-actions .btn[data-submit][disabled] {
  opacity: .65;
  cursor: progress;
  transform: none;
}

.form-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-status.is-success { color: #1f7a3e; }
.form-status.is-error { color: #c0392b; }
.form-status.is-sending { color: var(--ink-soft); }

/* ── FAQ ─────────────────────────────────────────── */
.faq-container {
  display: grid;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.faq-container details {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.faq-container summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
}
.faq-container summary::-webkit-details-marker { display: none; }
.faq-container .toggle {
  font-family: var(--font-mono);
  color: var(--coral);
  font-size: 1.2rem;
  transition: transform .2s ease;
}
.faq-container details[open] .toggle { transform: rotate(45deg); }
.faq-container details p {
  padding-top: 12px;
  max-width: 70ch;
  font-size: .98rem;
}

/* ── Footer ──────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255, 253, 247, 0.78);
  padding: 80px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 253, 247, 0.12);
}
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-wordmark img { height: 30px; filter: invert(1) brightness(2); }
.footer-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  margin-top: 12px;
  color: var(--paper);
}
.footer-credit {
  margin-top: 8px;
  font-size: .85rem;
  color: rgba(255, 253, 247, 0.55);
}
.footer-credit a { color: var(--mint); text-decoration: none; }
.footer-credit a:hover { text-decoration: underline; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a {
  color: rgba(255, 253, 247, 0.78);
  text-decoration: none;
  font-size: .92rem;
}
.footer-col a:hover { color: var(--paper); }
.footer-col .coming-soon {
  color: rgba(255, 253, 247, 0.4);
  font-size: .92rem;
  cursor: default;
}
.footer-col .coming-soon .soon-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 253, 247, 0.35);
  margin-left: 6px;
  white-space: nowrap;
}

.footer-base {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 253, 247, 0.45);
}
.footer-base a {
  color: rgba(255, 253, 247, 0.65);
  text-decoration: none;
}
.footer-base a:hover { color: var(--paper); }
.footer-legal {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

/* ── Legal pages (Privacy & Terms) ───────────────── */
.legal-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 36px; }
}

.legal-toc {
  position: sticky;
  top: 110px;
}
@media (max-width: 900px) {
  .legal-toc { position: static; }
}
.legal-toc .section-no {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  margin-top: 16px;
  display: grid;
  gap: 2px;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: .88rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s ease;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--coral);
}
.legal-toc a:hover { color: var(--ink); }

.legal-body { max-width: 72ch; }
.legal-updated {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.legal-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 48px 0 14px;
}
.legal-body h3 {
  font-style: italic;
  font-size: 1.08rem;
  margin: 26px 0 10px;
}
.legal-body p { margin-bottom: 14px; }
.legal-body p,
.legal-body li { font-size: .98rem; }
.legal-body p strong,
.legal-body li strong { color: var(--ink); }
.legal-body ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.legal-body ul li {
  padding-left: 18px;
  position: relative;
  color: var(--ink-soft);
}
.legal-body ul li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--coral);
  font-weight: 700;
}
.legal-body a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .15s ease;
}
.legal-body a:hover { border-color: var(--coral); }
.legal-crossref {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ── In practice — field-plate slideshow ─────────── */
.fieldshow { margin-top: 48px; }

.fs-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 18px;
  scrollbar-width: none;
}
.fs-tabs::-webkit-scrollbar { display: none; }
.fs-tab {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 247, 0.22);
  background: transparent;
  color: rgba(255, 253, 247, 0.62);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fs-tab:hover { color: var(--paper); border-color: var(--paper); }
.fs-tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--ocean-deep);
  border-color: var(--paper);
}

.fs-stage {
  overflow: hidden;
  border: 1px solid rgba(255, 253, 247, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(255, 107, 74, 0.08) 0%, transparent 55%),
    rgba(255, 253, 247, 0.03);
}
.fs-track {
  display: flex;
  transition: transform .6s cubic-bezier(.23, .6, .22, 1);
}
.fs-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
}
@media (max-width: 900px) {
  .fs-slide { grid-template-columns: 1fr; gap: 32px; }
}

/* Beat the `.section-dark p` color rule: paper cards carry ink text. */
.fieldshow .fs-plate {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 16px;
}
/* Stage interiors are always dark, whatever the section around them. */
.fieldshow .fs-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 14px;
}
.fieldshow .fs-title em { font-style: italic; color: var(--coral); }
.fieldshow .fs-body { font-size: 1.02rem; color: rgba(255, 253, 247, 0.78); }

.fs-rows { display: grid; margin-top: 22px; }
.fs-rows .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px dashed rgba(255, 253, 247, 0.18);
  font-size: .9rem;
}
.fs-rows .row:last-child { border-bottom: 1px dashed rgba(255, 253, 247, 0.18); }
.fs-rows .row span:first-child {
  font-family: var(--font-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--mint);
  padding-top: 2px;
}
.fs-rows .row span:last-child { color: rgba(255, 253, 247, 0.72); }

/* The before → after strip on field plates */
.fs-upgrade {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px dashed rgba(255, 253, 247, 0.28);
  border-radius: 14px;
}
.fs-upgrade .fsu-eyebrow {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 8px;
}
.fs-upgrade .fsu-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: .95rem;
}
.fs-upgrade .fsu-before {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(255, 253, 247, 0.55);
}
.fs-upgrade .fsu-arrow { color: var(--coral); }
.fs-upgrade .fsu-after { color: var(--paper); font-weight: 500; }

/* Plate entrance drift, gated on .js like [data-reveal] */
.js .fs-copy,
.js .fs-visual {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.js .fs-slide.is-active .fs-copy,
.js .fs-slide.is-active .fs-visual { opacity: 1; transform: none; }
.js .fs-slide.is-active .fs-visual { transition-delay: .32s; }

/* The vignette: a clip card with a Lens result pinned over it */
.fs-visual { position: relative; }
@media (max-width: 900px) {
  .fs-visual { max-width: 420px; }
}
.fsv-card {
  background: var(--paper);
  border: 1px solid rgba(11, 11, 13, 0.06);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
  color: var(--ink);
}
.fsv-clip {
  width: min(85%, 340px);
  /* Deep bottom padding: the Lens card overlaps into it without covering text. */
  padding: 14px 16px 46px;
  transform: rotate(-1.6deg);
}
.fsv-thumb {
  height: 58px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--fsv-soft, #ffd0a3) 0%, var(--fsv, #e55335) 100%);
  position: relative;
  overflow: hidden;
}
.fsv-thumb::after {
  content: "";
  position: absolute;
  inset: 10px 12px;
  border-radius: 4px;
  background: repeating-linear-gradient(transparent 0 9px, rgba(255, 253, 247, 0.45) 9px 10px);
  opacity: .5;
}
.fsv-card .fsv-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11, 11, 13, 0.5);
  margin-bottom: 4px;
}
.fsv-card .fsv-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
}
.fsv-lens {
  width: min(94%, 380px);
  margin: -34px 0 0 auto;
  padding: 16px 18px;
  transform: rotate(1.1deg);
  position: relative;
  border-top: 3px solid var(--fsv, #e55335);
}
.fsv-card .fsv-eyebrow {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fsv, #e55335);
  margin-bottom: 6px;
}
.fsv-card .fsv-line {
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 8px 0 8px 14px;
  border-top: 1px dashed var(--rule);
  position: relative;
}
.fsv-line em { font-style: italic; }
.fsv-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--fsv, #e55335);
  opacity: .55;
}
.fsv-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px dashed var(--rule);
}
.fsv-chain span {
  font-size: .78rem;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.fsv-chain span.is-custom {
  background: var(--fsv, #e55335);
  border-color: var(--fsv, #e55335);
  color: var(--paper);
}
.fsv-chain i {
  font-style: normal;
  font-size: .8rem;
  color: rgba(11, 11, 13, 0.4);
}
.fsv-card .fsv-status {
  margin-top: 10px;
  font-size: .74rem;
  font-weight: 500;
  color: #1f7a3e;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fsv-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2ea35a;
  box-shadow: 0 0 0 3px rgba(46, 163, 90, 0.18);
}

/* Controls: arrows, segmented progress, folio counter */
.fs-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.fs-arrow {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 247, 0.25);
  background: transparent;
  color: var(--paper);
  font-size: 1.05rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.fs-arrow:hover {
  background: var(--paper);
  color: var(--ocean-deep);
  border-color: var(--paper);
  transform: translateY(-1px);
}
.fs-progress {
  flex: 1;
  display: flex;
  gap: 6px;
}
.fs-seg {
  position: relative;
  flex: 1;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fs-seg::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: rgba(255, 253, 247, 0.18);
}
.fs-seg .fill {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
}
.fs-seg.is-done .fill { transform: scaleX(1); }
.fs-seg.is-active .fill { animation: fs-fill var(--fs-duration, 8s) linear forwards; }
.fieldshow.is-paused .fs-seg.is-active .fill { animation-play-state: paused; }
@keyframes fs-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.fs-counter {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(255, 253, 247, 0.55);
  white-space: nowrap;
}
.fs-counter [data-fs-current] { color: var(--paper); }

.fieldshow .fs-footnote {
  margin-top: 18px;
  font-size: .85rem;
  color: rgba(255, 253, 247, 0.5);
  max-width: 70ch;
}

/* Light-section variant: ink stage, light chrome around it */
.fieldshow-light .fs-tab {
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}
.fieldshow-light .fs-tab:hover { border-color: var(--ink); color: var(--ink); }
.fieldshow-light .fs-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.fieldshow-light .fs-stage {
  border-color: var(--ink);
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(255, 107, 74, 0.14) 0%, transparent 55%),
    var(--ink);
  box-shadow: var(--shadow);
}
.fieldshow-light .fs-arrow { border-color: var(--rule-strong); color: var(--ink); }
.fieldshow-light .fs-arrow:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.fieldshow-light .fs-seg::before { background: var(--rule); }
.fieldshow-light .fs-counter { color: var(--ink-soft); }
.fieldshow-light .fs-counter [data-fs-current] { color: var(--ink); }
.fieldshow-light .fs-footnote { color: rgba(11, 11, 13, 0.55); }

@media (max-width: 600px) {
  .fs-controls { flex-wrap: wrap; gap: 12px; }
  .fs-progress { order: 3; flex-basis: 100%; }
}

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }

  /* Slideshow: no autoplay, so the active segment reads as a position marker. */
  .fs-seg.is-active .fill { transform: scaleX(1); }
  .js .fs-copy,
  .js .fs-visual { opacity: 1; transform: none; }
}


/* ---- Hero "try it" capture box -------------------------------------------
   The landing page's primary action is a real capture, not a form: the input
   posts to the app's /clip deep link, which pre-fills the clip flow (and
   survives the login round-trip for logged-out visitors). */
.hero-try {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 8px;
}
.hero-try input[type="url"] {
  flex: 1 1 320px;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}
.hero-try input[type="url"]:focus {
  outline: none;
  border-color: #f3a20d;
  box-shadow: 0 0 0 3px rgba(243, 162, 13, 0.25);
}
.hero-try .btn {
  height: 52px;
}
.hero-try-note {
  margin: 0 0 8px;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ── Cookie consent banner ─────────────────────────
   Shown until the visitor chooses; the Google tag only
   loads after "Accept" (basic consent mode, see main.js).
   ─────────────────────────────────────────────── */
.consent-banner {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent-banner[hidden] { display: none; }
.consent-banner-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}
.consent-text {
  font-size: .9rem;
  line-height: 1.5;
}
.consent-text a { color: var(--coral-dark); }
.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .consent-banner-inner { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: flex-end; }
}

/* Footer button styled as a legal link ("Cookie preferences"). */
.footer-link-btn {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 253, 247, 0.65);
  cursor: pointer;
}
.footer-link-btn:hover { color: var(--paper); }


/* ═════════════════════════════════════════════════
   Waitlist landing (LANDING_MODE=waitlist)
   The launch edition: same broadsheet DNA as the full
   page, one job. The countdown is a newspaper clipping
   pinned to the page — the logo's torn paper + red pin.
   ═════════════════════════════════════════════════ */

/* Slim masthead: mark · dateline · sign-in. */
.masthead-slim { grid-template-columns: auto 1fr auto; }
.masthead-slim .masthead-meta { justify-content: center; }
.masthead-account {
  font-size: .88rem;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .masthead-slim .masthead-meta { display: none; }
  .masthead-slim { grid-template-columns: auto 1fr; }
  .masthead-slim .masthead-cta { justify-self: end; }
}
@media (max-width: 480px) {
  .masthead-account { display: none; }
  .masthead-slim .masthead-mark img { height: 44px; }
}

/* Faint dot grid + warm glow: the paper the edition is printed on. */
.wl-hero {
  position: relative;
  padding-top: clamp(32px, 4vw, 56px) !important;
  background:
    radial-gradient(60% 50% at 88% 12%, rgba(255, 107, 74, 0.10), transparent 70%),
    radial-gradient(50% 45% at 6% 92%, rgba(31, 60, 91, 0.07), transparent 70%),
    radial-gradient(rgba(11, 11, 13, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--cream);
}

.wl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 960px) {
  .wl-grid { grid-template-columns: 1fr; }
}

/* The join form must clear the fold on a laptop, so the hero runs tighter
   than the full page's. */
.wl-hero .hero-stripe { margin-bottom: 26px; }
.wl-hero .hero-pill { margin-bottom: 20px; }
.wl-title { font-size: clamp(2.5rem, 5.2vw, 4.4rem); }
.wl-dek { margin-top: 22px; max-width: 34em; font-size: 1.1rem; }

/* ── Join form: the page's single primary action ── */
.wl-form {
  margin-top: 26px;
  display: flex;
  gap: 8px;
  padding: 7px;
  max-width: 560px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 0 18px 40px -26px rgba(16, 24, 40, 0.45);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wl-form:focus-within {
  border-color: #f3a20d;
  box-shadow: 0 0 0 4px rgba(243, 162, 13, 0.22), 0 18px 40px -26px rgba(16, 24, 40, 0.45);
}
.wl-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font: inherit;
  font-size: 1.02rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.wl-form input::placeholder { color: rgba(43, 42, 46, 0.5); }
.wl-submit {
  height: 52px;
  padding: 0 24px;
  font-size: 1rem;
  white-space: nowrap;
}
.wl-submit:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}
@media (max-width: 520px) {
  .wl-form {
    flex-direction: column;
    border-radius: 22px;
    padding: 8px;
  }
  .wl-form input[type="email"] { height: 50px; }
  .wl-submit { justify-content: center; }
}

.wl-form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: .86rem;
  color: var(--ink-soft);
}

/* ── Signup result, right at the form ── */
.wl-status {
  margin-top: 26px;
  scroll-margin-top: 120px;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left-width: 4px;
  border-radius: 14px;
  animation: wl-status-in .45s cubic-bezier(.2, .8, .2, 1);
}
.wl-status p { font-size: .95rem; }
.wl-status-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem !important;
  color: var(--ink) !important;
  margin-bottom: 2px;
}
.wl-status-success, .wl-status-exists { border-left-color: #2f8a57; }
.wl-status-invalid, .wl-status-error { border-left-color: var(--coral-dark); }

/* A rubber stamp, slightly crooked, like it was inked by hand. */
.wl-stamp {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 2px solid #2f8a57;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(47, 138, 87, 0.55);
  color: #2f8a57;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-11deg);
  animation: wl-stamp .5s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
@keyframes wl-status-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wl-stamp {
  from { opacity: 0; transform: rotate(-11deg) scale(1.6); }
  to   { opacity: 1; transform: rotate(-11deg) scale(1); }
}

/* ── The clipping (countdown) ── */
.wl-side {
  display: grid;
  gap: 36px;
  padding-top: clamp(0px, 3vw, 40px);
}
.wl-clipping {
  position: relative;
  transform: rotate(-1.2deg);
  /* drop-shadow (not box-shadow) follows the torn, masked edge. */
  filter: drop-shadow(0 22px 26px rgba(16, 24, 40, 0.2)) drop-shadow(0 1px 1px rgba(11, 11, 13, 0.08));
}
.wl-paper {
  padding: 30px clamp(22px, 3vw, 34px) 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 45%),
    var(--paper);
  /* Torn bottom edge, matching the logo's ripped paper. */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
}
.wl-pin {
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9b8a 0 18%, #e2342a 46%, #8f1712 100%);
  box-shadow: 3px 6px 6px -1px rgba(60, 10, 8, 0.4);
}
.wl-clip-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 18px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral);
}
.wl-clip-rule {
  flex: 1;
  height: 0;
  border-top: 3px double var(--rule-strong);
}
.wl-clip-head {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 20px;
}
.wl-clip-copy { font-size: 1rem; max-width: 30em; }

.wl-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.wl-tile {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 4px 14px;
}
.wl-tile + .wl-tile { border-left: 1px solid var(--rule-strong); }
.wl-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  min-width: 2ch;
  text-align: center;
}
/* Seconds are the live digit: set in the coral of the masthead dot. */
.wl-num[data-unit="seconds"] { color: var(--coral-dark); }
.wl-num.is-ticking { animation: wl-tick .32s ease-out; }
@keyframes wl-tick {
  from { opacity: .35; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.wl-unit {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wl-dateline {
  margin-top: 16px;
  font-size: .92rem;
}
.wl-dateline time { color: var(--ink); font-weight: 500; }

.wl-meta { padding: 0 4px; }

/* ── What happens next ── */
.wl-next { background: var(--paper); }
.wl-next-head {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.wl-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.wl-steps li {
  padding: 26px clamp(18px, 2.4vw, 32px) 8px 0;
}
.wl-steps li + li {
  padding-left: clamp(18px, 2.4vw, 32px);
  border-left: 1px dashed var(--rule-strong);
}
.wl-steps h3 { margin: 14px 0 8px; font-size: 1.35rem; }
.wl-steps p { font-size: .97rem; max-width: 28em; }
.wl-next-foot { margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 860px) {
  .wl-steps { grid-template-columns: 1fr; }
  .wl-steps li,
  .wl-steps li + li {
    padding: 22px 0 6px;
    border-left: 0;
    border-top: 1px dashed var(--rule-strong);
  }
  .wl-steps li:first-child { border-top: 0; }
}


/* ═════════════════════════════════════════════════
   PRE-LAUNCH LAYER on the full page (LANDING_MODE=auto)
   home.html wears these only before the launch date —
   a "stop press" edition of the same broadsheet. After
   launch none of these classes are rendered.
   ═════════════════════════════════════════════════ */

/* ── Stop-press band: rides with the sticky header ── */
.stop-press {
  background: var(--ink);
  color: rgba(255, 253, 247, 0.86);
  font-size: .86rem;
  border-bottom: 1px solid rgba(255, 253, 247, 0.08);
}
.stop-press-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sp-tag {
  flex: 0 0 auto;
  padding: 3px 8px 2px;
  background: var(--coral);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 3px;
}
.sp-line {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.sp-line[hidden], .sp-join[hidden] { display: none; }
.sp-lede {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
}
.sp-sep { color: rgba(255, 253, 247, 0.35); }
.sp-digits {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  white-space: nowrap;
}
.sp-digits i {
  font-style: normal;
  margin: 0 2px 0 1px;
  color: rgba(255, 253, 247, 0.5);
}
.sp-digits [data-unit="seconds"] { color: #ff9b84; }
.sp-link {
  flex: 0 0 auto;
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 107, 74, 0.7);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sp-link:hover { color: #ffb199; border-color: #ffb199; }
.sp-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
@media (max-width: 720px) {
  .stop-press-inner { gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  .sp-tag, .sp-line .sp-lede, .sp-line .sp-sep { display: none; }
  .sp-line { font-size: .8rem; }
}
@media (max-width: 380px) {
  .sp-clock { font-size: 0; }        /* drop the words, keep the clock */
  .sp-clock .sp-digits { font-size: .8rem; margin-left: 0; }
}

/* ── Hero: the join form beside the pinned edition ── */
#join { scroll-margin-top: 150px; }
.hl-join {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 960px) {
  .hl-join { grid-template-columns: 1fr; }
}
.hl-join-kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hl-join .wl-form { margin-top: 16px; }
.hl-join .wl-status { margin-top: 16px; scroll-margin-top: 160px; }
.hl-join .wl-status + .wl-form { margin-top: 14px; }

/* The edition clipping, a touch smaller than on the focused page. */
.hl-edition { max-width: 470px; justify-self: end; width: 100%; }
@media (max-width: 960px) { .hl-edition { justify-self: start; } }
.hl-edition .wl-paper { padding-top: 24px; padding-bottom: 34px; }
.hl-edition .wl-clip-head { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.hl-edition .wl-num { font-size: clamp(2rem, 3.8vw, 2.9rem); }
.hl-edition .wl-tile { padding: 12px 4px 10px; }
.hl-live-cta { margin-top: 18px; }

/* ── Closing CTA: the waitlist, pinned like the clipping ── */
.cta-card-launch { position: relative; }
.cta-card-launch .cta-pin { top: -11px; }
.cta-card-launch .eyebrow { color: #ffb199; }
.cta-card-launch .dot { background: var(--coral); }
.cta-card-launch h2 em i { color: #ffb199; }
.cta-card-launch .signup-form { padding: 7px; }
.cta-card-launch .signup-form input[type="email"] { padding: 12px 18px; font-size: 1rem; }
.cta-card-launch .signup-form .btn { padding: 12px 20px; font-size: .95rem; }
.cta-launch-note {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 253, 247, 0.55);
  padding-left: 18px;
}
@media (max-width: 520px) {
  .cta-card-launch .signup-form { flex-direction: column; border-radius: 20px; }
  .cta-card-launch .signup-form .btn { justify-content: center; }
}

/* Global p/span colours would sink the band's copy into the ink. */
.stop-press p,
.stop-press .sp-clock { color: rgba(255, 253, 247, 0.78); }

/* "Join the waitlist" is wider than "Open app": the band already carries the
   edition line, so the masthead dateline steps aside and the nav stays on
   one line. */
.masthead-prelaunch .masthead-meta { display: none; }
.masthead-prelaunch { grid-template-columns: auto 1fr auto; }
.masthead-prelaunch .nav-links { gap: 22px; }
.masthead-prelaunch .nav-links a { white-space: nowrap; }
@media (max-width: 1180px) {
  .masthead-prelaunch .nav-links { gap: 16px; font-size: .88rem; }
}
@media (max-width: 900px) {
  .masthead-prelaunch { grid-template-columns: auto 1fr auto auto; }
  .masthead-prelaunch .masthead-cta { justify-self: end; }
}
/* Phones: the header's "Join the waitlist" sits right under the band, so the
   band keeps just the clock, on one line. */
@media (max-width: 720px) {
  .stop-press .sp-join { display: none; }
  .stop-press-inner { justify-content: center; }
  .sp-line { flex: 0 1 auto; }
  .sp-clock { white-space: nowrap; }
}