/*
 * Tark v2 — self-contained stylesheet for /v2/ (home + use-case pages).
 * World: four steps, each owns its colour (Planeeri blue · Tegutse green · Mõõda amber ·
 * Juhi red); the letters live only in the logo. Deep ink hero, white and cool-steel body,
 * real product screens on full-bleed colour slabs, pill-shaped labels and buttons. Archivo
 * carries display text; the established Roboto reads as prose. Both are self-hosted.
 * v1 pages keep public-site.css untouched.
 *
 * Text colours (5): --ink, --body, --muted, --on-dark, --on-dark-muted.
 * Step colours are surfaces, never body text. Text that sits on a step colour is white and
 * sits on its -deep tone (>=4.5:1); the bright tones carry no text (slabs, bars, hairlines)
 * except the single hero highlight, which reads on the ink hero.
 */

/* The established homepage headline face, including its round full stops. */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-grotesk/space-grotesk-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/static/fonts/archivo/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/static/fonts/archivo/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
    /* text */
    --ink: #0b1422;
    --body: #34445a;
    --muted: #5a6a7d;
    --on-dark: #ffffff;
    --on-dark-muted: #b9c6d6;

    /* surfaces */
    --night: #0b1422;
    --night-2: #131f31;
    --night-3: #3a4a60; /* hero-edge.svg middle wave only (img, so the hex is mirrored there) */
    --steel: #eef1f4;
    --paper: #ffffff;
    --line: #d5dce4;
    --line-dark: rgba(185, 198, 214, 0.2);
    --pause: #cdd5de; /* split bar "Paus" segment */

    /* the four steps */
    --planeeri: #13a0cd;
    --tee: #63a35c;
    --mooda: #e6c229;
    --juhi: #de2d2d;
    /* the same four, deep enough for white text (white: 4.71 / 4.63 / 4.55 / 5.06 :1) */
    --planeeri-deep: #1479b8;
    --tee-deep: #3b8436;
    --mooda-deep: #967000;
    --juhi-deep: #d03030;
    --grad-mid: #8db256;
    --grad: linear-gradient(90deg, var(--tee) 0%, var(--grad-mid) 42%, var(--mooda) 100%);
    /* the booking pill: one solid green, darkened in oklch at full chroma so it stays vivid instead of going olive
       (white: 4.96:1); hover lifts L a hair (white: 4.66:1) */
    --cta: #1f812d;
    --cta-hover: #20862e;
    --down: #b45f00; /* "Seisak": orange, deep enough for white text (4.59:1) */
    --pause-deep: #66778a; /* split bar "Paus" segment: grey for white text (4.59:1) */

    /* type */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Roboto', Arial, sans-serif;
    /* laptop air (Martin 2026-10-21): a 1920 px laptop at 125-150 % scaling reads as 1536 / 1280; every
       display cap sits one notch lower there, while 390 / 768 keep their sizes (the slopes reach them unchanged) */
    --fs-body: clamp(1.0625rem, 1.15rem - 0.1vw, 1.125rem);
    --fs-small: 0.9375rem;
    --fs-label: 0.875rem;
    --fs-lead: clamp(1.1875rem, 0.9rem + 0.7vw, 1.3125rem);
    --fs-h3: clamp(1.375rem, 1.1rem + 0.8vw, 1.5625rem);
    --fs-h2: clamp(2rem, 1.3rem + 2.4vw, 2.875rem);
    --fs-h1: clamp(2.75rem, 1rem + 4.2vw, 4.5rem); /* fitted: ET "Tööl on väärtus." holds one line in the hero copy column */
    --fs-h1-line2: clamp(1.625rem, 0.75rem + 2vw, 2.375rem); /* ET "Hinda, jälgi ja juhi seda.": one line from 1280 */

    /* space + shape */
    --wrap: 1200px;
    --gutter: clamp(20px, 7vw - 20px, 112px); /* 20 at 390, ~34 at 768, ~70 at 1280, ~88 at 1536 */
    --section: clamp(80px, 6vw + 40px, 144px);
    --radius: 14px;
    --radius-lg: 22px;
    --bar: 72px;
    --shadow-screen: 0 2px 4px rgba(11, 20, 34, 0.08), 0 18px 40px -12px rgba(11, 20, 34, 0.35), 0 40px 80px -24px rgba(11, 20, 34, 0.3);
    --shadow-card: 0 1px 2px rgba(11, 20, 34, 0.06), 0 12px 28px -14px rgba(11, 20, 34, 0.28);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar) + 16px);
    accent-color: var(--tee);
    /* the canvas wears the bar's ink, so the gap between two documents (and overscroll) is never a white flash */
    background: var(--night);
}

/* page to page: a cross-document view transition (Chromium, Safari 18.2+); the bar stays put and the page
   crossfades under it. Other browsers and reduced motion navigate as before. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    .bar {
        view-transition-name: v2-bar;
    }

    ::view-transition-group(root) {
        animation-duration: 180ms;
        animation-timing-function: ease-out;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 180ms;
    }

    ::view-transition-group(v2-bar) {
        animation: none;
    }

    ::view-transition-old(v2-bar) {
        display: none;
    }

    ::view-transition-new(v2-bar) {
        animation: none;
    }
}

body.v2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-stretch: 100%;
    color: var(--body);
    background: var(--night);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.rail-word,
.v2-stat-value,
.seg-pct {
    font-family: var(--font-display);
}

.v2 ::selection {
    background: var(--mooda);
    color: var(--ink);
}

.v2 img {
    display: block;
    max-width: 100%;
    height: auto;
}

:where(.v2) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
}

:where(.v2) :where(ul, ol) {
    padding: 0;
    list-style: none;
}

:where(.v2) a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.v2 :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--on-dark);
    border-radius: 6px;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* colour slabs bleed to the viewport edge; clip (not hidden) keeps the sticky bar working */
#sisu {
    overflow-x: clip;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    border-radius: 8px;
}

.skip-link:focus {
    top: 12px;
}

/* an accessible name the eye does not need (the footer email's label; the placeholder shows it) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- type ---------- */

.h1,
.h2,
.h3,
.close-title {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Retain the original site's headline character and round punctuation. */
.h1 {
    font-family: 'Space Grotesk', var(--font-body);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 1.02;
    font-stretch: normal;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--on-dark);
}

.h2 {
    font-size: var(--fs-h2);
    line-height: 1.06;
    font-stretch: 108%;
}

.h3 {
    font-size: var(--fs-h3);
    line-height: 1.2;
    font-stretch: 104%;
}

.grad {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* home H1: the promise large, the verbs a clear step down; one accented word per line. Each
   line balances on its own, so a wrap never strands the gradient word */
.h1-home .h1-line1,
.h1-home .h1-line2 {
    display: block;
    text-wrap: balance;
}

.h1-home .h1-line2 {
    margin-top: clamp(8px, 0.9vw, 14px);
    font-size: var(--fs-h1-line2);
    line-height: 1.12;
    letter-spacing: -0.015em;
    background: linear-gradient(135deg, #fff 0%, #fff 85%, #d9ebfa 91%, #f6dfe4 96%, #f3dd94 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--on-dark-muted);
    max-width: 34em;
}

.section-lead {
    margin-top: 20px;
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-width: 38em;
}

/* ---------- buttons ---------- */
/* two buttons on every v2 page, one size: primary = the solid green pill with the bright brand sweep as its lip,
   secondary = the outlined pill.
   The secondary takes its colour from the surface (white on dark, ink on light) */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.2s;
}

.v2 .btn:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--on-dark);
    border-radius: 999px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.btn-arrow {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s var(--ease-out);
}

.btn:hover .btn-arrow,
.step-link:hover .btn-arrow,
.other:hover .btn-arrow {
    transform: translateX(4px);
}

/* Martin 2026-10-20: green-to-amber read murky, the yellow lower lip read weird. One green, ~75% of the pill,
   settling into a deeper green toward the bottom-right corner */
.btn-primary {
    color: var(--on-dark);
    background-color: var(--cta);
    background-image: linear-gradient(120deg in oklch, oklch(0.53 0.15 145) 0%, oklch(0.53 0.15 145) 55%, oklch(0.40 0.12 148) 100%);
    box-shadow: 0 10px 22px -12px rgba(11, 20, 34, 0.55);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: var(--cta-hover);
    background-image: linear-gradient(120deg in oklch, oklch(0.545 0.155 145) 0%, oklch(0.545 0.155 145) 55%, oklch(0.43 0.125 148) 100%);
    box-shadow: 0 16px 28px -12px rgba(11, 20, 34, 0.6);
}

.btn-quiet {
    color: inherit;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 40%, transparent);
}

.btn-quiet:hover {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.hero .btn-quiet {
    color: var(--on-dark);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* ---------- bar ---------- */

.bar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--bar);
    margin-bottom: calc(-1 * var(--bar));
    background: rgba(11, 20, 34, 0.94);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 -1px 0 var(--line-dark);
}

.bar-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 100%;
}


/* the logo link is a 44px target even where the mark is 28px tall */
.bar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.bar-brand img {
    width: auto;
    height: 34px;
}

.bar-nav {
    margin-left: auto;
}

.bar-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bar-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--on-dark-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.bar-nav a:hover,
.bar-nav a[aria-current='page'] {
    color: var(--on-dark);
}

/* the current page carries a non-colour cue too, the same underline bar as the mobile sheet */
.bar-nav a[aria-current='page'] {
    box-shadow: inset 0 -3px 0 var(--mooda);
}

.bar-lang {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.bar :focus-visible {
    outline: 2px solid var(--mooda);
    outline-offset: 3px;
    box-shadow: none;
}

/* menu disclosure for <1100px; the panel floats under the bar, so opening it shifts nothing */
.bar-inner {
    position: relative;
}

.bar-menu {
    display: none;
}

.bar-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--on-dark);
    font-size: var(--fs-small);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
    transition: box-shadow 0.2s, background-color 0.2s;
}

.bar-menu-button::-webkit-details-marker {
    display: none;
}

.bar-menu-button:hover,
.bar-menu[open] .bar-menu-button {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1.5px var(--on-dark);
}

.bar-menu-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.bar-menu-close,
.bar-menu[open] .bar-menu-open {
    display: none;
}

.bar-menu[open] .bar-menu-close {
    display: inline;
}

.bar-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, 100%);
    padding: 12px;
    border-radius: var(--radius-lg);
    /* Opaque: the sticky .bar's own backdrop-filter makes it the backdrop root, so a blur here never reaches the page. */
    background: var(--night);
    box-shadow: inset 0 0 0 1px var(--line-dark), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
    .bar-menu[open] .bar-menu-panel {
        animation: menu-in 0.32s var(--ease-out);
    }

    @keyframes menu-in {
        from {
            opacity: 0;
            transform: translateY(-8px);
            clip-path: inset(0 0 40% 0 round 22px);
        }
    }
}

.bar-menu-list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--on-dark);
    font-weight: 700;
    text-decoration: none;
}

.bar-menu-list a:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bar-menu-list a[aria-current='page'] {
    box-shadow: inset 0 -3px 0 var(--mooda);
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    background: var(--night);
    color: var(--on-dark-muted);
    padding-top: calc(var(--bar) + 12px + clamp(24px, 2vw, 32px));
    overflow: hidden;
}

