/* Mona — site styles.

   The design is the approved filmwithmona.com canvas (Landing, Support,
   Privacy, Terms). Colours are the app's palette roles from
   DesignTokens/MonaPalette.json: Porcelain page, Ink Navy text, Blush accent,
   Deep Blue links. If the palette changes there, change the tokens here.

   Light only, on purpose: the design is a light page with navy bands, and a
   half-done dark mode is worse than none. `color-scheme: light` stops the
   browser inverting form controls and scrollbars underneath it.

   Two contrast rules the tokens encode, both measured against WCAG AA:
   - Blush (#FFA2B6) is a fill, or text on navy. On the light page it fails.
   - Rose (#8E3F6E) is the accent for text on light: 6.8:1 on white, 5.6:1 on
     the blush wash. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* The real italic, ready for when fonts/InstrumentSerif-Italic.woff2 exists
   (subset it like the others; see README). It stays commented out until the
   file is in the folder: with the face declared but the file missing, the
   browser does not fall back to slanting the regular, it switches every italic
   headline word to Georgia Italic, and every page logs a 404. Until then the
   italic words are the browser's synthesised slant of the regular, which needs
   font-synthesis left on.

   When the file lands: uncomment this face, and add `font-synthesis: none;`
   to `body` so no browser ever fakes a style the real files now cover.

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
*/
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --page: #FFF7FA;        /* Porcelain */
  --white: #FFFFFF;
  --ink: #12182F;         /* Ink Navy */
  --ink-2: #3E3A4E;       /* body copy on light */
  --muted: #5A5568;       /* captions on light, 6.9:1 on Porcelain */
  --rose: #8E3F6E;        /* accent TEXT on light */
  --blush: #FFA2B6;       /* accent FILL, or text on navy */
  --blush-wash: #FDE4EC;
  --kept: rgba(255, 162, 182, 0.38);
  --kept-dark: rgba(255, 162, 182, 0.28);
  --hairline: #F1DDE5;
  --link: #00178F;        /* Deep Blue */

  --navy-2: #1C2340;
  --navy-3: #2C3456;
  --on-navy: #FFF7FA;
  --on-navy-2: #DDD2DF;
  --on-navy-dim: #8F8BA3; /* 5.3:1 on navy; for "already read" prompter text */
  --record: #C94E62;

  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: 24px;
  --wide: 1200px;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-navy :focus-visible { outline-color: var(--blush); }

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

.serif { font-family: var(--serif); font-weight: 400; }
.it { font-style: italic; }
.rose { color: var(--rose); }
.nowrap { white-space: nowrap; }
.blush { color: var(--blush); }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--page);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; color: var(--page); }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* The blush highlight behind a word, as in the app's prompter. Padding in em
   so it scales with the headline; the small negative block margin keeps the
   box off the descenders of the line above. */
.hl {
  background: var(--blush);
  color: var(--ink);
  border-radius: 6px;
  padding: .02em .12em;
  margin: -.02em 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.kept, .kept {
  background: var(--kept);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.navy mark.kept { background: var(--kept-dark); }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  line-height: 1.4;
}
.navy .eyebrow, .eyebrow.on-dark { color: var(--blush); }
.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  max-width: 100%;
}
.btn-dark { background: var(--ink); color: var(--page); }
.btn-dark:hover { background: var(--navy-3); color: var(--page); }

/* The App Store button. A text button rather than Apple's badge until the
   official badge artwork is added (see README). */
.store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}
.store-button:hover { background: #FFB6C6; color: var(--ink); }
.store-button svg { flex: none; }

/* Header */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: auto; }
.brand span { font-family: var(--serif); font-size: 30px; line-height: 1; }

.site-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px 22px;
  flex-wrap: wrap;
  font-size: 15px;
}
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink-2);
  text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blush); text-decoration-thickness: 2px; }

@media (max-width: 720px) {
  .site-nav .hide-sm { display: none; }
}

/* Footer */

