/* ==========================================================================
   Clipworthy: main stylesheet
   Light theme only. Hand-written, no framework.

   Three colors, no exceptions:
   - Cream (--color-cream) is the page and every card and illustration ground.
   - Deep Space Blue (--color-navy) is text, headings, borders, primary
     buttons, bands, and illustration line work.
   - Strawberry Red (--color-red) is accents only: highlights, step numbers,
     ticks, small emphasis. Red on cream is 3.83:1, so red is never small
     text, only large bold numbers and graphics. Red never sits on navy (2.97:1).
   White (--color-white) is used only for text on navy buttons.
   No tints, opacities, gradients, or shadows other than solid navy offsets.

   Motion: the to-do list ticks draw in as each line scrolls into view, using
   CSS scroll-driven animation where supported. With reduced motion, or in
   browsers without support, every tick shows statically.

   Contents
   1.  Tokens
   2.  Reset and base
   3.  Layout
   4.  Type, eyebrow, links
   5.  Buttons
   6.  Shared illustration parts (cards, bubbles, clips, tags)
   7.  Header
   8.  Hero
   9.  Problem (to-do list)
   10. How it works (bridge, steps, step illustrations)
   11. Two ways to record
   12. Who it's for
   13. Early access (request form)
   14. FAQ
   15. Final CTA and footer
   16. About page
   17. Check your email and confirmed pages
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* Color: the only three, plus white for button labels */
  --color-cream: #F8F5EE;           /* page and card ground */
  --color-navy: #1D3557;            /* Deep Space Blue: text 11.35:1 on cream */
  --color-red: #E63946;             /* Strawberry Red: accents; 3.83:1 on cream (large text and graphics only) */
  --color-white: #FFFFFF;           /* text on navy buttons only, 12.36:1 */

  --line: 1.5px solid var(--color-navy);

  /* Type */
  --font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Red Hat Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --fs-sm: 0.9375rem;    /* 15px */
  --fs-base: 1.0625rem;  /* 17px */
  --fs-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.125rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-section: clamp(5rem, 3.5rem + 6vw, 8.5rem);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-band: 28px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1120px;
  --gutter: 16px;
  --inset: 8px;
}

@media (min-width: 48em) {
  :root {
    --gutter: 32px;
    --inset: 12px;
  }
}


/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-6);
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-navy);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-navy);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--color-red);
}

:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}


/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(48rem + 2 * var(--gutter));
}

/* Half the rhythm on each side, so adjacent sections sit one full step apart */
.section {
  padding-block: calc(var(--space-section) / 2);
}

.section-head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 46rem;
  margin: 0 auto var(--space-9);
  text-align: center;
}


/* ==========================================================================
   4. Type, eyebrow, links
   ========================================================================== */

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
}

/* Small mono label with a red square */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-red);
  translate: 0 -0.1em;
}

.microcopy {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.link-arrow {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

.prose {
  display: grid;
  gap: var(--space-4);
}

.prose strong {
  font-weight: 700;
}

/* Red check (graphic on cream) */
.ticks,
.crosses,
.not-for {
  display: grid;
  gap: var(--space-4);
  list-style: none;
}

.ticks li,
.crosses li,
.not-for li {
  position: relative;
  padding-left: 2rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.35rem;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--color-red);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Navy cross */
.crosses li::before,
.crosses li::after,
.not-for li::before,
.not-for li::after {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0.15rem;
  width: 0.95rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--color-navy);
}

.crosses li::before,
.not-for li::before {
  transform: rotate(45deg);
}

.crosses li::after,
.not-for li::after {
  transform: rotate(-45deg);
}


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-6);
  border: var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Hover inverts to cream: a plain color change with full contrast */
.btn--primary:hover {
  background: var(--color-cream);
  color: var(--color-navy);
}