/* Haikei-style layered edge, ink -> steel only: a section transition, not a second rail */
.hero-edge {
    display: block;
    width: 100%;
    height: clamp(48px, 6vw, 96px);
    margin-top: clamp(24px, 3vw, 40px);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    min-height: min(560px, calc(100svh - var(--bar) - 220px));
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding-bottom: 24px;
}

.hero .lead {
    margin-top: 28px;
}

/* home: the roof needs the wider column in the wide voice; the stage bleeds right to compensate */
.hero-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 3vw, 48px);
}

/* the stage: real screens, settled in a stack that bleeds off the right edge. The tablet and
   phone hang below the desktop inside the stage's own bottom padding, so the stack ends above
   the doors band and nothing shows through the band/rail gaps. */
.stage {
    position: relative;
    isolation: isolate;
    margin-right: calc(-1 * var(--gutter) - 8vw);
    padding-top: 30px;
    padding-bottom: 48px;
}

/* the four TARK letters as layered blobs behind the screens: the hero's picture-led colour */
.stage::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -14% -2% -16% -14%;
    background: url('/static/images/svg/hero-blobs.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}

.stage-item {
    position: absolute;
}

.stage-desktop {
    position: relative;
    width: 100%;
}

.stage-tablet {
    left: -6%;
    bottom: -10px;
    width: 52%;
    z-index: 2;
}

.stage-phone {
    left: 50%;
    bottom: -12px;
    width: 19%;
    z-index: 3;
}

/* devices get a light bezel so the dark kiosk screen separates from the ink and the blobs */
.stage-tablet .screen,
.stage-phone .screen {
    padding: 9px;
    border-radius: 22px;
    background: linear-gradient(160deg, #ffffff, var(--steel) 60%, #dfe5ec);
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(11, 20, 34, 0.08), var(--shadow-screen);
}

.stage-tablet .screen {
    overflow: hidden;
    padding: 0;
    aspect-ratio: 1.33;
}

.stage-tablet .screen::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 5px solid #f3f6f9;
    border-radius: 22px;
    pointer-events: none;
}

.stage-phone .screen {
    padding: 6px;
    border-radius: 24px;
}

/* the kiosk card cropped out of the wide shot, zoomed about its centre */
.stage-tablet .screen img {
    position: absolute;
    top: -32.6%;
    left: -85.1%;
    width: 200%;
    max-width: none;
    height: auto;
    border-radius: 0;
}

.stage-phone .screen img {
    border-radius: 18px;
}

.screen {
    position: relative;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-screen);
}

.screen img {
    width: 100%;
    border-radius: var(--radius);
}

.slab .screen,
.hero-slab .screen {
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.slab .screen:hover,
.hero-slab .screen:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(11, 20, 34, 0.08), 0 26px 48px -12px rgba(11, 20, 34, 0.42), 0 48px 90px -24px rgba(11, 20, 34, 0.34);
}

/* subtle reveal on scroll; content stays visible without JS (html.js is set by v2.js) */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    }

    .js .reveal:not(.is-in) {
        opacity: 0;
        transform: translateY(14px);
    }
}

.stage .screen,
.hero-slab .screen {
    outline: 1px solid rgba(255, 255, 255, 0.14);
}

.shot-chip {
    position: absolute;
    /* a tab on top of the frame: it never covers the screen's own title */
    bottom: 100%;
    left: 18px;
    border-radius: 8px 8px 0 0;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--ink);
    color: var(--on-dark);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.shot-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mooda);
}

@media (prefers-reduced-motion: no-preference) {
    .stage-item,
    .hero-slab .stage-item {
        animation: settle 1.2s var(--ease-out) both;
        animation-delay: calc(120ms + var(--i, 0) * 140ms);
    }

    @keyframes settle {
        from {
            transform: translate3d(0, 36px, 0) rotate(-1.2deg) scale(0.97);
            opacity: 0;
        }
    }
}

/* ---------- the TARK rail ---------- */

.rail {
    position: relative;
    z-index: 3;
    margin-top: clamp(40px, 5vw, 64px);
    margin-bottom: -2px;
}

.rail-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.rail-step {
    display: flex;
}

/* The steps sit on the hero ground; colour lives only in the top stroke. */
.rail-step a {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 20px 20px 22px;
    border-top: 4px solid var(--step);
    border-radius: 0;
    background: transparent;
    color: var(--on-dark);
    text-decoration: none;
}

.rail-step a:hover .rail-word {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rail-word {
    font-weight: 800;
    font-size: 1.25rem;
    font-stretch: 108%;
    line-height: 1.2;
}

.rail-line {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-small);
    line-height: 1.4;
    font-weight: 500;
}

.tone-planeeri {
    --step: var(--planeeri);
    --step-deep: var(--planeeri-deep);
    --step-ink: var(--on-dark);
    --card-top-fb: #08567c;
    --card-top: oklch(0.43 0.092 238);
    --card-bot-fb: #042e57;
    --card-bot: oklch(0.30 0.085 252);
    --card-top-hi-fb: #03628b;
    --card-top-hi: oklch(0.47 0.100 236);
    --card-bot-hi-fb: #033761;
    --card-bot-hi: oklch(0.33 0.090 250);
    --slab-top-fb: #0a658e;
    --slab-top: oklch(0.48 0.100 236);
    --slab-bot-fb: #063f6a;
    --slab-bot: oklch(0.36 0.092 248);
}

.tone-tee {
    --step: var(--tee);
    --step-deep: var(--tee-deep);
    --step-ink: var(--on-dark);
    --card-top-fb: #175f2a;
    --card-top: oklch(0.43 0.110 148);
    --card-bot-fb: #003823;
    --card-bot: oklch(0.30 0.066 162);
    --card-top-hi-fb: #226c2d;
    --card-top-hi: oklch(0.47 0.120 146);
    --card-bot-hi-fb: #014128;
    --card-bot-hi: oklch(0.33 0.074 160);
    --slab-top-fb: #266f30;
    --slab-top: oklch(0.48 0.120 146);
    --slab-bot-fb: #004a2b;
    --slab-bot: oklch(0.36 0.084 158);
}

.tone-mooda {
    --step: var(--mooda);
    --step-deep: var(--mooda-deep);
    --step-ink: var(--on-dark);
    /* dark yellow can only be olive or brown: rotated toward orange at max chroma (dark gold);
       body text at .82 white sits at 4.66:1 on the hover/slab top, so never raise L above 0.51 */
    --card-top-fb: #905100;
    --card-top: oklch(0.50 0.115 62);
    --card-bot-fb: #632402;
    --card-bot: oklch(0.35 0.100 44);
    --card-top-hi-fb: #925300;
    --card-top-hi: oklch(0.505 0.115 63);
    --card-bot-hi-fb: #6a2900;
    --card-bot-hi: oklch(0.37 0.104 46);
    --slab-top-fb: #925300;
    --slab-top: oklch(0.505 0.115 63);
    --slab-bot-fb: #753100;
    --slab-bot: oklch(0.40 0.109 48);
}

.tone-juhi {
    --step: var(--juhi);
    --step-deep: var(--juhi-deep);
    --step-ink: var(--on-dark);
    --card-top-fb: #921921;
    --card-top: oklch(0.43 0.155 24);
    --card-bot-fb: #5a041c;
    --card-bot: oklch(0.30 0.115 14);
    --card-top-hi-fb: #a51e24;
    --card-top-hi: oklch(0.47 0.170 25);
    --card-bot-hi-fb: #66071e;
    --card-bot-hi: oklch(0.33 0.125 16);
    --slab-top-fb: #a92227;
    --slab-top: oklch(0.48 0.170 25);
    --slab-bot-fb: #730b22;
    --slab-bot: oklch(0.36 0.135 17);
}

/* ---------- problem (home) ---------- */

/* ---------- Tark Platvorm head, pilot block, the Tark Aeg hint (home) ---------- */

.door-bar {
    display: flex;
    gap: 6px;
}

.door-bar span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--step);
}

/* the platform's name and its picture on one dark band: the Planeeri rail card's recipe (its dark stops,
   interpolated in oklch with a hex fallback, a soft tone glow at the top), full-bleed. All text white. */
.door-head {
    padding-block: var(--section) clamp(56px, 5vw, 96px);
    color: var(--on-dark);
    --model-halo-fb: #06446d; /* the band's blue where the picture's questions sit (.model-asks) */
    --model-halo: color-mix(in oklch, var(--card-top) 40%, var(--card-bot));
    background: linear-gradient(180deg, var(--card-top-fb), var(--card-bot-fb));
    background:
        radial-gradient(120% 60% at 30% 0%, color-mix(in oklch, var(--step) 18%, transparent), transparent 70%),
        linear-gradient(180deg in oklch, var(--card-top), var(--card-bot));
}

.door-head .door-title {
    color: var(--on-dark);
}

.door-head .section-lead {
    color: rgba(255, 255, 255, 0.86);
}

/* the door's first step follows its head closely: no empty field between the name and its proof */
.door-head + .step {
    padding-top: clamp(24px, 3vw, 48px);
}

.door-head .door-bar span,
.door-pilot .door-bar span {
    flex: 0 0 72px;
    height: 8px;
    border-radius: 4px;
}

.door-title,
.pilot-title {
    margin-top: 28px;
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.125rem); /* stays under the H1 */
    line-height: 1.02;
    font-stretch: 112%;
}

.pilot-title {
    max-width: 15em;
}

.door-end {
    padding-block: var(--section);
    background: var(--steel);
}

.door-end-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
}

.door-pilot .section-lead {
    margin-top: 16px;
}

/* beside its screen the pilot line steps down to the section size, so it reads in three lines */
.door-pilot .door-end-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.door-pilot .door-end-grid .pilot-title {
    font-size: var(--fs-h2);
    line-height: 1.06;
}

.door-end-shot {
    --step: var(--planeeri);
    position: relative;
    isolation: isolate;
    padding-block: clamp(28px, 4vw, 64px);
}

.door-end-shot .screen {
    width: calc(100% - clamp(24px, 3vw, 48px));
    box-shadow: var(--shadow-screen);
}

/* Tark Aeg lives on its own site: one quiet line with its link, never a second product panel */
.sibling {
    padding-block: clamp(28px, 3vw, 40px);
    background: var(--paper);
    border-top: 1px solid var(--line);
}

/* optically centred: both items centre on one axis (baseline alignment sank the line below the 44px link) */
.sibling-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
}

.sibling-text {
    margin: 0;
    color: var(--body);
    font-size: var(--fs-lead);
    line-height: 1.45;
}

.sibling-name a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--planeeri);
}

.sibling-name a:hover {
    text-decoration-color: currentColor;
}

.sibling-name {
    margin-left: 0.45em;
    color: var(--ink);
    font-weight: 800;
    font-stretch: 104%;
}

.sibling .sibling-link {
    --step: var(--planeeri);
    margin-top: 0; /* beats .step-link's 28px, which sat the link below the line's centre */
}

.sibling-link:hover .btn-arrow {
    transform: translate(3px, -3px);
}

