/* S film v2: the Skilled Routines hero (2026-10-29). Light paper throughout; the h1, sub and CTA are real static text from the
   first paint (the why stays the anchor), the stage beside them tells the story. Scoped under .sfilm; tokens on the section.
   States: (1) default = the composed static finale (no JS, reduced motion, failsafe) = the film's last frame;
           (2) html.sf-play = act 1, frame 0 composed before any script runs (set by s-film-state.js);
           (3) html.sf-play.sf-on = s-film.js owns the stage (GSAP writes inline opacity/transforms). */
.sfilm {
  --sf-head: var(--head, 64px);
  --sf-h: max(560px, calc(100vh - var(--sf-head)));
  --sf-h: max(560px, calc(100svh - var(--sf-head)));
  --sf-pad: clamp(20px, 5vw, 96px);
  --sf-paper: #F5F4EF; --sf-ink: #16181D; --sf-blue: #1F3FB4; --sf-muted: #4E525C; --sf-line: #DAD7CE; --sf-card: #FFFFFF;
  --sf-font: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --sf-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  position: relative; z-index: var(--z-raised); isolation: isolate; overflow: hidden; overflow: clip;   /* raised: the next section's demo may overflow upward */
  min-height: var(--sf-h); background: var(--sf-paper); color: var(--sf-ink); font-family: var(--sf-font);
}
.sfilm *, .sfilm *::before, .sfilm *::after { box-sizing: border-box; }
.sfilm :focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 3px; }

/* ---- layout: copy left, stage right (desktop); stage on top, copy below (portrait) ---- */
.sfilm .sf-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 56px); align-items: center;
  min-height: var(--sf-h); padding: clamp(24px, 4vw, 56px) var(--sf-pad); max-width: 1440px; margin: 0 auto; }
.sfilm .sf-copy { min-width: 0; }
.sfilm .sf-cap { display: grid; margin: 0 0 clamp(14px, 1.6vw, 22px); font: 600 clamp(1rem, 1.35vw, 1.25rem)/1.3 var(--sf-font); letter-spacing: -0.005em; color: var(--sf-blue); }
.sfilm .sf-c { grid-area: 1 / 1; opacity: 0; }
.sfilm .sf-c4 { opacity: 1; }
.sfilm .sf-h1 { margin: 0; max-width: 14ch; font-family: var(--sf-font); font-weight: 650; font-size: clamp(2.2rem, 4.3vw, 4.6rem); line-height: 1.03; letter-spacing: -0.035em; color: var(--sf-ink); text-wrap: balance; }
.sfilm .sf-sub { margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 38ch; font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.5; color: var(--sf-muted); }
.sfilm .sf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(22px, 2.6vw, 34px); }

