/* The page families: tools, kinds of video, caption styles, blog, comparisons,
   legal. Linked by SiteLayout only; the landing and pricing use site.css. */

/* Reading pages: one column at a reading width, on the site's left edge.
   The width is the text's own (content-box), so the gutter adds to it. */
.prose-page {
  display: grid;
  gap: 20px;
  box-sizing: content-box;
  max-width: 72ch;
  padding: clamp(32px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 112px);
}
.prose-page h1 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.025em; line-height: 1.04 }
.prose-page h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em; margin-top: 20px }
.prose-page h3 { font-size: 18px; margin-top: 8px }
.prose-page section { display: grid; gap: 12px }
.prose-page ul, .prose-page ol { padding-left: 1.3em; display: grid; gap: 6px }
.prose-page ul { list-style: disc }
.prose-page ol { list-style: decimal }
.prose-page li::marker { color: var(--app-ink-muted) }
.prose-page a { text-decoration: underline }
.prose-page .btn { text-decoration: none }
.prose-page header { display: grid; gap: 8px }

.legal h2 { font-size: 22px; margin-top: 16px }
.legal section { scroll-margin-top: 24px }

/* A page head beside the 9:16 frame: tools, kinds of video, caption styles. */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 340px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(40px, 6vw, 80px);
}
.page-hero-copy { display: grid; gap: 20px; justify-items: start }
.page-hero h1 { max-width: 17ch; font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.03em; line-height: 1 }
.page-hero .link-form { width: 100% }
.page-hero .answer { font-size: clamp(17px, 1.4vw, 20px); max-width: 60ch }
.page-hero .link-form { margin-top: 8px }
.page-hero .frame { box-shadow: var(--app-float-shadow) }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--app-ink-muted) }
.eyebrow a { color: inherit; text-decoration: none }
@media (hover: hover) and (pointer: fine) {
  .eyebrow a:hover { color: var(--app-ink); text-decoration: underline }
}
.form-note { font-size: 14px }

/* Video to 9:16: a 16:9 frame with the 9:16 slice a short keeps, outlined in highlighter. */
.page-hero:has(.wide-to-tall), .page-hero:has(.sample-transcript) { grid-template-columns: minmax(0, 1fr) clamp(280px, 34vw, 560px) }
.wide-to-tall { margin: 0; display: grid; gap: 10px }
.wide-to-tall .wide { position: relative; aspect-ratio: 16 / 9; background: var(--app-ink); border-radius: 10px; overflow: hidden }
.wide-to-tall .tall {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--app-field);
}
.wide-to-tall img { width: 100%; height: 100%; object-fit: cover }
.wide-to-tall figcaption { font-size: 14px }
@media (max-width: 760px) {
  .page-hero, .page-hero:has(.wide-to-tall), .page-hero:has(.sample-transcript) { grid-template-columns: 1fr }
  .page-hero-side { justify-self: center; width: min(64vw, 280px) }
  .page-hero-side.wide-to-tall, .page-hero-side:has(.sample-transcript) { width: 100% }
}

/* The body of a family page: question headings over a reading column, with a
   side column for the one list or table the page has. */
.page-body {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(240px, 440px);
  justify-content: space-between;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 6vw, 88px) var(--gutter);
  border-top: 1px solid var(--app-border);
}
.page-body-main { display: grid; gap: 40px; align-content: start }
.page-body-main section { display: grid; gap: 12px }
.page-body-main h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em }
.page-body-main p + p { margin-top: 4px }
.page-body-side { display: grid; gap: 28px; align-content: start }
.page-body-side h2 { font-size: 18px }
@media (max-width: 960px) {
  .page-body { grid-template-columns: 1fr }
}

/* A checklist: what a good moment needs. Plain rules between items. */
.checks { display: grid; border-top: 1px solid var(--app-border) }
.checks li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--app-border); position: relative }
.checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--app-ink);
  border-bottom: 2px solid var(--app-ink);
  transform: rotate(-45deg);
}

.steps { counter-reset: step; display: grid; gap: 14px }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: baseline }
.steps li::before { content: counter(step); font-family: var(--app-font-figures); font-weight: 600; color: var(--app-ink-muted) }

/* A worked month on a plan: one sentence and the numbers behind it. */
.cost { display: grid; gap: 8px }
.cost p:first-child { font-size: 19px; font-weight: 500 }
.cost p + p { font-size: 15px }

/* The start band at the end of a page: the same ask as the hero. */
.page-close { padding: clamp(48px, 7vw, 96px) var(--gutter); background: var(--app-surface-2); display: grid; gap: 20px }
.page-close h2 { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -0.02em; max-width: 22ch }

/* Caption style pages: the style at three instants of the sample short. */
.style-instants { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: clamp(12px, 2vw, 28px) }
.style-instants figure { margin: 0; display: grid; gap: 8px }
.style-instants figcaption { font-size: 14px; color: var(--app-ink-muted) }
@media (max-width: 760px) {
  .style-instants { grid-template-columns: repeat(3, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px }
  .style-instants figure { scroll-snap-align: start }
}
.captions-index { padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(56px, 8vw, 112px); display: grid; gap: 36px }
.captions-index .section-head { margin-bottom: 0 }
.captions-index h1 { font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.03em; line-height: 1 }
.style-list { display: grid; gap: 4px; border-top: 1px solid var(--app-border); max-width: 1100px }
.style-list li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--app-border) }
.style-list a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; align-self: start }
.style-list p { padding-top: 11px }
@media (max-width: 620px) {
  .style-list li { grid-template-columns: 1fr; gap: 4px }
}

/* Transcript tool: what the result looks like, as text. */
.sample-transcript {
  padding: 20px 24px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-card);
  display: grid;
  gap: 12px;
  font-size: 15px;
}
.sample-transcript p { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px }
.sample-transcript .figures { color: var(--app-ink-muted) }
.srt-sample {
  margin: 0;
  padding: 16px 20px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-card);
  font-family: var(--app-font-figures);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Blog and comparisons. */
.blog-list { display: grid; border-top: 1px solid var(--app-border); max-width: 900px }
.blog-list li { padding: 24px 0; border-bottom: 1px solid var(--app-border); display: grid; gap: 6px }
.blog-list h2 { font-size: 24px; margin: 0 }
.blog-list h2 a { text-decoration: none }
.blog-list time, .post-meta { font-size: 14px; color: var(--app-ink-muted) }
.pager { display: flex; gap: 24px; font-weight: 500 }
.post-cover { border-radius: var(--app-radius-card); aspect-ratio: 1200 / 630; object-fit: cover; width: 100% }
.post-body { display: grid; gap: 14px; font-size: 18px; line-height: 1.65 }
.post-body h2 { margin-top: 16px }
.post-body img { border-radius: var(--app-radius-card) }
.post-body blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--app-border) }
.post-body pre { overflow-x: auto; padding: 12px 16px; background: var(--app-surface-2); border-radius: var(--app-radius-control) }

.comparison { max-width: 980px }
.comparison > section > p, .comparison > section > ul { max-width: 72ch }
.claims { width: 100%; border-collapse: collapse; font-size: 15px }
.claims th, .claims td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--app-border) }
.claims th { font-size: 13px; font-weight: 600; color: var(--app-ink-muted); text-transform: uppercase; letter-spacing: 0.02em }
.claims td:last-child { white-space: nowrap; font-size: 14px }
@media (max-width: 680px) {
  .claims thead { display: none }
  .claims tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--app-border) }
  .claims td { border: 0; padding: 0; white-space: normal }
}