.problem {
    padding-block: var(--section);
    background: var(--steel);
}

.problem-title {
    max-width: 14em;
}

/* four value cards between the Tark Platvorm hub and step 1 (Martin 2026-10-21, variant B): a white card that opens
   on a strip of the real screen its story leads with, set on the colour of the step its promise names. The cards
   are not links while the stories are hidden, so they carry no hover or focus affordance */
.values {
    padding-block: clamp(40px, 4vw, 64px);
    background: var(--steel);
}

.values-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.value {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* the strip shows the screen's top-left corner, larger than the card, the way the screen opens */
.value-shot {
    height: 176px;
    padding: 14px 0 0 14px;
    background: var(--step);
    overflow: hidden;
}

.value-shot img {
    display: block;
    width: 150%;
    max-width: none;
    height: auto;
    border-radius: 8px 0 0 0;
    box-shadow: 0 8px 24px -8px rgba(11, 20, 34, 0.45);
}

.value-name {
    margin-top: 18px;
    padding-inline: 20px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.value-promise {
    margin-top: 8px;
    padding: 0 20px 22px;
    color: var(--body);
}

/* home's walk: one step's lines follow its head the way a use-case block's body does */
.block-copy .h3 + .step-line {
    margin-top: 18px;
}

.how.how-home {
    padding-block: clamp(16px, 2vw, 32px) 0;
}

.how.how-home .how-steps {
    margin-top: 0;
}

.modules-line {
    margin-top: 32px;
    text-align: center;
}

.modules-line .step-link {
    margin-top: 0;
    color: var(--ink);
}

@media (max-width: 900px) {
    .values-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .values-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .value-shot {
        height: 148px;
    }
}

.scenes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 28px);
    margin-top: clamp(48px, 5vw, 72px);
    align-items: stretch;
    counter-reset: none;
}

.scene {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: var(--radius);
    border-top: 4px solid var(--step);
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.scene-title {
    color: var(--ink);
    font-size: var(--fs-h3);
    font-weight: 800;
    font-stretch: 104%;
    line-height: 1.3;
    text-wrap: balance;
}

.scene-body {
    margin-top: 12px;
}

.scene-points {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
    font-size: var(--fs-small);
}

.scene-points li {
    position: relative;
    padding-left: 24px;
}

.scene-points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--tee-deep);
    font-weight: 900;
}

.cause {
    margin: clamp(24px, 3vw, 40px) auto 0;
    max-width: 40em;
    color: var(--ink);
    font-size: var(--fs-lead);
    font-weight: 600;
    text-align: center;
}

.split {
    position: relative; /* anchors the sample-data tab, the hero's .shot-chip */
    margin-top: clamp(32px, 3.5vw, 48px);
    padding: clamp(24px, 3vw, 40px);
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.split-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 32px;
}

.split-bar {
    display: flex;
    gap: 4px;
    margin-top: 28px;
}

.seg {
    flex: var(--w) 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px 16px 12px;
    color: var(--on-dark);
    background: var(--steel);
    transform-origin: left;
}

.seg:first-child {
    border-radius: 10px 0 0 10px;
}

.seg:last-child {
    border-radius: 0 10px 10px 0;
}

.seg-work {
    background: var(--tee-deep);
}

/* text on a coloured fill is always white: the fills are deep enough for it */
.seg-pause {
    background: var(--pause-deep);
}

.seg-loss {
    background: var(--juhi-deep);
}

.seg-down {
    background: var(--down);
}

.seg-pct {
    font-size: clamp(1.375rem, 0.9rem + 1.4vw, 2rem);
    font-weight: 800;
    font-stretch: 100%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.seg-label {
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.2;
}

.split figcaption {
    margin-top: 16px;
    color: var(--muted);
    font-size: var(--fs-small);
}

.split-drilldown {
    display: grid;
    gap: 16px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.split-tabs {
    display: flex;
    gap: clamp(8px, 1.5vw, 20px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line);
}

.split-tabs::-webkit-scrollbar {
    display: none;
}

.split-tab {
    appearance: none;
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: 10px 8px 11px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--body);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.split-tab:hover {
    color: var(--planeeri-deep);
    border-bottom-color: var(--planeeri);
}

.split-tab.is-active {
    color: var(--planeeri-deep);
    border-bottom-color: var(--planeeri-deep);
}

.split-tab:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.split-drill-view {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-block: 6px 4px;
}

/* the chart's scope as info pills (calendar, shifts, target, piece count) */
.split-drill-context {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 31px;
}

.drill-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--steel);
    color: var(--ink);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.drill-pill svg {
    flex: none;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.split-drill-chart {
    position: relative; /* anchors the pinned y-axis of a scrolling chart */
    min-width: 0;
    margin-top: 10px;
}

/* a phone scrolls the plot under its y-axis labels, which stay at the left edge */
.drill-axis-pin {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.drill-axis-pin-bg { fill: var(--paper); }

/* charts keep a readable minimum width and scroll sideways on a phone */
.drill-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -4px;
    padding: 0 4px;
    scrollbar-width: thin;
}

.drill-svg {
    display: block;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    overflow: visible;
}

.drill-grid { stroke: var(--line); stroke-width: 1; }
.drill-axis { stroke: #9aa7b6; stroke-width: 1; }
.drill-grid.is-target { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.drill-grid.is-stop { stroke: var(--down); stroke-dasharray: 2 3; }

.drill-y-label,
.drill-y-unit {
    fill: var(--muted);
    font-size: 11px;
    text-anchor: end;
}

.drill-y-label.is-target { fill: var(--ink); font-weight: 700; }
.drill-y-unit { font-weight: 700; }

.drill-x-label {
    fill: var(--body);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
}

.drill-band { fill: var(--steel); }

.drill-band-label {
    fill: var(--body);
    font-size: 12px;
    font-weight: 700;
}

.drill-band-label.is-active { fill: var(--ink); font-weight: 800; }
.drill-divider { stroke: #9aa7b6; stroke-width: 1; stroke-dasharray: 3 3; }

.drill-value {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
}

.drill-value.is-actual { fill: var(--tee-deep); }
.drill-note { fill: var(--muted); font-size: 11px; text-anchor: middle; pointer-events: none; }
.is-compact .drill-note { font-size: 11px; }

.is-compact .drill-value { font-size: 10px; }
.drill-value.is-inside { fill: var(--on-dark); }
.is-compact .drill-x-label,
.is-compact .drill-band-label { font-size: 10.5px; }
.is-compact .drill-y-label { font-size: 10px; }

.drill-pair { cursor: pointer; outline: none; }
.drill-hit { fill: transparent; transition: fill 0.15s; }
.drill-pair:hover .drill-hit { fill: rgba(19, 160, 205, 0.07); }
.drill-pair:focus-visible .drill-hit { fill: rgba(19, 160, 205, 0.07); stroke: var(--planeeri); stroke-width: 2; }
.drill-stack { stroke: var(--paper); stroke-width: 1; }

.drill-swatch-work { fill: var(--tee-deep); background: var(--tee-deep); }
.drill-swatch-loss { fill: var(--juhi-deep); background: var(--juhi-deep); }
.drill-swatch-down { fill: var(--down); background: var(--down); }
.drill-swatch-pause { fill: var(--pause); background: var(--pause); }

.drill-focus { fill: rgba(19, 160, 205, 0.09); }
.drill-pause { fill: var(--pause); opacity: 0.45; }
.drill-dot { stroke: var(--paper); stroke-width: 0.75; }
.drill-dot-hover { fill: none; stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }

.drill-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 12px;
    color: var(--body);
    font-size: var(--fs-label);
    font-variant-numeric: tabular-nums;
}

.drill-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.drill-swatch {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.drill-foot {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.8125rem;
}

.drill-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    min-width: 190px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--night);
    color: var(--on-dark);
    box-shadow: 0 12px 28px -12px rgba(11, 20, 34, 0.5);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}

.drill-tip.is-on { opacity: 1; }
.drill-tip-title { margin-bottom: 4px; font-weight: 800; }

.drill-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--on-dark-muted);
}

.drill-tip-row b { margin-left: auto; padding-left: 14px; color: var(--on-dark); }
.drill-tip-row:last-child:not(:nth-child(2)) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-dark); }

@media (prefers-reduced-motion: no-preference) {
    .js .split-bar .seg {
        transform: scaleX(0.94);
        transition: transform 0.9s var(--ease-out);
    }

    .js .split-bar.is-in .seg {
        transform: none;
    }
}

/* ---------- the work model, "Info, et otsustada" (home) ---------- */

/* the picture sits on the door head's blue band: light lines and questions; box colours match the mobile stack.
   The full content width, 1312px at 1440 and 1920 (Martin 2026-10-20: "keep the pic in this size. This is great!") */
.model {
    display: flow-root; /* its margins stay on the head's white, never collapse into the door below */
}

.model-diagram-desktop {
    max-width: var(--wrap);
    margin: clamp(40px, 4vw, 64px) auto 0;
}

.model-diagram {
    display: block;
    width: 100%;
    height: auto;
}

.model-links line {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3;
}

.model-links .model-link-dotted {
    stroke-dasharray: 3 5;
}

.model-link-head {
    fill: rgba(255, 255, 255, 0.85);
}

.model-diagram text {
    font-family: var(--font-body);
    text-anchor: middle;
    dominant-baseline: central;
}

/* a question breaks its line: a halo of the band's own blue behind the letters (the band's colour where
   the questions sit, so it reads as a gap in the line, not a patch). 18 units = 17.6px at 1312px wide;
   more than 20 units and EN "Cost?" / "How well?" collide on their fanned lines (the gap scales with the picture) */
.model-asks text {
    fill: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 500;
    paint-order: stroke;
    stroke: var(--model-halo-fb);
    stroke: var(--model-halo);
    stroke-width: 12px;
    stroke-linejoin: round;
}

/* 761-899px draws the 1340-unit picture at 700-828px: 22 units keeps a question >= 11px rendered */
@media (min-width: 761px) and (max-width: 899px) {
    .model-asks text {
        font-size: 22px;
    }
}

.model-box text {
    fill: #fff;
    font-size: 30px;
}

.model-box-work text,
.model-box-product text {
    font-size: 38px;
}

.model-box-for rect {
    fill: #c2560f;
}

.model-box-ask rect {
    fill: #882aa3;
}

.model-box-ask .model-box-stack {
    fill: #640e7d;
}

.model-box-work rect {
    fill: #00853f;
}

.model-box-product rect {
    fill: #211f1e;
    stroke: rgba(255, 255, 255, 0.7); /* the near-black box keeps its edge on the deep blue */
    stroke-width: 3;
}

.model-box-version rect {
    fill: #5b7590; /* white on it 4.77:1 */
}

.model-box-result rect {
    fill: #7a7a1a;
}

.model-diagram-mobile {
    display: none;
}

