/* The read-and-scroll pages: the landing and pricing, and the nav and footer of every page. */

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--gutter);
}
.site-nav nav { display: flex; align-items: center; gap: 24px; margin-left: auto }
.site-nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--app-ink-muted);
  white-space: nowrap;
}
.site-nav .btn { white-space: nowrap }
@media (hover: hover) and (pointer: fine) {
  .site-nav nav a:hover { color: var(--app-ink) }
}
@media (max-width: 720px) {
  .site-nav nav .site-nav-how { display: none }
  .site-nav, .site-nav nav { gap: 16px }
}
@media (max-width: 460px) {
  .site-nav nav .site-nav-pricing { display: none }
}

.section-head { display: grid; gap: 12px; max-width: 62ch; margin-bottom: 36px }
.section-head h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em }
.section-head p { font-size: 17px; color: var(--app-ink) }

/* Hero: the claim and the link field, with the short it makes beside them. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 420px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding: clamp(32px, 4vw, 64px) var(--gutter) clamp(40px, 6vw, 80px);
}
.hero h1 {
  max-width: 15ch;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.lead { max-width: 54ch; margin-top: 24px; font-size: clamp(17px, 1.5vw, 20px) }
.hero .link-form { margin-top: 32px }
.hero-note { margin-top: 12px; font-size: 14px }
.hero-short .frame { box-shadow: var(--app-float-shadow) }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr }
  .hero-short { justify-self: center; width: min(68vw, 300px) }
}

/* A short from the sample episode: the frame and a line about it. */
.sample-short { margin: 0; display: grid; gap: 10px }
.sample-short .frame { width: 100% }
.sample-short figcaption { display: grid; gap: 2px; font-size: 14px }
.sample-short figcaption span:first-child { font-weight: 600 }

.link-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 640px;
}
.link-form .field-error { grid-column: 1 / -1 }
.link-form-lg .input { min-height: 52px; font-size: 17px }
.link-form .btn { white-space: nowrap }
@media (max-width: 520px) {
  .link-form { grid-template-columns: 1fr }
}

/* The band under the hero: the short in a printed transcript, beside the moment's reasons. */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 420px);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding: clamp(32px, 5vw, 72px) var(--gutter);
  background: var(--app-surface-2);
}
.demo-paper { max-width: 76ch }
.demo-head { max-width: 68ch; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px }
.demo-head h2 { font-size: 20px }
.demo-head p { font-size: 14px }
.paper {
  padding: clamp(20px, 3vw, 40px);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-card);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.75;
  max-width: 68ch;
  cursor: text;
}
.paper p + p { margin-top: 12px }
.speaker {
  display: inline-block;
  min-width: 3.5em;
  margin-right: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-ink-muted);
  user-select: none;
}
.hl, .paper ::selection {
  background: var(--app-field);
  color: var(--app-field-ink);
}
.hl { box-decoration-break: clone; -webkit-box-decoration-break: clone }
.demo-head p .figures { margin-left: 8px; white-space: nowrap }
.demo-side { display: grid; gap: 16px; padding-top: 4px }
.demo-side-title { font-size: 20px }
.demo-side .reason-rows { grid-template-columns: 1fr; gap: 14px }
.demo-side .reason-rows > div { gap: 4px }
@media (max-width: 760px) {
  .demo { grid-template-columns: 1fr }
}

/* Kinds of video: a list of plain links, one line each. */
.uses { padding: clamp(56px, 9vw, 128px) var(--gutter) }
.use-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--app-border);
}
.use-list li { border-bottom: 1px solid var(--app-border) }
.use-list a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 20px 24px 22px 0;
  text-decoration: none;
}
.use-name { font-family: var(--app-font-display); font-weight: 600; font-size: 20px }
.use-line { color: var(--app-ink-muted); font-size: 15px }
@media (hover: hover) and (pointer: fine) {
  .use-list a:hover .use-name { text-decoration: underline; text-decoration-thickness: 1px }
}
@media (max-width: 860px) {
  .use-list { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  .use-list { grid-template-columns: 1fr }
}

/* A moment's five reasons, set wide (the landing stacks them in its demo band). */
.reason-rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px }
.reason-rows > div { display: grid; gap: 8px; align-content: start }
.reason-rows dt { font-weight: 600 }
.reason-rows dd { margin: 0; display: flex; align-items: center; gap: 10px }
.reason-rows dd.reason-meaning { display: block; font-size: 14px }
@media (max-width: 900px) {
  .reason-rows { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  .reason-rows { grid-template-columns: 1fr }
}

/* Caption styles: four phone frames playing one line. */
.styles { padding: clamp(56px, 9vw, 128px) var(--gutter); background: var(--app-surface-2) }
.style-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 300px));
  gap: clamp(12px, 2vw, 28px);
}
.style-row figure { margin: 0; display: grid; gap: 10px }
.style-row figcaption { font-weight: 600 }
.style-row figcaption a { display: inline-flex; align-items: center; min-height: 44px }
.style-row .frame { width: 100% }
@media (max-width: 760px) {
  .style-row {
    grid-template-columns: repeat(4, 62%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
  }
  .style-row figure { scroll-snap-align: start }
}

/* Plans: columns of one table. */
.pricing-band { padding: clamp(56px, 9vw, 128px) var(--gutter) }
.pricing-page { padding: clamp(32px, 6vw, 80px) var(--gutter) }
.pricing-page h1 { font-size: clamp(32px, 4.5vw, 52px); letter-spacing: -0.02em }
.pricing-note { margin-top: 20px; font-size: 14px }
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}
.plan { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px }
.plan + .plan { border-left: 1px solid var(--app-border) }
.plan h3 { font-size: 20px }
.plan-for { margin-top: -10px }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap }
.plan-amount { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.plan-was { margin-top: 4px; font-size: 14px }
.plan-was del { text-decoration-thickness: 1px }
.plan-limits { margin: 0; display: grid; gap: 0 }
.plan-limits div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--app-border) }
.plan-limits dd { margin: 0; font-weight: 600 }
.plan-includes { display: grid; gap: 6px; flex: 1 }
.plan-includes li::before { content: '–  '; color: var(--app-ink-muted) }
.plan-current { min-height: var(--app-control-h); display: flex; align-items: center; justify-content: center; font-weight: 600 }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--app-border) }
}

/* The close: the same ask as the hero, on a neutral band (yellow means selected). */
.closing {
  display: grid;
  gap: 28px;
  padding: clamp(56px, 9vw, 128px) var(--gutter);
  background: var(--app-surface-2);
}
.closing h2 { max-width: 18ch; font-size: clamp(32px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.03em }
.closing-note { margin: 0; color: var(--app-ink-muted) }

/* Footer: what the product is, the pages people look for, the legal line. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px clamp(32px, 6vw, 96px);
  padding: clamp(40px, 6vw, 72px) var(--gutter) 40px;
  border-top: 1px solid var(--app-border);
}
.footer-brand { display: grid; gap: 8px; align-content: start; max-width: 36ch }
.footer-brand p { font-size: 15px }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.footer-cols h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--app-ink-muted); margin-bottom: 8px }
.site-footer a:not(.wordmark) { color: var(--app-ink); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; font-size: 15px }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--app-border) }
.footer-legal p { font-size: 14px }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto }
.footer-legal nav a { color: var(--app-ink-muted) }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:not(.wordmark):hover { text-decoration: underline; text-decoration-thickness: 1px }
}
@media (max-width: 860px) {
  .site-footer { grid-template-columns: 1fr }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr 1fr }
  .footer-legal nav { margin-left: 0 }
}