.btn--sm {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.btn--block {
  width: 100%;
}


/* ==========================================================================
   6. Shared illustration parts (cards, bubbles, clips, tags)
   Everything is cream ground with navy line work; red marks the one thing
   that matters in each drawing.
   ========================================================================== */

.card {
  background: var(--color-cream);
  border: var(--line);
  border-radius: var(--radius-lg);
}

/* Illustration cards get a solid navy offset, like a printed card */
figure.card {
  box-shadow: 5px 5px 0 var(--color-navy);
}

/* Chat thread */
.thread {
  display: grid;
  gap: var(--space-3);
}

.bubble {
  justify-self: start;
  max-width: 88%;
  padding: var(--space-3) var(--space-4);
  border: var(--line);
  border-radius: 14px 14px 14px 4px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.bubble__who {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The expert's answer is spoken on camera, never typed: a small phone frame
   showing them, a "You · REC" label with a red dot, and the transcript */
.reply-video {
  justify-self: end;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: center;
  gap: var(--space-3);
  max-width: 88%;
  padding: var(--space-3);
  border: var(--line);
  border-radius: 14px 14px 4px 14px;
}

.reply-video__phone {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--color-navy);
  border-radius: 6px;
}

.reply-video__text {
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.4;
}

.reply-video__who {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reply-video__who .phone__dot {
  flex: none;
}

/* The follow-up that matters: red bar */
.bubble--accent,
.prompt {
  border-left: 5px solid var(--color-red);
}

.bubble--small {
  font-size: 0.875rem;
}

/* Vertical clip: navy frame with a cream speaker silhouette (.clip__person, styled with .phone__person) */
.clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.clips--four {
  grid-template-columns: repeat(4, 1fr);
}

.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--color-navy);
  border-radius: var(--radius-sm);
}

.tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Red circle with a cream check */
.ready__tick,
.topic__tick {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-red);
}

.ready__tick::after,
.topic__tick::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.43rem;
  width: 0.32rem;
  height: 0.6rem;
  border: solid var(--color-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ==========================================================================
   7. Header
   Small screens: logo + early access button only.
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  min-height: 4.75rem;
}

.logo {
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.logo:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
}

.nav__menu {
  margin-left: auto;
}

.nav__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.nav__links a {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.nav__links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 2px;
}

@media (max-width: 47.99em) {
  .nav {
    gap: var(--space-3);
  }

  .nav__menu {
    display: none;
  }

  .nav__cta {
    margin-left: auto;
    padding-inline: var(--space-3);
    font-size: 0.875rem;
  }
}


/* ==========================================================================
   8. Hero
   Text left, "This week" card right; stacked on phones.
   ========================================================================== */

.hero {
  padding-block: clamp(2rem, 1rem + 4vw, 5rem) calc(var(--space-section) / 2);
}

.hero__grid {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

.hero__text {
  display: grid;
  justify-items: start;
}

.hero__title {
  max-width: 13em;
  margin-top: var(--space-5);
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

/* Three steps in place of a subhead: a simple vertical list on every screen */
.hero__intro {
  margin-top: var(--space-6);
  font-size: var(--fs-base);
  font-weight: 600;
}

.hero-steps {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  list-style: none;
}

.hero-steps li {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.3;
}

/* 20px bold: red on cream meets AA as large text */
.hero-steps__num {
  flex: none;
  color: var(--color-red);
  font-variant-numeric: tabular-nums;  /* equal-width digits keep the step text aligned */
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.hero__after {
  max-width: 36rem;
  margin-top: var(--space-5);
  font-size: var(--fs-base);
  line-height: 1.55;
}


.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-8);
}

.hero__text .microcopy {
  margin-top: var(--space-5);
}

/* "This week" card */
.week-card {
  width: 100%;
  max-width: 30rem;
  justify-self: center;
  padding: var(--space-6);
}

.week-card__title {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--line);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Keep the hero's three clips small enough to read as thumbnails */
.week-card .clips {
  grid-template-columns: repeat(3, minmax(0, 6rem));
}

.week-card__clips {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1.5px dashed var(--color-navy);
}

.ready {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (min-width: 64em) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-10);
  }

  .week-card {
    justify-self: end;
  }
}


/* ==========================================================================
   9. Problem (to-do list)
   ========================================================================== */

.problem__grid {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

.problem__text {
  display: grid;
  gap: var(--space-5);
  max-width: 34rem;
}

/* A taped sheet of paper, slightly turned */
.todo {
  position: relative;
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: var(--color-cream);
  border: var(--line);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--color-navy);
  rotate: -1.5deg;
}

.todo__tape {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  width: 6.5rem;
  height: 1.75rem;
  background: var(--color-red);
  translate: -50% 0;
  rotate: 3deg;
}

.todo__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-hand);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.1;
}

.todo__list {
  list-style: none;
}

.todo__list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 2.1rem;
  border-bottom: 1px dashed var(--color-navy);
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  view-timeline-name: --todo-row;
}

/* Checkbox */
.todo__list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--color-navy);
  border-radius: 3px;
  translate: 0 -50%;
}

/* Red tick, drawn over the box */
.todo__list li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.42rem;
  width: 0.45rem;
  height: 0.95rem;
  margin-top: -0.7rem;
  border: solid var(--color-red);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