@media (max-width: 760px) {
    .model-diagram-desktop {
        display: none;
    }

    .model-diagram-mobile {
        display: grid;
        gap: 24px;
        margin-block: 40px 16px;
    }

    .model-mobile-group {
        display: grid;
        gap: 8px;
    }

    .model-mobile-group-client,
    .model-mobile-group-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .model-mobile-group span,
    .model-mobile-group strong {
        display: grid;
        min-width: 0;
        min-height: 58px;
        place-items: center;
        padding: 8px 4px;
        border-radius: 8px;
        text-align: center;
        font-family: var(--font-body);
        font-size: clamp(1.0625rem, 4.5vw, 1.125rem);
        font-weight: 700;
        line-height: 1.15;
    }

    .model-mobile-group-client span {
        background: #c2560f;
        color: #fff;
    }

    .model-mobile-group-work strong {
        min-height: 64px;
        background: #00853f;
        color: #fff;
        font-size: clamp(1.875rem, 7.5vw, 2rem);
        font-kerning: none;
        letter-spacing: 0.06em;
    }

    .model-mobile-work-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .model-mobile-work-items span {
        background: #882aa3;
        color: #fff;
    }

    .model-mobile-group-results span {
        background: #7a7a1a;
        color: #fff;
    }
}

/* ---------- step sections (home) and how-blocks (use cases) ---------- */

.step,
.block {
    position: relative;
    padding-block: clamp(72px, 7vw, 128px);
    background: var(--paper);
}

.step + .step.has-shot {
    border-top: 1px solid var(--line);
}

.step-grid,
.block-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
}

.is-flipped .step-copy,
.is-flipped .block-copy {
    order: 2;
}

.step-copy .h2 {
    font-size: clamp(1.875rem, 1.2rem + 2vw, 2.5rem);
}

/* every step speaks in one voice: the same Archivo head and the same Roboto lines (Martin 2026-10-20: "why are
   the headings diff font/style"); a role named in a line is a quiet ink accent, not a bold run-in */
.step-line {
    margin-top: 16px;
    max-width: 30em;
}

.step-line strong {
    color: var(--ink);
    font-weight: inherit;
}

.step-copy .h2 + .step-line {
    margin-top: 24px;
}

.step-who {
    margin-top: 24px;
    color: var(--muted);
    font-size: var(--fs-small);
}

.step-who span {
    font-weight: 700;
}

.step-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    min-height: 44px;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    transition: opacity 0.2s;
}

.step-link:hover {
    opacity: 0.7;
}

/* a full-bleed slab of the step's colour carries the screen */
.slab {
    position: relative;
    isolation: isolate;
    padding: clamp(28px, 4vw, 64px) 0;
}

/* one island language for every screen (Martin 2026-10-20: "Bring back the islands, but make them heftier";
   the use-case hero oblong is the reference): the step's colour as a hefty oblong (a soft superellipse with a
   slight wobble, never a band with tails), wider and taller than its screen so the screen floats on its mass.
   Its outer side reaches the viewport edge and only kisses it; the inner side and the top and bottom close in
   full curves inside the whitespace. Each tone draws its own outline (--blob, viewBox 200 x 200, stretched),
   mirrored on a flipped step. The hero keeps the same oblong running off the viewport edge. */
/* the squarer oblong (n=4.6): the hero everywhere, every island once stacked, so the near end wraps the chip and
   the screen's corners */
:root {
    --blob-square: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M197.8%20102.0C197.6%20115.1%20197.4%20132.3%20197.1%20141.1C196.8%20149.9%20196.5%20150.8%20196.0%20154.8C195.6%20158.8%20195.2%20161.9%20194.6%20165.0C194.0%20168.1%20193.3%20170.8%20192.5%20173.4C191.7%20176.1%20190.7%20178.4%20189.5%20180.7C188.3%20182.9%20187.0%20184.9%20185.3%20186.7C183.6%20188.6%20181.7%20190.2%20179.3%20191.6C177.0%20193.0%20174.4%20194.1%20171.3%20195.1C168.2%20196.0%20164.9%20196.7%20160.6%20197.2C156.3%20197.7%20155.1%20197.9%20145.5%20198.0C135.8%20198.1%20116.8%20198.0%20102.5%20197.8C88.3%20197.6%2069.7%20197.2%2060.2%20196.8C50.7%20196.4%2049.8%20195.9%2045.6%20195.3C41.4%20194.7%2038.2%20194.1%2035.0%20193.4C31.7%20192.7%2028.9%20192.0%2026.2%20191.1C23.4%20190.2%2020.9%20189.2%2018.6%20188.0C16.3%20186.8%2014.1%20185.4%2012.2%20183.7C10.3%20182.0%208.5%20180.1%207.1%20177.8C5.7%20175.4%204.5%20172.9%203.7%20169.7C2.8%20166.5%202.3%20163.1%202.0%20158.8C1.7%20154.4%201.8%20153.0%202.1%20143.6C2.4%20134.1%203.1%20115.5%203.8%20102.0C4.5%2088.4%205.5%2070.9%206.6%2062.2C7.6%2053.5%208.8%2053.2%209.9%2049.6C11.1%2046.1%2012.3%2043.6%2013.5%2041.0C14.7%2038.4%2015.8%2036.2%2017.0%2034.0C18.1%2031.8%2019.2%2029.7%2020.4%2027.7C21.6%2025.6%2022.8%2023.6%2024.2%2021.7C25.6%2019.7%2027.1%2017.8%2028.9%2016.0C30.7%2014.2%2032.7%2012.4%2035.3%2010.9C37.9%209.3%2040.5%207.8%2044.4%206.6C48.3%205.4%2048.9%204.4%2058.6%203.6C68.3%202.8%2087.8%202.3%20102.5%202.0C117.3%201.8%20137.2%201.8%20147.2%202.0C157.2%202.2%20158.3%202.7%20162.6%203.4C166.9%204.2%20170.2%205.1%20173.2%206.3C176.3%207.4%20178.8%208.7%20181.1%2010.3C183.4%2011.8%20185.3%2013.5%20187.0%2015.4C188.8%2017.3%20190.2%2019.3%20191.4%2021.6C192.7%2023.8%20193.7%2026.2%20194.5%2028.9C195.4%2031.6%20196.0%2034.4%20196.5%2037.6C197.1%2040.8%20197.4%2044.1%20197.6%2048.2C197.9%2052.4%20198.0%2053.5%20198.0%2062.4C198.0%2071.4%20197.9%2088.8%20197.8%20102.0Z%27/%3E%3C/svg%3E");
}

.slab::before,
.hero-slab::before,
.door-end-shot::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(-1 * clamp(16px, 3vw, 48px));
    bottom: calc(-1 * clamp(16px, 3vw, 48px));
    left: calc(-1 * clamp(16px, 3vw, 44px));
    /* the screen column ends on the wrap's content edge: out by the wrap margin, the island's widest point
       lands on the viewport edge */
    right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2));
    background: var(--step);
    -webkit-mask: var(--blob) center / 100% 100% no-repeat;
    mask: var(--blob) center / 100% 100% no-repeat;
}

.slab,
.tone-planeeri .slab,
.door-end-shot {
    --blob: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M197.2%2098.3C196.7%20106.0%20196.1%20114.8%20195.2%20121.1C194.4%20127.3%20193.3%20131.3%20192.1%20135.7C190.9%20140.2%20189.5%20144.1%20188.0%20147.9C186.4%20151.6%20184.7%20155.1%20182.7%20158.3C180.8%20161.6%20178.7%20164.6%20176.4%20167.4C174.1%20170.2%20171.6%20172.9%20168.9%20175.3C166.2%20177.8%20163.3%20180.0%20160.2%20182.1C157.0%20184.2%20153.7%20186.1%20150.0%20187.8C146.3%20189.6%20142.5%20191.1%20138.1%20192.5C133.6%20193.8%20129.7%20195.0%20123.5%20195.9C117.2%20196.7%20108.3%20197.4%20100.6%20197.8C92.9%20198.1%2083.7%20198.2%2077.2%20198.0C70.7%20197.8%2066.4%20197.2%2061.6%20196.3C56.8%20195.4%2052.6%20194.2%2048.5%20192.6C44.5%20191.1%2040.9%20189.2%2037.5%20187.0C34.2%20184.9%2031.2%20182.4%2028.4%20179.7C25.6%20177.0%2023.2%20174.1%2020.9%20170.9C18.7%20167.8%2016.7%20164.5%2014.9%20160.9C13.1%20157.4%2011.5%20153.7%2010.0%20149.7C8.6%20145.7%207.3%20141.5%206.2%20136.9C5.1%20132.2%204.2%20128.1%203.5%20121.7C2.8%20115.2%202.2%20106.1%202.0%2098.3C1.8%2090.4%201.8%2081.1%202.1%2074.5C2.4%2067.9%203.1%2063.6%204.1%2058.8C5.1%2054.0%206.5%2049.7%208.2%2045.8C9.9%2041.9%2012.0%2038.4%2014.3%2035.2C16.6%2032.0%2019.3%2029.2%2022.2%2026.8C25.1%2024.3%2028.3%2022.2%2031.5%2020.4C34.8%2018.5%2038.3%2017.0%2041.8%2015.5C45.4%2014.1%2049.1%2013.0%2052.9%2011.8C56.8%2010.7%2060.7%209.7%2065.0%208.8C69.4%207.8%2073.1%206.9%2079.0%206.1C84.9%205.3%2093.3%204.5%20100.6%203.9C107.9%203.2%20116.7%202.6%20123.1%202.3C129.5%202.0%20133.9%201.8%20138.9%202.0C143.9%202.2%20148.5%202.6%20152.9%203.4C157.3%204.3%20161.5%205.5%20165.4%207.1C169.2%208.7%20172.8%2010.8%20176.0%2013.2C179.2%2015.6%20182.1%2018.5%20184.6%2021.6C187.1%2024.8%20189.2%2028.4%20191.0%2032.2C192.7%2036.0%20194.1%2040.2%20195.2%2044.6C196.2%2049.0%20196.9%2053.6%20197.4%2058.6C197.9%2063.7%20198.0%2068.2%20198.0%2074.8C198.0%2081.4%20197.7%2090.5%20197.2%2098.3Z%27/%3E%3C/svg%3E");
}

