/* Dealer Letter: built on the Irreplicable redesign system, with a blue accent.
   Tokens, base, components, sections, responsive. */

:root {
  --ink: #1d1d1f;
  --gray: #6e6e73;
  --gray-2: #86868b;
  --tile: #f5f5f7;
  --hair: #d2d2d7;
  --line: #e8e8ed;
  --white: #ffffff;
  --blue: #0048ff;
  --blue-bright: #0048ff;

  --container: 980px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(96px, 12vw, 150px);
  --radius-lg: 26px;
  --radius-md: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 48px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--white); color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.47; letter-spacing: -0.01em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

main, .footer, .nav { position: relative; z-index: 1; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section-gray { background: rgb(245 245 247 / 0.85); }
.accent { color: var(--blue); }
.center { text-align: center; }
.center-text { display: block; width: fit-content; margin-inline: auto; }

.skip-link {
  position: fixed; top: -80px; left: 8px; z-index: 300;
  padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--white);
}
.skip-link:focus { top: 8px; }

/* ---------- Type ---------- */
.wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: 0;
}
h1 { font-size: clamp(40px, 5.4vw, 64px); font-weight: 700; line-height: 1.03; letter-spacing: -0.045em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; }
h3 { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.lede { margin-top: 12px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.42; color: var(--gray); letter-spacing: -0.015em; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center .lede { max-width: 600px; margin-inline: auto; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: var(--white); font-size: 15px; font-weight: 500;
}
.nav-cta, .btn { transition: background 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.nav-cta:hover, .btn:hover { background: var(--blue); transform: scale(1.04); box-shadow: 0 6px 18px rgb(0 72 255 / 0.28); }
.nav-cta:active, .btn:active { transform: scale(0.98); }

.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--blue); }
.link-arrow::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cta-row.center { justify-content: center; }

.views { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.views::before {
  content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px; line-height: 1.4;
  background: rgb(255 255 255 / 0.7); font-size: 11px; font-weight: 600; color: var(--gray);
}
.tag-blue { background: rgb(0 72 255 / 0.1); color: var(--blue); }

.stat, .shot, .node, .tile, .plan, .q, .edition, .frame { corner-shape: squircle; }

/* ---------- Glass ---------- */
.glass {
  background: rgb(255 255 255 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.75);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.glass-dark {
  background: rgb(29 29 31 / 0.82);
  border-color: rgb(255 255 255 / 0.12);
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.1);
  color: var(--white);
}

/* ---------- Ambient light ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), color-mix(in srgb, var(--c) 55%, transparent) 45%, transparent);
  animation: drift 20s ease-in-out infinite alternate;
}
.ambient span:nth-child(1) { --c: rgb(0 72 255 / 0.16); width: 70vw; height: 70vw; left: -16vw; top: 4vh; --dx: 6vw; --dy: 4vh; }
.ambient span:nth-child(2) { --c: rgb(51 115 255 / 0.26); width: 64vw; height: 64vw; right: -14vw; top: 16vh; --dx: -5vw; --dy: 6vh; animation-duration: 24s; }
.ambient span:nth-child(3) { --c: rgb(29 29 31 / 0.07); width: 58vw; height: 58vw; left: 26vw; top: 52vh; --dx: 4vw; --dy: -6vh; animation-duration: 28s; }
.ambient span:nth-child(4) { --c: rgb(51 115 255 / 0.18); width: 48vw; height: 48vw; left: 2vw; top: 68vh; --dx: 5vw; --dy: -4vh; animation-duration: 22s; }
.ambient span:nth-child(5) { --c: rgb(0 72 255 / 0.1); width: 52vw; height: 52vw; right: 0; top: 74vh; --dx: -4vw; --dy: -5vh; animation-duration: 26s; }
@keyframes drift { from { translate: 0 0; } to { translate: var(--dx, 12px) var(--dy, -16px); } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow 0.3s;
}
.nav.scrolled { box-shadow: 0 1px 0 rgb(0 0 0 / 0.07); }
.nav-inner {
  height: 100%; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav .wordmark { font-size: 19px; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-link { font-size: 12px; color: rgb(29 29 31 / 0.78); transition: color 0.2s; }
.nav-link:hover { color: var(--ink); }
.nav-cta { font-size: 12px; font-weight: 500; padding: 5px 13px; border-radius: 999px; background: var(--ink); color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  min-height: min(100svh, 860px);
  padding: calc(var(--nav-h) + 48px) 0 56px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 72px);
}
.hero-sub { margin: 20px 0 8px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; max-width: 420px; }
.hero-body { margin-bottom: 28px; max-width: 420px; color: var(--gray); font-size: 15px; }
.hero-copy > *, .hero-stage { animation: rise 1s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.hero-copy > :nth-child(4) { animation-delay: 0.18s; }
.hero-stage { animation-delay: 0.2s; animation-duration: 1.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

.hero-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 460px; justify-self: center; }
.hero-disc { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fbfbfd, #e7ecf4 70%); }

.stat {
  position: absolute; z-index: 2; padding: 12px 16px 13px; border-radius: 18px;
  background: rgb(255 255 255 / 0.62); border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.6);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  display: grid;
}
.stat span { font-size: 11px; font-weight: 600; color: var(--gray); }
.stat strong { margin-top: 2px; font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.stat-a { bottom: 8%; left: -8%; animation: bob 6s ease-in-out infinite; }
.stat-a strong { color: var(--blue); }
.stat-b { bottom: 6%; right: -2%; animation: bob 7s ease-in-out -2s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Proof ---------- */
.proof { padding: var(--section) 0 calc(var(--section) * 0.7); }
.scatter {
  display: flex; justify-content: center; gap: clamp(14px, 2.2vw, 26px);
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: 24px 0 48px;
}
.shot {
  position: relative; flex: none; width: clamp(120px, 15.5vw, 172px); aspect-ratio: 1;
  border-radius: 28%; overflow: hidden; background: #ddd;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0));
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.1);
  transition: transform 0.45s var(--ease);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot img.crop-top { object-position: top; }
.shot::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 0.55)); }
.shot .views {
  position: absolute; z-index: 1; left: 15px; bottom: 13px; color: var(--white);
  font-size: 19px; letter-spacing: -0.02em; gap: 5px; text-shadow: 0 1px 10px rgb(0 0 0 / 0.35);
}
.shot .views::before { width: 18px; height: 18px; }
.shot:hover { transform: translateY(calc(var(--y, 0px) - 10px)) rotate(0deg) scale(1.05); }
.fine { max-width: 520px; margin-inline: auto; font-size: 12px; line-height: 1.5; color: var(--gray-2); padding-inline: var(--gutter); }

/* ---------- Opportunity ---------- */
.opportunity { padding: var(--section) 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin-inline: auto; }
.node {
  padding: 30px 28px 32px; border-radius: 24px; text-align: center;
  display: grid; justify-items: center; align-content: start;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.node:hover { transform: translateY(-3px); }
.node h3 { margin-top: 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.node p { margin-top: 8px; font-size: 14px; color: var(--gray); line-height: 1.45; max-width: 320px; }

/* ---------- What's inside (bento) ---------- */
.inside { padding: var(--section) 0; }
.bento-wrap { position: relative; }
.bento-glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -80px; bottom: -80px; left: 50%; width: 100vw; translate: -50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  background:
    radial-gradient(380px 280px at 22% 30%, rgb(0 72 255 / 0.16), transparent 70%),
    radial-gradient(420px 300px at 50% 62%, rgb(180 180 190 / 0.16), transparent 70%),
    radial-gradient(380px 280px at 78% 28%, rgb(77 133 255 / 0.24), transparent 70%),
    radial-gradient(360px 260px at 72% 88%, rgb(0 72 255 / 0.12), transparent 70%);
  filter: blur(24px);
}
.bento { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.tile {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-md);
  padding: 22px 22px 24px; display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.7); }
