/* =============================================================================
   Foldnine — the product-page layer (body.pp)

   Loaded after the other stylesheets on three pages only: home,
   /services/website/ and /sr/izrada-sajta/. It changes how those pages are
   paced, not what they are made of: the same two colours, the same square
   shapes with the mark's turned-back corner, the same two faces.

   What it adds is proportion and scroll. Each section is about a screen tall
   and carries one idea at display size; most carry one large piece of media,
   all of it our own product; copy fades up as it arrives; one section per page
   holds still while the scroll changes what is on it. The light run comes at
   the end, where the page asks for something.

   Motion is scripts/lib/riff-motion.js: [data-reveal] for entrances,
   [data-scrub] for values tied to scroll, [data-pin] for a held stage. With
   reduced motion, or no script, all of it is an ordinary page in order.
   ========================================================================== */

/* --- face ------------------------------------------------------------------
   Inter first, named before any system face, so these pages render in the
   self-hosted open-licence font on every device. The system stack is only the
   fallback while Inter loads. */
.pp {
  --sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);

  /* Display sizes. 80px at a 1440 window, 40px at a phone. */
  --st-hero: clamp(2.5rem, 1.15rem + 4.5vw, 5rem);
  --st-head: clamp(2.25rem, 1rem + 4.3vw, 5rem);
  --st-sub:  clamp(1.5rem, 1rem + 2vw, 3.5rem);
  --st-pad:  clamp(5rem, 11vw, 10rem);

  /* riff-motion timing: the reference's 240-500ms range, the site's own ease. */
  --riff-ease: cubic-bezier(.22, .61, .36, 1);
  --riff-ease-out: cubic-bezier(.16, 1, .3, 1);
  --riff-reveal-duration: 400ms;
  --riff-reveal-distance: 28px;
  --riff-pin-top: 0px;
}

/* --- masthead: translucent over the page from the first paint ------------- */
.pp .masthead {
  background: color-mix(in oklab, var(--ink-abs) 72%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-block-end-color: #1c1c1b;
}
.pp .masthead.is-stuck { background: color-mix(in oklab, var(--ink-abs) 80%, transparent); }

/* --- the motion runtime's states (riff motion.css, tuned) ----------------- */
.riff-motion [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--riff-reveal-duration) var(--riff-ease),
    transform var(--riff-reveal-duration) var(--riff-ease-out),
    filter var(--riff-reveal-duration) var(--riff-ease);
}
.riff-motion [data-reveal=''],
.riff-motion [data-reveal='up']   { transform: translate3d(0, var(--riff-reveal-distance), 0); }
.riff-motion [data-reveal='scale'] { transform: scale(.95); }
.riff-motion [data-reveal='left']  { transform: translate3d(var(--riff-reveal-distance), 0, 0); }
.riff-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