.tone-tee .slab {
    --blob: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M195.8%20102.5C196.6%20109.1%20197.4%20116.8%20197.7%20122.8C198.1%20128.8%20198.3%20133.5%20198.0%20138.5C197.7%20143.5%20197.1%20148.3%20196.0%20152.8C195.0%20157.3%20193.4%20161.6%20191.5%20165.5C189.5%20169.4%20187.1%20173.0%20184.3%20176.2C181.5%20179.4%20178.2%20182.2%20174.7%20184.7C171.2%20187.1%20167.3%20189.1%20163.2%20190.8C159.1%20192.5%20154.8%20193.8%20150.2%20194.9C145.7%20195.9%20141.0%20196.6%20136.1%20197.1C131.1%20197.6%20126.5%20197.9%20120.5%20198.0C114.4%20198.1%20106.6%20198.0%2099.8%20197.8C92.9%20197.5%2085.3%20197.2%2079.4%20196.6C73.5%20196.0%2069.2%20195.3%2064.6%20194.3C59.9%20193.3%2055.7%20192.2%2051.6%20190.8C47.5%20189.3%2043.6%20187.7%2040.0%20185.8C36.4%20183.8%2033.0%20181.6%2029.9%20179.1C26.8%20176.7%2023.9%20173.9%2021.3%20170.9C18.8%20167.9%2016.5%20164.6%2014.4%20161.1C12.4%20157.6%2010.6%20153.8%209.1%20149.9C7.6%20145.9%206.3%20141.7%205.3%20137.1C4.3%20132.6%203.5%20128.3%203.0%20122.5C2.4%20116.8%202.1%20109.2%202.0%20102.5C1.9%2095.8%202.0%2088.1%202.4%2082.3C2.8%2076.4%203.4%2072.1%204.3%2067.4C5.2%2062.8%206.3%2058.5%207.8%2054.4C9.2%2050.3%2010.9%2046.4%2012.8%2042.7C14.8%2039.1%2017.1%2035.7%2019.6%2032.5C22.1%2029.3%2024.9%2026.4%2027.9%2023.6C31.0%2020.9%2034.3%2018.5%2037.9%2016.2C41.5%2014.0%2045.3%2012.0%2049.4%2010.3C53.6%208.5%2057.9%207.0%2062.7%205.8C67.5%204.6%2072.1%203.6%2078.2%203.0C84.4%202.4%2092.6%202.0%2099.8%202.0C107.0%202.0%20115.2%202.3%20121.3%203.0C127.5%203.7%20132.0%204.7%20136.7%206.1C141.4%207.5%20145.7%209.3%20149.6%2011.3C153.5%2013.3%20157.0%2015.7%20160.2%2018.3C163.4%2020.9%20166.1%2023.8%20168.7%2026.9C171.2%2029.9%20173.4%2033.1%20175.4%2036.5C177.5%2039.8%20179.2%2043.3%20180.8%2046.8C182.5%2050.4%20183.9%2054.0%20185.3%2057.8C186.7%2061.6%20188.0%2065.4%20189.3%2069.6C190.5%2073.9%20191.7%2077.7%20192.8%2083.2C193.9%2088.7%20195.0%2095.9%20195.8%20102.5Z%27/%3E%3C/svg%3E");
}

.tone-mooda .slab {
    --blob: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M198.0%20102.2C198.0%20110.0%20197.9%20119.1%20197.5%20125.5C197.1%20131.8%20196.6%20135.7%20195.8%20140.2C195.0%20144.8%20194.0%20148.8%20192.7%20152.7C191.4%20156.6%20189.9%20160.1%20188.2%20163.5C186.4%20166.9%20184.3%20170.0%20182.0%20172.8C179.7%20175.7%20177.1%20178.3%20174.2%20180.6C171.3%20182.9%20168.1%20185.0%20164.6%20186.8C161.1%20188.7%20157.4%20190.2%20153.3%20191.5C149.3%20192.9%20145.0%20194.0%20140.2%20194.8C135.4%20195.7%20131.3%20196.4%20124.5%20196.9C117.7%20197.4%20107.8%20197.8%2099.5%20198.0C91.1%20198.1%2081.1%20198.2%2074.2%20198.0C67.2%20197.8%2062.9%20197.5%2057.8%20196.9C52.7%20196.4%2048.2%20195.6%2043.8%20194.6C39.4%20193.5%2035.3%20192.2%2031.5%20190.5C27.7%20188.8%2024.2%20186.8%2021.1%20184.5C18.0%20182.1%2015.1%20179.4%2012.8%20176.4C10.4%20173.3%208.4%20169.9%206.8%20166.2C5.2%20162.5%204.1%20158.5%203.3%20154.3C2.5%20150.0%202.1%20145.5%202.0%20140.7C1.9%20135.9%202.1%20131.6%202.4%20125.2C2.8%20118.8%203.4%20109.7%204.0%20102.2C4.6%2094.7%205.4%2086.1%206.2%2080.1C6.9%2074.1%207.7%2070.6%208.6%2066.4C9.5%2062.1%2010.3%2058.3%2011.3%2054.5C12.3%2050.7%2013.3%2047.1%2014.5%2043.6C15.8%2040.0%2017.1%2036.6%2018.8%2033.3C20.5%2030.0%2022.4%2026.8%2024.7%2023.8C27.1%2020.9%2029.7%2018.1%2032.8%2015.6C35.9%2013.2%2039.3%2010.9%2043.3%209.1C47.3%207.3%2051.6%205.8%2056.5%204.6C61.5%203.5%2065.9%202.7%2073.1%202.3C80.2%201.8%2090.7%201.8%2099.5%202.0C108.2%202.2%20118.5%202.8%20125.5%203.6C132.5%204.4%20136.7%205.5%20141.4%206.8C146.2%208.1%20150.4%209.6%20154.3%2011.3C158.2%2013.0%20161.7%2015.0%20165.0%2017.1C168.3%2019.2%20171.3%2021.5%20174.0%2024.0C176.8%2026.5%20179.3%2029.2%20181.5%2032.1C183.8%2035.0%20185.8%2038.0%20187.6%2041.4C189.3%2044.7%20190.9%2048.2%20192.2%2052.1C193.5%2055.9%20194.5%2059.9%20195.4%2064.4C196.3%2068.9%20196.9%2072.7%20197.3%2079.0C197.7%2085.3%20198.0%2094.5%20198.0%20102.2Z%27/%3E%3C/svg%3E");
}

.tone-juhi .slab {
    --blob: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M198.0%2099.7C197.9%20107.4%20197.4%20116.4%20196.5%20122.9C195.6%20129.3%20194.2%20133.7%20192.5%20138.2C190.9%20142.8%20188.8%20146.8%20186.5%20150.4C184.2%20154.1%20181.6%20157.2%20179.0%20160.1C176.3%20163.0%20173.4%20165.5%20170.5%20167.9C167.6%20170.2%20164.6%20172.3%20161.5%20174.3C158.5%20176.2%20155.4%20178.0%20152.2%20179.8C149.0%20181.6%20145.7%20183.3%20142.2%20184.9C138.7%20186.6%20135.1%20188.2%20131.0%20189.6C127.0%20191.1%20123.3%20192.5%20117.7%20193.7C112.1%20194.9%20104.3%20195.9%2097.4%20196.6C90.4%20197.4%2082.2%20197.9%2076.1%20198.0C70.0%20198.1%2065.6%20197.9%2060.8%20197.4C56.0%20196.8%2051.6%20195.8%2047.5%20194.5C43.4%20193.2%2039.5%20191.4%2036.0%20189.4C32.5%20187.4%2029.2%20185.0%2026.3%20182.3C23.3%20179.6%2020.7%20176.6%2018.3%20173.4C15.9%20170.1%2013.8%20166.6%2012.0%20162.9C10.1%20159.2%208.6%20155.2%207.2%20151.0C5.9%20146.8%204.8%20142.4%204.0%20137.5C3.2%20132.7%202.6%20128.2%202.3%20121.9C1.9%20115.6%201.8%20107.0%202.0%2099.7C2.2%2092.3%202.6%2083.8%203.3%2077.6C3.9%2071.4%204.9%2067.2%206.0%2062.6C7.2%2058.0%208.6%2053.9%2010.2%2050.0C11.8%2046.1%2013.6%2042.5%2015.7%2039.1C17.7%2035.7%2019.9%2032.6%2022.3%2029.7C24.8%2026.8%2027.4%2024.1%2030.2%2021.6C33.1%2019.1%2036.1%2016.9%2039.4%2014.8C42.6%2012.8%2046.1%2010.9%2049.9%209.3C53.6%207.7%2057.6%206.3%2062.0%205.2C66.5%204.1%2070.5%203.3%2076.4%202.8C82.3%202.2%2090.4%202.0%2097.4%202.0C104.3%202.0%20112.4%202.4%20118.3%203.0C124.1%203.6%20128.2%204.4%20132.6%205.5C137.0%206.6%20140.9%208.0%20144.7%209.5C148.5%2011.1%20152.0%2012.8%20155.4%2014.7C158.8%2016.7%20162.0%2018.7%20165.0%2021.0C168.1%2023.3%20171.0%2025.8%20173.7%2028.5C176.5%2031.2%20179.1%2034.1%20181.5%2037.3C184.0%2040.5%20186.3%2044.0%20188.3%2047.9C190.3%2051.7%20192.2%2055.9%20193.6%2060.6C195.0%2065.4%20196.2%2069.8%20197.0%2076.3C197.7%2082.8%20198.1%2091.9%20198.0%2099.7Z%27/%3E%3C/svg%3E");
}

/* one panel recipe: the use-case panel without a screen, the cross-link thumbnail */
.block-panel,
.other-thumb {
    background: linear-gradient(180deg, var(--slab-top-fb), var(--slab-bot-fb));
    background:
        radial-gradient(120% 60% at 30% 0%, color-mix(in oklch, var(--step) 18%, transparent), transparent 70%),
        linear-gradient(180deg in oklch, var(--slab-top), var(--slab-bot));
    box-shadow: inset 0 5px 0 var(--step), inset 0 6px 0 rgb(255 255 255 / 0.10);
}

.is-flipped .slab::before {
    left: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2));
    right: calc(-1 * clamp(16px, 3vw, 44px));
    transform: scaleX(-1);
}

.slab .screen {
    width: calc(100% - clamp(24px, 3vw, 48px));
}

.is-flipped .slab .screen {
    margin-left: auto;
}

/* no screen yet (home): the whole step becomes its colour slab (deep tone: white text), the sentence carries it.
   A use-case block keeps its column and shows a contained panel instead (.block-panel) */
.step.no-shot {
    background: var(--step-deep);
    color: var(--step-ink);
    overflow: hidden;
}

.step.no-shot .step-grid {
    grid-template-columns: minmax(0, 1fr);
}

.step.no-shot .step-copy {
    order: 0;
    position: relative;
}

/* the sentence large on the left, the working lines beside it: the slab is full, never half-empty */
.step.no-shot .step-copy {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-auto-rows: min-content;
    column-gap: clamp(32px, 5vw, 80px);
    align-content: start;
}

.step.no-shot .step-copy > .h2 {
    grid-column: 1;
    grid-row: 1 / span 6;
    margin: 0;
}

.step.no-shot .step-copy > :not(.h2) {
    grid-column: 2;
}

.step.no-shot .step-copy > .step-line:first-of-type {
    margin-top: 0.4em;
}

.step.no-shot .h2,
.step.no-shot .h3,
.step.no-shot .step-who,
.step.no-shot .step-link {
    color: inherit;
}

.step.no-shot .h2 {
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.125rem); /* stays under the H1 */
    font-stretch: 112%;
    line-height: 1.02;
}

/* Mõõda proof: its own ink band directly under the Mõõda slab */
.proof-band {
    padding-block: var(--section);
    background: var(--night);
    color: var(--on-dark-muted);
}