.tile-wide { grid-column: span 2; aspect-ratio: auto; }
.tile h3 { margin-top: auto; padding-top: 20px; }
.tile p { margin-top: 6px; font-size: 13px; color: var(--gray); line-height: 1.4; }
.tile-wide h3 { font-size: 24px; letter-spacing: -0.03em; }
.tile-wide p { max-width: 380px; }
.tile-dark p { color: #a1a1a6; }

.glyph {
  width: 32px; height: 32px; flex: none;
  fill: none; stroke: url(#ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.14)); overflow: visible;
  transition: transform 0.5s var(--ease);
}
.glyph .acc { stroke: url(#blue); }
.tile:hover .glyph { transform: translateY(-2px) scale(1.06); }
.tile-dark .glyph { stroke: #f5f5f7; }
.tile-dark .glyph .acc { stroke: #7fb0ff; }

/* ---------- Sample ---------- */
.sample { padding: var(--section) 0; }
.edition { border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }
.edition-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.edition-note { font-size: 12px; color: var(--gray-2); }
.edition-title { margin-top: 22px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.edition-sum { margin-top: 12px; max-width: 560px; font-size: 16px; line-height: 1.45; color: var(--gray); }
.edition-grid {
  margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 48px);
}
.edition-label { font-size: 13px; font-weight: 600; color: var(--gray); margin-bottom: 10px; }
.edition-grid > div > .edition-label:not(:first-child) { margin-top: 28px; }
.hooks { display: grid; gap: 10px; }
.hooks li {
  padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.75);
  font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em;
  box-shadow: inset 0 0 0 1px var(--line);
}
.checks { width: 100%; }
.checks li { position: relative; padding: 6px 0 6px 24px; font-size: 13px; line-height: 1.45; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 9px; height: 5px;
  border-left: 1.6px solid var(--blue); border-bottom: 1.6px solid var(--blue); transform: rotate(-45deg);
}

.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: shot; }
.shots li { counter-increment: shot; }
.shots p { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--gray); }
.shots p b { color: var(--ink); font-weight: 600; }
.shots p b::before { content: counter(shot) ". "; }
.frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px;
  background: linear-gradient(180deg, #dfe8f2 0%, #c9d6e4 100%);
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.08), inset 0 0 0 1px rgb(0 0 0 / 0.04);
}
.frame .cap {
  position: absolute; top: 12%; left: 9%; right: 9%;
  padding: 5px 6px; border-radius: 7px; background: var(--white);
  font-size: clamp(9px, 0.9vw, 11px); font-weight: 700; line-height: 1.2; text-align: center;
}
.frame .sticker {
  position: absolute; left: 26%; right: 26%; top: 40%; aspect-ratio: 3 / 4;
  display: grid; place-items: center; border-radius: 5px;
  background: var(--white); box-shadow: 0 6px 12px rgb(0 0 0 / 0.12);
  font-size: clamp(16px, 2vw, 24px); font-weight: 700; color: var(--blue);
}
.frame .sticker.open {
  background: repeating-linear-gradient(180deg, transparent 0 8px, var(--line) 8px 9px), var(--white);
}
.frame .sticker.open::before { content: ""; position: absolute; inset: 0 0 auto; height: 16%; background: var(--ink); border-radius: 5px 5px 0 0; }
.frame .sticker.open::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 10%; height: 16%; border-radius: 3px; background: var(--blue-bright); }
.f2 { background: linear-gradient(180deg, #dfe8f2 0%, #dfe8f2 60%, #a4afba 60%, #8d99a6 100%); }
.frame .car {
  position: absolute; left: -20%; right: -20%; top: 48%; height: 13%;
  background: linear-gradient(180deg, #0048ff, #0048ff);
  border-radius: 42% 48% 10% 10% / 75% 75% 22% 22%;
}
.frame .car::before, .frame .car::after {
  content: ""; position: absolute; bottom: -42%; width: 19%; aspect-ratio: 1;
  border-radius: 50%; background: #1d1d1f; box-shadow: inset 0 0 0 3px #c7ccd1;
}
.frame .car::before { left: 22%; }
.frame .car::after { right: 22%; }
.f3 { background: linear-gradient(180deg, #eef1f6 0%, #dde3ec 100%); }
.frame .bubble {
  position: absolute; left: 50%; top: 52%; translate: -50% -50%;
  padding: 6px 12px; border-radius: 999px; background: var(--white);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.1);
  font-size: clamp(13px, 1.4vw, 17px); font-weight: 700; letter-spacing: -0.03em;
}
.why { margin-top: 24px; padding: 18px 20px; border-radius: 18px; background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px var(--line); }
.why p:not(.edition-label) { font-size: 14px; line-height: 1.5; }

/* ---------- Subscribe ---------- */
.subscribe { padding: var(--section) 0; }
.plan {
  border-radius: var(--radius-lg); background: var(--white);
  padding: 32px 30px 30px; display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.06);
}
.plan-solo { max-width: 440px; margin-inline: auto; }
.plan-name { font-size: 13px; font-weight: 600; color: var(--gray); }
.plan-price { margin-top: 10px; font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -0.045em; }
.plan-term { margin: 6px 0 22px; font-size: 14px; color: var(--gray); }
.plan .btn { width: 100%; }
.plan .checks { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
.plan-foot { margin-top: 16px; font-size: 12px; }
.cta-note { margin-top: 10px; width: 100%; text-align: center; font-size: 12px; color: var(--gray); }

/* ---------- FAQ ---------- */
.faq { padding: var(--section) 0 0; }
.faq-list { display: grid; gap: 10px; max-width: 760px; margin-inline: auto; }
.q { border-radius: var(--radius-md); }
.q summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
}
.q summary::-webkit-details-marker { display: none; }
.caret {
  flex: none; width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.35s var(--ease);
}
.q[open] .caret { transform: translateY(2px) rotate(225deg); }
.q p { padding: 0 24px 22px; max-width: 620px; font-size: 15px; color: var(--gray); line-height: 1.5; }

/* ---------- Closing & footer ---------- */
.closing { padding: calc(var(--section) * 1.2) 0 calc(var(--section) * 1.3); text-align: center; }
.closing h2 { font-size: clamp(34px, 4.6vw, 54px); }
.closing .lede { margin: 16px auto 36px; max-width: 520px; }
.footer { background: var(--tile); padding: 24px 0 28px; font-size: 12px; color: var(--gray); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer .wordmark { font-size: 18px; color: var(--ink); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease-out, transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Draft markers (preview only) ---------- */
.draft {
  margin-top: 22px; font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  border: 1px dashed #c9a227; background: #fff8dc; color: #6b5300;
}
.draft-inline { background: #fff8dc; color: #6b5300; outline: 1px dashed #c9a227; outline-offset: 1px; padding: 0 0.3em; border-radius: 4px; }
.plan-price .draft-inline { font-size: 0.72em; letter-spacing: -0.03em; }
.hide-drafts .draft { display: none; }
.hide-drafts .draft-inline { background: none; outline: 0; color: inherit; padding: 0; }
.draft-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 200;
  font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: #fff8dc; color: #6b5300; border: 1px dashed #c9a227;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; text-align: left; }
  .hero-stage { max-width: 400px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .edition-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-link { display: none; }
  .pair { grid-template-columns: 1fr; }
  .scatter { flex-wrap: wrap; }
  .scatter .shot:nth-child(n+4) { display: none; }
  .shot { width: 29%; }
  .shot .views { left: 10px; bottom: 9px; font-size: 15px; }
  .shot .views::before { width: 14px; height: 14px; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .draft-toggle { left: auto; right: 12px; bottom: 12px; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile-wide { grid-column: auto; aspect-ratio: auto; min-height: 0; }
  .tile h3 { margin-top: 18px; padding-top: 0; }
  .stat strong { font-size: 22px; }
}

/* =========================================================
   Conversion layout additions
   ========================================================= */
.btn-lg { min-height: 50px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.h-sm { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; }

/* Hero */
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 4px rgb(0 72 255 / 0.15); }
.hero-sub { font-weight: 500; color: var(--gray); max-width: 470px; margin: 20px 0 30px; line-height: 1.42; }
.micro { margin-top: 14px; font-size: 12px; color: var(--gray-2); }
.trust { margin-top: 30px; display: flex; align-items: center; gap: 12px; }
.trust p { font-size: 13px; color: var(--gray); }
.trust b { color: var(--ink); font-weight: 600; }
.faces { display: flex; }
.faces img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); }
.faces img + img { margin-left: -10px; }

.issue {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -3deg;
  width: 78%; padding: 22px 22px 18px; border-radius: 24px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.8);
}
.issue-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.issue-head .wordmark { font-size: 17px; }
.issue-kicker { margin-top: 16px; font-size: 11px; font-weight: 600; color: var(--blue); }
.issue-title { margin-top: 4px; font-size: 20px; line-height: 1.15; letter-spacing: -0.03em; }
.issue-list { margin-top: 14px; display: grid; gap: 4px; }
.issue-list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.issue-list li:first-child { border-top: 0; }
.issue-list b { display: block; font-size: 13px; font-weight: 600; }
.issue-list span:not(.ico) { display: block; font-size: 12px; color: var(--gray); line-height: 1.35; }
.ico { flex: none; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #0048ff, #0036c4); position: relative; }
.ico::after { content: ""; position: absolute; inset: 8px; background: var(--white); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-trend { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E"); }
.i-idea { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1 1.3 1 2.1V16h5.2v-.1c0-.8.3-1.5 1-2.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E"); }
.i-hook { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M15 3v10a5 5 0 1 1-10 0v-1M13 3h4'/%3E%3C/svg%3E"); }
.i-cam { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='3'/%3E%3Cpath d='m16 10 6-3v10l-6-3'/%3E%3C/svg%3E"); }

/* Proof */
.proof { padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 100px); }
.proof-head { text-align: center; }
.proof-head .fine { margin-top: 8px; }
.proof .scatter { padding: 34px 0 40px; }
.numbers { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 760px; margin-inline: auto; }
.numbers div { text-align: center; padding: 18px 12px; border-radius: 18px; background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px var(--line); }
.numbers dt { font-size: 12px; font-weight: 600; color: var(--gray); }
.numbers dd { margin: 4px 0 0; font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }

/* Problem to solution */
.problem { padding: var(--section) 0; }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pain { padding: 26px 24px 28px; border-radius: var(--radius-md); }
.pain-q { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--gray); }
.pain-a { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.pain-a::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 10px 3px 2px; border-left: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue); transform: rotate(-45deg); }

.inside { padding: var(--section) 0; }

/* Sample tabs */
.edition-intro { margin-bottom: 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: rgb(0 0 0 / 0.045); width: fit-content; max-width: 100%; }
.tabs button { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gray); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
.panel { margin-top: 22px; min-height: 170px; animation: panel-in 0.35s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } }
.panel .hooks { max-width: 640px; }
.panel .shots { max-width: 720px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.why-text { max-width: 640px; font-size: 17px; line-height: 1.5; letter-spacing: -0.015em; }
.after-sample { margin-top: 32px; }

/* Comparison */
.compare { padding: var(--section) 0; }
.compare-table { max-width: 820px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; }
.compare-table .row { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr; border-top: 1px solid var(--line); }
.compare-table .row:first-child { border-top: 0; }
.compare-table .row > span { padding: 16px 20px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.compare-table .row > span:first-child { font-weight: 600; }
.compare-table .row > span:nth-child(2) { color: var(--gray); }
.compare-table .head > span { font-size: 13px; font-weight: 600; color: var(--gray); padding-top: 20px; }
.compare-table .us { background: rgb(0 72 255 / 0.06); color: var(--ink); font-weight: 600; }
.compare-table .head .us { color: var(--blue); }
.yes { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--blue); position: relative; }
.yes::after { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 4px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }

/* Team */
.team { padding: var(--section) 0; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.person { padding: 26px 24px 28px; border-radius: var(--radius-md); }
.person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.person h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
.person p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--gray); }

/* Pricing */
.subscribe { padding: var(--section) 0; }
.plan {
  max-width: 860px; margin-inline: auto; padding: clamp(26px, 4vw, 40px);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 48px); align-items: center;
  border-radius: var(--radius-lg); background: var(--white);
  box-shadow: 0 30px 60px rgb(0 72 255 / 0.12), 0 0 0 1px rgb(0 72 255 / 0.18);
}
.plan-left { display: flex; flex-direction: column; align-items: stretch; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: clamp(34px, 4vw, 46px); }
.plan-price small { font-size: 15px; font-weight: 500; color: var(--gray); letter-spacing: -0.01em; }
.plan-term { margin: 6px 0 22px; }
.plan .checks { margin-top: 0; border-top: 0; padding-top: 0; }
.plan-checks li { font-size: 14px; padding: 8px 0 8px 26px; border-top: 1px solid var(--line); }
.plan-checks li:first-child { border-top: 0; }
.plan-checks li::before { top: 14px; }

/* FAQ, closing */
.faq { padding: var(--section) 0; }

/* Mobile sticky CTA */
.sticky-cta {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 150;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 999px;
  background: rgb(255 255 255 / 0.82); border: 1px solid rgb(255 255 255 / 0.8);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.14);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  transform: translateY(140%); transition: transform 0.4s var(--ease);
}
.sticky-cta b { display: block; font-size: 14px; }
.sticky-cta span { display: block; font-size: 12px; color: var(--gray); }
.sticky-cta.show { transform: none; }

@media (max-width: 900px) {
  .hero-stage { max-width: 420px; }
  .pains, .people { grid-template-columns: 1fr; }
  .plan { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  .draft-toggle { bottom: 80px; }
  .numbers { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .compare-table .row { grid-template-columns: 0.9fr 1fr 1fr; }
  .compare-table .row > span { padding: 12px; font-size: 13px; }
  .issue { width: 92%; }
  .stat-a { left: -2%; bottom: 2%; }
  .tabs button { padding: 7px 12px; font-size: 12px; }
}
@media (max-width: 720px) {
  .hero { padding-bottom: 24px; }
  .hero-stage { aspect-ratio: auto; max-width: none; margin-top: 8px; }
  .hero-disc, .hero-stage .stat { display: none; }
  .issue { position: relative; left: auto; top: auto; translate: none; rotate: 0deg; width: 100%; }
  .numbers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .numbers div { padding: 14px 6px; }
  .numbers dt { font-size: 10px; line-height: 1.3; }
  .numbers dd { font-size: 22px; }
}

/* Offer: free first edition, guarantee */
.free { color: var(--blue); font-weight: 600; }
.closing .micro { margin-top: 18px; }
.promise {
  max-width: 860px; margin: 16px auto 0; padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-lg); color: var(--white);
}
.promise-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; }
.promise .dim { color: #86868b; }
.promise-body { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promise-body div { border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: 16px; }
.promise-body h3 { font-size: 15px; }
.promise-body p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: #a1a1a6; }
@media (max-width: 720px) { .promise-body { grid-template-columns: 1fr; } }

/* =========================================================
   v5: radar hero, text threads, locked sample, trial pricing
   ========================================================= */
.text-link { color: var(--blue); text-decoration: underline; text-decoration-color: rgb(0 72 255 / 0.3); text-underline-offset: 3px; }
.text-link:hover { text-decoration-color: var(--blue); }

/* Icon masks */
.ic { display: block; width: 18px; height: 18px; background: linear-gradient(135deg, #0048ff, #0036c4); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-car { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16v-3l2-5.2A2 2 0 0 1 7.4 6.5h9.2a2 2 0 0 1 1.9 1.3l2 5.2v3'/%3E%3Cpath d='M3.5 13h17M3.5 16h17v2h-3v-2M6.5 18H3.5v-2'/%3E%3Ccircle cx='7.5' cy='13' r='.4'/%3E%3Ccircle cx='16.5' cy='13' r='.4'/%3E%3C/svg%3E"); }
.i-fire { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 3.5 5.5 6 5.5 11.2A5.5 5.5 0 0 1 12 19a5.5 5.5 0 0 1-5.5-5.8c0-2.4 1.2-4 2.5-5.2.2 1.8 1 2.8 2 3.2C11 9 11 5.4 12 2Z'/%3E%3C/svg%3E"); }
.i-play { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5L7 4.5Z'/%3E%3C/svg%3E"); }
.i-heart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5S3 15 3 8.8A4.6 4.6 0 0 1 12 6.4a4.6 4.6 0 0 1 9 2.4C21 15 12 20.5 12 20.5Z'/%3E%3C/svg%3E"); }
.i-trend { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E"); }
.i-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3C/svg%3E"); }

/* Radar */
.hero-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 470px; justify-self: center; }
.radar {
  position: absolute; inset: 3%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgb(255 255 255 / 0.85) 0%, rgb(234 240 255 / 0.7) 70%, rgb(217 228 255 / 0.7) 100%);
  border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow: 0 40px 80px rgb(0 72 255 / 0.16), 0 0 0 10px rgb(255 255 255 / 0.35), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.radar-rings { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle closest-side, transparent 0 calc(25% - 1px), rgb(0 72 255 / 0.13) calc(25% - 1px) 25%); }
.radar-cross {
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent calc(50% - 0.5px), rgb(0 72 255 / 0.1) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(0 72 255 / 0.1) 0 calc(50% + 0.5px), transparent 0);
}
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgb(0 72 255 / 0) 0deg 280deg, rgb(0 72 255 / 0.28) 360deg);
  animation: sweep 5s linear infinite;
}
.radar-sweep::after { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 50%; background: linear-gradient(to top, rgb(0 72 255 / 0.1), rgb(0 72 255 / 0.8)); }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #0048ff, #0036c4);
  box-shadow: 0 10px 24px rgb(0 72 255 / 0.35), 0 0 0 8px rgb(0 72 255 / 0.12);
}
.radar-core .ic { width: 26px; height: 26px; background: #fff; }
.blip {
  position: absolute; z-index: 2;
  left: calc(50% + sin(var(--a)) * var(--r)); top: calc(50% - cos(var(--a)) * var(--r));
  translate: -50% -50%;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.92); box-shadow: 0 8px 20px rgb(0 72 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.9);
  animation: ping 5s var(--d, 0s) infinite;
}
.blip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(0 72 255 / 0.5); opacity: 0; animation: ring 5s var(--d, 0s) infinite; }
.blip-sm { width: 9px; height: 9px; background: var(--blue-bright); box-shadow: 0 0 0 4px rgb(0 72 255 / 0.15); }
@keyframes ping { 0% { transform: scale(1.18); box-shadow: 0 8px 26px rgb(0 72 255 / 0.4); } 18%, 100% { transform: scale(1); } }
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 25% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; } }

/* Problem tiles as text threads */
.threads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.thread { padding: 24px 22px 26px; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 12px; }
.glyph-badge { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgb(255 255 255 / 0.8); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 6px; }
.glyph-badge .glyph { width: 26px; height: 26px; }
.bubble-in, .bubble-out { position: relative; max-width: 88%; padding: 10px 14px; border-radius: 20px; font-size: 15px; line-height: 1.35; }
.bubble-in { align-self: flex-start; background: #e9e9eb; color: var(--ink); border-bottom-left-radius: 6px; font-weight: 500; }
.bubble-out { align-self: flex-end; background: linear-gradient(135deg, #3d82ee, #0048ff); color: #fff; border-bottom-right-radius: 6px; }

/* Locked sample */
.doc { position: relative; max-width: 860px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; }
.doc-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.doc-head .wordmark { font-size: 19px; }
.doc-title { margin-top: 22px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.04em; }
.doc-sec { margin-top: 26px; }
.doc-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.doc-sec .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #0048ff, #0036c4); }
.doc-sec ul { display: grid; gap: 8px; padding-left: 34px; }
.doc-sec ul + ul { margin-top: 8px; }
.doc-sec li { position: relative; font-size: 15px; line-height: 1.45; }
.doc-sec li::before { content: ""; position: absolute; left: -16px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-bright); }
.doc-sec b { font-weight: 600; }
.locked, .locked-all { filter: blur(5px); opacity: 0.75; user-select: none; pointer-events: none; }
.locked-all { padding-bottom: 90px; }
.unlock {
  position: absolute; left: 50%; bottom: clamp(24px, 4vw, 40px); translate: -50% 0; z-index: 3;
  width: min(460px, calc(100% - 40px)); padding: 24px 24px 26px; border-radius: 22px; text-align: center;
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 24px 60px rgb(0 72 255 / 0.18), inset 0 1px 0 #fff;
}
.unlock-title { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.unlock-sub { margin: 6px 0 18px; font-size: 14px; color: var(--gray); }

/* Comparison: every Dealer Letter cell gets a check */
.compare-table .us { gap: 10px; }

/* Pricing with trial timeline */
.plan { align-items: start; }
.plan-right { display: grid; gap: 22px; }
.timeline-mini { display: grid; gap: 0; position: relative; }
.timeline-mini li { position: relative; padding: 0 0 18px 28px; }
.timeline-mini li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 4px rgb(0 72 255 / 0.15); }
.timeline-mini li:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 18px; bottom: 2px; width: 1.5px; background: rgb(0 72 255 / 0.25); }
.timeline-mini b { display: block; font-size: 14px; }
.timeline-mini span { display: block; font-size: 14px; color: var(--gray); line-height: 1.4; }
.plan .plan-checks { border-top: 1px solid var(--line); padding-top: 6px; }

/* Guarantee box: same glass as the dark tile */
.promise.glass-dark {
  background: rgb(29 29 31 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.1);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.subscribe { position: relative; }

@media (max-width: 900px) {
  .threads { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .hero-stage { aspect-ratio: 1; max-width: 360px; margin: 12px auto 0; }
  .blip { width: 34px; height: 34px; }
  .blip .ic { width: 15px; height: 15px; }
  .blip-sm { width: 8px; height: 8px; }
  .unlock { position: relative; left: auto; translate: none; bottom: auto; width: 100%; margin-top: -60px; }
  .locked-all { padding-bottom: 0; }
}

/* =========================================================
   v6: full-bleed radar hero, progressive sample lock
   ========================================================= */
.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0), #fff); }
.hero-wrap .hero { position: relative; z-index: 2; display: flex; align-items: center; min-height: min(100svh, 900px); grid-template-columns: none; }
.hero-copy { position: relative; max-width: 540px; }
.hero-copy::before {
  content: ""; position: absolute; inset: -90px -120px -90px -160px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.6) 55%, rgb(255 255 255 / 0));
}

.radar-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.radar-field { position: absolute; left: 68%; top: 50%; width: 0; height: 0; --k: 1; }
.radar-disc {
  position: absolute; left: -950px; top: -950px; width: 1900px; height: 1900px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 117px, rgb(0 72 255 / 0.13) 117px 118.5px),
    linear-gradient(transparent calc(50% - 0.5px), rgb(0 72 255 / 0.1) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(0 72 255 / 0.1) 0 calc(50% + 0.5px), transparent 0),
    radial-gradient(closest-side, rgb(217 228 255 / 0.55), rgb(217 228 255 / 0) 70%);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
          mask-image: radial-gradient(closest-side, #000 18%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
}
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgb(0 72 255 / 0) 0deg 285deg, rgb(0 72 255 / 0.07) 320deg, rgb(0 72 255 / 0.26) 360deg);
  animation: sweep 6s linear infinite;
}
.radar-sweep::after { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 50%; background: linear-gradient(to top, rgb(0 72 255 / 0.9), rgb(0 72 255 / 0)); }
.radar-core {
  position: absolute; left: 0; top: 0; translate: -50% -50%; z-index: 3;
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #0048ff, #0036c4);
  box-shadow: 0 12px 28px rgb(0 72 255 / 0.35), 0 0 0 10px rgb(0 72 255 / 0.12), 0 0 0 22px rgb(0 72 255 / 0.06);
}
.radar-core .ic { width: 30px; height: 30px; background: #fff; }

.pop, .pip { position: absolute; left: calc(sin(var(--a)) * var(--r) * var(--k)); top: calc(cos(var(--a)) * var(--r) * var(--k) * -1); }
.pop { width: 0; height: 0; z-index: 2; }
.pin, .pip::before {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-bright); box-shadow: 0 0 0 5px rgb(0 72 255 / 0.16);
  animation: pin 6s var(--d) infinite both;
}
.pip::before { content: ""; width: 8px; height: 8px; left: -4px; top: -4px; }
.pop-card {
  position: absolute; left: 0; bottom: 14px; margin: 0;
  width: calc(96px * var(--s) * var(--k2, 1)); aspect-ratio: 1; translate: -50% 0;
  border-radius: 28%; overflow: hidden; background: #dfe4ea;
  border: 3px solid #fff;
  box-shadow: 0 16px 34px rgb(0 72 255 / 0.22), 0 2px 6px rgb(0 0 0 / 0.08);
  transform-origin: 50% 115%;
  animation: pop 6s var(--d) infinite both;
}
.pop-card img { width: 100%; height: 100%; object-fit: cover; }
.pop-card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 0.55)); }
.pop-card .views {
  position: absolute; z-index: 1; left: 9px; bottom: 7px; color: #fff;
  font-size: calc(13px * var(--s)); gap: 3px; text-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
}
.pop-card .views::before { width: calc(12px * var(--s)); height: calc(12px * var(--s)); }
@keyframes pop {
  0% { transform: scale(0); opacity: 0; }
  2% { opacity: 1; }
  5% { transform: scale(1.16); animation-timing-function: ease-out; }
  8% { transform: scale(0.94); }
  11% { transform: scale(1.02); }
  13%, 72% { transform: scale(1); opacity: 1; }
  86% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes pin {
  0% { transform: scale(2); box-shadow: 0 0 0 10px rgb(0 72 255 / 0.25); }
  12% { transform: scale(1); box-shadow: 0 0 0 5px rgb(0 72 255 / 0.16); }
  80% { opacity: 1; }
  100% { opacity: 0.35; }
}
.radar-blur {
  position: absolute; inset: 0;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(ellipse 40% 55% at 68% 50%, transparent 50%, #000 100%);
          mask-image: radial-gradient(ellipse 40% 55% at 68% 50%, transparent 50%, #000 100%);
}
@media (prefers-reduced-motion: reduce) {
  .pop-card { animation: none !important; opacity: 1; transform: none; }
}

/* Checks centered in their circles */
.yes { display: grid; place-items: center; }
.yes::after { position: static; left: auto; top: auto; width: 8px; height: 4.5px; transform: translateY(-1px) rotate(-45deg); }

/* Pricing without timeline */
.plan { align-items: center; }
.plan .plan-checks { border-top: 0; padding-top: 0; }
.plan .plan-checks li:first-child { font-weight: 600; }

/* Sample: progressive lock */
.lk { filter: blur(var(--b, 4px)); user-select: none; pointer-events: none; }
.doc { padding-bottom: 0; }
.doc-sec ul, .doc-sec ol { list-style: none; }
.vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 4px 0 18px; }
.vid { margin: 0; }
.vid-img { position: relative; aspect-ratio: 1; border-radius: 26%; overflow: hidden; box-shadow: 0 10px 22px rgb(0 0 0 / 0.1); }
.vid-img img { width: 100%; height: 100%; object-fit: cover; }
.vid-img::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 0.55)); }
.vid-img .views { position: absolute; z-index: 1; left: 12px; bottom: 10px; color: #fff; font-size: 15px; gap: 4px; }
.vid figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--gray); }
.vid figcaption b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 2px; }