.site-footer { border-top: 1px solid var(--hairline); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 32px;
  font-size: 15px;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  overflow-wrap: anywhere;
}
.site-footer p { color: var(--muted); }

/* Bands */

.band-white { background: var(--white); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.navy { background: var(--ink); color: var(--on-navy); }
.navy a { color: var(--blush); }
.navy a:hover { color: var(--on-navy); }

.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.display-2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
}
.lede { font-size: 17px; line-height: 1.6; color: var(--muted); }
.navy .lede { color: var(--on-navy-2); }

/* ---------- Landing ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 40px;
}
.hero-copy {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
/* The italic words are a slanted face; tight tracking pulls their overhang
   into the highlight's edge, so they get their natural spacing back. */
.hero h1 .it { letter-spacing: -0.005em; }
.hero .lede { font-size: 20px; line-height: 1.5; max-width: 540px; color: var(--ink); }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-note { font-size: 15px; color: var(--muted); }

/* Phone mocks. Fixed pixel sizes inside, like a screenshot: they are
   pictures of the app, not page text, and are hidden from assistive tech. */
.phone-stage {
  flex: 1 1 520px;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 600px;
}
.phone-stage::before {
  content: "";
  position: absolute;
  inset: 40px 0 0;
  border-radius: 48px;
  background: var(--blush-wash);
}
.phone {
  position: relative;
  flex: none;
  width: 236px;
  height: 512px;
  border-radius: 44px;
  background: var(--ink);
  padding: 9px;
  box-shadow: 0 30px 60px rgba(18, 24, 47, 0.18);
}
.phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: var(--page);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px 14px;
  position: relative;
}
.phone .island {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 70px;
  height: 20px;
  margin-left: -35px;
  border-radius: 999px;
  background: var(--ink);
}
.phone-why { transform: rotate(-6deg) translate(34px, -6px); z-index: 1; }
.phone-script { transform: rotate(6deg) translate(-34px, -6px); z-index: 2; }

/* The prompter is the hero: the front phone, larger, showing a camera view
   with the line being read over the top of it. */