.proof {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.stat {
    display: flex;
    flex-direction: column;
    padding: 4px 24px 0 0;
    border-left: 0;
}

.stat + .stat {
    padding-left: 24px;
    border-left: 1px solid var(--line-dark);
}

.v2-stat-value {
    color: var(--on-dark);
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 800;
    font-stretch: 100%;
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-unit {
    margin-top: 6px;
    color: var(--on-dark);
    font-weight: 700;
}

.stat-label {
    margin-top: 6px;
    font-size: var(--fs-small);
    line-height: 1.45;
}

.proof .stats {
    grid-template-columns: minmax(0, 1fr);
}

.proof .stat,
.proof .stat + .stat {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    grid-template-rows: auto auto;
    column-gap: 28px;
    align-items: baseline;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
}

.proof .stat:first-child {
    padding-top: 0;
    border-top: 0;
}

.proof .v2-stat-value {
    grid-row: 1 / span 2;
    align-self: center;
    white-space: nowrap;
}

.proof .stat:nth-child(3) .v2-stat-value {
    font-size: clamp(1.5rem, 1rem + 1.4vw, 1.875rem);
}

.proof .stat-unit {
    margin-top: 0;
}

/* a word, not a number ("tuhandeid eurosid"): one step down, wraps between words */
.stat.is-word .v2-stat-value {
    font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.625rem);
    line-height: 1.1;
    white-space: normal;
    text-wrap: balance;
}

.stats-note {
    grid-column: 1 / -1;
    margin-top: 28px;
    color: var(--on-dark-muted);
    font-size: var(--fs-small);
}

.quote {
    margin: 0;
}

.quote blockquote p {
    color: var(--on-dark);
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1rem + 1vw, 1.5rem);
    line-height: 1.35;
    font-weight: 500;
    font-stretch: 106%;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.quote figcaption {
    margin-top: 18px;
    font-size: var(--fs-small);
}

.quote figcaption strong {
    color: var(--on-dark);
}

.logos {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 28px;
}

.logos img {
    width: auto;
    height: 30px;
    opacity: 0.85;
}

.logos li:nth-child(2) img {
    height: 44px;
}

/* ---------- use-case hero ---------- */

/* use-case roofs are longer than home's: one step under it in the same wide voice, in the
   same 7/5 split as home, so each roof sets in 2-3 lines at 1440 */
.hero-uc .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: 0;
}

/* the rail sits right under the slab, not after an empty band */
.hero-uc .rail {
    margin-top: clamp(32px, 2.5vw, 40px);
}

/* the page's promise outranks every other head, the close title included: line 1 at ~1.3x --fs-h2 at
   every width, line 2 home's step down at 80% white (the close title's .mark), no underline; each line
   balances on its own */
.h1-uc {
    font-size: clamp(2.625rem, 1.5rem + 2.6vw, 3.75rem);
}

.h1-uc .h1-line1,
.h1-uc .h1-line2 {
    display: block;
    text-wrap: balance;
}

.h1-uc .h1-line2 {
    margin-top: clamp(8px, 0.9vw, 14px);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-h1-line2);
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.hero-slab {
    position: relative;
    isolation: isolate;
    padding: clamp(28px, 3vw, 48px) 0 clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px);
    /* past the wrap (>1440) the slab still runs off the viewport edge, so the oblong's far end never shows */
    margin-right: calc(-1 * max(var(--gutter) + 10vw, (100vw - var(--wrap)) / 2 + 6vw));
}

.hero-slab {
    --blob: var(--blob-square);
}

/* the hero's oblong is taller than its slab and its far end lies past the viewport edge (the slab already runs
   off it); a squarer near end (n=4.6) wraps the chip and the screen's corners on the tall shift-schedule screen too */
.hero-slab::before {
    /* the % floors keep the near end's curve clear of the chip once the slab widens past the wrap */
    top: calc(-1 * max(clamp(16px, 2.8vw, 40px), 8%));
    bottom: calc(-1 * clamp(12px, 1.7vw, 24px));
    left: calc(-1 * max(clamp(16px, 3.3vw, 48px), 8%));
    right: 0;
}

.hero-slab .stage-item {
    position: relative;
}

/* no hero screen captured yet: the copy stands alone. A slab here could only repeat the H1
   (the step's one-liner is the rail's own line right below), so there is none. */
.hero-grid.is-solo {
    grid-template-columns: minmax(0, 1fr);
}

.hero-grid.is-solo .hero-copy {
    max-width: 52rem;
}

/* ---------- use-case sections ---------- */

.pain {
    padding-block: var(--section);
    background: var(--steel);
}

.pain-title {
    max-width: 16em;
}

/* ---------- how it works: one numbered walk ---------- */

.how {
    padding-block: var(--section) clamp(24px, 3vw, 48px);
    background: var(--paper);
}

/* the four-step mark above the head, home's door bar: the walk below wears these colours */
.how .door-bar span {
    flex: 0 0 72px;
    height: 8px;
    border-radius: 4px;
}

.how-title {
    margin-top: 28px;
}

.how-steps {
    margin-top: clamp(24px, 3vw, 48px);
}

/* each block wears its own step (tone-* on the li); the copy column is the same every time, so the
   numbers stack on one line that walks the steps' colours */
.how .block {
    padding-block: clamp(32px, 3vw, 48px);
    background: none;
}

.how .slab {
    padding-block: clamp(24px, 2.5vw, 40px);
}

.how .slab::before {
    top: calc(-1 * clamp(8px, 1.2vw, 16px));
    bottom: calc(-1 * clamp(8px, 1.2vw, 16px));
}

.how .block:first-child {
    padding-top: clamp(16px, 2vw, 32px);
}

.how .block::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--step);
}

.how .block:first-child::before {
    top: calc(clamp(16px, 2vw, 32px) + 20px);
}

.how .block:last-child::before {
    bottom: auto;
    height: calc(clamp(32px, 3vw, 48px) + 20px);
}

.how .block-grid {
    align-items: start;
}

.block-copy {
    position: relative;
    padding-left: 64px;
}

.block-num {
    position: absolute;
    top: 2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--step-deep);
    box-shadow: 0 0 0 6px var(--paper);
    color: var(--on-dark);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.block-copy .h3 {
    font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2rem);
    line-height: 1.12;
}

.block-body {
    margin-top: 18px;
    max-width: 32em;
}

/* one screen scale across the walk: a wide capture fills the column, a squarer one is capped by height */
.how .slab .screen {
    width: min(calc(100% - clamp(24px, 3vw, 48px)), calc(420px * var(--shot-ar, 1.6)));
}

.views {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.views dt {
    color: var(--muted);
    font-size: var(--fs-label);
    font-weight: 700;
}

.views dd {
    color: var(--ink);
    font-weight: 600;
}

/* no screen yet: the step's panel (the slab recipe, contained in the column) carries what the role
   sees and decides, large in white; never a full-bleed wall, never an empty frame */
.views.block-panel {
    align-content: center;
    gap: 0;
    min-height: clamp(240px, 22vw, 340px);
    margin: 0 0 0 clamp(40px, 6vw, 96px);
    padding: calc(clamp(28px, 3.5vw, 52px) + 5px) clamp(28px, 3.5vw, 52px) clamp(28px, 3.5vw, 52px);
    border-top: 0;
    border-radius: 30px;
    color: var(--on-dark);
}

.block-panel > div + div {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / 0.24);
}

.block-panel dt {
    color: rgb(255 255 255 / 0.86);
}

/* the mooda glow lifts the panel top: 86 % white sampled 4.28:1 there (390px), full white 5.16:1 */
.tone-mooda .block-panel dt {
    color: var(--on-dark);
}

.block-panel dd {
    margin-top: 8px;
    color: var(--on-dark);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    font-stretch: 104%;
    line-height: 1.3;
    text-wrap: balance;
}

.v2-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-dark);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
}

.v2-chip-demo {
    background: var(--mooda-deep);
    color: var(--on-dark);
}

.guard,
.impact {
    padding-block: var(--section);
    background: var(--steel);
}

/* the guard is one contained card in the shared card language: scene beside its consequence */
.guard-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 64px);
    margin-top: clamp(32px, 3.5vw, 48px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--step);
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.guard-scene {
    color: var(--ink);
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.3;
    text-wrap: balance;
}

/* the punch line is a statement, not a control: display type on the card, under a hairline */
.guard-punch {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    font-stretch: 104%;
    line-height: 1.3;
}

.guard-note {
    margin-top: 20px;
    color: var(--muted);
}

/* story pages: what the owner gets, as the guard's card under the role cards */
.owner-card {
    align-items: start;
}

.owner-lines {
    display: grid;
    gap: 16px;
}

.owner-lines li {
    color: var(--ink);
    font-weight: 600;
}

.owner-lines li + li {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* the register / demo-data note under a story H1 */
.hero-caption {
    margin-top: 12px;
    color: var(--on-dark-muted);
    font-size: var(--fs-label);
    font-weight: 700;
}

.product-start {
    margin-top: 16px;
    color: var(--ink);
    font-weight: 800;
}

/* the impact steps take home's scene-card recipe; a step still to come wears Mõõda (tone-mooda) */
.impact-steps {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
}

.impact-steps li {
    padding: 24px;
    border-radius: var(--radius);
    border-top: 4px solid var(--step);
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.impact-title {
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 800;
}

.impact-title .v2-chip {
    margin: 8px 0 0;
    display: flex;
    width: fit-content;
}

.impact-steps p {
    margin-top: 10px;
}

/* the one dark band on a use-case page: the Mõõda → Juhi strips, then the proof row under them */
.measure {
    padding-block: var(--section);
    background: var(--night);
    color: var(--on-dark-muted);
}

.measure .h2 {
    max-width: 22em;
    color: var(--on-dark);
}

.strips {
    margin-top: 40px;
    display: grid;
    gap: 12px;
}

.strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: var(--radius);
    overflow: hidden;
}

.strip-cell {
    padding: 22px 24px;
    background: transparent;
}

/* what was measured sits on the band itself, framed by a hairline: no filled box behind text */
.strip-cell:first-child {
    border: 1px solid var(--line-dark);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}

.strip-cell p:last-child {
    color: var(--on-dark);
    font-weight: 600;
    margin-top: 8px;
}

/* the decision wears the page's step, not a fixed alarm red */
.strip-decide {
    background: var(--step-deep);
}

.strip-decide p,
.strip-decide p:last-child {
    color: var(--on-dark);
}

.strip-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--fs-label);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.strip-label .v2-chip {
    margin-left: 4px;
}

.fence {
    margin-top: 28px;
    color: var(--on-dark);
    font-weight: 600;
    max-width: 36em;
}

.measure .proof {
    margin-top: clamp(48px, 5vw, 80px);
    padding-top: clamp(40px, 4vw, 64px);
    border-top: 1px solid var(--line-dark);
}

/* no measured numbers for this page: the quote stands alone at a reading measure */
.proof.is-quote-only {
    grid-template-columns: minmax(0, 1fr);
}

.proof.is-quote-only .quote {
    max-width: 46rem;
}

.others {
    padding-block: var(--section);
    background: var(--steel);
}

/* on the ink hero the tab needs a lighter ink to read as a tab */
.stage .shot-chip {
    background: var(--night-2);
}

/* the drill-down is illustrative: the same tab as the hero's demo screen, over the card's text edge */
.split > .shot-chip {
    left: clamp(24px, 3vw, 40px);
}

.others-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.other {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 16px;
    padding-bottom: 24px;
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.other:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(11, 20, 34, 0.06), 0 24px 44px -18px rgba(11, 20, 34, 0.35);
}

