/* Group "usecases": the audience pages. /use-cases speaks to people who talk
   to camera; /for-podcasts speaks to hosts. Refines the shared patterns in
   site.css and pages.css. Every drawing here mirrors something real: a take
   the edit keeps or cuts, a punch-in, an episode's two speakers on a
   timeline, the files an upload takes. Tokens only; the fixed colours are
   inside the always-dark video stages. */

/* ================================================================ shared */
.uc-flush { margin-bottom: 0; }
.tc b.uc-tc-dim { color: var(--ink-400); }
.uc-anchor { scroll-margin-top: var(--header-h); }
.uc-static { position: static !important; }

/* Hero on small laptops (1024-1179): the shared two-column hero leaves the
   text column too narrow, so the podcast headline ran to 4 lines and the
   outline button dropped to its own row. A tighter gap and a slightly
   smaller headline keep 3 lines and one row of buttons. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .uc-phero .phero__grid { gap: var(--space-10); }
  .uc-phero h1 { font-size: clamp(3.5rem, 7.7vw - 1.43rem, 4.25rem); }
}

/* Captions and a card on one dark frame. */
.uc-cc { justify-content: space-between; align-items: stretch; }
.uc-cc .stage__card { align-self: flex-start; }
.uc-cc .stage__card b { font-size: 1.125rem; }
.uc-cc .stage__cap span, .uc-cap .stage__cap span { font-size: 0.875rem; }

/* A punch-in: one wide shot, with the closer frame the edit cuts to. */
.uc-punch { position: relative; }
.uc-punch .stage__person { width: 36%; height: 80%; }
.uc-punch__crop { position: absolute; left: 31%; right: 31%; top: 14%; bottom: 28%; border: 2px dashed rgba(255, 255, 255, 0.9); border-radius: 6px; font-style: normal; }
.uc-punch__crop span, .uc-punch__tag { position: absolute; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; line-height: 1;
  color: #fff; background: rgba(0, 0, 0, 0.6); padding: 0.2rem 0.35rem; border-radius: var(--radius-xs); }
.uc-punch__crop span { left: calc(100% + 4px); top: -2px; background: #2F56E8; }
.uc-punch__tag { left: 0.5rem; top: 0.5rem; }

/* Outcome cards: four across, two on tablets (never three and an orphan),
   and two on phones with the drawing kept small so the set fits in one
   screen instead of four. */
.uc-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .uc-outs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  .uc-outs { gap: var(--space-3); }
  .uc-outs .ocard { padding: var(--space-3); gap: var(--space-3); border-radius: var(--radius-lg); }
  .uc-outs .ocard__art { height: 5.5rem; padding: var(--space-3); gap: var(--space-2); border-radius: var(--radius-md); }
  .uc-outs .ocard h3 { font-size: var(--text-base); line-height: 1.25; letter-spacing: -0.01em; }
  .uc-outs .ocard p { font-size: var(--text-sm); line-height: 1.5; }
  .uc-outs .ocard__art--phones { gap: 6px; }
  .uc-outs .ocard__art--phones span { width: 2rem; height: 3.6rem; border-radius: 0.4rem; }
  .uc-outs .clips { flex-wrap: nowrap; gap: 2px; }
  .uc-outs .clips span { height: 0.9rem; min-width: 0; }
  .uc-outs .stage__cap { padding-inline: 0; }
  .uc-outs .stage__cap span { font-size: 0.6875rem; }
  .uc-outs .stage__card { padding: 0.35rem 0.55rem; }
  .uc-outs .stage__card small { font-size: 0.5rem; }
  .uc-outs .stage__card b { font-size: 0.875rem; }
  .uc-outs .uc-punch__tag { left: 0.35rem; top: 0.35rem; }
  .uc-outs .uc-punch__crop span, .uc-outs .uc-punch__tag { font-size: 0.5rem; padding: 0.15rem 0.25rem; }
}

/* Keys for timeline legends. */
.uc-key { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.uc-key--cut { background: var(--cut-subtle); box-shadow: inset 0 0 0 1.5px var(--cut); }
.uc-key--keep { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* A free download beside the advice it goes with. */
.uc-res { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; color: var(--text); }
.uc-res img { width: 100%; height: auto; aspect-ratio: 600 / 776; object-fit: cover; border-radius: var(--radius-md);
  border: var(--border-w) solid var(--border); box-shadow: var(--shadow-md); background: var(--surface); }
.uc-res__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.uc-res__text h3 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.01em; }
.uc-res__text p { font-size: var(--text-sm); }
.uc-res .card2__go { padding-top: var(--space-1); }
@media (max-width: 419px) { .uc-res { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); } }

/* The questions column: heading, then a quiet way to ask a person. */
.uc-faqhead { position: static; }
@media (min-width: 1024px) { .uc-faqhead { position: sticky; top: calc(var(--header-h) + var(--space-8)); align-self: start; } }

/* ============================================================ /use-cases */
/* Hero proof: a real finished frame, and the three takes of the line on it.
   Phones keep the takes only; the real frames follow two sections down. */
.uc-hero-art { width: 100%; }
.uc-hero-art__stack { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); align-items: center; width: 100%; max-width: 34rem; margin-inline: auto; }
.uc-hero-art__stack .phone { width: 100%; }
.uc-takes { position: relative; z-index: 1; align-self: end; margin: 0 0 var(--space-8) -1.5rem; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); min-width: 0; }
.uc-takes__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.uc-takes__head b { font-family: var(--font-display); font-size: var(--text-base); letter-spacing: -0.01em; color: var(--text-strong); }
.uc-takes__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.uc-takes__list li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-subtle); }
.uc-takes__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.uc-takes__meta time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.uc-takes__list p { font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }
.uc-takes__list .is-cut p { text-decoration: line-through; text-decoration-color: var(--cut); text-decoration-thickness: 2px; }
.uc-takes__list .is-kept { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-border); }
.uc-takes__list .is-kept p { color: var(--text-strong); font-weight: var(--font-medium); }
.uc-takes .pill { padding: 0.15rem 0.5rem; }
.uc-hero-art figcaption { margin-top: var(--space-2); }
@media (max-width: 559px) {
  .uc-hero-art__stack { grid-template-columns: minmax(0, 1fr); }
  .uc-hero-art__stack .phone, .uc-hero-art figcaption { display: none; }
  .uc-takes { margin: 0; box-shadow: var(--shadow-md); }
}