.phone-prompt {
  width: 252px;
  height: 548px;
  border-radius: 46px;
  background: #0A0E1D;
  box-shadow: 0 40px 70px rgba(18, 24, 47, 0.28);
  z-index: 3;
}
.phone-prompt .screen { border-radius: 38px; padding: 0; background: var(--navy-2); }
.phone-prompt .island { width: 74px; height: 21px; margin-left: -37px; background: #000; z-index: 2; }

/* The illustrated camera view, from the symbols at the top of index.html. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

/* The prompter's cue over the camera view, as in the app. */
.cue {
  position: relative;
  z-index: 1;
  background: rgba(18, 24, 47, 0.86);
  padding: 44px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cue p { font-size: 17px; line-height: 1.32; font-weight: 600; color: var(--on-navy); }
.cue .cue-read, .cue .cue-next { color: var(--on-navy-dim); }
.rec-bar {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timer {
  position: absolute;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(18, 24, 47, 0.72);
  color: var(--on-navy);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timer::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--record);
}
.phone-prompt .shutter { width: 52px; height: 52px; border-width: 3px; }
.phone-prompt .shutter::before { width: 20px; height: 20px; border-radius: 5px; }

.phone .m-tag { margin-top: 26px; }
.phone-script .m-tag { margin-top: 28px; }
.m-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--rose); }
.m-title { font-family: var(--serif); font-size: 22px; line-height: 1.05; }
.m-script {
  background: var(--white);
  border-radius: 16px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 1px 0 var(--hairline);
}
.m-script p + p { margin-top: 8px; }
.m-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.m-chips span {
  font-size: 10px;
  background: var(--blush-wash);
  color: var(--rose);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.m-film {
  margin-top: auto;
  background: var(--ink);
  color: var(--page);
  border-radius: 999px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.m-thumb {
  position: relative;
  overflow: hidden;
  height: 120px;
  border-radius: 14px;
  background: var(--navy-3);
  display: flex;
  align-items: flex-end;
  padding: 8px;
  flex: none;
}
/* Small, and tucked into the corner, so it does not sit on the creator. */
.m-thumb span {
  position: relative;
  margin: 0 0 -2px -2px;
  font-size: 8px;
  color: var(--on-navy);
  background: rgba(18, 24, 47, 0.7);
  padding: 2px 6px;
  border-radius: 999px;
}
.m-beats { display: flex; flex-direction: column; gap: 5px; }
.m-beats div {
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--hairline);
}
.m-beats b { font-weight: 700; }
.m-beats span { color: var(--muted); }
.m-beats .hook { background: var(--ink); color: var(--on-navy); border-color: var(--ink); }
.m-beats .hook span { color: var(--blush); }
.m-beats .landing { background: var(--blush-wash); border-color: var(--blush-wash); }
.m-beats .landing span { color: var(--rose); }
.m-keep {
  margin-top: auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .hero { padding-top: 32px; padding-bottom: 24px; gap: 28px; }
  .hero .eyebrow { letter-spacing: 0.1em; }
  .hero .lede { font-size: 19px; }
  /* On a phone the first CTA is navy: pink is kept for the closing card. */
  .hero .store-button { background: var(--ink); color: var(--page); }
  .hero .store-button:hover { background: var(--navy-3); color: var(--page); }
  .phone-stage { min-height: 0; padding: 8px 0 12px; }
  /* A soft glow rather than a plinth, so the phone floats on the page. */
  .phone-stage::before {
    inset: -24px -16px;
    border-radius: 0;
    background: radial-gradient(closest-side, rgba(255, 162, 182, 0.5), rgba(255, 162, 182, 0.18) 55%, rgba(255, 162, 182, 0));
  }
  .phone-why, .phone-script { display: none; }
  .phone-prompt { width: 222px; height: 474px; border-radius: 42px; }
  .phone-prompt .screen { border-radius: 34px; }
}

/* Steps. Each one links down to its section, whose eyebrow carries the same
   number, so the four steps read as the page's table of contents. */

.steps { padding-top: 24px; padding-bottom: 72px; }
.steps ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px;
}
.steps li { display: flex; }
.step {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.step:hover { color: var(--ink); border-color: var(--blush); }
.step:hover h3 { text-decoration: underline; text-decoration-color: var(--blush); text-decoration-thickness: 2px; }
.step-body { display: flex; flex-direction: column; gap: 8px; }
.step-num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--rose); }
.steps h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.step-text { color: var(--ink-2); line-height: 1.5; }
.step-tag { color: var(--rose); }
.navy .step-tag { color: var(--blush); }

/* On a phone the four steps are one compact list, not four cards. */
@media (max-width: 640px) {
  .steps { padding-top: 8px; padding-bottom: 48px; }
  .steps ol { display: block; border-top: 1px solid var(--hairline); }
  .step {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
  }
  .step { align-items: center; padding: 4px 0; min-height: 52px; }
  .step::after {
    content: "";
    margin-left: auto;
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--rose);
    border-bottom: 2px solid var(--rose);
    transform: rotate(45deg);
    margin-right: 6px;
  }
  .step-num { font-size: 26px; width: 30px; flex: none; }
  .steps h3 { font-size: 17px; }
  /* Each section below says this at length; here the row is the link. */
  .step-text { display: none; }
}

/* Your own formula (existing creators) */