.film-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ft { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px; border-radius: 16px; background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px var(--line); }
.ft-tag { align-self: flex-start; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--blue); background: rgb(0 72 255 / 0.1); }
.ft b { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.ft span:last-child { font-size: 13px; line-height: 1.4; color: var(--gray); }

.hooks-list { display: grid; gap: 8px; padding: 0; counter-reset: hk; }
.hooks-list li { counter-increment: hk; position: relative; padding: 12px 16px 12px 50px; border-radius: 14px; background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.hooks-list li::before { content: counter(hk); position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #0048ff, #0036c4); }
.doc-sec .hooks-list li::before { left: 14px; top: 50%; }

.lk-end { padding-bottom: 210px; }
.unlock {
  bottom: clamp(30px, 5vw, 56px);
  width: min(580px, calc(100% - 40px)); padding: 36px 34px 34px; border-radius: 26px;
  background: rgb(255 255 255 / 0.84);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 30px 70px rgb(0 72 255 / 0.2), inset 0 1px 0 #fff, 0 0 0 1px rgb(255 255 255 / 0.9);
}
.unlock-title { font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.035em; line-height: 1.1; }
.unlock-sub { margin: 10px auto 22px; max-width: 420px; font-size: 17px; line-height: 1.45; }

@media (max-width: 900px) {
  .radar-field { left: 50%; top: 76%; --k: 0.62; }
  .pop-card { --k2: 0.8; }
  .radar-blur { -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 76%, transparent 45%, #000 100%); mask-image: radial-gradient(ellipse 60% 40% at 50% 76%, transparent 45%, #000 100%); }
  .hero-wrap .hero { align-items: flex-start; min-height: 0; padding-bottom: 520px; }
  .hero-copy::before { inset: -40px -40px -60px; }
  .vids { grid-template-columns: repeat(2, 1fr); }
  .film-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .film-tiles { grid-template-columns: 1fr; }
  .lk-end { padding-bottom: 0; }
}
/* calmer pins */
.pin, .pip::before { box-shadow: 0 0 0 4px rgb(0 72 255 / 0.14); }
.pip { opacity: 0.6; }
.pip::before { width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
@keyframes pin {
  0% { transform: scale(1); }
  3% { transform: scale(1.9); box-shadow: 0 0 0 7px rgb(0 72 255 / 0.22); }
  16%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgb(0 72 255 / 0.14); }
}
/* stronger soft-focus where the radar passes under the copy */
.radar-blur {
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  -webkit-mask-image: radial-gradient(ellipse 38% 60% at 68% 50%, transparent 38%, rgb(0 0 0 / 0.85) 72%, #000 95%);
          mask-image: radial-gradient(ellipse 38% 60% at 68% 50%, transparent 38%, rgb(0 0 0 / 0.85) 72%, #000 95%);
}
.hero-copy::before {
  inset: -110px -150px -110px -200px;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.72) 50%, rgb(255 255 255 / 0.3) 78%, rgb(255 255 255 / 0));
}
@media (max-width: 900px) {
  .radar-field { --k: 0.5; top: 78%; }
  .radar-blur { -webkit-mask-image: radial-gradient(ellipse 70% 30% at 50% 80%, transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 70% 30% at 50% 80%, transparent 40%, #000 100%); }
  .hero-wrap .hero { padding-bottom: 460px; }
}
.pop { filter: blur(var(--f, 0px)); opacity: var(--o, 1); }
@media (max-width: 900px) { .pop { filter: blur(calc(var(--f, 0px) * 0.4)); opacity: calc(var(--o, 1) * 0.4 + 0.6); } }

/* =========================================================
   v7
   ========================================================= */

/* Every tile is a squircle (native corner-shape, like the Irreplicable site) */
.glass, .tile, .node, .plan, .promise, .doc, .unlock, .q, .compare-table, .numbers div,
.ft, .hooks-list li, .person, .shot, .vid-img, .pop-card, .bubble-in, .bubble-out, .stat {
  corner-shape: squircle;
}
.shot, .vid-img, .pop-card { border-radius: 32%; }
.tile, .q, .ft, .numbers div { border-radius: 24px; }
.plan, .doc, .promise, .compare-table, .unlock { border-radius: 32px; }
.hooks-list li { border-radius: 18px; }
/* Fallback squircle mask for browsers without corner-shape (images only, so shadows on tiles survive) */
@supports not (corner-shape: squircle) {
  .shot, .vid-img, .pop-card {
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C88 0 100 12 100 50S88 100 50 100 0 88 0 50 12 0 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C88 0 100 12 100 50S88 100 50 100 0 88 0 50 12 0 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}

/* Hero thumbnails: smaller, no outline, size by distance */
.pop-card {
  width: calc(78px * var(--s) * var(--k2, 1));
  border: 0;
  box-shadow: 0 14px 30px rgb(0 72 255 / 0.22), 0 2px 6px rgb(0 0 0 / 0.1);
}
.pop-card .views { left: 8px; bottom: 6px; font-size: calc(12px * var(--s) + 2px); }
.pop-card .views::before { width: calc(10px * var(--s) + 2px); height: calc(10px * var(--s) + 2px); }
/* fade out well before the sweep returns */
@keyframes pop {
  0% { transform: scale(0); opacity: 0; }
  2% { opacity: 1; }
  5% { transform: scale(1.16); animation-timing-function: ease-out; }
  8% { transform: scale(0.94); }
  11% { transform: scale(1.02); }
  13%, 50% { transform: scale(1); opacity: 1; }
  68% { transform: scale(0.82); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes pin {
  0% { transform: scale(1); opacity: 1; }
  3% { transform: scale(1.9); box-shadow: 0 0 0 7px rgb(0 72 255 / 0.22); }
  16% { transform: scale(1); box-shadow: 0 0 0 4px rgb(0 72 255 / 0.14); }
  55% { opacity: 1; }
  75%, 100% { opacity: 0.25; }
}
/* center: soft gradient halo instead of rings */
.radar-core { box-shadow: 0 12px 28px rgb(0 72 255 / 0.35); }
.radar-core::before {
  content: ""; position: absolute; inset: -70px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 72 255 / 0.3), rgb(0 72 255 / 0.14) 45%, rgb(0 72 255 / 0.05) 72%, rgb(0 72 255 / 0));
}

/* Problem: glass bubbles, no tile around them */
.thread { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.bubble-in, .bubble-out {
  max-width: 92%; padding: 14px 18px; border-radius: 24px; font-size: 16px; line-height: 1.4;
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.bubble-in {
  background: rgb(255 255 255 / 0.6); color: var(--ink);
  border: 1px solid rgb(255 255 255 / 0.8);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.8);
  border-bottom-left-radius: 24px;
}
.bubble-out {
  background: linear-gradient(135deg, rgb(0 72 255 / 0.88), rgb(0 72 255 / 0.9)); color: #fff;
  border: 1px solid rgb(255 255 255 / 0.25);
  box-shadow: 0 18px 40px rgb(0 72 255 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.35);
  border-bottom-right-radius: 24px;
}
.threads { gap: 28px; }

/* Sample: vertical thumbnails, less text */
.vids { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 4px; }
.vid-img { aspect-ratio: 9 / 16; border-radius: 22px; }
.vid figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.film-tiles { grid-template-columns: repeat(3, 1fr); }
.ft { padding: 16px 18px 18px; }
.ft b { font-size: 16px; }
.doc-sec { margin-top: 30px; }
.lk-end { padding-bottom: 230px; }

/* Pricing: free trial is the headline, price secondary */
.plan-price { font-size: clamp(38px, 4.4vw, 52px); letter-spacing: -0.05em; }
.plan-term { font-size: 16px; color: var(--gray); margin: 8px 0 24px; }

/* Guarantee: one dark glass tile like "Start with the phone you already have" */
.promise.tile {
  aspect-ratio: auto; max-width: 860px; margin: 16px auto 0;
  padding: 28px 30px 32px; display: flex; flex-direction: column;
}
.promise.tile h3 { margin-top: 36px; padding-top: 0; font-size: clamp(24px, 2.8vw, 30px); font-weight: 700; letter-spacing: -0.035em; color: #fff; }
.promise.tile p { margin-top: 8px; font-size: 15px; color: #a1a1a6; max-width: 520px; }

/* FAQ: smooth expand */
.q-body { overflow: hidden; }
.q-body p { padding: 0 24px 22px; }
.q.is-closing .caret { transform: translateY(-3px) rotate(45deg); }
@media (max-width: 900px) {
  .vids { grid-template-columns: repeat(3, 1fr); }
  .vids .vid:nth-child(n+4) { display: none; }
  .film-tiles { grid-template-columns: 1fr; }
}

/* =========================================================
   v8
   ========================================================= */
/* Hover a radar point to reveal its video (independent of the sweep) */
.hero-wrap .hero { pointer-events: none; }
.hero-copy { pointer-events: auto; }
.hit {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%;
  pointer-events: auto; cursor: pointer;
}
.hit::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(0 72 255 / 0.35); transition: box-shadow 0.35s var(--ease);
}
.pop:hover .hit::before { box-shadow: 0 0 0 10px rgb(0 72 255 / 0.18); }
.pop-hov {
  animation: none; opacity: 0; transform: scale(0); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1), opacity 0.2s ease;
}
.pop:hover .pop-hov { opacity: 1; transform: scale(1); pointer-events: auto; transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.5, 1), opacity 0.15s ease; }
.pop:hover { z-index: 5; }

/* Section numbers: true circles, centered */
.doc-sec h4 .n { flex: none; width: 24px; height: 24px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0; }

/* Hooks: plain blue numbers, consistent alignment */
.hooks-list li {
  display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 8px;
  padding: 13px 18px;
}
.hooks-list li::before,
.doc-sec .hooks-list li::before {
  content: counter(hk); position: static; translate: none; left: auto; top: auto;
  width: auto; height: auto; border-radius: 0; background: none; display: block;
  color: var(--blue-bright); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Pricing: left aligned */
.plan-left { align-items: flex-start; text-align: left; }
.plan-left .btn-block { width: auto; }
.plan-left .micro, .plan-left .cta-note { text-align: left; }

/* Guarantee tile without icon */
.promise.tile h3 { margin-top: 0; }

/* =========================================================
   v9
   ========================================================= */
/* Section badges drawn as SVG: always perfect, always centered */
.doc-sec h4 svg.n { flex: none; width: 24px; height: 24px; display: block; background: none; padding: 0; border-radius: 0; }
.doc-sec h4 svg.n text { fill: #fff; font: 700 12px "Inter", -apple-system, sans-serif; }

/* Room under the hooks for the unlock card */
.hooks-list { margin-bottom: 0; }
.doc { padding-bottom: 250px; }

/* What to film: title + expandable-looking shot list */
.ft { gap: 12px; }
.ft b { font-size: 16px; }
.shotlist {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 14px; corner-shape: squircle;
  background: rgb(0 72 255 / 0.07); color: var(--blue); font-size: 13px; font-weight: 600;
  transition: background 0.25s;
}
a.shotlist:hover { background: rgb(0 72 255 / 0.13); }
.sl-count { margin-left: auto; color: var(--gray); font-weight: 500; }
.chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); }

/* Problem section: glass message bubbles with tails, columns centered */
.threads { align-items: center; }
.bubble-in, .bubble-out { position: relative; overflow: visible; }
.bubble-in { border-bottom-left-radius: 8px; margin-left: 8px; }
.bubble-out { border-bottom-right-radius: 8px; margin-right: 8px; }
.bubble-in::after, .bubble-out::after {
  content: ""; position: absolute; bottom: -1px; width: 15px; height: 19px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19'%3E%3Cpath d='M15 0v19H1.5C.4 19-.3 17.9.4 17 4 12.6 6.5 7.6 7 0h8Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19'%3E%3Cpath d='M15 0v19H1.5C.4 19-.3 17.9.4 17 4 12.6 6.5 7.6 7 0h8Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bubble-in::after { left: -9px; background: rgb(255 255 255 / 0.66); }
.bubble-out::after { right: -9px; transform: scaleX(-1); background: rgb(0 54 196 / 0.92); }
/* Message tails: curved, flush with the bubble corner */
.bubble-in { border-bottom-left-radius: 4px; margin-left: 10px; }
.bubble-out { border-bottom-right-radius: 4px; margin-right: 10px; }
.bubble-in::after, .bubble-out::after {
  bottom: 0; width: 11px; height: 17px; transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M0 0C0 8 3 14 11 17H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M0 0C0 8 3 14 11 17H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bubble-out::after { left: 100%; right: auto; background: rgb(0 54 196 / 0.92); }
.bubble-in::after { right: 100%; left: auto; transform: scaleX(-1); background: rgb(255 255 255 / 0.62); }
.bubble-in, .bubble-out { border: 0; }
.bubble-in { box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.9); }
.bubble-out { box-shadow: 0 18px 40px rgb(0 72 255 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.3); }

/* =========================================================
   v10
   ========================================================= */
.btn { white-space: nowrap; }

/* Radar hover: one card only; dots ping like the sweep; blur stays */
.pop:hover .pop-hov { opacity: 0; transform: scale(0); pointer-events: none; }
.pop.hovering .pop-hov { opacity: 1; transform: scale(1); transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.5, 1), opacity 0.15s ease; }
.pop.hovering .pop-card:not(.pop-hov) { visibility: hidden; }
.pop:hover .hit::before { box-shadow: none; }
.pip .hit { left: -22px; top: -22px; width: 44px; height: 44px; }
.pip { pointer-events: none; }
.pop.ping .pin, .pip.ping::before { animation: ping-hover 0.7s ease-out; }
@keyframes ping-hover {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.9); box-shadow: 0 0 0 7px rgb(0 72 255 / 0.22); opacity: 1; }
  100% { transform: scale(1); box-shadow: 0 0 0 4px rgb(0 72 255 / 0.14); opacity: 1; }
}

/* Message bubbles: shape comes from one clip-path (body + tail) */
.thread { filter: drop-shadow(0 14px 26px rgb(0 72 255 / 0.12)); }
.bubble-in, .bubble-out {
  border: 0; border-radius: 0; corner-shape: round; margin: 0; box-shadow: none;
  clip-path: inset(0 round 22px);
}
.bubble-in::after, .bubble-out::after { content: none; }
.bubble-in {
  padding: 14px 18px 15px 28px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.62));
}
.bubble-out {
  padding: 14px 28px 15px 18px;
  background: linear-gradient(150deg, rgb(0 72 255 / 0.92), rgb(0 72 255 / 0.94));
}
.bubble-in::before, .bubble-out::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 38%);
  mix-blend-mode: soft-light;
}

/* Comparison: one straight column line */
.compare-table .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }

