/* THE FOUR AUDIENCE LANDING PAGES (render/audience-landing.ts; docs/visual/AUDIENCE-LANDINGS.md). Site tokens only, prefix al-.
   Founder brief 2026-10-17: four sections, the problem in five seconds, pictures over paragraphs, after the Production
   Checklist's streaming gallery. One oversized moment (the headline). One motif: the purple line, the same thread as the
   checklist's progress bar, carried here through the three steps. Everything sizes from the page's own width (container
   queries on .al), so the rail opening or closing changes the layout, not a guessed window breakpoint. */

.al { container-type: inline-size; }

/* 1 · the hero: the headline beside a lesson's frame, whose left edge feathers into the page */
.al-hero { display: grid; gap: var(--s5); margin: 0 0 var(--s9); }
.al-hero__text { min-width: 0; }
/* the site's interior-page step (--t-display-lg, as every h1), not a size of its own; the founder found 5rem too big */
.al-hero__h { margin: 0; font: 800 var(--t-display-lg)/1.02 var(--display); letter-spacing: -.035em; max-width: 16ch; text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: manual; } /* a word never splits; the column makes room instead */
.al-hero__lede { margin: var(--s5) 0 0; max-width: 40ch; font: var(--t-md)/1.45 var(--ui); color: var(--ink-2); }
.al-hero__cta { margin: var(--s6) 0 0; }
.al-hero__fig { margin: 0; min-width: 0; }
.al-hero__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-soft); background: var(--paper-3); }
.al-hero__fig figcaption { margin-top: var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.ia .al-hero__fig figcaption a { color: var(--ink-2); }
/* side by side once the text keeps 24rem beside a picture that keeps 30rem; the picture's left edge feathers into the page */
@container (min-width: 60rem) {
  /* the text column is never narrower than its longest word ("internationally." at 56px), so a headline word never breaks */
  .al-hero { grid-template-columns: minmax(min-content, 5fr) minmax(30rem, 7fr); align-items: center; gap: 0; }
  .al-hero__text { min-width: 24rem; }
  /* text beside the picture, never over it (an overlap squeezed long words like "internationally." until the full stop wrapped) */
  .al-hero__text { grid-column: 1; grid-row: 1; padding-block: var(--s6); padding-right: var(--s6); }
  .al-hero__fig { grid-column: 2; grid-row: 1; }
  .al-hero__fig img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); border-radius: 0 var(--r-soft) var(--r-soft) 0; }
  .al-hero__fig figcaption { padding-left: var(--s6); }
}

/* the button: the site's purple, the only filled control on the page */
.al-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0 var(--s5); border-radius: var(--r-soft);
  background: var(--brand); color: var(--paper); font: 600 var(--t-base)/1 var(--ui); text-decoration: none; }
.ia .al-btn { color: var(--paper); }
.al-btn:hover { background: var(--brand-lift); }
.al-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* section titles: a row title, as a streaming shelf labels a row. The headline is the page's one big moment. */
.al-sec { margin: 0 0 var(--s9); }
.al-sec__h { margin: 0 0 var(--s6); font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; }

/* 2 · the three steps on one purple line. Stacked, the line runs down the left; across, it runs through the dots. */
.al-steps { --dot: .75rem; position: relative; display: grid; gap: var(--s7); margin: 0; padding: 0 0 0 var(--s6); list-style: none; }
.al-steps::before { content: ""; position: absolute; left: calc(var(--dot) / 2 - 1px); top: .5rem; bottom: .5rem; width: 2px; background: var(--brand); border-radius: 1px; }
.al-step { position: relative; min-width: 0; }
.al-step__dot { position: absolute; left: calc(-1 * var(--s6)); top: .45rem; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand); }
.al-step:last-child .al-step__dot { background: var(--brand); }
.al-step__t { margin: 0; font: 700 var(--t-lg)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; max-width: 16ch; }
.al-step__p { margin: var(--s3) 0 0; max-width: 34ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.al-step__go { margin: var(--s3) 0 0; font: var(--t-xs)/1.6 var(--mono); color: var(--ink-3); }
.ia .al-step__go a { display: inline-block; padding-block: .3rem; color: var(--ink-2); text-underline-offset: .2em; } /* 24px tall targets (WCAG 2.5.8) */
.ia .al-step__go a:hover { color: var(--brand); }
@container (min-width: 48rem) {
  .al-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); padding: calc(var(--dot) + var(--s5)) 0 0; }
  .al-steps::before { left: 0; right: 0; top: calc(var(--dot) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
  .al-step__dot { left: 0; top: calc(-1 * (var(--dot) + var(--s5))); }
}

/* 3 · what you'll make: three frames, 16:9, no box. Stacked they become a shelf you swipe, as a streaming row does. */
.al-frames { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 22rem); gap: var(--s4); margin: 0; padding: 0 0 var(--s3); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.al-frame { min-width: 0; scroll-snap-align: start; }
@container (min-width: 40rem) { .al-frames { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } }
.al-frame__a { display: block; color: var(--ink); text-decoration: none; border-radius: var(--r-soft); }
.ia .al-frame__a { color: var(--ink); }
.al-frame__a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.al-frame__pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-soft); background: var(--paper-3); outline: 1px solid var(--rule); outline-offset: -1px; }
.al-frame__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .2s ease; }
.al-frame__a:hover .al-frame__pic { outline: 2px solid var(--brand); outline-offset: -2px; }
.al-frame__a:hover img { filter: brightness(1.1); }
.al-frame__t { display: block; margin-top: var(--s3); font: 600 var(--t-md)/1.25 var(--ui); letter-spacing: -.005em; text-wrap: balance; }
.al-frame__a:hover .al-frame__t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.al-frame__m { display: block; margin-top: var(--s1); font: var(--t-xs)/1.45 var(--mono); color: var(--ink-3); }
.al-frame__m i { font-style: normal; color: var(--ink-2); }

/* 4 · the next step: only a purple link at the right, after a rule, as the Production Checklist ends (founder, 2026-10-17) */
.al-next { display: flex; justify-content: flex-end; margin: 0 0 var(--s9); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.al-next__a { display: inline-block; padding: .875rem 0; font: 600 var(--t-sm)/1 var(--ui); text-underline-offset: .25em; text-decoration-thickness: 1px; white-space: nowrap; }
.ia .al-next__a { color: var(--brand); }
.ia .al-next__a:hover { color: var(--brand-lift); }
.al-next__a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 4b · or a closing line with the hero's button (Business Owners, founder 2026-10-17): compact, on the same rule, no banner */
.al-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); margin: 0 0 var(--s9); padding-top: var(--s6); border-top: 1px solid var(--rule); }
.al-close__h { margin: 0; font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { .al-frame__pic img { transition: none; } }