@keyframes tick-in {
  from {
    opacity: 0;
    transform: rotate(45deg) scale(0.2);
  }
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

/* Ticks draw in line by line as the list scrolls up the screen */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .todo__list li::after {
      animation: tick-in linear both;
      animation-timeline: --todo-row;
      animation-range: entry 100% cover 45%;
    }
  }
}

@media (min-width: 64em) {
  .problem__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}


/* ==========================================================================
   10. How it works (bridge, steps, step illustrations)
   The bridge line heads the section; dashed connectors link it and every
   step into one continuous flow down the page.
   ========================================================================== */

/* Eyebrow centered above the bridge heading */
.how__head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.bridge {
  max-width: 18em;
  margin-inline: auto;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-align: center;
}

.mark {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

.steps {
  display: grid;
  list-style: none;
}

/* Connector before each step (including the first, from the bridge) */
.step::before {
  content: "";
  display: block;
  width: 0;
  height: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  margin: var(--space-6) auto;
  border-left: 2px dashed var(--color-navy);
}

.step {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.step__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--line);
  border-radius: 50%;
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: 1.375rem;           /* 22px bold: red meets AA as large text */
  font-weight: 700;
  line-height: 1;
}

.step__title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.step__body {
  max-width: 34rem;
}

.step__art {
  width: 100%;
  max-width: 34rem;
  margin-top: var(--space-4);
  padding: var(--space-6);
  text-align: left;
}

/* 1. Interview thread ending in topic cards */
.topics {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1.5px dashed var(--color-navy);
  list-style: none;
}

.topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--line);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.topic--picked {
  border: 2.5px solid var(--color-red);
}

.topic--picked .topic__tick {
  order: 2;
}

/* 1b. Ideas with their sources, one picked, then "Record on your phone".
   No chat bubbles here: the expert answers on video, not by typing. */
.ideas__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--line);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.topics--sources {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.topic__text {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.ideas__next {
  display: grid;
  justify-items: center;
}

.ideas__line {
  height: 1.5rem;
  border-left: 2px dashed var(--color-navy);
}

/* Outline pill with a tiny phone that has a red record dot */
.record-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.record-pill__phone {
  display: grid;
  place-items: center;
  width: 0.8rem;
  height: 1.3rem;
  border: 2px solid var(--color-navy);
  border-radius: 3px;
}

/* 2. Phone recording beside a prompt */
.art-record__inner {
  display: grid;
  grid-template-columns: minmax(5.5rem, 9rem) 1fr;
  align-items: center;
  gap: var(--space-6);
}

/* Phones: a narrower phone and smaller prompt text so the prompt isn't squeezed */
@media (max-width: 29.99em) {
  .art-record__inner {
    grid-template-columns: 4.75rem 1fr;
    gap: var(--space-4);
  }

  .art-record .prompt {
    font-size: var(--fs-base);
  }

  .art-record .phone__rec {
    gap: 0.2rem;
    padding: 0.05rem 0.3rem;
    font-size: 0.5rem;
    letter-spacing: 0;
  }

  .art-record .phone__dot {
    width: 0.35rem;
    height: 0.35rem;
  }
}

.phone {
  position: relative;
  aspect-ratio: 9 / 17;
  overflow: hidden;
  background: var(--color-navy);
  border: 5px solid var(--color-navy);
  border-radius: 20px;
  outline: var(--line);
  outline-offset: 2px;
}

.phone__rec {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  background: var(--color-cream);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  translate: -50% 0;
}

.phone__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-red);
}

.phone__person,
.clip__person {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90%;
  aspect-ratio: 1 / 1;
  translate: -50% 0;
}

.phone__person::before,
.phone__person::after,
.clip__person::before,
.clip__person::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  background: var(--color-cream);
}