.riff-pin-stage {
  position: sticky; top: var(--riff-pin-top);
  height: 100vh; height: 100svh;
  overflow: hidden;
}
[data-scrub] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .riff-motion [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* --- section frame --------------------------------------------------------- */

.st { padding-block: var(--st-pad); border-block-start: 0; }
/* A screen per idea, on a screen big enough for the idea to need one. A phone
   gets the content's own height: padding, not empty viewport. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .st-screen { min-block-size: 125svh; display: grid; align-content: center; grid-template-columns: minmax(0, 1fr); }
  .st-screen > * { inline-size: 100%; }
}

.st-wrap   { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.st-narrow { max-width: 61rem; margin-inline: auto; padding-inline: var(--gutter); }

.st-label { margin-block-end: 1.5rem; }
.st-title {
  font-size: var(--st-head); line-height: 1.04; letter-spacing: -.02em;
  font-weight: 600; max-inline-size: 16ch;
}
.st-title em { font-style: normal; color: var(--muted); }
.st-lede {
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); line-height: 1.45;
  color: var(--prose); max-inline-size: 38rem; margin-block-start: 1.75rem;
}
.st-sub { font-size: var(--st-sub); line-height: 1.12; letter-spacing: -.015em; font-weight: 600; color: var(--ink); }

/* --- hero -------------------------------------------------------------------
   Centered, 80px, and then the media rising under it. */
.st-hero { padding-block: clamp(5rem, 14vh, 9rem) clamp(3rem, 8vw, 6rem); text-align: center; overflow: hidden; }
.st-hero .hero-eyebrow { display: block; text-align: center; text-wrap: balance; }
/* Inline dot so a wrapped eyebrow keeps it beside the first word, not at the far edge. */
.st-hero .hero-eyebrow .dot { display: inline-block; vertical-align: middle; margin-inline-end: .6rem; }
.st-hero h1 {
  font-size: var(--st-hero); line-height: 1.04; letter-spacing: -.015em;
  font-weight: 600; margin-inline: auto; max-inline-size: 14ch;
}
.st-hero h1 em { font-style: normal; color: var(--muted); }
.st-hero .st-lede { margin-inline: auto; }
.st-hero .hero-actions { justify-content: center; margin-block-start: 2.25rem; }
.st-hero .reply { justify-items: center; }
.st-hero .email-line { justify-content: center; }

/* --- media ------------------------------------------------------------------
   A screenshot of something we built, framed as a panel: square, hairline,
   one corner turned back. Scrubbed media grows from a slightly inset frame to
   its full width as it travels up the screen. */
.st-media { margin: clamp(3rem, 7vw, 6rem) auto 0; max-width: 76rem; padding-inline: var(--gutter); }
.st-frame {
  position: relative; margin: 0;
  background: var(--surface-1); border: 1px solid var(--rule-firm);
  transform-origin: 50% 0;
}
.st-frame::after {
  content: ""; position: absolute; z-index: 2;
  inset-block-start: -1px; inset-inline-end: -1px;
  inline-size: calc(var(--corner) * 1.6); block-size: calc(var(--corner) * 1.6);
  background: linear-gradient(to bottom left,
    var(--bg) 0 50%, var(--edge) 50%, var(--edge) calc(50% + 1.1px), transparent calc(50% + 1.1px));
  pointer-events: none;
}
.st-frame img { display: block; inline-size: 100%; block-size: auto; }
.st-cap {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; align-items: baseline;
  margin-block-start: 1rem; text-align: start;
}
.st-cap a { color: var(--ink); }

/* --- highlights: the prices as tiles ---------------------------------------- */
.st-tiles {
  display: grid; gap: 1rem; margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.st-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-block-size: clamp(11rem, 22vw, 17rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface-1); border: 1px solid var(--rule);
}
.st-tile::after {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-end: -1px;
  inline-size: var(--corner); block-size: var(--corner);
  background: linear-gradient(to bottom left, var(--bg) 0 50%, var(--rule-firm) 50%, var(--rule-firm) calc(50% + 1.1px), transparent calc(50% + 1.1px));
}
.st-tile dt { font-family: var(--mono); font-size: var(--step--1); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.st-tile dd { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; color: var(--ink); }
.st-tile-lead { background: var(--ink); border-color: var(--ink); }
.st-tile-lead dt { color: var(--bg); opacity: .72; }
.st-tile-lead dd { color: var(--bg); }
.st-tile-lead::after { background: linear-gradient(to bottom left, var(--bg) 0 50%, transparent 50%); }
.st-terms { margin-block-start: 1.75rem; max-inline-size: 44rem; color: var(--muted); }

/* --- a statement, set large ----------------------------------------------- */
.st-statement { font-size: clamp(1.625rem, 1.1rem + 2.1vw, 3rem); line-height: 1.2; letter-spacing: -.018em; color: var(--muted); font-weight: 500; max-inline-size: 30ch; }
.st-statement strong { color: var(--ink); font-weight: 600; }
.st-statement-wrap .chip { margin-block-end: 2rem; }
.st-statement-wrap .hero-actions { margin-block-start: 2.5rem; }

/* --- a step: copy that holds while its media scrolls by --------------------- */
.st-split { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (min-width: 60rem) {
  .st-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .st-split-copy { position: sticky; top: 7rem; }
}
.st-step-body { margin-block-start: 2rem; max-inline-size: 32rem; }
.st-step-body .signal-list li, .st-step-body .kv li > span { font-size: var(--step-0); }
.st-step-body .kv li > span:first-child { font-size: var(--step--1); }
.st-step-body .walk-note { margin-block-start: 1.5rem; }
.st-step-body .prose { font-size: var(--step-1); line-height: 1.5; max-inline-size: 34rem; }

/* The step number, set as the mark's own geometry would: huge, hollow. */
.st-numeral {
  font-family: var(--mono); font-weight: 700; line-height: .8;
  font-size: clamp(7rem, 4rem + 14vw, 17rem); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px var(--edge);
  margin: 0; user-select: none;
}

/* --- the held stage: one step, told while the page holds still -------------
   riff-motion makes the section N screens tall and its first child sticky,
   and writes the progress through it as --progress (0..1). Each fact owns a
   window of that progress; its opacity is computed here from it, so there is
   nothing on a timer. Without the runtime, or at reduced motion, the facts
   are an ordinary list beside the image. */
.st-pin { padding: 0; border-block-start: 0; }
.st-pin-stage { display: grid; align-items: center; padding-block: clamp(5rem, 10vh, 7rem) clamp(2rem, 6vh, 4rem); }
.st-pin-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 52rem) { .st-pin-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.st-facts { display: grid; gap: 1.5rem; margin-block-start: 2.5rem; }
.st-fact dt { font-family: var(--mono); font-size: var(--step--1); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); margin-block-end: .5rem; }
.st-fact dd { margin: 0; font-size: var(--st-sub); line-height: 1.1; letter-spacing: -.018em; font-weight: 600; color: var(--ink); }

.st-phone {
  justify-self: center; position: relative; margin: 0;
  inline-size: min(19rem, 70vw);
  border: 1px solid var(--edge); background: var(--surface-1);
  padding: .55rem;
}
.st-phone img { display: block; inline-size: 100%; block-size: auto; }
.st-ticks { display: flex; gap: .4rem; margin-block-start: 2rem; }
.st-ticks span { inline-size: 1.75rem; block-size: 3px; background: var(--rule-firm); }

@media (prefers-reduced-motion: no-preference) {
  .riff-motion .st-pin .riff-pin-stage { display: grid; align-items: center; }
  .riff-motion .st-pin .st-facts { position: relative; min-block-size: 9rem; }
  .riff-motion .st-pin .st-fact {
    position: absolute; inset-inline: 0; inset-block-start: 0;
    --w: .06;
    opacity: clamp(0, min((var(--progress, 0) - var(--a)) / var(--w), (var(--b) - var(--progress, 0)) / var(--w)), 1);
    transform: translateY(calc((1 - clamp(0, (var(--progress, 0) - var(--a)) / var(--w), 1)) * 1.5rem));
  }
  .riff-motion .st-pin .st-fact:nth-child(1) { --a: -1; --b: .27; }
  .riff-motion .st-pin .st-fact:nth-child(2) { --a: .25; --b: .52; }
  .riff-motion .st-pin .st-fact:nth-child(3) { --a: .50; --b: .77; }
  .riff-motion .st-pin .st-fact:nth-child(4) { --a: .75; --b: 2; }
  .riff-motion .st-pin .st-fact dd { font-size: var(--st-sub); line-height: 1.08; }
  .riff-motion .st-pin .st-facts { min-block-size: clamp(9rem, 24vh, 13rem); }
  .st-ticks span { transition: background var(--t-state) var(--ease); }
  .riff-motion .st-pin .st-ticks span:nth-child(1) { background: var(--ink); }
  .riff-motion .st-pin .st-ticks span:nth-child(2) { background: color-mix(in oklab, var(--ink) calc(clamp(0, (var(--progress, 0) - .25) * 40, 1) * 100%), var(--rule-firm)); }
  .riff-motion .st-pin .st-ticks span:nth-child(3) { background: color-mix(in oklab, var(--ink) calc(clamp(0, (var(--progress, 0) - .50) * 40, 1) * 100%), var(--rule-firm)); }
  .riff-motion .st-pin .st-ticks span:nth-child(4) { background: color-mix(in oklab, var(--ink) calc(clamp(0, (var(--progress, 0) - .75) * 40, 1) * 100%), var(--rule-firm)); }
}
/* Below 52rem the stage is image over facts; keep both on one phone screen. */
@media (max-width: 52rem) {
  .st-phone { inline-size: min(11rem, 44vw); }
  .st-pin .st-phone { inline-size: min(8.5rem, 34vw); }
  .st-pin-stage { padding-block: 4.75rem 1.5rem; }
  .st-pin-grid { gap: 1.25rem; }
  .st-pin .st-facts { margin-block-start: 1.25rem; }
  .st-ticks { margin-block-start: 1rem; }
  .riff-motion .st-pin .st-fact dd { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .st-pin .st-title { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* --- built by us: two tiles of media -------------------------------------- */
.st-pair { display: grid; gap: 1rem; margin-block-start: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 52rem) { .st-pair { grid-template-columns: 1fr 1fr; } }

/* --- the light run: fit, then the ask --------------------------------------- */
.st-fit .versus-list li { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); line-height: 1.15; letter-spacing: -.018em; padding-block: .35rem; }
.st-fit .versus-flow li { padding-inline-start: 2.4rem; }
.st-fit .versus-flow li::before { inset-block-start: .1em; }
.st-fit .st-title { margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.st-fit .versus-note { margin-block-start: 2.5rem; }

.st-cta .cta-title { font-size: var(--st-head); line-height: 1.04; letter-spacing: -.02em; }
.st-cta .cta-mark { inline-size: clamp(4rem, 8vw, 7rem); block-size: auto; aspect-ratio: 948.3 / 1000; }

/* --- home ------------------------------------------------------------------ */
.pp .hero-home .hero-title { font-size: var(--st-hero); letter-spacing: -.015em; line-height: 1.04; }
.pp .premise-title, .pp .display { font-size: var(--st-head); letter-spacing: -.02em; }
.pp .head { font-size: clamp(2rem, 1rem + 3.4vw, 4rem); }

/* The audit's four parts as tiles of the same height. */
.st-walk .walk-grid { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem; }
.st-walk .walk-card { min-block-size: clamp(16rem, 26vw, 22rem); padding: clamp(1.5rem, 3vw, 2.25rem); }

/* Capabilities: the label rail holds while the list scrolls past it. */
@media (min-width: 60rem) {
  .st-rail .rail-label { position: sticky; top: 7rem; align-self: flex-start; }
}
.st-rail .controls-list h3 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }

/* The mark, as the one large object in a section with no screenshot. */
.st-bigmark { inline-size: min(30rem, 85%); block-size: auto; aspect-ratio: 948.3 / 1000; justify-self: center; align-self: center; color: var(--ink); }
@media (max-width: 60rem) { .st-bigmark { inline-size: min(12rem, 45%); } }

/* --- the fan behind a section --------------------------------------------- */
.st-field { position: relative; overflow: hidden; }
.st-field > .st-wrap { position: relative; z-index: 1; }
.st-showcase { padding-block: 0 var(--st-pad); }
.st-showcase .st-media { margin-block-start: 0; }
.st-hero { padding-block-end: clamp(3rem, 6vw, 5rem); }

/* --- held statement: three sentences light in turn ------------------------- */
.st-say .riff-pin-stage, .st-gallery .riff-pin-stage { display: grid; align-content: center; }
.st-say :is(.st-s1, .st-s2, .st-s3) { transition: color var(--t-state) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .riff-motion .st-say :is(.st-s1, .st-s2, .st-s3) { color: color-mix(in oklab, var(--ink) calc(var(--lit) * 100%), var(--muted)); }
  .riff-motion .st-say .st-statement strong { color: inherit; }
  .riff-motion .st-say .st-s1 { --lit: clamp(.0001, (var(--progress, 0) + .05) * 6, 1); }
  .riff-motion .st-say .st-s2 { --lit: clamp(.0001, (var(--progress, 0) - .25) * 6, 1); }
  .riff-motion .st-say .st-s3 { --lit: clamp(.0001, (var(--progress, 0) - .55) * 6, 1); }
}

/* --- held gallery: three screens cross over -------------------------------- */
.st-deck { display: grid; gap: 1rem; margin-block-start: clamp(2rem, 5vw, 3.5rem); }
.st-card figcaption { padding: .8rem 1rem; border-block-start: 1px solid var(--rule); }
@media (prefers-reduced-motion: no-preference) {
  .riff-motion .st-gallery .st-deck { grid-template-areas: "card"; max-inline-size: min(64rem, calc((100svh - 22rem) * 1.6)); margin-inline: auto; }
  .riff-motion .st-gallery .st-card {
    grid-area: card;
    --in: clamp(0, (var(--progress, 0) - var(--a)) / .1, 1);
    opacity: var(--in);
    transform: translateY(calc((1 - var(--in)) * 3rem)) scale(calc(.96 + var(--in) * .04));
  }
  .riff-motion .st-gallery .st-c1 { --a: -1; }
  .riff-motion .st-gallery .st-c2 { --a: .3; }
  .riff-motion .st-gallery .st-c3 { --a: .62; }
  .riff-motion .st-gallery .st-title { font-size: clamp(2rem, 1rem + 3vw, 4rem); }
}
/* The fan behind a held stage: the sticky stage is already positioned. */
.st-pin-stage > .hero-field, .st-pin-stage > .hero-veil { z-index: 0; }
.st-pin-stage > .st-wrap { position: relative; z-index: 1; }
/* 02 · Build: copy and list on the left, a phone on the right. */
.st-phone figcaption { padding-block-start: .7rem; text-align: center; }
@media (min-width: 60rem) {
  .st-split:has(.st-phone-side) { grid-template-columns: minmax(0, .85fr) minmax(0, .75fr) minmax(0, .8fr); align-items: center; }
  .st-phone-side { inline-size: min(23rem, 100%); }
}

/* Home: "our own sales" carries the mark beside it, as the section's object. */
.st-built .rail { align-items: center; }
.st-built .st-built-mark { flex: 0 0 min(28rem, 40%); inline-size: auto; margin-inline: auto; }
@media (max-width: 60rem) { .st-built .st-built-mark { flex-basis: 10rem; } }
.st-walk { padding-block-start: 0; }

/* Home: the held premise sits on the fan like the hero does. */
.st-say.premise .riff-pin-stage { align-content: center; }
.st-say.premise .st-wrap { max-width: var(--shell); }

/* =============================================================================
   Second pass: every page, and video
   ========================================================================== */

/* --- video ------------------------------------------------------------------
   A screen recording of something we built: muted, looping, with a poster.
   scripts/lib/video.js plays it while it is on screen, swaps the native
   controls for one Pause / Play button, and does neither at reduced motion or
   under Save-Data, where the poster stands and the native controls stay. */
.st-frame video, .st-phone video { display: block; inline-size: 100%; block-size: auto; background: var(--surface-1); }
.st-vid-toggle {
  position: absolute; z-index: 3; inset-inline-end: .75rem; inset-block-end: .75rem;
  background: color-mix(in oklab, var(--ink-abs) 78%, transparent);
  color: var(--ink); border-color: var(--edge);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.st-vid-toggle:hover { background: var(--ink); color: var(--bg); }
.st-phone .st-vid-toggle { inset-inline-end: 1.1rem; inset-block-end: 1.1rem; }
.st-phone:has(figcaption) .st-vid-toggle { inset-block-end: 3rem; }

/* --- a fourth card in the held gallery ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .riff-motion .st-gallery.st-gallery-4 .st-c2 { --a: .22; }
  .riff-motion .st-gallery.st-gallery-4 .st-c3 { --a: .46; }
  .riff-motion .st-gallery.st-gallery-4 .st-c4 { --a: .70; }
}

/* --- facts in the hero, as tiles ------------------------------------------- */
.st-hero .st-tiles { text-align: start; }
.st-tiles-sm .st-tile { min-block-size: clamp(8rem, 14vw, 11rem); }
.st-tiles-sm .st-tile dd { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); }

/* --- held list: items light in turn, one per slice of --progress -----------
   For lists that carry a sequence (what we look at, what the database
   refuses). Without the runtime, or at reduced motion, a plain list. */
.st-lit > * { transition: color var(--t-state) var(--ease), opacity var(--t-state) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .riff-motion .riff-pin-stage .st-lit > * { opacity: calc(.32 + .68 * var(--on, 1)); }
  .riff-motion .riff-pin-stage .st-lit > :nth-child(1) { --on: clamp(0, (var(--progress, 0) + .05) * 8, 1); }
  .riff-motion .riff-pin-stage .st-lit > :nth-child(2) { --on: clamp(0, (var(--progress, 0) - .12) * 8, 1); }
  .riff-motion .riff-pin-stage .st-lit > :nth-child(3) { --on: clamp(0, (var(--progress, 0) - .28) * 8, 1); }
  .riff-motion .riff-pin-stage .st-lit > :nth-child(4) { --on: clamp(0, (var(--progress, 0) - .44) * 8, 1); }
  .riff-motion .riff-pin-stage .st-lit > :nth-child(5) { --on: clamp(0, (var(--progress, 0) - .58) * 8, 1); }
  .riff-motion .riff-pin-stage .st-lit > :nth-child(6) { --on: clamp(0, (var(--progress, 0) - .72) * 8, 1); }
}
.st-pin .st-lit-stage { display: grid; align-content: center; }

/* --- the six things looked at, set large ----------------------------------- */
.st-terms-big { display: grid; gap: 0; margin-block-start: clamp(2rem, 5vw, 3.5rem); counter-reset: none; }
.st-terms-big li {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: baseline;
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; color: var(--ink);
  padding-block: clamp(.6rem, 1.4vw, 1rem); border-block-end: 1px solid var(--rule);
}
.st-terms-big .terms-no { font-size: var(--step--1); font-weight: 500; color: var(--muted); letter-spacing: var(--track-mono); }

/* --- stages (three ways in): each its own screen beside a sticky numeral ---- */
.st-stage .stage-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-block-end: 1.5rem; }
.st-stage .stage-meta { display: grid; gap: 1rem; margin-block-start: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.st-stage .stage-meta dt { font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); margin-block-end: .35rem; }
.st-stage .stage-meta dd { margin: 0; color: var(--ink); }
.st-stage .prose { font-size: var(--step-1); line-height: 1.5; max-inline-size: 36rem; }

/* --- cards, two by two, a screen tall ------------------------------------- */
.st-cards { display: grid; gap: 1rem; margin-block-start: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.st-cards .walk-card { min-block-size: clamp(14rem, 22vw, 19rem); padding: clamp(1.5rem, 3vw, 2.25rem); }
.st-cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }

/* --- the hero of a page with no fan: the fan, quiet, behind it -------------- */
.st-hero.st-field > .st-narrow, .st-hero.st-field > .st-wrap { position: relative; z-index: 1; }

/* --- 404: one screen, the front page on a phone beside it ------------------ */
.st-404 { min-block-size: 100svh; display: grid; align-content: center; }
.st-404-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (min-width: 52rem) { .st-404-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.st-404 .cta-inner { text-align: start; justify-items: start; }

/* --- the sample report: a document, so the type stays document-sized ------- */
.pp .report-head h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; }

/* --- the e-otpremnica check keeps its own width inside the wider frame ----- */
.st .check-form, .st .check-result { max-inline-size: 46rem; }
.st .table-wrap { margin-block-start: clamp(2rem, 5vw, 3rem); }
.st-frame:has(> figcaption) .st-vid-toggle { inset-block-end: 3.4rem; }
.st-stage .stage-meta, .st-stage .stage-meta > div { display: block; }
.st-stage .stage-meta > div { padding-block: .7rem; border-block-start: 1px solid var(--rule); }
.st-cards { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.st-media-panel .panel { margin: 0; }
.st-media-panel .panel-name { font-size: var(--step-1); }
.st-stage .stage-meta { grid-column: auto; grid-row: auto; }
.st-stage .stage-meta dd { font-size: var(--step-0); }

/* A page on paper keeps its own masthead (the sample report). */
.pp.paper .masthead { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-block-end-color: var(--rule); }

/* Printing never waits for a scroll. */
@media print {
  .riff-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .st-vid-toggle { display: none; }
}

/* --- second pass: pieces the other pages needed --------------------------- */
.st-statement-sm { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); margin-block-start: 2rem; }
.st-founding { margin-block-start: 2.5rem; }
.st-actions { margin-block-start: 2.5rem; }
.st-sublabel { margin-block-start: 1.5rem; color: var(--muted); }
.st-big-list li { font-size: var(--step-1); }
.st-title-md { font-size: clamp(2rem, 1rem + 3vw, 4rem); }
.st-terms-big.signal-list li { grid-template-columns: 1.75rem minmax(0, 1fr); }
.st-terms-big.signal-list .dot { align-self: center; }
.st-incident-grid { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.st-incident-grid .versus-list li { font-size: var(--step-1); }
/* The incidents deck: text cards, so a narrower card than the screenshot deck. */
.st-incidents .walk-card { min-block-size: clamp(14rem, 30vh, 20rem); padding: clamp(1.5rem, 3vw, 2.5rem); }
.st-incidents .walk-card .prose { font-size: var(--step-1); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .riff-motion .st-incidents .st-deck { max-inline-size: 48rem; }
  .riff-motion .st-incidents .st-ticks span:nth-child(1) { background: var(--ink); }
  .riff-motion .st-incidents .st-ticks span:nth-child(2) { background: color-mix(in oklab, var(--ink) calc(clamp(0, (var(--progress, 0) - .22) * 40, 1) * 100%), var(--rule-firm)); }
  .riff-motion .st-incidents .st-ticks span:nth-child(3) { background: color-mix(in oklab, var(--ink) calc(clamp(0, (var(--progress, 0) - .46) * 40, 1) * 100%), var(--rule-firm)); }
  .riff-motion .st-incidents .st-ticks span:nth-child(4) { background: color-mix(in oklab, var(--ink) calc(clamp(0, (var(--progress, 0) - .70) * 40, 1) * 100%), var(--rule-firm)); }
}
.st-incidents .st-ticks { justify-content: center; }
/* Rules held on a wide window: two columns so the five fit one screen. */
@media (min-width: 64rem) {
  .st-rules .work-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; }
  .st-principles .controls-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
  .st-principles .controls-list li:nth-child(2) { border-block-start: 0; padding-block-start: 0; }
}
.st-check { margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.st-step-title .st-step-no { display: block; margin-block-end: 1.25rem; font-size: var(--step--1); letter-spacing: var(--track-mono); font-weight: 500; }
.st-check-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 64rem) {
  .st-check-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
  .st-check-phone { position: sticky; top: 6rem; }
}
.st-phone-step { margin-block-start: -4rem; }
@media (max-width: 60rem) { .st-phone-step { margin-block-start: 0; } }
.st-404 .cta-mark { margin-inline: 0; }