/* Group "home-funnel": the homepage (/), the try-first setup (/start) and the
   finished-edit example (/example). These are the highest-converting pages, so
   this file only refines the shared patterns in site.css and pages.css: it
   tightens the phone layouts so the five-second test still passes at 390px,
   and replaces the inline styles the templates used to carry. Tokens only;
   hard-coded colours appear only inside always-dark video stages. */

/* ================================================================ shared */
.hf-flush { margin-bottom: 0; }
.hf-strong { color: var(--text-strong); font-weight: var(--font-semibold); }
.hf-center { text-align: center; }
.hf-mt2 { margin-top: var(--space-2); }
.hf-tc-quiet { color: var(--text-subtle); }
.hf-tc-blue { color: var(--accent-text); }
.tc b.hf-tc-dim { color: var(--ink-400); }
.hf-hl { color: var(--accent-text); }
.hf-w72 { width: 72%; }
.hf-cap-static { position: static; }
/* Inline text links that stand alone get a real touch target. */
.hf-tap { display: inline-flex; align-items: center; min-height: 2.75rem; align-self: flex-start; }
.hf-key { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.hf-key--cut { background: var(--cut); }
.hf-key--keep { background: var(--accent); }
/* Three proofs stay three across from tablet width up (no orphaned third). */
@media (min-width: 640px) { .hf-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
/* Links inside the always-dark band keep a light blue that reads on ink. */
.sx--ink { --text-link: var(--brand-300); }
/* The cut corner clips a box shadow into grey squares at the round corners,
   so the cut-corner cards rely on their blue border instead. */
.persona__out, .plan2--rec { box-shadow: none; }
/* Phone frame strips start at the page edge, not under it: the snap point
   respects the gutter the strip is padded with. */
@media (max-width: 767px) { .frames { scroll-padding-inline: var(--gutter); } }

/* ============================================================ home: hero */
/* The edit window is a grid: the real frame, what was said, and the timeline
   under them. On a phone the frame sits beside the words instead of above
   them, so the window is half as tall and its top shows above the fold. */
.hf-heroedit { grid-template-areas: "frame" "said" "foot"; }
.hf-heroedit__frame { grid-area: frame; }
.hf-heroedit__said { grid-area: said; }
.hf-heroedit__foot { grid-area: foot; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (min-width: 560px) {
  .hf-heroedit { grid-template-areas: "frame said" "frame foot"; align-content: center; row-gap: var(--space-3); }
  .hf-heroedit__said { align-self: end; }
  .hf-heroedit__foot { align-self: start; }
}
@media (min-width: 560px) and (max-width: 1023px) {
  /* Tablet: a smaller frame, so the window is not taller than the screen. */
  .hf-heroedit { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--space-6); }
}
@media (max-width: 559px) {
  .hf-heroedit { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-areas: "frame said" "foot foot";
    gap: var(--space-4); align-items: start; }
  .heroedit.hf-heroedit .stage--reel { width: 100%; }
  .hf-heroedit__said { gap: var(--space-2); }
  .hf-heroedit__said .transcript2 { font-size: var(--text-sm); line-height: 1.6; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  /* Small laptops: "We do the editing." stays on one line. */
  .hf-hero .hero2__title { font-size: 4rem; }
}
@media (max-width: 479px) {
  /* On a phone the audience line is the part that answers "is it for me?". */
  .hf-hero .hero2__tag { padding: 0.35rem 0.85rem; }
  .hf-hero .hero2__tag .pill { display: none; }
  .hf-hero .hero2__copy { gap: var(--space-5); }
  .hf-hero .hero2__cta { gap: var(--space-2); }
  .hf-hero .hero2__cta .s-btn--xl { height: 3.25rem; }
}

/* ======================================================= home: outcomes */
/* Four outcomes: one column on phones, two by two on tablets and small
   laptops, four across on desktops. Never three and an orphan. */
.hf-outcomes { --min: 15rem; }
@media (min-width: 560px) { .hf-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hf-outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Four plans follow the same rule. */
@media (min-width: 640px) { .hf-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hf-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .hf-outcomes .ocard__art { height: 7rem; } }

/* ==================================================== home: before/after */
/* The frames are always finished output, whichever tab is on; the label
   says so, so "Before: raw" never seems to show captioned frames. */
.hf-frames-tc { display: block; margin-bottom: var(--space-3); }
.hf-take { display: flex; flex-direction: column; gap: var(--space-3); }
.ba__text .hf-take__words { font-size: var(--text-lg); line-height: 1.7; }
.hf-take[data-panel="before"] .hf-take__words { color: var(--text-muted); }
.hf-take__tl { margin-top: var(--space-2); flex-wrap: nowrap; }
.hf-take__tl span { min-width: 4px; }
.hf-take__tl span:not(.x) { background: var(--accent); }
.hf-take__tl--kept { width: 36%; }
.hf-see-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.hf-see-cta .s-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 479px) {
  .ba__text .hf-take__words { font-size: var(--text-base); }
  .hf-see-cta .s-btn { width: 100%; }
}

/* ================================================================ /start */
/* The buttons sit right under the step on tablets and desktops (no empty
   field between the answer and the way forward). On phones site.css keeps
   them stuck to the bottom edge, in thumb reach. */
@media (min-width: 480px) { .start__nav { margin-top: 0; padding-top: 0; } }
.start__hint { font-size: var(--text-sm); color: var(--text-subtle); }
/* The bar never wraps: a long signed-in email is cut short, and the title
   gives way to the dots below desktop width. */
.start__title { white-space: nowrap; }
.start__note { min-width: 0; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The logo and "Exit setup" are real 44px touch targets. */
.start__bar .s-logo, .start__back { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 1023px) { .start__title { display: none; } }
@media (max-width: 479px) { .start__hint { flex-basis: 100%; text-align: center; order: 9; } }

/* Phones: "Your first edit", the answers so far drawn small. */
.start__mini { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); margin-bottom: calc(-1 * var(--space-2)); }
@media (min-width: 1024px) { .start__mini { display: none; } }
.start__ministage { position: relative; flex: none; display: block; width: 3.5rem; aspect-ratio: 16 / 9; border-radius: 0.375rem; background: #1A232A;
  transition: width var(--duration-base) var(--ease-default), margin var(--duration-base) var(--ease-default); }
.start__ministage::before { content: ""; position: absolute; left: 50%; top: 18%; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: #34434D; transform: translateX(-50%); }
.start__ministage i { position: absolute; left: 20%; right: 20%; bottom: 14%; height: 0.25rem; border-radius: 2px; background: var(--cap-accent, #7C9CFF); }
.start__ministage.is-reel { width: 1.55rem; aspect-ratio: 9 / 16; }
.start__ministage.is-reel::before { width: 0.6rem; }
.start__ministage.is-both { margin-right: 1rem; }
.start__ministage.is-both::after { content: ""; position: absolute; right: -1rem; bottom: 0; width: 0.75rem; height: 1.35rem; border-radius: 0.2rem;
  background: #1A232A; box-shadow: inset 0 -0.3rem 0 var(--cap-accent, #7C9CFF), 0 0 0 2px var(--surface); }
.start__minitext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.start__minitext b { font-size: var(--text-sm); color: var(--text-strong); }
.start__minitext span { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); overflow-wrap: anywhere; }
.ring.start__miniring { width: 2.5rem; height: 2.5rem; }
.ring.start__miniring span { width: 1.95rem; height: 1.95rem; font-size: 0.625rem; }

/* Brand colours in one row on a phone (seven 44px targets). */
@media (max-width: 479px) {
  .swatches { gap: var(--space-2); flex-wrap: nowrap; }
  .swatch { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); }
}

/* The preview is a product window: the file name in the bar, the shape as a
   badge, and a stage whose words scale with it. */
.start__preview > .tc { margin-bottom: calc(-1 * var(--space-2)); }
.pvwin { box-shadow: var(--shadow-md); container: pvwin / inline-size; }
.pvwin .editwin__file { max-width: 60%; }
.pvwin .pv { min-height: 0; padding: var(--space-5); }
.pv__stage { container-type: inline-size; flex: 0 1 30rem; min-width: 0; }
.pv__stage.stage--reel { flex: none; width: auto; height: 20rem; }
.pv__stage .stage__card { padding: 0.45rem 0.7rem; }
.pv__stage .stage__card small { font-size: clamp(0.5rem, 0.4rem + 1cqi, 0.625rem); }
.pv__stage .stage__card b { font-size: clamp(0.9375rem, 0.5rem + 4.5cqi, 1.6rem); }
.pv__stage .stage__cap span { font-size: clamp(0.75rem, 0.4rem + 3.4cqi, 1.25rem); }
.pv__clips { align-items: flex-end; }
.pv__clips span { align-self: center; margin-left: var(--space-1); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
/* A narrow window (phones, and the side column on small laptops) puts the
   clips under the video instead of squeezing the video beside them. */
@container pvwin (max-width: 32rem) {
  .pvwin .pv { flex-direction: column; align-items: center; padding: var(--space-4); }
  .pv__stage { flex: none; width: 100%; }
  .pv__stage.stage--reel { width: auto; height: 16rem; }
  .pv__clips { align-self: center; }
  .pv__clips i { width: 1.75rem; height: 3.1rem; }
}

/* Uploading: the bar, then what happens after it. A stopped upload hides
   the promise of what comes next until it is moving again. */
.start__panel.is-stopped .start__next, .start__panel.is-stopped .start__keep { display: none; }
.upcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start__next { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl);
  background: var(--bg-subtle); border: var(--border-w) solid var(--border); }

/* ============================================================== /example */
/* Hero fan: on small laptops the column is narrow, so the phones are a
   little smaller and the tilted third one stays inside the page. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hf-exhero .fan .phone { width: calc(5rem + 7vw); }
  .hf-exhero .fan .phone:nth-child(2) { width: calc(6rem + 8vw); }
}

/* The edit page mock: the same parts the real video page has (steps,
   decisions, chat with suggestions and versions), drawn, never clickable. */
.hf-mockjob .s-chip { pointer-events: none; }
/* Keep the frame 9:16; the row used to stretch it taller and crop the face. */
.hf-mockjob .mockjob__stage { align-self: flex-start; }
/* Small laptops: the video card takes the full width and the two side cards
   sit side by side under it, so no card is left half empty. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hf-mockjob { grid-template-columns: minmax(0, 1fr); }
  .hf-mockjob .mockjob__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktops: the frame grows with the card (still 9:16), filling the height
   the decisions and the chat give the row. */
@media (min-width: 1280px) {
  .hf-mockjob .mockjob__stage { align-self: stretch; width: auto; height: auto; aspect-ratio: 9 / 16; }
}
.hf-mockjob__main { min-width: 0; }
.hf-mockjob__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-mockjob__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hf-mockjob .chatmock__vers { margin-top: var(--space-1); }
@media (max-width: 599px) { .hf-mockjob { padding: var(--space-3); gap: var(--space-3); } .hf-mockjob .mockjob__video, .hf-mockjob .mockjob__card { padding: var(--space-4); } }