/* Stat tiles: number first, label under, centered */
.numbers div { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 4px; padding: 20px 12px; }
.numbers dd { margin: 0; }

/* Trust row */
.faces { flex: none; }

/* Sticky trial bar: squircle, single-line button */
.sticky-cta { border-radius: 26px; corner-shape: squircle; padding: 10px 10px 10px 18px; }
.sticky-cta .btn { flex: none; min-height: 40px; padding: 0 18px; }
.sticky-cta div { min-width: 0; }

/* Unlock button: short label on small screens */
.t-sm { display: none; }

@media (max-width: 720px) {
  .numbers div { padding: 16px 6px; gap: 2px; }
  .numbers dd { font-size: 24px; }
  .numbers dt { font-size: 10.5px; line-height: 1.25; }
  .doc { padding-bottom: 28px; }
  .unlock { position: relative; left: auto; right: auto; bottom: auto; translate: none; margin: -36px auto 0; width: 100%; padding: 26px 20px 24px; }
  .t-lg { display: none; } .t-sm { display: inline; }
  .trust { align-items: center; }
  .trust p { min-width: 0; }
}

/* =========================================================
   v11
   ========================================================= */
/* Radar hover: glow ring back, already-visible cards grow a little */
.pop:hover .hit::before, .pip:hover .hit::before { box-shadow: 0 0 0 10px rgb(0 72 255 / 0.18); }
.pop-card { transition: scale 0.4s cubic-bezier(0.34, 1.6, 0.5, 1); }
.pop.grow .pop-card:not(.pop-hov) { scale: 1.14; }
@media (hover: none), (pointer: coarse) {
  .hit { pointer-events: none; }
  .pop:hover .hit::before, .pip:hover .hit::before { box-shadow: none; }
}