/* Who it is for: what each person records, and what comes back. */
.uc-who { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .uc-who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.uc-who__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); min-width: 0;
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl); }
.uc-who__card h3 { font-size: var(--text-xl); letter-spacing: -0.015em; }
.uc-who__text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.uc-who__dl { display: flex; flex-direction: column; gap: var(--space-3); }
.uc-who__dl div { display: flex; flex-direction: column; gap: 2px; }
.uc-who__dl dt { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.uc-who__dl dd { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.uc-who__dl div + div { padding-top: var(--space-3); border-top: var(--border-w) solid var(--border-subtle); }
.uc-who__dl div + div dd { color: var(--text); }
@media (max-width: 559px) {
  .uc-who { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .uc-who__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); }
  .uc-who__text { display: contents; }
  .uc-who__card h3 { font-size: var(--text-lg); }
  .uc-who__dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .uc-who__dl div + div { padding-top: 0; padding-left: var(--space-4); border-top: 0; border-left: var(--border-w) solid var(--border-subtle); }
}

/* Other kinds of recording: compact routes, then every type as a chip. */
.uc-routes { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.uc-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default); }
.uc-route:hover { border-color: var(--accent); transform: translateY(-1px); }
.uc-route:focus-visible { outline: var(--border-w-thick) solid var(--accent); outline-offset: 3px; }
.uc-route__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-route__text b { font-weight: var(--font-semibold); color: var(--text-strong); }
.uc-route__text span { font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }
.uc-route > svg { color: var(--accent-text); transition: transform var(--duration-fast) var(--ease-default); }
.uc-route:hover > svg { transform: translateX(3px); }
@media (max-width: 479px) { .uc-route { gap: var(--space-3); padding: var(--space-4); } }
.uc-types { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--border-w) solid var(--border); }
.uc-types__label { font-size: var(--text-sm); color: var(--text-muted); }
.uc-types .chipgrid li { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }

/* ========================================================== /for-podcasts */
/* Hero proof: the episode window. A real interview frame beside what each
   speaker said, with the cut parts struck, and a lane per speaker. */
.uc-ep { width: 100%; max-width: 33rem; margin-inline: auto; }
.uc-ep__body { display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr); gap: var(--space-5); align-items: center; padding: var(--space-5); }
.uc-ep__frame { width: 100%; max-height: none; box-shadow: var(--shadow-md); }
.uc-ep__side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.uc-ep__line { font-size: var(--text-sm); line-height: 1.6; color: var(--text); }
.uc-spk { display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.4rem; border-radius: var(--radius-xs); font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: var(--font-medium); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
  background: var(--accent-subtle); color: var(--accent-text); }
.uc-spk--2 { background: var(--bg-subtle); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.uc-ep__foot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-w) solid var(--border); }
.uc-tracks { display: flex; flex-direction: column; gap: 6px; }
.uc-track { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.uc-track > span { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.uc-track .tl { height: 1.125rem; }
.uc-track .tl .o { background: transparent; box-shadow: inset 0 -1px 0 0 var(--border); border-radius: 0; }
@media (max-width: 559px) {
  .uc-ep__body { grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); align-items: start; }
  .uc-ep__line { font-size: var(--text-xs); line-height: 1.55; }
  .uc-ep__side { gap: var(--space-2); }
}

/* What to send: the upload's file list, each file with the role it gets. */
.uc-upload { gap: var(--space-4); }
.uc-upload__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.uc-files { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.uc-files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.uc-files li > svg { color: var(--accent-text); }
.uc-files__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uc-files__text b { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-files__text span { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.uc-files em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); padding: 0.15rem 0.55rem;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-full); background: var(--surface); white-space: nowrap; }
.uc-files .is-need { border-color: var(--accent-border); background: var(--accent-subtle); }
.uc-files .is-need em { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 379px) { .uc-files li { grid-template-columns: auto minmax(0, 1fr); } .uc-files em { grid-column: 2; justify-self: start; } }

/* A key line said in the episode, drawn as a card on the video frame. */
.uc-keyline { align-items: flex-start; justify-content: center; }

/* The cost table: no rule under the last row's plan name either. */
.uc-cost tbody tr:last-child th { border-bottom: 0; }

/* Clips per plan: four across from 1024px, two by two below it (never three
   and an orphan); the link sits under the numbers on phones. */
.uc-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .uc-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.uc-specs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.uc-specs-foot .note2 { margin: 0; }
@media (max-width: 559px) {
  .uc-specs { gap: var(--space-2); }
  .uc-specs .spec { padding: var(--space-3) var(--space-4); }
}