:root {
  --paper: #f6f7f6;
  --dot: #d9dddb;
  --card: #ffffff;
  --ink: #15191b;
  --muted: #646d71;
  --line: #e3e7e5;
  --accent: #1f2fe6;
  --accent-ink: #0e1a9e;
  --accent-wash: #e7eaff;
  --shadow: 0 1px 2px rgba(21, 25, 27, .05), 0 12px 32px -12px rgba(14, 26, 120, .14);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Nothing You Could Do", cursive;

  --wrap: 1080px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.18; letter-spacing: -0.02em; text-align: center; }
h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.27; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

section { padding: 96px var(--gutter); max-width: var(--wrap); margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--sans);
  color: #fff; background: var(--accent);
  border: 0; border-radius: 999px;
  padding: 15px 26px;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  transition: background .15s;
}
.btn:hover { background: var(--accent-ink); }
.btn--small { font-size: 14px; padding: 10px 16px; }
.btn--big { font-size: 17px; padding: 18px 34px; margin-top: 28px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px;
  background: rgba(246, 247, 246, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.nav__brand { font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.nav__brand span { color: var(--accent); }
.nav__links { display: flex; gap: 28px; font-size: 15px; letter-spacing: -0.01em; color: #6b6b6b; }
.nav__links a { text-decoration: none; }
.nav__links a:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { text-align: center; padding-top: 72px; }
.hero__title {
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1; letter-spacing: -0.03em;
  max-width: 18ch; margin: 0 auto;
}
/* Selection box: a cursor drags a dashed selection from top-left to bottom-right,
   lets go, then the selection poofs away. One loop = 2.5s.
   Width and height use different curves so the drag reads like a real hand, not a straight tween. */
.select {
  --loop: 2.5s;
  position: relative; display: inline-block; isolation: isolate;
  color: var(--ink);
  padding: 0 .12em; margin-top: .08em;
}
/* Blue copy of the words on top of the black ones. It's revealed left to right in step with the drag,
   then fades back to black with the poof, so each loop starts black. */
.select__fill {
  position: absolute; inset: 0; padding: inherit;
  color: var(--accent-ink);
  clip-path: inset(0 0 0 0);
  animation: sel-fill var(--loop) infinite;
}
.select__track {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: 100%;
  animation: sel-w var(--loop) infinite, sel-h var(--loop) infinite;
}
.select__box {
  position: absolute; inset: 0;
  background: var(--accent-wash);
  outline: 1.5px dashed var(--accent);
  transform-origin: center;
  animation: sel-poof var(--loop) infinite;
}
.select__box i {
  position: absolute; width: 9px; height: 9px;
  background: #fff; border: 1.5px solid var(--accent);
}
.select__box i:nth-child(1) { top: -5px; left: -5px; }
.select__box i:nth-child(2) { top: -5px; right: -5px; }
.select__box i:nth-child(3) { bottom: -5px; left: -5px; }
.select__box i:nth-child(4) { bottom: -5px; right: -5px; }

/* Arrow cursor, tip pinned to the bottom-right corner of the growing selection */
.select__cursor {
  position: absolute; left: 100%; top: 100%;
  width: 18px; height: 22px; margin: -2px 0 0 -2px;
  fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25));
  transform-origin: 2px 2px;
  animation: sel-cursor var(--loop) infinite;
}

/* Poof particles burst out from the edges as the box disappears */
.select__poof { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.select__poof b {
  position: absolute; left: var(--l); top: var(--t);
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: sel-spark var(--loop) infinite;
}

/* 0–8% cursor arrives and presses · 8–36% drag · 36–40% release · 40–66% hold · 66–80% poof · 80–100% rest */
@keyframes sel-w {
  0%, 8%   { width: 0; animation-timing-function: cubic-bezier(.25, .75, .3, 1); }
  36%, 100% { width: 100%; }
}
@keyframes sel-h {
  0%, 8%   { height: 0; animation-timing-function: cubic-bezier(.55, .15, .3, 1); }
  36%, 100% { height: 100%; }
}
@keyframes sel-fill {
  0%, 8%   { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(.25, .75, .3, 1); }
  36%      { clip-path: inset(0 0 0 0); }
  66%      { clip-path: inset(0 0 0 0); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  80%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes sel-poof {
  0%, 7%   { opacity: 0; transform: none; filter: none; }
  8%       { opacity: 1; }
  66%      { opacity: 1; transform: none; filter: blur(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  80%, 100% { opacity: 0; transform: scale(1.08); filter: blur(3px); }
}
@keyframes sel-cursor {
  0%       { opacity: 0; transform: translate(-6px, -6px); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  4%       { opacity: 1; transform: none; }
  7%, 36%  { opacity: 1; transform: scale(.86); }                      /* pressed while dragging */
  40%, 46% { opacity: 1; transform: scale(1); animation-timing-function: ease-in; } /* released */
  56%, 100% { opacity: 0; transform: translate(8px, 10px); }
}
@keyframes sel-spark {
  0%, 66%  { opacity: 0; transform: translate(0, 0) scale(.4); }
  69%      { opacity: 1; transform: translate(calc(var(--x) * .3), calc(var(--y) * .3)) scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  84%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.2); }
}

/* Paused while off screen (script.js toggles this) */
.select.is-paused :is(.select__track, .select__box, .select__cursor, .select__poof b, .select__fill) { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .select__track, .select__box, .select__fill { animation: none; }
  .select__cursor, .select__poof { display: none; }
}

.hero__lede { max-width: 34em; margin: 22px auto 0; color: #7e7e7e; font-size: 16px; }

.hero__note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.hero__note a { color: var(--accent-ink); text-underline-offset: 3px; }

/* Newsletter signup: one pill holding the input and the button */
.signup {
  display: flex; align-items: center; gap: 8px;
  max-width: 460px; margin: 32px auto 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 6px 6px 22px; box-shadow: var(--shadow);
  transition: border-color .15s;
}
.signup:focus-within { border-color: var(--accent); }
.signup input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 16px/1.2 var(--sans); color: var(--ink); padding: 10px 0;
}
.signup input::placeholder { color: #9aa1a4; }
.signup .btn { padding: 12px 20px; flex-shrink: 0; }
.signup__status { min-height: 0; margin: 10px 0 0; font-size: 14px; color: var(--accent-ink); }
.signup__status:empty { display: none; }
.signup__status.is-error { color: #a33a2b; }
.signup__proof { margin: 14px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.signup__proof + .hero__note { margin-top: 6px; }

/* Plan checklist: styled like the "Find my plan" card. Rows tick on one by one (script.js adds .is-checked). */
.plancard {
  position: relative;
  width: min(460px, 100%);
  margin: 64px auto 0; padding: 22px 22px 18px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(21, 25, 27, .04), 0 24px 60px -24px rgba(14, 26, 120, .22);
  transform: rotate(-1.5deg);
}
.plancard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plancard__title { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.plancard__count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.plancard__segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 14px 0 16px; }
.plancard__segs span { position: relative; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.plancard__segs span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.34, 1.25, .64, 1);
}
.plancard__segs span.is-on::after { transform: scaleX(1); }

.plancard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plancard__list li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 44px 10px 10px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3;
  transition: border-color .2s, background-color .2s;
}
.plancard__icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-wash); color: var(--accent-ink);
  transition: background-color .2s, color .2s;
}
.plancard__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plancard__radio {
  position: absolute; right: 12px; top: 50%; margin-top: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #c9cfcc; background: #fff;
  transition: border-color .15s, background-color .15s;
}
.plancard__radio::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat;
  transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.8, .64, 1);
}
.plancard__list li.is-checked { border-color: var(--accent); background: color-mix(in srgb, var(--accent-wash) 45%, #fff); }
.plancard__list li.is-checked .plancard__icon { background: var(--accent); color: #fff; }
.plancard__list li.is-checked .plancard__radio { border-color: var(--accent); background: var(--accent); }
.plancard__list li.is-checked .plancard__radio::after { transform: scale(1); }

.plancard__sig {
  display: block; text-align: right; margin-top: 10px;
  font-family: var(--hand); font-size: 19px; color: var(--accent);
  transform: rotate(-3deg);
}

/* ---------- Wall of love (text bubbles) ---------- */
.love h2 { margin-bottom: 48px; }
.love__wall {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px; max-width: 760px; margin: 0 auto;
}
.bubble {
  margin: 0; transform: rotate(var(--r));
}
.bubble blockquote {
  margin: 0; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow);
}
.bubble:nth-child(even) blockquote { border-radius: 22px 22px 6px 22px; }
.bubble figcaption { font-size: 13px; color: var(--muted); margin: 8px 0 0 12px; }
.bubble:nth-child(even) figcaption { text-align: right; margin: 8px 12px 0 0; }

/* ---------- What lands in your inbox ---------- */
.inbox h2 { margin-bottom: 48px; }
.inbox__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.inbox__card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px;
}
.inbox__card p { margin: 8px 0 0; color: var(--muted); }

/* ---------- Need coverage now ---------- */
.cover { text-align: center; }
.cover h2 { max-width: 24ch; margin: 0 auto; text-wrap: balance; }
.cover__lede { color: var(--muted); margin: 16px auto 0; max-width: 34em; }

/* ---------- Comparison ---------- */
.compare h2 { margin-bottom: 56px; }
.compare__cards {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center;
  max-width: 780px; margin: 0 auto;
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 30px; box-shadow: var(--shadow);
}
.card ul { list-style: none; margin: 16px 0 0; padding: 0; }
.card li { margin: 10px 0; padding-left: 28px; position: relative; }
.card--alone {
  background: #eef0ef; color: #8a9296; box-shadow: none;
  transform: rotate(-3deg) translateX(24px);
}
.card--alone li { text-decoration: line-through; text-decoration-color: #b3bbb8; }
.card--alone li::before { content: "×"; position: absolute; left: 4px; top: -1px; }
.card--cj { position: relative; z-index: 1; transform: rotate(1deg); }
.card--cj h3 { color: var(--accent-ink); }
.card--cj li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--accent-wash);
}
.card--cj li::after {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- How it works ---------- */
.how h2 { margin-bottom: 48px; }
.how__steps {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.how__steps li {
  counter-increment: step;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px 24px;
}
.how__steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 18px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 600; font-size: 15px;
}
.how__steps p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

/* ---------- Story letter ---------- */
.story h2 { margin-bottom: 48px; }
.letter {
  max-width: 600px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 48px 52px; box-shadow: var(--shadow);
  transform: rotate(.6deg);
}
.letter p { margin: 0 0 20px; color: #2a2a2a; line-height: 1.75; }
.letter mark {
  background: var(--accent-wash); color: var(--accent-ink);
  padding: 1px 3px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.letter a { color: var(--accent-ink); text-underline-offset: 3px; }
.letter__sign { margin-top: 32px !important; }
.letter__sign span { display: block; font-family: var(--hand); font-size: 40px; line-height: 1.2; color: var(--accent); margin-top: 4px; }

.polaroid {
  width: 240px; margin: 32px auto 32px; padding: 10px 10px 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow); transform: rotate(-4deg);
}
.polaroid__img {
  aspect-ratio: 4 / 5; border-radius: 3px;
  display: grid; place-items: center;
  background: #e9edeb; color: var(--muted); font-size: 13px;
}
.polaroid__img svg { width: 44px; height: 44px; fill: none; stroke: #b9c0bd; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; display: block; }
.polaroid figcaption { font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; text-align: center; font-size: 11px; color: var(--muted); padding: 10px 0 6px; }

/* ---------- Close ---------- */
.close { text-align: center; padding-bottom: 120px; }
.close p { color: var(--muted); margin: 16px 0 28px; }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: 32px var(--gutter) 48px; text-align: center;
  font-size: 14px; color: var(--muted);
  background: var(--paper);
}
.foot p { margin: 4px 0; }
.foot__aside { font-family: var(--hand); font-size: 17px; margin-top: 12px !important; }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  section { padding-top: 72px; padding-bottom: 72px; }
  .nav { padding: 10px var(--gutter); }
  .nav__links { display: none; }
  .hero { padding-top: 48px; }
  .plancard { padding: 18px 16px 14px; transform: rotate(-1deg); }
  .plancard__list li { font-size: 14px; }
  .love__wall { grid-template-columns: 1fr; }
  .compare__cards { grid-template-columns: 1fr; gap: 0; }
  .card--alone { transform: rotate(-2deg) translateY(16px); margin: 0 12px; }
  .card--cj { transform: none; }
  .how__steps, .inbox__cards { grid-template-columns: 1fr; }
  .signup { padding-left: 18px; }
  .signup .btn { padding: 12px 16px; }
  .letter { padding: 32px 24px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}