/* v9 (2026-10-11) · Home: one line under the packages says other workflows exist (Samu) */
.pc-foot-wf { justify-content: space-between; align-items: end; gap: 16px 48px; flex-wrap: wrap; }
.pc-foot-wf p { max-width: 40em; font-size: 16px; line-height: 1.5; color: var(--muted); }
.pc-foot-wf p a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.pc-foot-wf .link-arrow { flex: none; }

/* ---------- Hero film v5 (2026-10-12): the film follows the scroll; the chapter line moves with it ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.media { overflow: hidden; }
.media-tag {
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--border);
  font-size: 12px; color: var(--muted);
}
/* The box covers the film's free band; js/main.js places it and drives every transform below. */
.cap10 { position: absolute; z-index: 2; pointer-events: none; }
.cap10-meta {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; opacity: 0;
}
.cap10-n { display: flex; gap: .35em; font: 600 12px/1 var(--font-body); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap10-roll { display: block; height: 1em; overflow: hidden; color: var(--ink); }
.cap10-roll span { display: block; height: 1em; will-change: transform; }
.cap10-bar { display: flex; gap: 4px; }
/* the example label: the site's .concept pill, in the film's top-left corner (js/main.js places it
   and fades it in and out with the film; it is hidden until then) */
.stage > .cap10-tag { z-index: 3; white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; will-change: opacity, transform; }
.cap10-bar i { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; position: relative; }
.cap10-bar i::after { content: ""; position: absolute; inset: 0; background: var(--signal); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.cap10-list { margin: 0; padding: 0; list-style: none; }
.cap10-list li {
  position: absolute; left: 0; right: 0; bottom: 0; top: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  visibility: hidden; will-change: transform, opacity, filter;
}
.cap10-t {
  font: 700 clamp(30px, 3.1vw, 54px)/.92 "Archivo", var(--font-display); font-variation-settings: "wdth" 62; font-stretch: 62%;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
}
/* words are masks; the letters rise into them */
.cap10-w { display: inline-block; overflow: hidden; padding: .06em .02em .04em; margin: -.06em -.02em -.04em; vertical-align: top; }
.cap10-c { display: inline-block; will-change: transform; }
.cap10-s { max-width: 58em; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.45; color: var(--muted); }
.cap10-end { top: var(--end-top, 0px) !important; }
.cap10-end .cap10-t { font-size: clamp(34px, 3.6vw, 64px); }
.cap10.is-end .cap10-meta { opacity: 0 !important; }
@media (max-width: 760px) {
  .cap10-list li { justify-content: flex-start; padding-top: 4px; }
  .cap10-t { font-size: clamp(28px, 8.4vw, 36px); }
  .cap10-s { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .media-tag { display: none; }
  .cap10 { position: static; padding: 24px var(--gutter) 40px; max-width: var(--maxw); margin: 0 auto; }
  .cap10-meta, .cap10-end { display: none; }
  .cap10-list { display: grid; gap: 20px; }
  .cap10-list li { position: static; visibility: visible; align-items: flex-start; text-align: left; }
}
/* Portrait screens (phones) and reduced motion: no scroll film, the hero with the open laptop as a
   still (Samu 2026-10-12). js/main.js uses the same (max-aspect-ratio: 1/1) test. */
.hero-still { display: none; margin: 0; }
.hero-still img { display: block; width: 100%; height: auto; }
.hero-still figcaption { margin-top: 10px; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-aspect-ratio: 1/1), (prefers-reduced-motion: reduce) {
  .story { height: auto !important; }
  .story-anchor { display: none; }
  .stage { position: relative; height: auto; overflow: visible; }
  .hero-grid { position: relative; inset: auto; padding-bottom: 56px; }
  .hero-slot { aspect-ratio: auto; }
  .hero-still { display: block; }
  .media, .media-tag, .cap10, .stage > .cap10-tag { display: none !important; }
}
/* v5: the film follows the scroll; each chapter has a short, slower breathing stretch (data-script) */
.story { height: 520vh; }
@media (max-width: 760px) { .story { height: 420vh; height: 420svh; } }
@media (prefers-reduced-motion: reduce) { .story { height: auto; } }

/* ---------- Inquiry demo on phones and tablets (2026-10-12, Samu: "tosi väärin") ----------
   Was a ~1 400 px dark column with empty space held for cards that had not appeared yet, and the
   workflow jumped down when the notification arrived. Now it fits one screen and nothing moves the
   layout: the notification drops over the top of the form like a push notification, the rows are
   single lines, and the draft rises over the finished workflow. Same --nt / --do / --on as js/v7.js. */
@media (max-width: 999px) {
  .iq-panel { display: block; padding: 46px 12px 12px; }
  .iq-panel .concept { top: 14px; right: 14px; }
  .iq-input { padding: 14px 16px 50px; }
  .iq-src { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .iq-src .iq-dot { display: inline-block; vertical-align: 1px; margin-right: 6px; }
  .iq-from { margin-top: 12px; font-size: 14px; }
  .iq-typed { font-size: 16px; min-height: 5.6em; }
  .iq-notif {
    position: absolute; left: 22px; right: 22px; top: 50px; z-index: 3; background: #fff;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75);
    transform: translateY(calc((1 - var(--nt, 1)) * -32px)) scale(calc(.96 + .04 * var(--nt, 1)));
  }
  .iq-flow { margin-top: 10px; padding: 10px; }
  .iq-flow-top { gap: 10px; padding: 2px 4px 10px; }
  .iq-flow-top b { font-size: 17px; }
  .iq-bot { width: 34px; height: 34px; border-radius: 10px; }
  .iq-bot svg { width: 20px; height: 20px; }
  .iq-rows { margin-top: 8px; gap: 6px; }
  .iq-rows li { flex-wrap: nowrap; padding: 10px 8px 10px 10px; font-size: 13.5px; gap: 6px; white-space: nowrap; }
  .iq-rows li span { gap: 8px; min-width: 0; }
  .iq-rows li span::before { width: 16px; height: 16px; }
  .iq-rows em { margin-left: 0; font-size: 10px; padding: 5px 6px; }
  /* solid card sliding up from below the panel's edge, not a see-through fade over the rows */
  .iq-draft {
    position: absolute; left: 22px; right: 22px; bottom: 12px; z-index: 3; padding: 16px 16px 14px;
    opacity: min(1, calc(var(--do, 1) * 4)); transform: translateY(calc((1 - var(--do, 1)) * 112%));
  }
  .iq-draft-sub { margin-top: 10px; font-size: 14px; }
  .iq-draft p:not([class]) { font-size: 14px; line-height: 1.45; }
  .iq-sign { font-size: 13px; }
  .iq-btns { margin-top: 12px; }
  .iq-btns span { font-size: 13px; padding: 9px 14px; }
}

/* ---------- Phones (2026-10-12, Samu after Dayos mobile) ---------- */
.iq-m { display: none; }
@media (max-width: 760px) {
  /* "You don't need…" lines: all white, like Dayos (the grey read as disabled) */
  .dz-list p { color: var(--white); }
}
/* 2026-10-13: tablets (761–999 px) also get the card row; the inquiry film is only shown from 1000 px, where its text stays readable */
@media (max-width: 999px) {
  /* Inquiry: no animation on phones. The reply waiting for an OK is the picture, then four short rows
     (Dayos industry rows: text left, a small tile right). */
  .iq-panel, .iq-steps-sr { display: none; }
  .iq-m { display: block; }
  .iq-m-stage { position: relative; padding: 52px 16px 18px; border-radius: var(--v7-r); background: var(--night); }
  .iq-m-stage .concept { left: auto; right: 14px; top: 14px; }
  .iq-m-draft { opacity: 1 !important; transform: none !important; position: static !important; padding: 18px 18px 16px; border-radius: 18px; }
  .iq-m-rows { list-style: none; margin: 8px 0 0; padding: 0; }
  .iq-m-rows li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .iq-m-rows b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
  .iq-m-rows span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--muted); }
  .iq-m-rows i { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--night); color: var(--signal); }
  .iq-m-rows svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* r6 · The concept note sits on the laptop screen's bottom corner instead of under it (Samu 13.10.) */
.hero-still { position: relative; container-type: inline-size; }
.hero-still figcaption { position: absolute; right: 13.6%; bottom: 14.6%; margin: 0; padding: .3em .75em; border-radius: 999px; background: #F3F3F5; font-size: clamp(7px, 2cqw, 10px); line-height: 1.3; white-space: nowrap; color: var(--muted); }

/* r8 · Hero entrance (13.10.): the example page rises into its slot once, on load; the film's first frame stays the resting image */
@keyframes hero-rise { from { opacity: 0; transform: translateY(7%) scale(.965); } }
.story .media-canvas { animation: hero-rise 1.1s cubic-bezier(.22, 1, .36, 1) .25s both; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .story .media-canvas { animation: none; } }

/* r8 · Phone still is the r7 film's first frame (page on the grey stage); the concept note sits in the stage's top margin */
.hero-still figcaption { right: 3.2%; bottom: auto; top: 2.4%; }

/* r8 · Desktop hero (critic round 3): the film slot is the one big object, wider and bleeding off the right edge, so the
   film's close first frame reads at ~12 px+; landscape only (portrait/phones keep the still) */
/* r10: the bleed was removed again; the first frame is now a contained card on the grey stage (Samu 13.10.) */

/* r10 · Phone inquiry (Samu 13.10.): one card row on the night stage that swipes through the four steps by itself, in a loop.
   js/v8.js adds the dots and the autoplay (paused while touched, offscreen or with reduced motion). */
@media (max-width: 999px) {
  .iq-m-stage { padding: 52px 0 18px; overflow: hidden; }
  .iqc-row { list-style: none; margin: 0; padding: 0 16px; display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .iqc-row::-webkit-scrollbar { display: none; }
  .iqc { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 8px; color: var(--white); }
  .iqc-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--on-night-muted); }
  .iqc-top i { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(139, 124, 255, .16); color: var(--signal); }
  .iqc-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .iqc-t { font-size: 20px; font-weight: 600; line-height: 1.25; }
  .iqc-s { font-size: 15px; line-height: 1.45; color: var(--on-night-muted); }
  .iqc-v { margin-top: auto; padding-top: 14px; }
  .iqc-box { background: var(--white); color: var(--ink); border-radius: 18px; padding: 16px 18px; font-size: 15px; line-height: 1.45; min-height: 150px; }
  .iqc-box p { margin: 0; }
  .iqc-box p + p { margin-top: 6px; }
  .iqc-k { font-size: 12px; font-weight: 600; color: var(--muted); }
  .iqc-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--signal); animation: iqc-blink 1s steps(1) infinite; }
  @keyframes iqc-blink { 50% { opacity: 0; } }
  .iqc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
  .iqc-btns span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
  .iqc-btns .iqc-sent { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .iq-m .sw-dots { margin-top: 16px; }
  .iq-m .sw-dots button { background: rgba(255, 255, 255, .3); }
  .iq-m .sw-dots button[aria-current="true"] { background: var(--white); }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) { .iqc-caret { animation: none; } }

/* r10 · Phone still is the headline of the film's first frame (readable on a phone); the concept note sits in its empty bottom-right corner at 12 px */
.hero-still img { border-radius: 18px; }
.hero-still figcaption { top: auto; bottom: 2%; right: 1.6%; font-size: 12px; padding: 4px 10px; background: #F3F3F5; }

/* ---------- Inquiry film (2026-10-13): replaces .iq-panel from 1000 px ----------
   16:9 box reserved before the video loads (no layout shift). The poster (last frame) comes from the video's poster
   attribute; the box itself is the film's stage colour, so the loop's fade-out lands on the same dark the film starts on. */
.iq-film {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--v7-r); overflow: hidden; isolation: isolate;
  background: radial-gradient(110% 85% at 50% 66%, #1a144f 0%, #120e3a 42%, #0a0820 100%);
}
.iq-film-v { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; transition: opacity .45s ease; }
.iq-film.is-fading .iq-film-v { opacity: 0; }
.iq-film .concept { left: auto; right: 18px; top: 18px; }
/* pause / play (loop, Samu 13.10.): one round button in the bottom-right corner, clear of the film's labels */
.iq-toggle {
  position: absolute; z-index: 5; right: 18px; bottom: 18px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(13, 10, 41, .55); color: var(--white); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s ease, border-color .2s ease;
}
.iq-toggle[hidden] { display: none; }
.iq-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.iq-toggle .i-play { fill: currentColor; stroke-width: 1.6; transform: translateX(1px); }
.iq-toggle[data-state="playing"] .i-play, .iq-toggle[data-state="paused"] .i-pause { display: none; }
.iq-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .iq-toggle:hover { background: rgba(139, 124, 255, .35); border-color: rgba(139, 124, 255, .7); } }
@media (prefers-reduced-motion: reduce) { .iq-film-v { transition: none; } }
@media (max-width: 999px) { .iq-film { display: none; } }
/* tablets: the dots under the card row (v8.css shows .sw-dots only on phones) */
@media (min-width: 761px) and (max-width: 999px) {
  .iq-m .sw-dots { display: flex; justify-content: center; gap: 8px; }
  .iq-m .sw-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; cursor: pointer; transition: width .3s var(--v7-ease), background-color .3s; }
  .iq-m .sw-dots button[aria-current="true"] { width: 28px; }
  .iq-m .sw-dots button::after { content: ""; position: absolute; inset: -12px -4px; }
  .iq-m .iqc { flex-basis: min(100%, 560px); }
}