.other-thumb {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    height: 220px;
    padding: 34px 28px 0;
    overflow: hidden;
}

/* the frame anchors the demo-data tab on the screen's top edge, as on every other screen */
.other-frame {
    position: relative;
    display: block;
}

.other-thumb img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    box-shadow: var(--shadow-screen);
}

.other-text {
    display: grid;
    gap: 6px;
    padding: 22px 0 0 28px;
}

.other.no-thumb .other-text {
    padding-top: 28px;
}

.other.no-thumb .other-title::before {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.45em;
    border-radius: 2px;
    background: var(--step);
}

.other-title {
    font-size: var(--fs-h3);
    font-weight: 800;
    font-stretch: 104%;
    line-height: 1.2;
}

.other-body {
    color: var(--body);
}

.other .btn-arrow {
    align-self: end;
    margin-right: 28px;
    width: 28px;
    height: 28px;
}

/* ---------- FAQ ---------- */

.faq {
    padding-block: var(--section);
    background: var(--paper);
}

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
}

.faq-item {
    border-top: 1px solid var(--line);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 18px 0;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    width: 28px;
    height: 28px;
    flex: none;
    padding: 4px;
    border-radius: 50%;
    background: var(--steel);
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    transition: transform 0.3s var(--ease-out), background-color 0.2s;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: var(--mooda);
}

.faq-item summary:hover .faq-icon {
    background: var(--mooda);
}

@supports (interpolate-size: allow-keywords) {
    .faq {
        interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s var(--ease-out), content-visibility 0.3s allow-discrete;
    }

    .faq-item[open]::details-content {
        height: auto;
    }
}

.faq-item p {
    max-width: 40em;
    padding: 0 48px 26px 0;
}

/* ---------- close ---------- */

/* the Tark Platvorm head's blue band (.door-head recipe; the section carries .tone-planeeri for its stops),
   so the green-to-gold booking pill reads on it instead of melting into a green band */
.close {
    padding-block: var(--section);
    color: var(--on-dark);
    background: linear-gradient(180deg, var(--card-top-fb), var(--card-bot-fb));
    background:
        radial-gradient(120% 60% at 30% 0%, color-mix(in oklch, var(--step) 18%, transparent), transparent 70%),
        linear-gradient(180deg in oklch, var(--card-top), var(--card-bot));
}

/* the primary pill on the blue band: a white rim keeps its edge */
.close .btn-primary {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5), 0 14px 30px -14px rgba(11, 20, 34, 0.6);
}

.close .contact {
    border-top-color: rgba(255, 255, 255, 0.3);
}

.close-grid {
    display: grid;
    /* form column holds the one-line lead (ET 409 / EN 425px at 17px) from 1280 up */
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(26rem, 39vw, 31rem));
    gap: clamp(40px, 4vw, 96px);
    align-items: start;
}

.close-title {
    color: var(--on-dark);
    font-size: clamp(2.5rem, 1.2rem + 3.4vw, 3.5rem); /* ET "Hakkame mõõtma." holds one line from 1200 up */
    line-height: 1.02;
    font-stretch: 108%;
    letter-spacing: -0.03em;
}

.mark {
    color: rgba(255, 255, 255, 0.8);
}

.close-lead {
    margin-top: 24px;
    color: var(--on-dark);
    font-size: var(--fs-lead);
    font-weight: 600;
    max-width: 28em;
}

.close-main > .btn {
    margin-top: 36px;
}

.contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 40px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.contact-name {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.25rem;
}

/* the close's card: a 2x2 grid (subgrid rows) so name sits on the email's line and role on
   the phone's; one size, one line-height, all full white (Martin 2026-10-20) */
.close .contact {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 0;
    align-items: baseline;
    font-size: var(--fs-body);
    line-height: 1.5;
}

.close .contact > div,
.close .contact-list {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: 0;
}

.close .contact-name,
.close .contact-role,
.close .contact-list a {
    color: var(--on-dark);
    font-size: inherit;
}

.close .contact-name {
    font-weight: 700;
}

.close .contact-role {
    font-weight: 500;
}

/* a full-line box: the link's tap target and rect match its row */
.close .contact-list a {
    display: inline-block;
}

@media (max-width: 479px) {
    .close .contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .close .contact-list {
        margin-top: 12px;
    }
}

.contact-role {
    color: var(--muted);
    font-size: var(--fs-small);
}

.contact-list {
    display: grid;
    gap: 2px;
}

.contact-list a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.close .contact-list a {
    color: var(--on-dark); /* full white: AA on every stop of the blue band */
}

.close .contact-list a:hover {
    text-decoration: underline;
}

.lead-form {
    padding: clamp(24px, 2.4vw, 32px);
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* the card wears the brand's four-step bar and the display face, so it reads as Tark's, not a bare form */
.lead-form .door-bar span {
    flex: 0 0 40px;
    height: 6px;
    border-radius: 3px;
}

.lead-form-title {
    margin-top: 18px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* one line from 1280 up: ET 409 / EN 425px at 17px in a 432px box */
.lead-form-lead {
    margin-top: 8px;
    font-size: 1.0625rem;
}

.field {
    display: grid;
    gap: 6px;
    align-content: start;
    margin-top: 18px;
}

/* Paired fields share one label track and one input track (subgrid), so the inputs in a row
   start on the same line and keep the same height even when a label wraps or a password
   manager injects an extra node into one field. */
.field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 16px;
    align-items: start;
}

.field-row > .field {
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-items: end;
}

.field label {
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 700;
}

.req {
    color: var(--muted);
    font-weight: 500;
}

.field input,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid #dfe4ea;
    border-radius: 12px;
    background: #f6f8fa;
    color: var(--ink);
    font: inherit;
    font-size: 1.0625rem;
    caret-color: var(--tee);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.field input {
    height: 52px;
    margin: 0;
    line-height: 1.5;
    appearance: none;
}

.field textarea {
    margin: 0;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(19, 160, 205, 0.35);
}

.field input:user-invalid {
    border-color: var(--juhi);
}

.lead-form .btn {
    margin-top: 24px;
    width: 100%;
    justify-content: center;
}

.lead-form-result:not(:empty) {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(99, 163, 92, 0.16);
    color: var(--ink);
    font-weight: 600;
}

.lead-form-result.is-error {
    background: rgba(222, 45, 45, 0.12);
}

.lead-form.is-sent .field,
.lead-form.is-sent .field-row,
.lead-form.is-sent .btn {
    display: none;
}

/* ---------- footer ---------- */

.foot {
    background: var(--night);
    color: var(--on-dark-muted);
    padding-top: 72px;
    font-size: var(--fs-small);
}

.foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    gap: 40px;
}

.foot-brand img {
    width: auto;
    height: 36px;
}

.foot-brand p {
    margin-top: 16px;
    max-width: 20em;
}

.foot-title {
    color: var(--on-dark);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.foot-list {
    display: grid;
    gap: 6px;
}

.foot-more {
    margin-top: 20px;
}

.foot-list a {
    color: var(--on-dark-muted);
    text-decoration: none;
}

.foot-list a:hover {
    color: var(--on-dark);
}

.foot-pdf-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* the email field shrinks; the row never pushes past the gutter */
    gap: 8px;
    margin-top: 28px;
}

.foot-pdf-form .foot-title {
    margin-bottom: 0;
}

.foot-pdf-row {
    display: flex;
    gap: 8px;
}