/* Message bubbles: real glass, like the tiles */
.thread { filter: none; }
.bubble-in {
  background: linear-gradient(160deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.42));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
}
.bubble-out {
  background: linear-gradient(150deg, rgb(0 72 255 / 0.72), rgb(0 54 196 / 0.78));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.18);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
}
.problem .threads { position: relative; }
.problem .threads::before {
  content: ""; position: absolute; inset: -40px -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(260px 160px at 20% 60%, rgb(0 72 255 / 0.14), transparent 70%),
    radial-gradient(260px 160px at 52% 40%, rgb(77 133 255 / 0.2), transparent 70%),
    radial-gradient(260px 160px at 84% 62%, rgb(0 72 255 / 0.12), transparent 70%);
  filter: blur(20px);
}

/* Short labels where needed */
.numbers dt .t-sm { display: none; }

@media (max-width: 720px) {
  .numbers dt .t-lg { display: none; } .numbers dt .t-sm { display: inline; }
  .numbers dt { font-size: 12px; }

  /* Bento becomes a swipeable carousel */
  .bento {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 26px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento .tile, .bento .tile-wide { flex: 0 0 74%; scroll-snap-align: center; min-height: 210px; aspect-ratio: auto; }
  .bento .tile h3 { margin-top: auto; padding-top: 20px; }

  /* Comparison: label on top, two cells side by side */
  .compare-table .row { grid-template-columns: 1fr 1fr; }
  .compare-table .row > span:first-child { grid-column: 1 / -1; padding: 14px 16px 2px; font-size: 12px; color: var(--gray); font-weight: 600; }
  .compare-table .row > span { padding: 6px 16px 14px; font-size: 14px; }
  .compare-table .row.head > span:first-child { display: none; }
  .compare-table .row.head > span { padding: 16px; }
  .compare-table .us { align-items: flex-start; }
  .compare-table .us .yes { margin-top: 1px; }

  /* Pricing centered */
  .plan-left { align-items: center; text-align: center; }
  .plan-left .micro, .plan-left .cta-note { text-align: center; }
}

/* =========================================================
   v12
   ========================================================= */
/* Hover: grow the point's own glow instead of adding a ring */
@property --g { syntax: '<length>'; inherits: true; initial-value: 4px; }
.pop, .pip { --g: 4px; transition: --g 0.35s cubic-bezier(0.34, 1.6, 0.5, 1); }
.pin, .pip::before { box-shadow: 0 0 0 var(--g) rgb(0 72 255 / 0.16); }
.hit::before { display: none; }
.hit { left: -34px; top: -34px; width: 68px; height: 68px; }
.pip .hit { left: -30px; top: -30px; width: 60px; height: 60px; }
@keyframes pin {
  0% { transform: scale(1); opacity: 1; }
  3% { transform: scale(1.9); box-shadow: 0 0 0 calc(var(--g) + 3px) rgb(0 72 255 / 0.22); }
  16% { transform: scale(1); box-shadow: 0 0 0 var(--g) rgb(0 72 255 / 0.16); }
  55% { opacity: 1; }
  75%, 100% { opacity: 0.25; box-shadow: 0 0 0 var(--g) rgb(0 72 255 / 0.16); }
}
@keyframes ping-hover {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .pop:hover, .pip:has(.hit:hover) { --g: 9px; }
  .pop:hover .pin { opacity: 1; }
  .radar-core { pointer-events: auto; cursor: pointer; transition: scale 0.45s cubic-bezier(0.34, 1.6, 0.5, 1); }
  .radar-core:hover { scale: 1.12; }
}

/* Locked content: blurrier and more transparent together */
.lk { opacity: var(--lo, 0.5); }

@media (max-width: 720px) {
  /* Carousel: room for full shadows, no hard edge */
  .bento { padding: 34px var(--gutter) 64px; margin: -34px calc(var(--gutter) * -1) -40px; }

  /* Comparison: one continuous blue column, labels centered across */
  .compare-table { background: linear-gradient(90deg, rgb(255 255 255 / 0) 50%, rgb(0 72 255 / 0.07) 50%), rgb(255 255 255 / 0.55); }
  .compare-table .us { background: none; }
  .compare-table .row > span:first-child { text-align: center; justify-content: center; padding-top: 16px; }
  .compare-table .row { border-top-color: rgb(0 0 0 / 0.05); }
}

/* =========================================================
   v13
   ========================================================= */
/* Hovered points stay enlarged for as long as they're hovered */
.pin, .pip::before { transition: scale 0.45s cubic-bezier(0.34, 1.7, 0.5, 1); }
@media (hover: hover) and (pointer: fine) {
  .pop:hover .pin { scale: 1.7; }
  .pip:has(.hit:hover)::before { scale: 1.8; opacity: 1; }
}

/* Mobile comparison cards (hidden on desktop) */
.compare-cards { display: none; }

@media (max-width: 720px) {
  /* Hero: centered, no sample link, note under the button */
  .hero-copy { text-align: center; margin-inline: auto; }
  .hero-copy .cta-row { justify-content: center; }
  .hero-sample { display: none; }
  .hero-copy .micro { margin-top: 12px; }
  .trust { justify-content: center; text-align: left; }

  /* Radar thumbnails: blur/fade tuned to the mobile layout */
  .pop { filter: blur(var(--fm, 0px)); opacity: var(--om, 1); }

  /* Ambient light: one on each side, offset */
  .ambient span:nth-child(1) { width: 110vw; height: 110vw; left: -60vw; top: 22vh; }
  .ambient span:nth-child(2) { width: 100vw; height: 100vw; right: -55vw; left: auto; top: 58vh; }
  .ambient span:nth-child(3), .ambient span:nth-child(4), .ambient span:nth-child(5) { display: none; }

  /* Shorter lists in the sample */
  .film-tiles .ft:nth-child(n+3) { display: none; }
  .hooks-list li:nth-child(n+4) { display: none; }

  /* Comparison: two cards */
  .compare-table { display: none; }
  .compare-cards { display: grid; gap: 14px; }
  .cc { padding: 22px 20px 20px; border-radius: 26px; corner-shape: squircle; }
  .cc-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
  .cc ul { display: grid; gap: 0; }
  .cc li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 15px; line-height: 1.4; border-top: 1px solid rgb(0 0 0 / 0.06); }
  .cc li:first-child { border-top: 0; }
  .cc .yes { margin-top: 1px; flex: none; }
  .cc-us { background: linear-gradient(160deg, rgb(0 72 255 / 0.16), rgb(0 72 255 / 0.08)), rgb(255 255 255 / 0.6); }
  .cc-us .cc-title { color: var(--blue); }
  .cc-us li { font-weight: 600; }
  .cc-them { opacity: 0.85; }
  .cc-them .cc-title { color: var(--gray); }
  .cc-them li { color: var(--gray); }
  .no { position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgb(0 0 0 / 0.08); }
  .no::before, .no::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.6px; border-radius: 1px; background: var(--gray-2); }
  .no::before { transform: translate(-50%, -50%) rotate(45deg); }
  .no::after { transform: translate(-50%, -50%) rotate(-45deg); }
}