.phone__person::before,
.clip__person::before {
  top: 4%;
  width: 40%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.phone__person::after,
.clip__person::after {
  bottom: 0;
  width: 100%;
  height: 44%;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

.prompt {
  padding: var(--space-4);
  border: var(--line);
  border-left: 5px solid var(--color-red);
  border-radius: 14px 14px 14px 4px;
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* 3. One raw recording splitting into clips */
.raw {
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding-inline: var(--space-4);
  background: var(--color-navy);
  border-radius: var(--radius-sm);
}

.raw__label {
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.split-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 1.75rem;
}

.split-lines span {
  justify-self: center;
  border-left: 2px dashed var(--color-navy);
}

/* 4. Monday to Friday */
.days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  list-style: none;
}

.days li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.days__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.days .clip {
  width: 100%;
}


/* Only-you section: one exchange, the two-column contrast, then a closing line */
.generic__art {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto var(--space-7);
  padding: var(--space-6);
}

.generic__compare .fit__card {
  padding: var(--space-6) var(--space-7);
}

/* Closing line: larger and bolder than body text */
.closing-line {
  max-width: 20em;
  margin: var(--space-8) auto 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-align: center;
}


/* Every video gives you your next three: one clip branching into three
   follow-up topics. Each item draws its own piece of the dashed trunk, a
   branch, and a navy arrowhead, so the lines fit whatever the cards' height. */
.next__art {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-6);
}

.next {
  --branch: 1.75rem;
  --next-gap: var(--space-3);
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) 1fr;
  align-items: center;
}

.next__source {
  position: relative;
  padding-right: var(--branch);
}

/* Line from the video into the trunk */
.next__source::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--branch);
  border-top: 2px dashed var(--color-navy);
}

.next__list {
  display: grid;
  gap: var(--next-gap);
  list-style: none;
}

.next__item {
  position: relative;
  padding-left: var(--branch);
}

/* Trunk segment: spans the item and half the gap on each side */
.next__item::before {
  content: "";
  position: absolute;
  top: calc(var(--next-gap) / -2);
  bottom: calc(var(--next-gap) / -2);
  left: 0;
  border-left: 2px dashed var(--color-navy);
}

.next__item:first-child::before {
  top: 50%;
}

.next__item:last-child::before {
  bottom: 50%;
}

/* Branch from the trunk to the card */
.next__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--branch) - 0.4rem);
  border-top: 2px dashed var(--color-navy);
}

.next__card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: var(--line);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

/* Arrowhead on the card's left edge */
.next__card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.55rem;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.5rem;
  border-color: transparent transparent transparent var(--color-navy);
  translate: 0 -50%;
}

.next__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Red square marker; the label itself stays navy (red text fails contrast) */
.next__tag::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-red);
}

@media (max-width: 29.99em) {
  .next {
    --branch: 1.25rem;
    grid-template-columns: 4rem 1fr;
  }

  .next__art {
    padding: var(--space-5) var(--space-4);
  }
}


/* Clipworthy keeps you consistent: six weeks, each with a checked-off video.
   Six across on wider screens; wraps to three across on phones. */
.habit__art {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--space-6);
}

.weeks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  list-style: none;
}

.weeks__item {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.weeks__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.weeks__video {
  position: relative;
  width: 100%;
  max-width: 5rem;
}

/* Red check overlapping the video's top-right corner */
.weeks__tick {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  box-shadow: 0 0 0 2px var(--color-cream);
}

@media (max-width: 39.99em) {
  .weeks {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-6);
  }

  .habit__art {
    padding: var(--space-6) var(--space-5);
  }
}


/* ==========================================================================
   11. Two ways to record
   ========================================================================== */

.modes {
  display: grid;
  gap: var(--space-5);
  max-width: 56rem;
  margin-inline: auto;
}

.mode {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-7);
}

.mode__art {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-height: 8rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1.5px dashed var(--color-navy);
}

/* Teleprompter: navy lines, the line being read in red */
.mode__art--prompter {
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--line);
  border-radius: var(--radius-md);
}

.prompter__line {
  display: block;
  width: 88%;
  height: 0.5rem;
  border-radius: 4px;
  background: var(--color-navy);
}

.prompter__line--now {
  width: 100%;
  height: 0.625rem;
  background: var(--color-red);
}

.prompter__line--short {
  width: 55%;
}