.foot-pdf-row input {
    min-width: 0;
    flex: 1;
    padding: 10px 18px;
    border: 1px solid var(--on-dark-muted);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.foot-legal {
    margin-top: 56px;
    padding-block: 24px;
    border-top: 1px solid var(--line-dark);
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .bar-nav {
        display: none;
    }

    .bar-inner .btn {
        margin-left: auto;
    }

    .bar-menu {
        display: block;
    }

    .stage {
        margin-right: calc(-1 * var(--gutter) - 4vw);
    }

    .proof,
    .close-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .impact-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    :root {
        --bar: 64px;
        --dock: 40px;
    }

    .door-end-grid,
    .door-pilot .door-end-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bar-inner {
        gap: 12px;
    }

    .bar-brand img {
        height: 28px;
    }

    .hero-grid,
    .step-grid,
    .block-grid,
    .guard-card,
    .faq-grid,
    .foot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-grid,
    .hero-home .hero-grid,
    .hero-uc .hero-grid {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .is-flipped .step-copy,
    .is-flipped .block-copy {
        order: 0;
    }

    /* phone-led stack: one screen leads, one peeks */
    .stage {
        margin-right: calc(-1 * var(--gutter) - 24vw);
    }

    .stage-tablet {
        left: 0;
        width: 34%;
    }

    .stage-phone {
        left: 36%;
        width: 14%;
    }

    .hero-slab {
        margin-right: calc(-1 * var(--gutter));
        padding-left: 20px;
    }

    /* stacked, the near end can't reach further left; extra headroom keeps the chip on colour */
    .hero-slab::before {
        top: -30px;
    }

    /* stacked: the whole island stays on screen, 4px off the viewport edge on the screen's open side; the squarer
       oblong keeps the screen's corners and its chip on colour in the narrow box */
    .slab::before,
    .door-end-shot::before {
        top: -14px;
        bottom: -14px;
        left: -6px;
        right: calc(-1 * var(--gutter) + 4px);
        -webkit-mask-image: var(--blob-square);
        mask-image: var(--blob-square);
    }

    .is-flipped .slab::before {
        left: calc(-1 * var(--gutter) + 4px);
        right: -6px;
    }

    .slab .screen {
        width: calc(100% - 16px);
    }

    /* the walk stacks: number beside its title, copy, then the screen run out to the gutter for legibility */
    .how .block::before {
        display: none;
    }

    .how .block-grid {
        gap: 20px;
    }

    .block-copy {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        padding-left: 0;
    }

    .block-copy > * {
        grid-column: 1 / -1;
    }

    .block-num {
        position: static;
        grid-column: 1;
        box-shadow: none;
    }

    .block-copy > .h3 {
        grid-column: 2;
    }

    .how .slab {
        margin-inline: calc(-1 * var(--gutter) + 8px);
    }

    /* the slab already runs out to 8px from the viewport: the island stays 4px inside it */
    .how .slab::before {
        top: -16px;
        bottom: -16px;
        left: -4px;
        right: -4px;
    }

    .how .slab .screen {
        width: calc(100% - 24px);
    }

    .views.block-panel {
        min-height: 0;
        margin-left: 0;
    }

    .rail-list {
        gap: 3px;
    }

    .rail-step a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 14px 10px;
        border-radius: 0;
    }

    .rail-word {
        font-size: 0.9375rem;
    }

    .rail-line {
        display: none;
    }

    .scenes {
        grid-template-columns: minmax(0, 1fr);
    }

    .sibling-text {
        font-size: var(--fs-body);
    }

    .scene:nth-child(n) {
        margin-top: 0;
    }

    .split-bar {
        flex-direction: column;
        gap: 3px;
    }

    .seg {
        flex: none;
        flex-direction: row;
        align-items: baseline;
        min-height: 0;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 16px;
        width: 100%;
    }

    .seg-pct,
    .seg-label {
        white-space: nowrap;
    }

    .seg:first-child,
    .seg:last-child {
        border-radius: 8px;
    }

    .seg-pct {
        font-size: 1.5rem;
    }

    .stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .stat,
    .stat + .stat {
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid var(--line-dark);
    }

    .strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .strip-cell:first-child {
        border-right: 1px solid var(--line-dark);
        border-bottom: 0;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .others-grid,
    .impact-steps,
    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .step.no-shot .step-copy {
        grid-template-columns: minmax(0, 1fr);
    }

    .step.no-shot .step-copy > .h2,
    .step.no-shot .step-copy > :not(.h2) {
        grid-column: 1;
        grid-row: auto;
    }

    .step.no-shot .step-copy > .h2 {
        margin-bottom: 20px;
    }

    .proof .stat,
    .proof .stat + .stat {
        grid-template-columns: minmax(0, 1fr);
    }

    .proof .v2-stat-value {
        grid-row: auto;
    }

    .faq-item p {
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-h1: 2.75rem; /* fitted at 390: each H1 line wraps at most once */
    }

    /* icon-only at this width, but the label stays the button's accessible name */
    .bar-menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .bar-menu-button {
        padding: 0;
        justify-content: center;
        width: 44px;
    }

    /* home first viewport: roof, lead, CTAs, then the four-segment rail, then the phone-led stage */
    .hero-home {
        display: flex;
        flex-direction: column;
    }

    .hero-home .hero-grid {
        display: contents;
    }

    .hero-home .hero-copy,
    .hero-home .stage {
        padding-inline: var(--gutter);
    }

    .hero-home .hero-copy {
        order: 1;
        padding-bottom: 0;
    }

    .hero-home > .wrap {
        order: 2;
    }

    .hero-home .stage {
        order: 3;
        margin: 28px 0 0;
        padding-right: 0;
    }

    .hero-home .hero-edge {
        order: 4;
    }

    .hero-home .lead {
        margin-top: 18px;
        max-width: 30ch;
        font-size: 1.0625rem;
    }

    .hero-home .actions {
        margin-top: 24px;
        gap: 10px;
    }

    .actions .btn {
        width: 100%;
        justify-content: center;
    }

    .logos {
        gap: 20px;
    }

    /* phone-led stack: the hand-held screen leads, large and in flow; the desktop sits behind it
       up and to the right, cut by the screen edge. Without a phone (EN) the tablet leads. */
    .stage {
        margin-right: calc(-1 * var(--gutter));
        padding-bottom: 0;
    }

    .stage-desktop {
        position: absolute;
        top: 30px;
        left: 30%;
        width: 112%;
    }

    .stage-tablet {
        position: relative;
        left: 0;
        bottom: auto;
        width: 80%;
        margin-top: 64px;
    }

    .stage:has(.stage-phone) .stage-tablet {
        position: absolute;
        left: auto;
        right: 4%;
        bottom: 6%;
        width: 44%;
        margin-top: 0;
    }

    /* the phone ends where the tablet starts, so the kiosk greeting ("Tere, Kati") stays readable */
    .stage-phone {
        position: relative;
        left: 3%;
        bottom: auto;
        width: 47%;
        margin-top: 12px;
    }

    .stage::before {
        inset: -4% -6% -6% -10%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .v2 *,
    .v2 *::before,
    .v2 *::after {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }
}

/* ---------- integrations: the data block on home (Andmed -> Tark -> Info, et otsustada) ----------
   Sits inside the Tark Platvorm door after the four steps, before the pilot. Night band like the
   Mõõda proof. The deck's "Koondame andmed" slide: source tiles cool dark grey (the step's tone
   kept as a 4px top stripe), the Tark hub an orange box with the mark in white. Outcomes: one seat each,
   gray-100 cards (the light the data turns into): the actor in its deep tone behind a tone dot, a short headline
   in ink; BI its own steel-blue box below.
   Text on the dark fills is white (headings full, body at 82 %); on the white cards ink. */
.integr {
    padding-block: var(--section);
    background: var(--night);
    color: var(--on-dark);
}

/* the same short four-tone bar as the door head and the pilot */
.integr-head .door-bar span {
    flex: 0 0 72px;
    height: 8px;
    border-radius: 4px;
}

.integr-title {
    margin-top: 28px;
    max-width: 18em;
    color: var(--on-dark);
    font-size: var(--fs-h2);
    line-height: 1.06;
    font-stretch: 108%;
}

.integr .section-lead {
    color: rgba(255, 255, 255, 0.82);
}

.integr-flow {
    display: grid;
    grid-template-columns: minmax(0, 6fr) auto minmax(0, 2.4fr) auto minmax(0, 4fr);
    gap: clamp(14px, 1.6vw, 24px);
    align-items: center;
    margin-top: clamp(40px, 5vw, 72px);
}

.integr-label {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.integr-sources,
.integr-outcomes {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.integr-sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integr-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 20px 20px 22px;
    border-radius: var(--radius);
    /* Martin 2026-10-20: #3c3333 read brown on the night band -> a neutral cool grey, no warm cast */
    background: #2c3239;
    background: oklch(0.32 0.012 250);
    box-shadow: inset 0 4px 0 var(--step), inset 0 5px 0 rgb(255 255 255 / 0.10);
    color: var(--on-dark);
    overflow-wrap: anywhere;
}

.integr-tile-label {
    font-weight: 800;
    font-size: 1.125rem;
    font-stretch: 108%;
    line-height: 1.2;
}

.integr-tile-systems {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.35;
}

/* the connectors: one quiet arrow into Tark and one out of it; they turn down when the flow stacks */
.integr-arrow {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.82);
}

.integr-arrow svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the hub: the deck's Tark box, an orange panel (its sampled stops) carrying the Tark mark in white */
.integr-hub {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(32px, 3.4vw, 48px) clamp(14px, 1.4vw, 22px);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f05c12, #fb843e);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

/* the colour mark as a white silhouette (the deck's single-colour Tark), not a second raster */
.integr-hub img {
    width: auto;
    max-width: 100%;
    height: clamp(48px, 4.4vw, 64px);
    filter: brightness(0) invert(1);
}

.integr-outcome {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 20px;
    border-radius: var(--radius);
    background: #f3f4f6; /* Martin 2026-10-20: gray-100, not pure white */
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 16px 32px -18px rgba(0, 0, 0, 0.75);
}

/* the seat in its step's deep tone behind a dot of the bright tone. On the gray-100 fill the deep tones fall under
   AA, so three are pulled down in oklch L at the same hue: on #f3f4f6 planeeri 4.65 / tee 4.63 / mooda 4.62 /
   juhi (unchanged deep tone) 4.60 :1 */
.integr-outcome.tone-planeeri { --outcome-who: #0573b2; } /* oklch(0.534 0.129 243.6) */
.integr-outcome.tone-tee { --outcome-who: #347d2f; } /* oklch(0.526 0.135 142.4) */
.integr-outcome.tone-mooda { --outcome-who: #8e6800; } /* oklch(0.540 0.116 84.9) */

.integr-outcome-who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--outcome-who, var(--step-deep));
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.integr-outcome-who::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--step);
}

.integr-outcome-text {
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 800;
    font-stretch: 108%;
    line-height: 1.25;
}

/* BI: drill-downs and detail, set apart from the seats on the band's steel blue */
.integr-bi {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: #26496b;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}

.integr-bi-title {
    color: var(--on-dark);
    font-size: 1.125rem;
    font-weight: 800;
    font-stretch: 108%;
    line-height: 1.25;
}

.integr-bi-text {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--fs-small);
    line-height: 1.45;
}

.integr-more {
    margin-top: clamp(28px, 3vw, 44px);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-body);
    font-weight: 400;
    text-align: center;
}

@media (max-width: 1100px) {
    .integr-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .integr-sources {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .integr-arrow svg {
        transform: rotate(90deg);
    }

    .integr-hub {
        padding: 24px 20px;
    }

    .integr-hub img {
        height: 56px;
    }

    .integr-outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .integr-sources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integr-outcomes {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .integr-sources {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- modules (home, inside the Tark Platvorm door) ----------
   What you buy: six compact cards, three per row, one entry point each to its use-case page (the role
   detail lives there). Each card is the rail card recipe (the tone's own dark stops
   from .tone-*, interpolated in oklch with a hex fallback, a soft tone glow at the top, the full tone as a
   4px stripe with a lit hairline). All text on the card is white. A card with a page is one link (the link
   stretches over it); hovering it swaps in the brighter stops, like a rail card. The grid sits on the page's
   white below the blue Platvorm band, so the blue Tark Aeg and Müük cards never melt into it. The minor card (materials) is quieter: a steel card with ink text and a smaller name. */

.modules {
    padding-block: clamp(48px, 5vw, 80px) clamp(24px, 3vw, 48px);
    background: var(--paper);
}

.modules-title {
    font-size: clamp(1.875rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.06;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
    margin-top: clamp(28px, 3.5vw, 48px);
}

.module {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 24px 24px 18px;
    border-radius: var(--radius);
    color: var(--on-dark);
    overflow-wrap: break-word;
    background: linear-gradient(180deg, var(--card-top-fb), var(--card-bot-fb));
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in oklch, var(--step) 16%, transparent), transparent 70%),
        linear-gradient(180deg in oklch, var(--card-top), var(--card-bot));
    box-shadow: inset 0 4px 0 var(--step), inset 0 5px 0 rgb(255 255 255 / 0.10), var(--shadow-card);
}

.module.has-link:hover,
.module:has(.module-link:focus-visible) {
    --card-top: var(--card-top-hi);
    --card-bot: var(--card-bot-hi);
    --card-top-fb: var(--card-top-hi-fb);
    --card-bot-fb: var(--card-bot-hi-fb);
}

.module-name {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: 800;
    font-stretch: 108%;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.module-sub {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.module-chip {
    background: rgba(255, 255, 255, 0.16);
    font-family: var(--font-body);
}

.module-promise {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

.module-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    color: var(--on-dark);
    font-weight: 800;
    text-decoration: none;
}

/* the whole card is the link's hit area; the focus ring draws round the card */
.module-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.module-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.module:has(.module-link:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.module.has-link:hover .btn-arrow,
.module-link:focus-visible .btn-arrow {
    transform: translateX(4px);
}

/* the minor card reads as a side note, not a sixth product: a steel card with a slate stripe, ink text
   and a smaller name, so it never wears the same green as Retseptitootmine */
.module.is-minor {
    gap: 10px;
    padding: 22px 22px 18px;
    color: var(--ink);
    background: var(--steel);
    box-shadow: inset 0 3px 0 var(--muted), inset 0 0 0 1px var(--line);
}

.module.is-minor .module-name {
    font-size: 1.125rem;
}

.module.is-minor .module-promise {
    font-size: var(--fs-small);
}

.module.is-minor .module-chip {
    background: var(--ink);
    color: var(--on-dark);
}

/* /moodulid: "Tehtud lahendused" sits under the two products as references (steel minor cards, no link) */
.delivered-title {
    margin-top: clamp(48px, 5vw, 80px);
}

@media (max-width: 900px) {
    .modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .modules-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}