.repeat { padding-bottom: 96px; }
.repeat-card {
  border-radius: 36px;
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
.repeat-card .copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.formula { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.formula-head {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy-2);
  border-radius: 20px;
  padding: 14px;
}
.formula-head .thumb { position: relative; overflow: hidden; width: 64px; height: 112px; border-radius: 12px; background: var(--navy-3); flex: none; }
.formula-head .text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formula-head .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--blush); }
.formula-head .name { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.formula-head .sub { font-size: 14px; color: var(--on-navy-2); }
.formula-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 2px dashed var(--navy-3);
  margin-left: 32px;
}
.formula-list div {
  background: var(--page);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.formula-list b { color: var(--rose); font-weight: 600; flex: none; }
.formula-list .next { background: transparent; border: 1px dashed var(--on-navy-2); color: var(--on-navy-2); }
@media (max-width: 640px) {
  .repeat { padding-bottom: 48px; }
  .repeat-card { border-radius: 28px; padding: 28px 22px; gap: 24px; }
  /* The template card alone carries the idea on a phone; the list of
     videos made with it is the desktop's extra. */
  .formula-list, .formula-head .sub { display: none; }
  .formula-head .thumb { width: 56px; height: 98px; }
}

/* Your words */

.words .wrap { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.compare { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.compare-panel {
  flex: 1 1 420px;
  min-width: 0;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compare-said { background: var(--page); }
.compare-said .label { color: var(--muted); }
.compare-said p:not(.label) { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.compare-wrote { background: var(--ink); color: var(--on-navy); }
.compare-wrote .label { color: var(--blush); }
.compare-wrote p:not(.label):not(.note) { font-size: 19px; line-height: 1.65; }
.compare-wrote mark.kept { background: var(--kept-dark); }
.compare .note { margin-top: 6px; font-size: 13px; color: var(--on-navy-2); }
.compare-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
@media (max-width: 900px) {
  .compare-arrow { flex-basis: 100%; }
  .compare-arrow svg { transform: rotate(90deg); }
}

/* How it learns your voice, and what it won't do: two notes under the
   comparison, in the same band, rather than two more cards. */

.voice-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--hairline);
}
.voice-note { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
.voice-note .label { color: var(--rose); }
.voice-note h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.08; }
.voice-note > p:not(.label):not(.catch) { color: var(--ink-2); line-height: 1.55; }
.pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li {
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
}
.catch { font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.catch s { color: var(--muted); }
.catch span { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .voice-notes { border-top: 0; gap: 0; }
  .voice-note { padding-top: 24px; border-top: 1px solid var(--hairline); }
  .voice-note + .voice-note { margin-top: 28px; }
  .voice-note h3 { font-size: 28px; }
  .voice-note .pills { display: none; }
  .voice-note { gap: 10px; padding-top: 20px; }
  .voice-note + .voice-note { margin-top: 24px; }
  .voice-note > p:not(.label):not(.catch) { font-size: 16px; line-height: 1.5; }
}

/* Prompter band */

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}
.split > .copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Copy and facts on the left, the phone on the right; on a phone screen the
   phone comes straight after the headline, before the four facts. */
.prompter-grid {
  padding-top: 104px;
  padding-bottom: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy phone" "facts phone";
  column-gap: 56px;
  row-gap: 26px;
  align-items: start;
}
.prompter-grid > .copy { grid-area: copy; display: flex; flex-direction: column; gap: 18px; align-self: end; }
.prompter-grid > .big-phone-wrap { grid-area: phone; align-self: center; }
.prompter-grid > .facts { grid-area: facts; }
.facts {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
}
.facts li {
  border: 1px solid var(--navy-3);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.facts h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.facts p { font-size: 15px; color: var(--on-navy-2); line-height: 1.45; }

.big-phone-wrap { min-width: 0; display: flex; justify-content: center; }
.big-phone {
  width: 300px;
  max-width: 100%;
  height: 652px;
  border-radius: 54px;
  background: #000;
  padding: 11px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}
.big-phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: var(--navy-2);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.big-phone .island {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 88px;
  height: 25px;
  margin-left: -44px;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}
.big-phone .cue { padding: 58px 22px 18px; gap: 6px; }
.big-phone .cue p { font-size: 22px; }
.big-phone .rec-bar { bottom: 26px; }
.big-phone .timer { left: 22px; font-size: 13px; padding: 5px 11px; }
.shutter {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 4px solid var(--on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shutter::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--record);
}
@media (max-width: 860px) {
  .prompter-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "phone" "facts";
    row-gap: 40px;
  }
}
@media (max-width: 640px) {
  .prompter-grid { padding-top: 56px; padding-bottom: 56px; row-gap: 32px; }
  /* The hero already shows the whole prompter, so here the phone rises out
     of the facts list: cut flat at its top rule, showing the cue and the
     face, which is what this section is about. */
  .prompter-grid > .big-phone-wrap { height: 330px; overflow: hidden; align-items: flex-start; margin-bottom: -32px; }
  .big-phone { width: 240px; height: 500px; border-radius: 46px; padding: 9px; }
  .big-phone .screen { border-radius: 38px; }
  .big-phone .cue { padding: 48px 18px 14px; }
  .big-phone .cue p { font-size: 19px; }
  /* Four short facts as a plain list, not four more boxes. */
  .facts { display: block; border-top: 1px solid var(--navy-3); }
  .facts li { border: 0; border-bottom: 1px solid var(--navy-3); border-radius: 0; padding: 12px 0; gap: 2px; }
}

/* Templates */

.templates { padding-top: 40px; padding-bottom: 104px; }
.shape-visual {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* A 9:16 frame of the creator's video, with its hook as an on-screen
   caption, the way it would appear in the feed. */
.reel {
  position: relative;
  overflow: hidden;
  width: 176px;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background: var(--navy-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 34px 10px 12px;
  box-shadow: 0 20px 40px rgba(18, 24, 47, 0.18);
}
.reel-caption {
  position: relative;
  background: var(--page);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(18, 24, 47, 0.2);
}
.reel-chip {
  position: relative;
  align-self: flex-start;
  font-size: 12px;
  color: var(--on-navy);
  background: rgba(18, 24, 47, 0.72);
  padding: 5px 9px;
  border-radius: 999px;
}
.beats { width: 260px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.beats div {
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  background: var(--white);
  border: 1px solid var(--hairline);
}
.beats b { font-weight: 700; }
.beats span { color: var(--muted); text-align: right; }
.beats .hook { background: var(--ink); color: var(--on-navy); border-color: var(--ink); }
.beats .hook span { color: var(--blush); }
.beats .setup { margin-left: 10px; }
.beats .reveal { margin-left: 20px; }
.beats .landing { margin-left: 30px; background: var(--blush-wash); border-color: var(--blush-wash); }
.beats .landing span { color: var(--rose); }
.beats .example-tag { margin: 4px 0 0 30px; font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 640px) {
  .templates { padding-top: 8px; padding-bottom: 48px; gap: 28px; }
  /* On a phone the part stack stands alone at full width: no frame, no
     arrow, no stagger. */
  .shape-visual { display: block; }
  .reel, .shape-visual .arrow { display: none; }
  .beats { width: 100%; }
  .beats .setup, .beats .reveal, .beats .landing { margin-left: 0; }
  .beats .example-tag { margin-left: 0; }
}

/* Coaching */

.coaching { padding-top: 104px; padding-bottom: 96px; }
.kicker { font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--ink); }

.moment {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 60px rgba(18, 24, 47, 0.08);
}
.moment .label { color: var(--rose); }
.moment-row { display: flex; gap: 12px; align-items: flex-start; }
.moment-row .icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blush-wash);
}
.moment-row .icon.dark { background: var(--ink); }
.moment-row h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.moment-row p { color: var(--ink-2); line-height: 1.5; }
.moment-row > div { display: flex; flex-direction: column; gap: 4px; }
.timing {
  background: var(--page);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.timing .parts { display: flex; justify-content: space-between; margin-left: 98px; }
.timing .row { display: flex; gap: 6px; align-items: center; }
.timing .row > span:first-child { width: 92px; flex: none; }
.timing .row.you > span:first-child { color: var(--ink); font-weight: 600; }
.timing .bars { flex: 1; display: flex; gap: 4px; }
.timing .bars i { height: 10px; border-radius: 999px; background: #C78DB1; }
.timing .bars .f1 { flex: 1; }
.timing .bars .f2 { flex: 2; }
.timing .bars .f3 { flex: 3; }
.timing .bars .f4 { flex: 4; }
.timing .bars .f24 { flex: 2.4; }
.timing .you .bars i { background: var(--ink); }
.timing .you .bars i.short { background: var(--blush); }
@media (max-width: 640px) {
  .coaching { padding-top: 56px; padding-bottom: 40px; gap: 28px; }
  .kicker { font-size: 18px; }

  .moment { padding: 20px; gap: 14px; }
  .moment-row p { font-size: 15px; line-height: 1.45; }
  .timing .parts { margin-left: 76px; }
  .timing .row > span:first-child { width: 70px; }
}

/* Plans */

.plans .wrap { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 36px; }
.plans .section-head { max-width: 720px; gap: 12px; }
.plans h2 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; }
.plan-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.plan {
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--page);
}
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.2; }
.plan p { color: var(--ink-2); line-height: 1.55; }
.plan .price { color: var(--ink); white-space: nowrap; }
.plan .price b { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.plan .price span { font-size: 15px; color: var(--muted); margin-left: 2px; }
.plan .price-alt { margin-top: -8px; font-size: 15px; color: var(--muted); text-align: right; }
/* The recommended plan is the navy card. Its badge says who it suits, not
   how many people chose it: there is no number behind "most popular". */
.plan-creator { background: var(--ink); border-color: var(--ink); }
.plan.plan-creator p, .plan-creator .price { color: var(--on-navy-2); }
.plan-creator .price b { color: var(--on-navy); }
.plan.plan-creator .price span, .plan.plan-creator .price-alt { color: var(--on-navy-2); }
.plan.plan-creator .plan-badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--blush);
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-pro { background: var(--white); }
.plans-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.store-dark { background: var(--ink); color: var(--page); }
.store-dark:hover { background: var(--navy-3); color: var(--page); }
/* The launch-price note and the honest small print for templates and
   coaching sit together under the plans, where small print is expected. */
.plan-notes { flex: 1 1 320px; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.plan-notes p { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Closing CTA */

.closing { padding-top: 88px; padding-bottom: 88px; }
.closing-card {
  border-radius: 36px;
  padding: clamp(28px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.closing-card .copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.closing-card p { font-size: 17px; color: var(--on-navy-2); line-height: 1.55; }
.closing-card .store-button { color: var(--ink); }
.closing-card .store-button:hover { color: var(--ink); }

@media (max-width: 640px) {
  .steps { padding-bottom: 56px; }
  .words .wrap { padding-top: 48px; padding-bottom: 48px; gap: 24px; }
  .section-head, .split > .copy, .prompter-grid > .copy, .repeat-card .copy { gap: 12px; }
  .plans .wrap { padding-top: 48px; padding-bottom: 48px; gap: 24px; }
  .plan-grid { gap: 12px; }
  .plan { padding: 18px 20px; gap: 6px; border-radius: 20px; }
  .plan .price-alt { margin-top: -6px; }
  .plan p { font-size: 16px; line-height: 1.5; }
  .plan h3 { font-size: 28px; }
  .plan .price b { font-size: 23px; }
  .plans-cta .store-button { width: 100%; }
  .plan-notes p { font-size: 13px; }
  .compare { gap: 12px; }
  .compare-panel { padding: 20px; gap: 8px; }
  .compare-said p:not(.label) { font-size: 16px; line-height: 1.6; }
  .compare-wrote p:not(.label):not(.note) { font-size: 17px; line-height: 1.6; }
  .compare-arrow { margin: -6px 0; }
  .compare-arrow svg { width: 36px; height: 36px; }
  .closing { padding-top: 40px; padding-bottom: 40px; }
  .closing-card { border-radius: 28px; padding: 28px 22px; gap: 24px; }
  .closing-card p { font-size: 15px; }
  .lede { line-height: 1.5; }
  .store-button { padding: 14px 20px; font-size: 16px; }
}

/* ---------- Support ---------- */

.support-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 48px;
  padding-bottom: 32px;
}
.support-hero .copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.support-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 76px); line-height: 1; }
.support-hero .lede { max-width: 560px; }
.mail-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--page);
  text-decoration: none;
  padding: 18px 26px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 18px;
  min-height: 56px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mail-button:hover { background: var(--navy-3); color: var(--page); }
.mail-button svg { flex: none; }

.questions {
  padding-top: 24px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.q {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.q h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.q p, .q li { line-height: 1.6; color: var(--ink-2); }
.q ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.q strong { color: var(--ink); font-weight: 600; }
.q-blush { background: var(--blush-wash); border-color: var(--blush-wash); }
.q.navy { background: var(--ink); color: var(--on-navy); border-color: var(--ink); }
.q.navy p, .q.navy li { color: var(--on-navy-2); }
.q.navy strong { color: var(--on-navy); }
@media (max-width: 640px) {
  .support-hero { padding-top: 32px; }
  .q { padding: 22px; }
  .q h2 { font-size: 27px; }
  .mail-button { padding: 16px 20px; font-size: 17px; }
}

/* ---------- Legal pages ---------- */

.legal-band .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 56px;
}
.legal-band .title { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.legal-band h1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-weight: 400;
}
.legal-band h1 .display {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
}
.legal-band .meta { font-size: 15px; color: var(--on-navy-2); }
.short-version {
  flex: 1 1 520px;
  min-width: 0;
  background: var(--blush-wash);
  color: var(--ink);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.short-version h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
}
.short-version ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.short-version li { background: var(--white); border-radius: 16px; padding: 14px 16px; line-height: 1.5; }
.short-version a { color: var(--link); }
.short-version a:hover { color: var(--ink); }

.legal-body {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 80px;
}
.toc {
  flex: 1 1 240px;
  max-width: 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toc h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc ol { padding-left: 26px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.35; color: var(--muted); }
.toc a { display: inline-block; padding: 4px 0; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 1000px) {
  .toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
}
/* Touch screens get 44pt rows whatever their width (an iPad in landscape
   gets the desktop layout). */
@media (pointer: coarse) {
  .toc ol { gap: 0; }
  .toc a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 999px) {
  .toc { max-width: none; flex-basis: 100%; }
  .toc ol { gap: 0; }
  .toc a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}

.legal-body article {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.legal-body article > section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 16px;
}
.legal-body article h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.legal-body article h2 .num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--rose);
  min-width: 34px;
  flex: none;
}
.legal-body article p,
.legal-body article li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.legal-body article ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }
.legal-body article strong { color: var(--ink); font-weight: 600; }
.legal-body article a { overflow-wrap: anywhere; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  border-style: hidden;
  box-shadow: 0 0 0 1px var(--hairline);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
}
th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--ink); font-weight: 600; min-width: 9em; }

/* Unfilled legal placeholders are loud on purpose so none ships unnoticed.
   See README. */
.placeholder {
  background: rgba(255, 162, 182, 0.55);
  color: var(--ink);
  border-radius: 4px;
  padding: 0 0.2em;
  font-weight: 600;
}
.navy .placeholder { background: var(--blush); }

@media (max-width: 640px) {
  .legal-band .wrap { padding-top: 40px; padding-bottom: 40px; gap: 32px; }
  .short-version { padding: 16px; }
  .legal-body { padding-top: 32px; gap: 32px; }
  .legal-body article h2 { font-size: 20px; }
  .legal-body article p, .legal-body article li { font-size: 16px; }
}

/* ---------- 404 ---------- */

.not-found { padding-top: 72px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.not-found h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: 1; }

@media print {
  body { background: #fff; color: #000; }
  .site-nav, .skip, .site-footer, .toc { display: none; }
  .navy, .legal-band { background: #fff !important; color: #000 !important; }
  .legal-band .meta, .legal-band .eyebrow { color: #000 !important; }
  a { color: #000; }
}