.mode__title {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

@media (min-width: 48em) {
  .modes {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================================
   12. Who it's for
   ========================================================================== */

.fit {
  display: grid;
  gap: var(--space-5);
  max-width: 56rem;
  margin-inline: auto;
}

.fit__card {
  padding: var(--space-7);
}

.fit__title {
  margin-bottom: var(--space-5);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media (min-width: 48em) {
  .fit {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================================
   13. Early access (request form)
   A navy band with cream text; the form sits on a cream card.
   ========================================================================== */

.apply-band {
  margin: calc(var(--space-section) / 2) var(--inset);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--color-navy);
  border-radius: var(--radius-band);
  color: var(--color-cream);
}

.apply-band :focus-visible {
  outline-color: var(--color-cream);
}

.apply {
  display: grid;
  gap: var(--space-8);
}

.apply__text {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.apply__body {
  max-width: 34rem;
  font-size: var(--fs-lede);
}

.apply-form {
  display: grid;
  align-self: start;
  gap: var(--space-5);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  color: var(--color-navy);
}

.apply-form :focus-visible {
  outline-color: var(--color-navy);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.field input,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cream);
  border: var(--line);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font: inherit;
  font-size: 1rem;
}

/* Placeholders stay in the palette: navy, set apart from typed text by italics.
   opacity: 1 stops Firefox from fading it into an off-palette tint. */
.field input::placeholder {
  color: var(--color-navy);
  font-style: italic;
  opacity: 1;
}

/* Native select with a drawn navy chevron */
.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231D3557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
}

.field input:focus-visible,
.field select:focus-visible {
  outline-offset: 2px;
}

.apply-form .microcopy {
  text-align: center;
}

@media (min-width: 64em) {
  .apply {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}


/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  border: var(--line);
  border-radius: 14px;
}

.faq__item summary {
  position: relative;
  display: block;
  padding: var(--space-5) 3.5rem var(--space-5) var(--space-5);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* Chevron */
.faq__item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-5);
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.4rem;
  border: solid var(--color-navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.faq__item[open] summary::after {
  margin-top: -0.1rem;
  transform: rotate(-135deg);
}

.faq__item summary:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.faq__answer {
  max-width: 40rem;
  padding: 0 var(--space-5) var(--space-5);
}


/* ==========================================================================
   15. Final CTA and footer
   ========================================================================== */

.final-cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  text-align: center;
}

.final-cta__title {
  max-width: 14em;
}

.site-footer {
  margin: calc(var(--space-section) / 2) var(--inset) 0;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--space-7);
  background: var(--color-navy);
  border-radius: var(--radius-band) var(--radius-band) 0 0;
  color: var(--color-cream);
}

.site-footer :focus-visible {
  outline-color: var(--color-cream);
}

.footer {
  display: grid;
  gap: var(--space-8);
}

.site-footer .logo {
  color: var(--color-cream);
}

.footer__tagline {
  max-width: 20rem;
  margin-top: var(--space-3);
}

.footer__nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  list-style: none;
}

.footer__nav a {
  color: var(--color-cream);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.footer__nav a:hover,
.site-footer .logo:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-cream);
}

.footer__legal {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-cream);
  font-size: var(--fs-sm);
}

@media (min-width: 48em) {
  .footer {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-10) var(--space-8);
  }

  .footer__legal {
    grid-column: 1 / -1;
    text-align: right;
  }
}


/* ==========================================================================
   16. About page
   One column, generous spacing, the same cards and type as the homepage.
   ========================================================================== */

.page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-4);
  text-align: center;
}

.page-intro {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
}

.page-intro__title {
  max-width: 15em;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.page-intro__body {
  max-width: 38rem;
  font-size: var(--fs-lede);
  line-height: 1.6;
}

.about-block {
  display: grid;
  gap: var(--space-6);
}

.about-prose {
  font-size: var(--fs-lede);
}

/* Label on the left, what it means on the right */
.process {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.process__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: var(--line);
  border-radius: 14px;
}

.process__step {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (min-width: 40em) {
  .process__row {
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
    gap: var(--space-6);
  }
}

.stack {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.stack__card {
  padding: var(--space-5) var(--space-6);
}

.stack__card strong {
  font-weight: 700;
}

.stack__card--feature {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-size: var(--fs-lede);
}

.not-for {
  font-size: var(--fs-lede);
}


/* ==========================================================================
   17. Check your email and confirmed pages
   Shown after the early access form and after email confirmation.
   Centered, one column.
   ========================================================================== */

.confirm {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-section);
}

.confirm__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

.confirm__title {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.confirm__subtitle {
  max-width: 18em;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.confirm__body {
  max-width: 34rem;
  font-size: var(--fs-lede);
}

.confirm__help {
  width: 100%;
  max-width: 34rem;
  margin-top: var(--space-6);
  padding: var(--space-7);
  text-align: left;
}

.confirm__help-title {
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.confirm__list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.confirm__list li {
  position: relative;
  padding-left: 1.25rem;
}

/* Small navy square, like the other list markers */
.confirm__list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--color-navy);
}

.confirm__list a,
.confirm__link {
  font-weight: 600;
}

/* Keeps a hyphenated phrase like "15-minute" on one line */
.nowrap {
  white-space: nowrap;
}

/* Sign-off under the card (/confirmed/) */
.signoff {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.signoff__role {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
}