.sfilm .sf-stage { position: relative; min-width: 0; }
.sfilm .sf-cam { width: 100%; aspect-ratio: 10 / 8; }
.sfilm .sf-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- the art (static = the finale pose) ---- */
.sfilm .sf-card { fill: var(--sf-card); stroke: var(--sf-line); stroke-width: 2; }
.sfilm .sf-ttl { font: 650 26px/1 var(--sf-font); fill: var(--sf-ink); letter-spacing: -0.01em; }
.sfilm .sf-mo { font: 500 20px/1 var(--sf-font); fill: var(--sf-muted); opacity: 0; }
.sfilm .sf-mo3 { opacity: 1; }
.sfilm .sf-rule { fill: var(--sf-ink); }
.sfilm .sf-hd { fill: #ECE9E1; }
.sfilm .sf-grid { fill: var(--sf-line); }
.sfilm .sf-lab { fill: #9A9CA3; }
.sfilm .sf-val { fill: var(--sf-ink); opacity: .82; }
.sfilm .sf-tot { fill: var(--sf-ink); opacity: 1; }
.sfilm .sf-base { fill: var(--sf-ink); opacity: .5; }
.sfilm .sf-bar { fill: var(--sf-ink); opacity: .86; }
.sfilm .sf-barb { fill: var(--sf-blue); opacity: 1; }
.sfilm .sf-sweep { fill: var(--sf-blue); opacity: 0; }
.sfilm .sf-tag { font: 600 19px/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--sf-muted); }
.sfilm .sf-img0, .sfilm .sf-img1 { fill: #DCE2F5; }
.sfilm .sf-img2 { fill: #EDE3CF; }
.sfilm .sf-img3 { fill: #DDE7DF; }
.sfilm .sf-imgs { fill: #AFBCE6; }
.sfilm .sf-sun { fill: var(--sf-blue); }
.sfilm .sf-hl { fill: var(--sf-ink); }
.sfilm .sf-tx { fill: #9A9CA3; }
.sfilm .sf-btn { fill: var(--sf-blue); }
.sfilm .sf-track { fill: var(--sf-ink); }
.sfilm .sf-blue { fill: var(--sf-blue); }
.sfilm .sf-ring { fill: none; stroke: var(--sf-blue); stroke-width: 3; opacity: 0; }
.sfilm .sf-pl { fill: var(--sf-blue); opacity: 0; }
.sfilm .sf-cur { fill: var(--sf-ink); stroke: #fff; stroke-width: 2; opacity: 0; }

/* the meter: by hand ×1..×3, then Run 1..100 (static: Run 100) */
.sfilm .sf-meter { position: absolute; left: 2%; bottom: 0; margin: 0; display: flex; align-items: baseline; gap: .5em; color: var(--sf-ink); pointer-events: none; }
.sfilm .sf-ml, .sfilm .sf-mn { display: grid; }
.sfilm .sf-ml > *, .sfilm .sf-mn > * { grid-area: 1 / 1; }
.sfilm .sf-ml { font: 600 .8rem/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-muted); }
.sfilm .sf-mn { font: 700 clamp(2rem, 3.4vw, 3.4rem)/1 var(--sf-font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 2.4ch; }
.sfilm .sf-rn { color: var(--sf-blue); }
.sfilm .sf-ml1, .sfilm .sf-t1, .sfilm .sf-t2, .sfilm .sf-t3 { opacity: 0; }

/* controls: only while the film plays */
.sfilm .sf-ctrl { display: none; }

/* ================= the film (scripting on, motion allowed): frame 0 before any script ================= */
html.sf-play .sfilm .sf-c4, html.sf-play .sfilm .sf-mo3, html.sf-play .sfilm .sf-ml2, html.sf-play .sfilm .sf-rn { opacity: 0; }
html.sf-play .sfilm .sf-c1, html.sf-play .sfilm .sf-mo1, html.sf-play .sfilm .sf-ml1, html.sf-play .sfilm .sf-t1 { opacity: 1; }
html.sf-play .sfilm .sf-row, html.sf-play .sfilm .sf-bar, html.sf-play .sfilm .sf-adimg, html.sf-play .sfilm .sf-hl,
html.sf-play .sfilm .sf-adt, html.sf-play .sfilm .sf-adb, html.sf-play .sfilm .sf-var, html.sf-play .sfilm .sf-s { opacity: 0; }
html.sf-play .sfilm .sf-ctrl { display: flex; position: absolute; z-index: var(--z-dropdown); top: 0; right: 0; gap: 10px; align-items: center; }
html.sf-play .sfilm .sf-skip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--sf-ink); font: 500 .78rem/1 var(--sf-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
html.sf-play .sfilm .sf-skip:hover { text-decoration: underline; text-underline-offset: 4px; }
html.sf-play .sfilm.is-done .sf-skip { visibility: hidden; }
html.sf-play .sfilm .sf-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #8A8D94;
  background: color-mix(in srgb, var(--sf-paper) 85%, transparent); color: var(--sf-ink); font: 500 .8rem/1 var(--sf-mono); letter-spacing: .04em; cursor: pointer; }
html.sf-play .sfilm .sf-pill:hover { border-color: var(--sf-ink); }

/* ================= phone and portrait: stage on top, copy below ================= */
@media (max-aspect-ratio: 5/4), (max-width: 860px) {
  .sfilm .sf-in { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding-top: 12px; padding-bottom: 32px; }
  .sfilm .sf-stage { order: -1; width: min(100%, 62svh); margin: 0 auto; padding-top: 44px; }
  .sfilm .sf-h1 { font-size: clamp(2rem, 8.4vw, 3.4rem); max-width: 16ch; }
  .sfilm .sf-sub { font-size: 1.0625rem; }
  .sfilm .sf-mn { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  html.sf-play .sfilm .sf-ctrl { left: 0; justify-content: space-between; }
  /* the meter (BY HAND x1 / RUN 100) sits on the art's bottom margin: room before the blue caption below it */
  .sfilm .sf-copy { margin-top: 20px; }
  /* the stage is the centrepiece here: the S fills the gap between report and ad (x 547-653 of the 530-660 gap) */
  .sfilm .sf-spos { transform: translate(530px, 326px) scale(1.4); }
}
@media (min-width: 600px) and (max-aspect-ratio: 5/4), (min-width: 600px) and (max-width: 860px) {
  .sfilm .sf-stage { width: min(100%, 68svh); }
}
/* tablet portrait (600-860 wide): the primary CTA inside the first screen at 768x900 and 768x1024 */
@media (min-width: 600px) and (max-width: 860px) {
  .sfilm .sf-stage { width: min(100%, 52svh); }
}

/* report row labels are words, not bars (they read as real work) */
.sfilm .sf-labt { fill: #5E6169; font: 500 15px/1 var(--font-sans, inherit); }
.sfilm .sf-labt.sf-tot { fill: var(--sf-ink); font-weight: 650; }
/* home.css paints every .btn blue: the hero's second action stays secondary */
.sfilm .sf-cta .btn-secondary { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-control-border); }
@media (hover: hover) { .sfilm .sf-cta .btn-secondary:hover { background: var(--c-surface); color: var(--c-text); border-color: var(--c-text); } }