/* =========================================================
   v14
   ========================================================= */
/* Radar x/y axes, visible on desktop too */
.radar-axes {
  position: absolute; left: -900px; top: -900px; width: 1800px; height: 1800px; pointer-events: none;
  background:
    linear-gradient(transparent calc(50% - 0.5px), rgb(0 72 255 / 0.22) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(0 72 255 / 0.22) 0 calc(50% + 0.5px), transparent 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, rgb(0 0 0 / 0.5) 55%, transparent 85%);
          mask-image: radial-gradient(closest-side, #000 25%, rgb(0 0 0 / 0.5) 55%, transparent 85%);
}

/* Comparison: one sheet, two columns, rows lined up across */
.compare-cards {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(5, auto);
  max-width: 860px; margin-inline: auto; overflow: hidden;
  border-radius: 32px; corner-shape: squircle;
  background: rgb(255 255 255 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.75);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.7);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.cc { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; padding: 0; }
.cc ul { display: contents; }
.cc-title { margin: 0; padding: 22px 28px 16px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.cc li {
  display: flex; align-items: center; gap: 12px; padding: 16px 28px;
  font-size: 15px; line-height: 1.4; border-top: 1px solid rgb(0 0 0 / 0.06);
}
.cc-us { background: linear-gradient(160deg, rgb(0 72 255 / 0.14), rgb(0 72 255 / 0.07)); }
.cc-us .cc-title { color: var(--blue); }
.cc-us li { font-weight: 600; color: var(--ink); }
.cc-them .cc-title { color: var(--gray); }
.cc-them li { color: var(--gray); }
.cc .yes, .no { flex: none; }
.no { position: relative; width: 18px; height: 18px; border-radius: 50%; background: rgb(0 0 0 / 0.08); }
.no::before, .no::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.6px; border-radius: 1px; background: var(--gray-2); }
.no::before { transform: translate(-50%, -50%) rotate(45deg); }
.no::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 720px) {
  /* Comparison: stacked cards on phones */
  .compare-cards { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; border-radius: 0; }
  .cc { grid-row: auto; display: block; padding: 22px 20px 20px; border-radius: 26px; corner-shape: squircle;
        border: 1px solid rgb(255 255 255 / 0.75); box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.7);
        backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
  .cc ul { display: grid; }
  .cc-title { padding: 0 0 12px; }
  .cc li { padding: 11px 0; align-items: flex-start; }
  .cc li:first-child { border-top: 0; }
  .cc-us { background: linear-gradient(160deg, rgb(0 72 255 / 0.16), rgb(0 72 255 / 0.08)), rgb(255 255 255 / 0.6); }
  .cc-them { background: rgb(255 255 255 / 0.55); opacity: 0.85; }

  /* Trust line centered */
  .trust { flex-direction: column; gap: 10px; text-align: center; }

  /* Radar sits higher, behind the text */
  .radar-field { top: 610px; }
  .hero-wrap .hero { padding-bottom: 300px; }
  .radar-blur {
    -webkit-mask-image: radial-gradient(ellipse 230px 200px at 50% 610px, transparent 45%, #000 100%);
            mask-image: radial-gradient(ellipse 230px 200px at 50% 610px, transparent 45%, #000 100%);
  }
  .hero-copy::before { inset: -40px -30px -30px; }
}

/* =========================================================
   v15
   ========================================================= */
/* Thumbnails: bounce out bigger, then keep slowly shrinking, then fade and shrink faster */
@keyframes pop {
  0%   { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  2%   { opacity: 1; }
  6%   { transform: scale(1.28); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  10%  { transform: scale(1.18); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50%  { transform: scale(0.94); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4); }
  64%  { transform: scale(0.45); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}

/* Comparison sheet: no white outline around the blue side */
.compare-cards {
  border: 0;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
}
@media (max-width: 720px) {
  .compare-cards { box-shadow: none; }
  .cc { border: 0; box-shadow: 0 16px 40px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04); }
}


/* v16: one smooth continuous pop curve (bounce, slow shrink, faster fade) */
@keyframes pop {
  0.0% { transform: scale(0.0000); opacity: 0.000; }
  0.5% { transform: scale(0.0625); opacity: 0.417; }
  1.0% { transform: scale(0.2114); opacity: 0.833; }
  1.5% { transform: scale(0.3988); opacity: 1.000; }
  2.0% { transform: scale(0.5903); opacity: 1.000; }
  2.5% { transform: scale(0.7639); opacity: 1.000; }
  3.0% { transform: scale(0.9074); opacity: 1.000; }
  3.5% { transform: scale(1.0164); opacity: 1.000; }
  4.0% { transform: scale(1.0918); opacity: 1.000; }
  4.5% { transform: scale(1.1376); opacity: 1.000; }
  5.0% { transform: scale(1.1597); opacity: 1.000; }
  5.5% { transform: scale(1.1641); opacity: 1.000; }
  6.0% { transform: scale(1.1567); opacity: 1.000; }
  6.5% { transform: scale(1.1424); opacity: 1.000; }
  7.0% { transform: scale(1.1250); opacity: 1.000; }
  7.5% { transform: scale(1.1072); opacity: 1.000; }
  8.0% { transform: scale(1.0909); opacity: 1.000; }
  8.5% { transform: scale(1.0770); opacity: 1.000; }
  9.0% { transform: scale(1.0659); opacity: 1.000; }
  9.5% { transform: scale(1.0574); opacity: 1.000; }
  10.0% { transform: scale(1.0514); opacity: 1.000; }
  10.5% { transform: scale(1.0472); opacity: 1.000; }
  11.0% { transform: scale(1.0445); opacity: 1.000; }
  11.5% { transform: scale(1.0427); opacity: 1.000; }
  12.0% { transform: scale(1.0415); opacity: 1.000; }
  12.5% { transform: scale(1.0405); opacity: 1.000; }
  13.0% { transform: scale(1.0396); opacity: 1.000; }
  13.5% { transform: scale(1.0385); opacity: 1.000; }
  14.0% { transform: scale(1.0372); opacity: 1.000; }
  14.5% { transform: scale(1.0358); opacity: 1.000; }
  15.0% { transform: scale(1.0341); opacity: 1.000; }
  15.5% { transform: scale(1.0322); opacity: 1.000; }
  16.0% { transform: scale(1.0301); opacity: 1.000; }
  16.5% { transform: scale(1.0280); opacity: 1.000; }
  17.0% { transform: scale(1.0257); opacity: 1.000; }
  17.5% { transform: scale(1.0235); opacity: 1.000; }
  18.0% { transform: scale(1.0212); opacity: 1.000; }
  18.5% { transform: scale(1.0189); opacity: 1.000; }
  19.0% { transform: scale(1.0166); opacity: 1.000; }
  19.5% { transform: scale(1.0143); opacity: 1.000; }
  20.0% { transform: scale(1.0120); opacity: 1.000; }
  20.5% { transform: scale(1.0098); opacity: 1.000; }
  21.0% { transform: scale(1.0076); opacity: 1.000; }
  21.5% { transform: scale(1.0054); opacity: 1.000; }
  22.0% { transform: scale(1.0032); opacity: 1.000; }
  22.5% { transform: scale(1.0010); opacity: 1.000; }
  23.0% { transform: scale(0.9988); opacity: 1.000; }
  23.5% { transform: scale(0.9966); opacity: 1.000; }
  24.0% { transform: scale(0.9944); opacity: 1.000; }
  24.5% { transform: scale(0.9922); opacity: 1.000; }
  25.0% { transform: scale(0.9900); opacity: 1.000; }
  25.5% { transform: scale(0.9878); opacity: 1.000; }
  26.0% { transform: scale(0.9856); opacity: 1.000; }
  26.5% { transform: scale(0.9834); opacity: 1.000; }
  27.0% { transform: scale(0.9812); opacity: 1.000; }
  27.5% { transform: scale(0.9790); opacity: 1.000; }
  28.0% { transform: scale(0.9768); opacity: 1.000; }
  28.5% { transform: scale(0.9746); opacity: 1.000; }
  29.0% { transform: scale(0.9724); opacity: 1.000; }
  29.5% { transform: scale(0.9702); opacity: 1.000; }
  30.0% { transform: scale(0.9680); opacity: 1.000; }
  30.5% { transform: scale(0.9658); opacity: 1.000; }
  31.0% { transform: scale(0.9636); opacity: 1.000; }
  31.5% { transform: scale(0.9614); opacity: 1.000; }
  32.0% { transform: scale(0.9592); opacity: 1.000; }
  32.5% { transform: scale(0.9570); opacity: 1.000; }
  33.0% { transform: scale(0.9548); opacity: 1.000; }
  33.5% { transform: scale(0.9526); opacity: 1.000; }
  34.0% { transform: scale(0.9504); opacity: 1.000; }
  34.5% { transform: scale(0.9482); opacity: 1.000; }
  35.0% { transform: scale(0.9460); opacity: 1.000; }
  35.5% { transform: scale(0.9438); opacity: 1.000; }
  36.0% { transform: scale(0.9416); opacity: 1.000; }
  36.5% { transform: scale(0.9394); opacity: 1.000; }
  37.0% { transform: scale(0.9372); opacity: 1.000; }
  37.5% { transform: scale(0.9350); opacity: 1.000; }
  38.0% { transform: scale(0.9328); opacity: 1.000; }
  38.5% { transform: scale(0.9306); opacity: 1.000; }
  39.0% { transform: scale(0.9284); opacity: 1.000; }
  39.5% { transform: scale(0.9262); opacity: 1.000; }
  40.0% { transform: scale(0.9240); opacity: 1.000; }
  40.5% { transform: scale(0.9218); opacity: 1.000; }
  41.0% { transform: scale(0.9196); opacity: 1.000; }
  41.5% { transform: scale(0.9174); opacity: 1.000; }
  42.0% { transform: scale(0.9152); opacity: 1.000; }
  42.5% { transform: scale(0.9130); opacity: 1.000; }
  43.0% { transform: scale(0.9108); opacity: 1.000; }
  43.5% { transform: scale(0.9086); opacity: 1.000; }
  44.0% { transform: scale(0.9064); opacity: 1.000; }
  44.5% { transform: scale(0.9042); opacity: 1.000; }
  45.0% { transform: scale(0.9020); opacity: 1.000; }
  45.5% { transform: scale(0.8998); opacity: 1.000; }
  46.0% { transform: scale(0.8976); opacity: 1.000; }
  46.5% { transform: scale(0.8954); opacity: 1.000; }
  47.0% { transform: scale(0.8932); opacity: 1.000; }
  47.5% { transform: scale(0.8910); opacity: 1.000; }
  48.0% { transform: scale(0.8888); opacity: 1.000; }
  48.5% { transform: scale(0.8866); opacity: 1.000; }
  49.0% { transform: scale(0.8844); opacity: 1.000; }
  49.5% { transform: scale(0.8822); opacity: 1.000; }
  50.0% { transform: scale(0.8800); opacity: 1.000; }
  50.5% { transform: scale(0.8780); opacity: 0.996; }
  51.0% { transform: scale(0.8723); opacity: 0.985; }
  51.5% { transform: scale(0.8631); opacity: 0.968; }
  52.0% { transform: scale(0.8508); opacity: 0.945; }
  52.5% { transform: scale(0.8355); opacity: 0.916; }
  53.0% { transform: scale(0.8177); opacity: 0.882; }
  53.5% { transform: scale(0.7975); opacity: 0.844; }
  54.0% { transform: scale(0.7753); opacity: 0.802; }
  54.5% { transform: scale(0.7514); opacity: 0.756; }
  55.0% { transform: scale(0.7261); opacity: 0.708; }
  55.5% { transform: scale(0.6996); opacity: 0.658; }
  56.0% { transform: scale(0.6722); opacity: 0.606; }
  56.5% { transform: scale(0.6442); opacity: 0.553; }
  57.0% { transform: scale(0.6160); opacity: 0.500; }
  57.5% { transform: scale(0.5878); opacity: 0.447; }
  58.0% { transform: scale(0.5598); opacity: 0.394; }
  58.5% { transform: scale(0.5324); opacity: 0.342; }
  59.0% { transform: scale(0.5059); opacity: 0.292; }
  59.5% { transform: scale(0.4806); opacity: 0.244; }
  60.0% { transform: scale(0.4567); opacity: 0.198; }
  60.5% { transform: scale(0.4345); opacity: 0.156; }
  61.0% { transform: scale(0.4143); opacity: 0.118; }
  61.5% { transform: scale(0.3965); opacity: 0.084; }
  62.0% { transform: scale(0.3812); opacity: 0.055; }
  62.5% { transform: scale(0.3689); opacity: 0.032; }
  63.0% { transform: scale(0.3597); opacity: 0.015; }
  63.5% { transform: scale(0.3540); opacity: 0.004; }
  64.0% { transform: scale(0.3520); opacity: 0.000; }
  100% { transform: scale(0); opacity: 0; }
}
.pop-card { animation-timing-function: linear; }

/* Phones: smaller thumbnails, and the blurrier, fainter ones are smaller still */
@media (max-width: 720px) {
  .pop-card { --k2: 0.66; width: calc(78px * var(--s) * var(--k2) * (0.35 + 0.65 * var(--om, 1))); }
}

/* Link to Irreplicable at the very bottom */
.more-wrap { padding-block: 0 72px; }
.more {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 720px; margin-inline: auto; padding: 26px 32px;
  border-radius: 28px; corner-shape: squircle; color: inherit; text-decoration: none;
  transition: transform 0.35s var(--ease);
}
.more:hover { transform: translateY(-2px); }
.more-copy { display: grid; gap: 4px; }
.more-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.more-sub { font-size: 15px; color: var(--gray); }
.more-link { flex: none; }
.more:hover .more-link { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .more { flex-direction: column; text-align: center; gap: 12px; padding: 24px 22px; }
  .more-wrap { padding-bottom: 120px; }
}
.more { aspect-ratio: auto; flex-direction: row; }
.closing { padding-bottom: 88px; }
@media (max-width: 720px) {
  .more { flex-direction: column; }
  .closing { padding-bottom: 64px; }
}

/* =========================================================
   v17
   ========================================================= */
/* Hover: the hovered thumbnail stays fully visible, no fading while hovered */
.pop.hovering .pop-hov { opacity: 1; transform: scale(1.1); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.5, 1), opacity 0.25s ease; }
.pop.hovering .pin { opacity: 1 !important; }

/* Desktop: x/y axes clearer, crossing at the car */
.radar-axes {
  background:
    linear-gradient(transparent calc(50% - 0.5px), rgb(0 72 255 / 0.32) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(0 72 255 / 0.32) 0 calc(50% + 0.5px), transparent 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, rgb(0 0 0 / 0.5) 70%, transparent 95%);
          mask-image: radial-gradient(closest-side, #000 45%, rgb(0 0 0 / 0.5) 70%, transparent 95%);
}

/* Bottom link card: compact */
@media (max-width: 720px) {
  .radar-axes {
    background:
      linear-gradient(transparent calc(50% - 0.5px), rgb(0 72 255 / 0.22) 0 calc(50% + 0.5px), transparent 0),
      linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(0 72 255 / 0.22) 0 calc(50% + 0.5px), transparent 0);
    -webkit-mask-image: radial-gradient(closest-side, #000 25%, rgb(0 0 0 / 0.5) 55%, transparent 85%);
            mask-image: radial-gradient(closest-side, #000 25%, rgb(0 0 0 / 0.5) 55%, transparent 85%);
  }
  /* Phones: thumbnails a bit bigger; faint ones still smaller */
  .pop-card { --k2: 0.8; width: calc(78px * var(--s) * var(--k2) * (0.45 + 0.55 * var(--om, 1))); }
  /* Clear area around the center so nearby thumbnails stay sharp */
  .radar-blur {
    -webkit-mask-image: radial-gradient(ellipse 260px 230px at 50% 610px, transparent 62%, #000 100%);
            mask-image: radial-gradient(ellipse 260px 230px at 50% 610px, transparent 62%, #000 100%);
  }
  .more-wrap { padding-bottom: 104px; }
  .more { gap: 8px; padding: 18px 20px; border-radius: 22px; }
  .more-copy { gap: 2px; }
  .more-title { font-size: 16px; }
  .more-sub { font-size: 13.5px; }
  .more-link { font-size: 14px; }
}

/* =========================================================
   v18
   ========================================================= */
/* Hand-off after hover: the hover copy stays on top while it glides back into the cycle */
.pop.leaving .pop-card:not(.pop-hov) { visibility: hidden; }
.pop.leaving { z-index: 5; }

/* Cursor wobble: driven by --jx/--jy/--jr/--js from the script */
.pop-card { translate: calc(-50% + var(--jx, 0px)) var(--jy, 0px); rotate: var(--jr, 0deg); scale: var(--js, 1); }
.pop-card:not(.pop-hov) { transition: none; }

/* Center dot: grows in place (no sideways shift) */
.radar-core { translate: none; margin: -33px 0 0 -33px; transform-origin: 50% 50%; }
@media (hover: hover) and (pointer: fine) {
  .radar-core { transition: transform 0.45s cubic-bezier(0.34, 1.6, 0.5, 1); }
  .radar-core:hover { scale: 1; transform: scale(1.12); }
}

/* =========================================================
   v19
   ========================================================= */
/* Center dot: always on its own layer, so hovering doesn't nudge it a pixel */
.radar-core { will-change: transform; transform: translateZ(0) scale(1); backface-visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .radar-core:hover { transform: translateZ(0) scale(1.12); }
}


/* Proof thumbnails: cursor wobble */
.proof .shot { translate: var(--jx, 0px) var(--jy, 0px); rotate: var(--jr, 0deg); scale: var(--js, 1); }

/* =========================================================
   v20
   ========================================================= */
/* Radar axes as two real hairlines (the gradient version could vanish at some window sizes) */
.radar-axes, .radar-axes * { background: none; -webkit-mask-image: none; mask-image: none; }
.radar-axes { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; }
.radar-axes::before, .radar-axes::after { content: ""; position: absolute; pointer-events: none; }
.radar-axes::before {
  left: -820px; width: 1640px; top: -0.5px; height: 1px;
  background: linear-gradient(90deg, rgb(0 72 255 / 0), rgb(0 72 255 / 0.3) 30%, rgb(0 72 255 / 0.3) 70%, rgb(0 72 255 / 0));
}
.radar-axes::after {
  top: -820px; height: 1640px; left: -0.5px; width: 1px;
  background: linear-gradient(rgb(0 72 255 / 0), rgb(0 72 255 / 0.3) 30%, rgb(0 72 255 / 0.3) 70%, rgb(0 72 255 / 0));
}
@media (max-width: 720px) {
  .radar-axes::before { left: -450px; width: 900px; background: linear-gradient(90deg, rgb(0 72 255 / 0), rgb(0 72 255 / 0.24) 25%, rgb(0 72 255 / 0.24) 75%, rgb(0 72 255 / 0)); }
  .radar-axes::after { top: -450px; height: 900px; background: linear-gradient(rgb(0 72 255 / 0), rgb(0 72 255 / 0.24) 25%, rgb(0 72 255 / 0.24) 75%, rgb(0 72 255 / 0)); }
}

/* =========================================================
   v21
   ========================================================= */
/* Wordmark in the headline font, with a placeholder logo mark */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Inter", system-ui, sans-serif; font-style: normal; font-weight: 700;
  letter-spacing: -0.035em; color: var(--ink); text-decoration: none;
}
.nav .wordmark { font-size: 18px; }
.footer .wordmark { font-size: 17px; }
.issue-head .wordmark, .doc-head .wordmark { font-size: 16px; }
.logo-mark {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 30%; corner-shape: squircle;
  background: linear-gradient(135deg, #0048ff, #0036c4);
  box-shadow: 0 4px 10px rgb(0 72 255 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.25);
  color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  padding-bottom: 2px;
}
.footer .logo-mark { width: 26px; height: 26px; font-size: 16px; }

/* =========================================================
   v22
   ========================================================= */
/* Desktop axes: same blue and weight as the rings, fading out toward the edges like them */
@media (min-width: 721px) {
  .radar-axes::before {
    left: -740px; width: 1480px; top: -0.75px; height: 1.5px;
    background: linear-gradient(90deg,
      rgb(0 72 255 / 0) 0%, rgb(0 72 255 / 0.07) 21%, rgb(0 72 255 / 0.14) 38.5%,
      rgb(0 72 255 / 0.14) 61.5%, rgb(0 72 255 / 0.07) 79%, rgb(0 72 255 / 0) 100%);
  }
  .radar-axes::after {
    top: -740px; height: 1480px; left: -0.75px; width: 1.5px;
    background: linear-gradient(
      rgb(0 72 255 / 0) 0%, rgb(0 72 255 / 0.07) 21%, rgb(0 72 255 / 0.14) 38.5%,
      rgb(0 72 255 / 0.14) 61.5%, rgb(0 72 255 / 0.07) 79%, rgb(0 72 255 / 0) 100%);
  }
}

/* =========================================================
   v23
   ========================================================= */
/* Rings and axes drawn as vectors: smooth circles, both axes identical, faded by the same mask */
.radar-disc { background: radial-gradient(closest-side, rgb(217 228 255 / 0.55), rgb(217 228 255 / 0) 70%); }
.radar-axes { display: none; }

/* Wordmark: flat circular placeholder mark */
.logo-mark { border-radius: 50%; corner-shape: round; box-shadow: none; }

/* =========================================================
   v24
   ========================================================= */
/* Rings + axes: thin, even, all the same weight */
.radar-vec { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; background: none; }
.radar-vec g { fill: none; stroke: rgb(0 72 255); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar-vec .rings { stroke-opacity: 0.12; }
.radar-vec .axes { stroke-opacity: 0.13; }

/* Points and thumbnails sit fully on top of the lines: fade with solid colors instead of see-through */
@property --pc { syntax: '<color>'; inherits: false; initial-value: #0048ff; }
@property --hc { syntax: '<color>'; inherits: false; initial-value: #d9e4ff; }
.radar-disc { z-index: 0; }
.pop, .pip { z-index: 2; }
.pop { opacity: 1; --wash: calc(1 - var(--o, 1)); }
@media (max-width: 900px) { .pop { opacity: 1; --wash: calc((1 - var(--o, 1)) * 0.4); } }
@media (max-width: 720px) { .pop { opacity: 1; --wash: calc(1 - var(--om, 1)); } }
.pop-card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgb(241 245 255 / var(--wash, 0));
}
.pin {
  opacity: 1;
  background: color-mix(in srgb, var(--pc), #eef3ff calc(var(--wash, 0) * 100%));
  box-shadow: 0 0 0 var(--g) color-mix(in srgb, var(--hc), #eef3ff calc(var(--wash, 0) * 100%));
}
@keyframes pin {
  0%   { transform: scale(1); --pc: #0048ff; --hc: #d9e4ff; }
  3%   { transform: scale(1.9); --hc: #ccdaff; }
  16%  { transform: scale(1); --hc: #d9e4ff; }
  55%  { --pc: #0048ff; --hc: #d9e4ff; }
  75%, 100% { transform: scale(1); --pc: #b8ccff; --hc: #e8eeff; }
}
.pop.hovering .pin, .pop.leaving .pin { --pc: #0048ff !important; --hc: #d9e4ff !important; }
.pip { opacity: 1; }
.pip::before { background: #8cabff; box-shadow: 0 0 0 var(--g) #e3eaff; }
@keyframes ping-hover {
  0% { transform: scale(1); }
  25% { transform: scale(1.9); }
  100% { transform: scale(1); }
}

/* Wordmark a touch lighter */
.wordmark { font-weight: 600; }
/* Faded thumbnails: their shadow fades with them, so they stay light like before */
.pop-card {
  box-shadow: 0 16px 34px rgb(0 72 255 / calc(0.22 * (1 - var(--wash, 0)))), 0 2px 6px rgb(0 0 0 / calc(0.08 * (1 - var(--wash, 0))));
}
.pip { z-index: 1; }

/* =========================================================
   v26
   ========================================================= */
/* Point halos: see-through blue again (no lighter ring when they grow) */
@property --hc { syntax: '<color>'; inherits: false; initial-value: rgb(0 72 255 / 0.16); }
.pin { box-shadow: 0 0 0 var(--g) color-mix(in srgb, var(--hc), transparent calc(var(--wash, 0) * 100%)); }
@keyframes pin {
  0%   { transform: scale(1); --pc: #0048ff; --hc: rgb(0 72 255 / 0.16); }
  3%   { transform: scale(1.9); --hc: rgb(0 72 255 / 0.22); }
  16%  { transform: scale(1); --hc: rgb(0 72 255 / 0.16); }
  55%  { --pc: #0048ff; --hc: rgb(0 72 255 / 0.16); }
  75%, 100% { transform: scale(1); --pc: #b8ccff; --hc: rgb(0 72 255 / 0.08); }
}
.pop.hovering .pin, .pop.leaving .pin { --pc: #0048ff !important; --hc: rgb(0 72 255 / 0.16) !important; }
.pip::before { box-shadow: 0 0 0 var(--g) rgb(0 72 255 / 0.12); }

/* v27: real placeholder logo image */
img.logo-mark { display: block; width: 28px; height: 28px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.footer img.logo-mark { width: 26px; height: 26px; }

/* v29: radar center is the logo */
.radar-core { background: none; overflow: visible; }
.radar-core img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; }

/* v32: section number circles never clipped */
.doc-sec h4 { position: relative; z-index: 2; overflow: visible; padding-block: 2px; }
.doc-sec h4 .n { overflow: visible; }
.hooks-list { margin-top: 4px; }