/* KESTIR site - shared layer. Round-2 direction D kept (mono caps labels, blur-in, minimal nav, giant wordmark close),
   plus the round-3 scene: pinned stage, captions. Fonts are self-hosted (fonts/fonts.css). */
:root {
  --bg: #060606;
  --bg-2: #101010;
  --light: #E4E2DD;
  --paper: #F6F5F1;
  --light-ink: #0B0B0C;
  --ink: #F1EDE4;
  --ink-2: #8F8A80;
  --ink-3: #4A4844;
  --line: rgba(241, 237, 228, 0.14);
  --accent: #C9B08A;
  --glass: rgba(241, 237, 228, 0.035);
  --font-display: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  --display-weight: 500;
  --display-track: -0.035em;
  --gutter: clamp(16px, 4.4vw, 64px);
  --nav-h: 74px;
  /* 10 Oct (Adam): the dark card sits on the paper with the same inset all round (--frame), and the bar is measured from the
     card's corner: the KESTIR mark as far down from the card's top edge as it is in from its left edge (--nav-in), the menu
     button the same from the top and the right. The card's own content keeps to the page gutter, never closer than the mark. */
  --frame: 12px;
  --nav-in: clamp(18px, 2.2vw, 30px);
  --card-pad: max(calc(var(--gutter) - var(--frame)), var(--nav-in));
  /* the hero card: KESTIR's own dark, a little light at the top so the stone reads, black at the bottom */
  --hero-grad: radial-gradient(120% 90% at 50% 0%, #181816 0%, #0E0E0D 45%, #060606 100%);
  /* the colours of the light sections: tinted panels and three status colours (scale.com's simplified data) */
  --c-blue: #2F52C8; --c-amber: #A8782A; --c-green: #2D7A4F;
  --tint-blue: #E8EDFC; --tint-sand: #F3ECDF; --tint-green: #E4F1E8;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* 16 Oct (Adam: the site is buggy on a phone because the browser's bottom bar hides on every scroll down and comes back on
   every scroll up): on a touch screen the page scrolls inside body, not the document. A browser hides its toolbars only for
   the document's own scroll, so the bar stays where it is and the viewport never changes height under the story. */
html.barlock { height: 100%; overflow: hidden; }
html.barlock body { height: 100%; overflow-x: hidden; overflow-y: auto; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; }

/* mono caps: every small label, eyebrow, CTA and meta line */
.mono { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.link { display: inline-flex; align-items: center; gap: 10px; position: relative; padding: 6px 0; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.link:hover::after { transform: scaleX(0); }
.link .arr { display: inline-block; transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.link:hover .arr { transform: translateX(4px); }
/* buttons (15 Oct evening, round 4; Adam: the buttons and their arrows are not nice): a solid gold pill without an arrow, the
   sans in regular case, a soft shimmer across it on hover (lepshee's shiny-cta, done in CSS); the second action is a ghost pill */
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; white-space: nowrap; color: var(--ink); border: 1px solid rgba(241, 237, 228, .18); background: rgba(241, 237, 228, .05); overflow: hidden; transition: background .35s, color .35s, border-color .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.pill:hover { background: rgba(241, 237, 228, .11); border-color: rgba(241, 237, 228, .32); }
.pill:active { transform: scale(.98); }
.pill.solid { background: var(--accent); color: #15120D; border-color: var(--accent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pill.solid::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); transform: translateX(-110%); pointer-events: none; }
.pill.solid:hover { background: #D8C2A0; border-color: #D8C2A0; }
.pill.solid:hover::after { transition: transform .9s cubic-bezier(.2, .7, .2, 1); transform: translateX(110%); }
.paper .pill.ghost, .light .pill.ghost { color: var(--light-ink); border-color: rgba(11, 11, 12, .18); background: rgba(11, 11, 12, .03); }
.paper .pill.ghost:hover, .light .pill.ghost:hover { background: rgba(11, 11, 12, .07); border-color: rgba(11, 11, 12, .32); }
/* the dark card inside a paper frame (the inner pages' hero) keeps the light ghost pill: the frame's .paper rule must not reach it */
.paper .hero-bg .pill.ghost, .light .hero-bg .pill.ghost { color: var(--ink); border-color: rgba(241, 237, 228, .18); background: rgba(241, 237, 228, .05); }
.paper .hero-bg .pill.ghost:hover, .light .hero-bg .pill.ghost:hover { background: rgba(241, 237, 228, .11); border-color: rgba(241, 237, 228, .32); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* type */
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 0.98; text-wrap: balance; }
.h1 { font-size: clamp(42px, 6.6vw, 104px); }
.h2 { font-size: clamp(34px, 4.6vw, 72px); line-height: 1.02; }
.h3 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: calc(var(--display-track) * .6); }
.lede { max-width: 50ch; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 19px); }
.dim { color: var(--ink-2); }

/* blur-in (split by kit.js into .w words or .c chars) */
/* until kit.js has split them, blur-in headings stay hidden (no flash of raw text on a slow load); without JS they show as normal */
.js [data-blur]:not(.ks-split) { visibility: hidden; }
/* no will-change here: it kept one GPU layer per word and per letter for as long as the page was open (93 on the home page),
   for a transition that runs once and lasts under a second */
[data-blur] .w, [data-blur] .c { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(0.12em); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
[data-blur].is-in .w, [data-blur].is-in .c { opacity: 1; filter: blur(0); transform: none; }
[data-reveal] { opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), filter 1s, transform 1s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; }
[data-lines] .w { color: var(--ink-3); transition: color .25s; }
[data-lines] .w.on { color: var(--ink); }

/* the bar (15 Oct evening, round 4, lepshee's bar): one fixed pill of dark glass, the symbol + wordmark on the left, three links in
   the middle, one call on the right, everything on one baseline and one inset; no burger (four destinations fit the bar; a phone
   shows the lockup and the call, the links are in the footer). In the home story the pill goes transparent and only the mark
   stays, so the drawing has the screen (body.nav-story, set by the home script). On the way down the bar leaves, on the way up it
   comes back (kit.js, body.nav-away). Over the inner pages' paper it turns light (body.nav-light, kit.js). */
.nav { position: fixed; top: 14px; left: 14px; right: 14px; z-index: 40; height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 9px 0 22px; border-radius: 999px; color: var(--ink); background: rgba(12, 12, 11, .58); border: 1px solid rgba(241, 237, 228, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 40px -10px rgba(0, 0, 0, .6); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); transition: background .4s, border-color .4s, box-shadow .4s, color .3s, translate .45s cubic-bezier(.2, .7, .2, 1), opacity .35s; }
.nav .mark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-body); font-weight: 700; letter-spacing: .22em; font-size: 14.5px; line-height: 1; color: currentColor; }
.nav .mark .sym { width: 22px; height: 22px; flex: none; }
.nav .mark span { translate: 0 1px; }
.nav .links { display: flex; justify-content: center; gap: clamp(22px, 2.4vw, 34px); font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; }
.nav .links a { opacity: .66; padding: 6px 0; transition: opacity .3s; }
.nav .links a:hover, .nav .links a[aria-current] { opacity: 1; }
.nav .right { justify-self: end; display: flex; }
.nav .nav-cta { height: 40px; padding: 0 18px; font-size: 14.5px; }
.nav .links, .nav .right { transition: opacity .35s, translate .45s cubic-bezier(.2, .7, .2, 1); }
body.nav-story .nav { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
body.nav-story .nav .mark { pointer-events: auto; }
body.nav-story .nav .links, body.nav-story .nav .right { opacity: 0; translate: 0 -10px; pointer-events: none; }
body.nav-away .nav { translate: 0 -90px; opacity: 0; pointer-events: none; }
body.nav-light .nav { color: var(--light-ink); background: rgba(255, 255, 255, .64); border-color: rgba(11, 11, 12, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 40px -14px rgba(0, 0, 0, .25); }
body.nav-light .nav .pill.ghost { color: var(--light-ink); border-color: rgba(11, 11, 12, .16); }
@media (max-width: 720px) {
  .nav { top: 10px; left: 10px; right: 10px; height: 54px; grid-template-columns: 1fr auto; padding: 0 7px 0 16px; }
  .nav .links { display: none; }
  .nav .nav-cta { height: 40px; padding: 0 16px; font-size: 14px; }
}

/* the pinned story: stone hero -> cut -> section drawing */
.story { position: relative; height: calc(100svh + (max(720vh, 4800px) * 1.15 - 115svh) / 0.86); }   /* the scroll length: never shorter than ~5 screens on a low window.
   The pinned travel is height - 100svh, so +15% of travel (Adam, 5 Oct: slower, 15% more scroll between steps) is 1.15 x the old height less 15% of one screen. */
.story .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: var(--bg); }   /* round 4: dark from the first screen */
/* the opening screen: the dark hero floats as a rounded card on the white page, then grows into the whole stage as the story starts */
.hero-card { --cc: 0; --card-top: var(--frame); --card-side: var(--frame); position: absolute; z-index: 0; inset: calc(var(--card-top) * (1 - var(--cc))) calc(var(--card-side) * (1 - var(--cc))) calc(var(--card-side) * (1 - var(--cc))); border-radius: calc(22px * (1 - var(--cc))); }
/* the dark card, home and inner pages: it runs up under the nav, so the nav sits on it and there is no white bar on top */
.hero-bg { background: var(--hero-grad); color: #F1EDE4; --ink: #F1EDE4; --ink-2: #A8A49C; --ink-3: #5A5850; --line: rgba(241, 237, 228, 0.16); --accent: #C9B08A; --bg: #060606; --glass: rgba(241, 237, 228, 0.035); }
/* the inner pages' card (build.py card_hero): the paper frame around it, the card one screen tall less the frame, like home */
.hero-frame { padding: var(--frame); background: var(--paper); }
.page-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; min-height: calc(100svh - 2 * var(--frame)); display: grid; align-content: end; padding: calc(var(--nav-h) + 8vh) var(--card-pad) clamp(40px, 9vh, 96px); }
.page-card .eyebrow { margin-bottom: 26px; }
.page-card .h1 { font-size: clamp(38px, 5.6vw, 88px); }
.page-card .lede { margin-top: 26px; }
.page-card .actions { display: flex; gap: 14px 30px; align-items: center; flex-wrap: wrap; margin-top: 36px; }
.page-card .actions .link { color: var(--ink-2); transition: color .3s; }
.page-card .actions .link:hover { color: var(--ink); }
/* What we do: the copy on the left, the whole drawing on the right */
.page-card.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.page-card.split .h1 { font-size: clamp(38px, 4.9vw, 78px); }
.page-card.split .diagram { align-self: center; }
.story .stage > svg.k-scene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* 8 Oct (speed): hidden until the scene has set its top, so it never shows at 56% and jumps */
.js .story .hero-copy:not(.is-placed) { visibility: hidden; }
.hero-copy { position: absolute; left: 0; right: 0; top: 56%; display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter); z-index: 3; }
/* the headline: 4.6vw on wide screens, a steeper slope on phones so 320 px gets 28 px and 430 px gets 37 px */
.hero-copy .h1 { font-size: clamp(38px, 5.6vw, 84px); max-width: 20ch; letter-spacing: -0.04em; }   /* 15 Oct evening: the big title is the hero */
.hero-copy .lede { margin-top: 22px; max-width: 46ch; }
.hero-copy .actions { display: flex; gap: 12px 24px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
/* stacked stage (portrait screens): the drawing above, the caption below. The home script measures the tallest caption and
   sets the caption zone (top, height) from it, so the drawing never runs under the text. */
.story .caps { position: absolute; left: var(--gutter); bottom: clamp(28px, 5vh, 56px); z-index: 6; width: min(560px, calc(100vw - 2 * var(--gutter))); pointer-events: none; }
.story .cap { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; visibility: hidden; }
/* 7 Oct (phone pass), stacked stage (.is-stacked, set by the home script): the captions hang from the top of their box, so the
   headline sits on the same line in every beat (bottom-aligned, 05 with its short text dropped 90 px below the others) and
   the text starts right under the drawing; the paragraph shows its first sentences only (.lead, split by the home script,
   about 150 characters), the rest (.rest) is for the wide stage, where the text has a lane of its own. */
.story .stage.is-stacked .cap { top: 0; bottom: auto; }
.story .stage.is-stacked .cap p .rest { display: none; }
/* the switch between captions is exclusive, never a crossfade: every .cap shares one box aligned to its bottom, so an
   outgoing caption fading out over 0.5-0.9 s printed itself over the incoming one (two eyebrows, two headlines) at every
   beat change on a phone, where all five share one lane. The outgoing one leaves at once; only the incoming one fades in. */
/* side stage (landscape screens, the script sets .is-side): beat 01 reads centred under the stack, the others sit opposite the
   stack and swap sides with it. On a short screen (.is-short) the centred beat takes the left side too. */
.story .stage.is-side .caps { inset: 0; width: auto; height: auto; }
.story .stage.is-side .cap.pos-c { left: 50%; bottom: 76px; width: min(680px, calc(100% - 2 * var(--gutter))); translate: -50% 0; text-align: center; }
.story .stage.is-side .cap.pos-c p { margin-left: auto; margin-right: auto; }
.story .stage.is-side .cap.pos-l, .story .stage.is-side .cap.pos-r, .story .stage.is-side.is-short .cap.pos-c { bottom: auto; top: 46%; translate: 0 -50%; width: min(580px, calc(42vw - 1.5 * var(--gutter))); text-align: left; }
.story .stage.is-side .cap.pos-l, .story .stage.is-side.is-short .cap.pos-c { left: var(--gutter); right: auto; }
.story .stage.is-side .cap.pos-r { left: auto; right: var(--gutter); }
.story .stage.is-side.is-short .cap.pos-c p { margin-left: 0; margin-right: 0; }
.story .stage.is-side .cap.pos-l h2, .story .stage.is-side .cap.pos-r h2, .story .stage.is-side.is-short .cap.pos-c h2 { font-size: clamp(28px, 2.9vw, 44px); }
/* short landscape screens: tighter captions, placed clear of the nav mark */
.story .stage.is-side.is-short .cap { top: 52%; }
.story .stage.is-side.is-short .cap h2 { font-size: clamp(20px, 2.4vw, 30px); }
.story .stage.is-side.is-short .cap p { font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
.story .stage.is-side.is-short .cap > .mono { margin-bottom: 8px; }
.story .cap > .mono { color: var(--accent); margin-bottom: 14px; display: block; opacity: 0; transition: opacity .5s; }
.story .cap.is-on > .mono { opacity: 1; }
.story .cap h2 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; }
.story .cap p { margin-top: 14px; color: #D3CFC7; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.5; max-width: 50ch; opacity: 0; filter: blur(6px); transition: opacity .6s .15s, filter .6s .15s; }
.story .cap.is-on p { opacity: 1; filter: none; }
.story .cap.is-on { visibility: visible; pointer-events: auto; }
/* 7 Oct: on the home story the captions are driven by the scroll (build.py render, scene capMix): the outgoing one fades
   out over the first 10 % of the next beat, the incoming one in over 20-38 % of its own, never both at once. The timed
   transitions above step aside; the fade is written inline (opacity, blur, translate) on the caption and its words. */
.story.scroll-caps .cap, .story.scroll-caps .cap > .mono, .story.scroll-caps .cap p, .story.scroll-caps .cap h2 .w { transition: none !important; }
.story.scroll-caps .cap h2 .w { filter: none !important; transform: none !important; }
.story.scroll-caps .cap.is-on p { filter: none; }
.story.scroll-caps .cap.is-on { will-change: opacity, filter, transform; }

/* the 3D stack: a perspective box over the stage, the stack of three sheets in it (scene.js sizes and transforms them), the read
   lines as thin planes turned into depth. Opacity lives on the sheets, never on the stack, so the 3D context stays intact. */
.k-3d { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.k-stack { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.k-pl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.k-con { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.k-pl > svg, .k-con > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 16 Oct (Adam: the scroll on a phone is jerky): on a phone the three sheets are 1440 x 650 px scaled to about 0.2-0.25 by the
   camera, and WebKit rasterises a 3D layer at its own size times the screen density, so every step of the drawing drawing itself
   repainted ~4300 x 1950 device px. Each sheet's SVG is now laid out at half size on its own layer and scaled back up: half the
   raster in each direction, still ~2x what the screen shows at the camera's closest. Same media query as scene.js LITE. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .k-pl:is(.k-pl-back, .k-pl-mid, .k-pl-front) > svg { inset: auto; left: 0; top: 0; width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; will-change: transform; }
}
/* the drawing off screen (scene.js, IntersectionObserver): every running animation in it holds still until it is back */
.k-3d.k-idle * { animation-play-state: paused !important; }
.k-sheet { stroke: var(--ink); stroke-width: 1; fill: color-mix(in srgb, var(--ink) 2%, transparent); }
.k-sheet-back { stroke-opacity: 0.3; fill: color-mix(in srgb, var(--ink) 1.2%, transparent); }
.k-sheet-mid { stroke-opacity: 0.22; }
.k-sheet-front { stroke-opacity: 0.6; fill: var(--glass); }

/* scene strokes and labels */
.k-lab { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; fill: var(--ink); opacity: 0.55; }
.k-lab-strong { opacity: 0.9; }
.k-lab-accent { fill: var(--accent); opacity: 1; }
.k-sysdot { fill: var(--ink); }
.k-sysring { fill: none; stroke: var(--ink); stroke-width: 0.75; opacity: 0.45; }
.k-mapdot { fill: var(--ink); }
.k-mapring { fill: none; stroke: var(--ink); stroke-width: 0.75; opacity: 0.35; }
.k-stream { fill: none; stroke: var(--accent); stroke-width: 1; }
.k-pinchring { fill: none; stroke: var(--accent); stroke-width: 1; }
.k-scene line, .k-scene rect, .k-scene polyline, .k-scene polygon, .k-scene path, .k-scene circle { shape-rendering: geometricPrecision; }
.k-pulse { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 0.09 1; stroke-dashoffset: 1.1; opacity: 0; }
.k-live .k-pulse { opacity: .9; animation: k-pulse 2.8s linear infinite; }
.k-live .k-pulse-flow { stroke-width: 1.6; animation-duration: 3.6s; }
@keyframes k-pulse { from { stroke-dashoffset: 1.1; } to { stroke-dashoffset: -0.1; } }
/* the dot swells by scale, not by its radius: the same circle, but a radius is geometry and every frame of it re-laid-out the sheet */
.k-trackdot { transform-box: fill-box; transform-origin: center; }
.k-live .k-trackdot { animation: k-blink 1.8s ease-in-out infinite; }
@keyframes k-blink { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7778); opacity: .35; } }
/* the layer at work: scan, compute panel, report */
.k-glasstint { fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke: none; opacity: 0; }
.k-live .k-scanband { animation: k-scan 5.5s linear infinite; }
@keyframes k-scan { from { transform: translateX(0); } to { transform: translateX(1600px); } }
.k-panelbg { fill: var(--bg); opacity: .82; }
.k-lab-l { font-size: 18px; }
/* a portrait stage draws the whole stack at about a quarter of the desktop scale (the stack is never cut, so the scale is
   whatever the width allows), which leaves the labels around 3 px tall. The building plane has room between its rooms, so
   its type is set larger there; the glass in front does not - its tracks sit on fixed x positions and its panels on 14 px
   line spacing, and growing that type runs the labels into each other (NEW CLIENTS over SALES CYCLE, WEEK 41 over RANKED
   BY COST). The glass keeps its drawn size and the caption carries what it says. */
.k-3d.k-portrait .k-pl-mid .k-lab { font-size: 15px; letter-spacing: 0.06em; }
.k-lab-m { font-size: 15px; }
/* level of detail (scene.js lod): a stack drawn small (phones) gets .k-lod and --lod = how many times heavier its strokes
   must be to show as they do on the desktop. Strokes: every line of the drawing, the sheets, the read lines and the loop legs
   are --lod times their width; presentation attributes lose to these rules, the pattern tiles are scaled by scene.js instead.
   Labels: hidden, except the few a visitor should be able to make out - the system names, the narrowing and measurement
   call-outs, the loop legs, the layer's title and the panel titles - and those are --lod times their size. */
/* 16 Oct (Adam on his phone: "ta animace musí být výraznější, není moc vidět co to je"): the lines are 1.4 x the --lod weight,
   the labels keep --lod (their spacing was set at that size, 5 Oct) */
.k-3d.k-lod { --lod: 2; --lodw: calc(var(--lod) * 1.4); }
.k-3d.k-lod .k-pl path.k-earthlines { stroke-width: calc(0.7px * var(--lod)); }   /* the pattern's own line, scaled like the pattern */
.k-3d.k-lod .k-pl > svg > :not(defs) :is(line, rect, path, polyline, polygon, circle), .k-3d.k-lod .k-con svg :is(line, rect, path, polyline, polygon, circle) { stroke-width: calc(1px * var(--lodw)); }
.k-3d.k-lod .k-scene [stroke-width="0.75"], .k-3d.k-lod .k-sysring, .k-3d.k-lod .k-mapring { stroke-width: calc(0.8px * var(--lodw)); }
.k-3d.k-lod .k-scene [stroke-width="0.9"] { stroke-width: calc(0.9px * var(--lodw)); }
.k-3d.k-lod .k-sheet { stroke-width: calc(1px * var(--lodw)); }
.k-3d.k-lod .k-stream { stroke-width: calc(1.3px * var(--lodw)); }
.k-3d.k-lod .k-pinchring { stroke-width: calc(1.2px * var(--lodw)); }
.k-3d.k-lod .k-pulse { stroke-width: calc(1.4px * var(--lodw)); }
.k-3d.k-lod .k-pulse-flow { stroke-width: calc(1.9px * var(--lodw)); }
.k-3d.k-lod .k-arcline { stroke-width: calc(1.4px * var(--lodw)); }
.k-3d.k-lod .k-arcglow { stroke-width: calc(9px * var(--lodw)); }
.k-3d.k-lod .k-arcend { stroke-width: calc(1.2px * var(--lodw)); }
.k-3d.k-lod .k-lab { display: none; }
.k-3d.k-lod .k-sys .k-lab, .k-3d.k-lod .k-call .k-lab-accent, .k-3d.k-lod .k-measure .k-lab-accent, .k-3d.k-lod .k-arclab,
.k-3d.k-lod .k-lab-l, .k-3d.k-lod .k-ftext .k-lab-strong { display: inline; }
.k-3d.k-lod .k-pl .k-lab, .k-3d.k-lod .k-con .k-lab { font-size: calc(12px * var(--lod)); letter-spacing: 0.04em; }
.k-3d.k-lod .k-lab-l { font-size: calc(17px * var(--lod)); }
/* 7 Oct (Adam: lines through text at the same visibility look wrong): every label a small drawing keeps is set on a plate of
   the background, painted under the glyphs (paint-order), so a wall, a read line or the money's curve running behind the
   word is knocked back to a trace, and the word reads first. Desktop and the side layout never get .k-lod. */
.k-3d.k-lod .k-lab { paint-order: stroke fill; stroke: var(--bg); stroke-opacity: 0.88; stroke-width: calc(5px * var(--lod)); stroke-linejoin: round; stroke-linecap: round; }
/* the cells flicker by phase group (scene.js): the group carries the fill-opacity, which the fill-only cells inherit */
.k-cell { fill: var(--ink); }
.k-cellg { fill-opacity: .14; }
.k-cell-hot { fill: var(--accent); }
.k-live .k-cellg { animation: k-cell 2.4s ease-in-out infinite; }
@keyframes k-cell { 0%, 100% { fill-opacity: .1; } 50% { fill-opacity: .62; } }
.k-livedot { fill: var(--accent); }
.k-live .k-livedot { animation: k-dot 1.2s ease-in-out infinite; }
@keyframes k-dot { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.k-bartrack { fill: var(--ink); opacity: .12; }
.k-bar { fill: var(--ink); opacity: .8; }
.k-bar-hot { fill: var(--accent); opacity: 1; }
.k-wm { opacity: 0; transition: opacity 1.2s cubic-bezier(.2, .7, .2, 1); }
.k-wm.is-in { opacity: 1; }
.k-wm-letter { fill-opacity: .9; }

/* in-page diagram: the same scene at a fixed state */
.diagram { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.diagram > svg.k-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.diagram .k-3d { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.diagram.tall { aspect-ratio: 4 / 3; }

/* statement band: paragraph colours in by scroll */
.statement { padding: 22vh var(--gutter); }
.statement p { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: calc(var(--display-track) * .55); font-size: clamp(26px, 3.3vw, 52px); line-height: 1.12; max-width: 24ch; }
.statement .eyebrow { margin-bottom: 36px; }

/* glass card */
.glass { background: rgba(14, 14, 14, .42); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-radius: 4px; padding: 16px 18px; }

/* bands */
.band { position: relative; padding: 16vh var(--gutter); }
.light, .paper { color: var(--light-ink); --ink: var(--light-ink); --ink-2: #5E5B55; --ink-3: #B5B1A8; --line: rgba(11, 11, 12, .14); --glass: rgba(11, 11, 12, .035); --accent: #8E6D3A; }
.light { background: var(--light); --bg: var(--light); }
.paper { background: var(--paper); --bg: var(--paper); }

/* trailers of the subpages on the home page: a head, cards, one button each (scale.com's light sections after its hero) */
.trailer .head { max-width: 760px; }
.trailer .more { display: flex; gap: 14px 28px; align-items: center; flex-wrap: wrap; margin-top: 36px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; }
.stat .n { font-size: clamp(34px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.stat p { color: var(--ink); font-size: 15.5px; line-height: 1.45; flex: 1; }
.stat .mono { color: var(--ink-2); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; }
.light .card, .light .stat { background: var(--paper); }
.card .mono { color: var(--accent); }
.card h3 { font-weight: 500; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; letter-spacing: -0.01em; margin-top: 14px; }
.card p { color: var(--ink-2); margin-top: 8px; }
/* the argument chain (Why): three tinted steps */
.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.chain .step { border-radius: 18px; padding: 28px 26px 24px; min-height: 280px; display: flex; flex-direction: column; gap: 14px; }
.chain .step .mono { color: var(--ink-2); }
.chain .step h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.08; letter-spacing: -0.02em; }
.chain .step p { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; flex: 1; }
.tint-blue { background: var(--tint-blue); } .tint-sand { background: var(--tint-sand); } .tint-green { background: var(--tint-green); }
.tint-navy { background: var(--hero-grad); color: #F1EDE4; --ink: #F1EDE4; --ink-2: #B3AFA6; }
.stats-head { margin-top: 64px; }
.stats { margin-top: 24px; }
/* the ranked list (What we do): bars fill in on view, a coloured tag per status */
.ranked { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.ranked .head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.ranked .r { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 16px 22px; border-bottom: 1px solid var(--line); align-items: center; }
.ranked .r b { font-weight: 500; font-size: 16px; }
.ranked .r .amt { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.ranked .r .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.ranked .r .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--c-blue); transition: width 1.3s cubic-bezier(.2, .7, .2, 1); }
.ranked.is-in .r .bar i { width: var(--w); }
.ranked .r:nth-child(2) .bar i { transition-delay: .1s; } .ranked .r:nth-child(3) .bar i { transition-delay: .2s; } .ranked .r:nth-child(4) .bar i { transition-delay: .3s; } .ranked .r:nth-child(5) .bar i { transition-delay: .4s; } .ranked .r:nth-child(6) .bar i { transition-delay: .5s; }
.ranked .r.first .bar i { background: var(--c-amber); }
.ranked .r.first .amt { color: var(--c-amber); }
.ranked .note { padding: 12px 22px; }
.ranked .r .st { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ranked .r .fix { letter-spacing: 0.06em; }
.like { margin-top: 56px; }
.like .rows { margin-top: 22px; }
.like .rows .row p { font-size: 13.5px; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; }
.tag.fixing { background: var(--tint-sand); color: var(--c-amber); } .tag.mapped { background: var(--tint-blue); color: var(--c-blue); } .tag.fixed { background: var(--tint-green); color: var(--c-green); }
/* the boundary (Data security): what stays inside the network, what the models see */
.boundary { display: grid; grid-template-columns: 1fr auto minmax(240px, 1fr); gap: 18px; align-items: stretch; margin-top: 48px; }
.boundary .inside, .boundary .outside { border-radius: 18px; padding: 22px; }
.boundary .inside { background: var(--tint-blue); border: 1.5px dashed var(--c-blue); }
.boundary .inside > .mono { color: var(--c-blue); }
.boundary .outside { background: var(--tint-sand); }
.boundary .outside > .mono { color: var(--c-amber); }
.boundary .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.boundary .pills { display: flex; flex-wrap: wrap; gap: 8px; max-width: 320px; }
.boundary .outside p { color: var(--ink-2); font-size: 14.5px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.chip.strong { background: var(--ink); color: #fff; border-color: var(--ink); }
.boundary .arrow { color: var(--ink-2); font-size: 20px; }
.boundary .arrow.big { align-self: center; font-size: 28px; }
.paper .form input, .paper .form textarea { background-color: #fff; border-color: rgba(11, 11, 12, .16); }
.paper .form input:focus, .paper .form textarea:focus { background-color: #fff; }
.paper .glass { background: rgba(255, 255, 255, .5); border-color: rgba(11, 11, 12, .1); }
/* the dark hero card inside a paper frame keeps the dark form (the frame's .paper rules must not reach it) */
.paper .hero-bg .glass { background: rgba(14, 14, 14, .45); border-color: rgba(255, 255, 255, .12); }
.paper .hero-bg .form input, .paper .hero-bg .form textarea, .paper .hero-bg .form select { background-color: rgba(255, 255, 255, .05); border-color: var(--line); }
.paper .hero-bg .form input:focus, .paper .hero-bg .form textarea:focus { background-color: rgba(255, 255, 255, .08); border-color: var(--accent); }
.band.tight { padding-top: 10vh; padding-bottom: 10vh; }
.grid-2 { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 120px); align-items: start; }
.grid-2.even { grid-template-columns: 1fr 1fr; align-items: center; }
.rows { border-top: 1px solid var(--line); }
.rows .row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.rows .row .mono { color: var(--ink-2); padding-top: 6px; }
.rows .row h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.02em; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.1; }
.rows .row p { color: var(--ink-2); margin-top: 8px; max-width: 52ch; }
.prose { max-width: 62ch; }
.prose p { color: var(--ink-2); font-size: clamp(16px, 1.2vw, 18.5px); }
.prose p + p { margin-top: 1.2em; }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose .sig { margin-top: 2em; color: var(--ink); }

/* ---- What we do (10 Oct): the sections of the merged page. One grid for every section opening (eyebrow + heading in the
   narrow column, the lede in the wide one), lists drawn as hairline rules without numbers, a stair for the five levels. ---- */
.diagram.whole { aspect-ratio: 16 / 9; }
.diagram.whole .k-3d { -webkit-mask-image: none; mask-image: none; }   /* the whole stack, so no edge fade either */
.band.dark { background: var(--bg); }
.band .sub { margin-top: clamp(96px, 14vh, 160px); }
/* the heading runs as wide as its two lines need (an em measure, so it breaks the same at every size); the lede sits under it
   on the wide column of the page grid, where the lists, the report and the rules start too */
.sec-head { --col: calc((100% - clamp(32px, 6vw, 120px)) * 5 / 12 + clamp(32px, 6vw, 120px)); }
.sec-head .h2, .sec-head .h1 { margin-top: 28px; max-width: 11em; }
.sec-head .lede { max-width: 56ch; margin: 30px 0 0 var(--col); }
.col-wide { margin-left: calc((100% - clamp(32px, 6vw, 120px)) * 5 / 12 + clamp(32px, 6vw, 120px)); }
.sec-head + *, .sub + * { margin-top: clamp(56px, 8vh, 96px); }
/* running text on the inner pages never ends on a lone word */
.band p, .page-card .lede, .close .lede { text-wrap: pretty; }
.band .diagram.wide { margin-top: clamp(40px, 6vh, 72px); }
/* three sources: three columns under one rule */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.trio .col { border-top: 1px solid var(--ink); padding-top: 22px; }
.trio h3, .lines h3, .stairs h3, .outcome h3, .bring h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.trio h3 { font-size: clamp(24px, 2.2vw, 34px); }
.trio p { color: var(--ink-2); margin-top: 14px; max-width: 40ch; }
/* what it looks for: one rule per finding, its name in the narrow column, what it is in the wide one */
.lines { border-top: 1px solid var(--line); }
.lines .line { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(32px, 6vw, 120px); padding: 30px 0 34px; border-bottom: 1px solid var(--line); }
.lines h3 { font-size: clamp(22px, 2vw, 30px); max-width: 18ch; }
.lines p { color: var(--ink-2); max-width: 56ch; }
.lede.after { margin-top: 36px; margin-left: calc((100% - clamp(32px, 6vw, 120px)) * 5 / 12 + clamp(32px, 6vw, 120px)); max-width: 56ch; color: var(--ink); }
/* map, fixes, run: the marble tiles, their titles on one line across the three (subgrid) */
.band.dark .outcomes { grid-template-rows: minmax(clamp(150px, 24vh, 300px), 1fr) auto auto; gap: 0 12px; }
.band.dark .outcome { grid-row: span 3; display: grid; grid-template-rows: subgrid; border-radius: 18px; min-height: 0; padding: clamp(22px, 2.2vw, 32px); }
.band.dark .outcome h3 { grid-row: 2; align-self: end; font-size: clamp(30px, 2.8vw, 46px); letter-spacing: -0.03em; }
.band.dark .outcome p { grid-row: 3; }
/* the five levels as a stair: each step's rule one riser higher than the one before */
.stairs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--line); }
.stairs .step { --rise: clamp(28px, 4.6vh, 52px); min-height: calc(clamp(260px, 32vh, 320px) + var(--s) * var(--rise)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); padding: 20px 12px 30px clamp(14px, 1.6vw, 24px); }
.stairs .step .mono { color: var(--accent); }
.stairs h3 { font-size: clamp(18px, 1.4vw, 22px); margin-top: 16px; }
.stairs p { color: var(--ink-2); margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
/* data security: Adam's line as the chapter title, the eight rules in two columns, the boundary as one picture */
.ds .ds-intro .h1 { font-size: clamp(40px, 5.6vw, 88px); max-width: 14ch; margin-top: 28px; }
.ds .ds-intro .lede { margin-top: 30px; max-width: 54ch; }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 120px); }
.rules .rule { border-top: 1px solid var(--line); padding: 26px 0 34px; }
.rules h3 { font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -0.01em; }
.rules p { color: var(--ink-2); margin-top: 8px; max-width: 56ch; }
.boundary { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(120px, .5fr) minmax(0, 1fr); align-items: stretch; }
.boundary .inside, .boundary .outside { border-radius: 18px; padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 22px; }
.boundary .inside { background: var(--tint-blue); border: 1.5px dashed var(--c-blue); }
.boundary .inside > .mono { color: var(--c-blue); }
.boundary .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.boundary .outside { background: var(--tint-sand); justify-content: space-between; }
.boundary .outside > .mono:first-child { color: var(--c-amber); }
.boundary .outside p { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.02em; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; max-width: 22ch; }
.boundary .cross { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 0 12px; color: var(--ink-2); text-align: center; }
.boundary .cross i { display: block; width: 100%; height: 1px; background: var(--ink); position: relative; }
.boundary .cross i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.grid-2.even.top { align-items: start; }
.grid-2 .h3 { margin-top: 26px; max-width: 14em; }
.grid-2 .h3 + .prose { margin-top: 28px; }
.bring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(32px, 6vw, 120px); margin-top: clamp(72px, 11vh, 120px); padding-top: 30px; border-top: 1px solid var(--line); align-items: baseline; }
.bring h3 { font-size: clamp(24px, 2.2vw, 34px); }
.bring p { color: var(--ink-2); max-width: 46ch; }
.ds { scroll-margin-top: 0; }

/* weekly one-page report */
.report { position: relative; max-width: 880px; }
.report .head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.report .r { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, .07); opacity: 0; filter: blur(6px); transform: translateY(8px); transition: opacity .7s, filter .7s, transform .7s; }
.report.is-in .r { opacity: 1; filter: none; transform: none; }
.report .r b { font-weight: 500; font-size: 16.5px; }
.report .r .amt { font-family: var(--font-mono); font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.report .r .st { grid-column: 1 / -1; color: var(--ink-2); }
.report .r.first { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.report .r.first .st, .report .r.first .amt { color: var(--accent); }
.report .note { padding: 14px 22px; color: var(--ink-2); }

/* three outcomes */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.outcome { position: relative; min-height: 58vh; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; background: var(--bg-2); }
.outcome .bg { position: absolute; inset: 0; z-index: -1; opacity: .55; transition: opacity .8s, transform 1.4s cubic-bezier(.2, .7, .2, 1); transform: scale(1.04); }
.outcome .bg img { width: 100%; height: 100%; object-fit: cover; }
.outcome::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.78)); }
.outcome:hover .bg { opacity: .8; transform: scale(1); }
.outcome h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.03em; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.02; }
.outcome p { color: var(--ink-2); margin-top: 12px; max-width: 36ch; }

/* the security bar (Your data) */
.bar { border-top: 1px solid var(--line); }
.bar .item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.bar .item .mono { color: var(--accent); padding-top: 5px; }
.bar .item h3 { font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -0.01em; }
.bar .item p { color: var(--ink-2); margin-top: 6px; max-width: 58ch; }

/* contact */
.page-card.contact-hero { grid-template-columns: 1fr minmax(320px, 520px); gap: clamp(32px, 6vw, 110px); align-items: end; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; }
.form label .mono { color: var(--ink-2); }
/* the select keeps its own chevron (appearance none takes the browser's away) */
.form select { font: inherit; font-size: 16px; color: var(--ink); background-color: rgba(255, 255, 255, .04); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%238F8A80' stroke-width='1.4'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: 1px solid var(--line); border-radius: 3px; padding: 13px 40px 13px 14px; outline: none; width: 100%; appearance: none; -webkit-appearance: none; }
.form select option { color: #000; }
.form select:focus { border-color: var(--accent); }
.form input, .form textarea { font: inherit; font-size: 16px; color: var(--ink); background-color: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 3px; padding: 13px 14px; outline: none; transition: border-color .3s, background-color .3s; width: 100%; appearance: none; -webkit-appearance: none; }
.form textarea { min-height: 112px; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--accent); background-color: rgba(255, 255, 255, .07); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .send { justify-self: start; margin-top: 6px; height: 46px; padding: 0 20px; }
.form .hint { color: var(--ink-2); font-size: 13.5px; }
.form .ok { display: none; color: var(--accent); }
.form.sent .ok { display: block; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.steps .s { border-top: 1px solid var(--line); padding-top: 20px; }
.steps .s .mono { color: var(--accent); }
.steps .s p { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.02em; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15; margin-top: 18px; }
.direct { display: flex; flex-direction: column; gap: 6px; margin-top: 34px; }
.direct a { font-size: clamp(18px, 1.5vw, 22px); }

/* close + wordmark footer */
.close { position: relative; padding: 24vh var(--gutter) 10vh; }
/* home: the last screen after the story, one line and one button */
.close.final { min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 14vh var(--gutter); }
.close.final .h1 { max-width: 14ch; }
.close .actions { display: flex; gap: 14px 28px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
/* the footer (round 4): the symbol + wordmark lockup, the pages, the legal line; the marble wordmark is gone (marble is out of
   favour everywhere it was a background) */
.foot { position: relative; padding: clamp(40px, 7vh, 80px) var(--gutter) 22px; display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; border-top: 1px solid var(--line); }
.foot .lockup { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; letter-spacing: .24em; font-size: 20px; line-height: 1; }
.foot .lockup .sym { width: 30px; height: 30px; flex: none; }
.foot .footnav { display: flex; gap: 8px 28px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); }
.foot .footnav a { transition: color .3s; }
.foot .footnav a:hover, .foot .footnav a[aria-current] { color: var(--ink); }
.foot .row { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-2); }
.foot .row a:hover { color: var(--ink); }
.foot .row.legal { font-size: 11px; letter-spacing: .04em; line-height: 1.6; }


/* the contact hero: one column once the text column would drop under ~420 px (portrait tablets and down) */
@media (max-width: 1100px) {
  .stairs { grid-template-columns: 1fr; border-bottom: 0; }
  .stairs .step { min-height: 0; border-left: 0; padding: 22px 0 28px; margin-left: calc(var(--s) * min(6%, 64px)); }
  .stairs .step p { max-width: 56ch; }
}
@media (max-width: 1100px) { .page-card.contact-hero { grid-template-columns: 1fr; align-items: start; } .contact-hero .form { max-width: 560px; } }
@media (max-width: 900px) {
  .nav .links { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cards3 { grid-template-columns: 1fr; }
  .grid-2, .grid-2.even { grid-template-columns: 1fr; }
  .outcomes, .steps, .chain, .boundary { grid-template-columns: 1fr; }
  .boundary .arrow.big { rotate: 90deg; justify-self: center; }
  .outcome { min-height: 46vh; }
  .page-card.split { grid-template-columns: 1fr; gap: 40px; }
  .lines .line, .bring { grid-template-columns: 1fr; }
  .lede.after, .sec-head .lede, .col-wide { margin-left: 0; }
  .trio { grid-template-columns: 1fr; gap: 36px; }
  .band.dark .outcomes { grid-template-rows: none; gap: 12px; }
  .band.dark .outcome { grid-row: auto; grid-template-rows: 1fr auto auto; min-height: 320px; }
  .rules { grid-template-columns: 1fr; }
  .boundary { grid-template-columns: 1fr; gap: 0; }
  .boundary .cross { padding: 18px 0; grid-auto-flow: row; }
  .boundary .cross i { width: 1px; height: 44px; }
  .boundary .cross i::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 4.5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* 7 Oct (phone pass): 500vh, about two thirds of a screen of thumb per beat (it was 640vh x 1.15 = 1.4 screens per beat,
     7 screens of scroll for five beats; scale.com's phone story runs half a screen per beat) */
  .story { height: calc(100svh + (max(500vh, 3300px) - 100svh) / 0.86); }   /* / 0.86: the call after beat 05 (END in the home script) */
  /* phones: the cropped camera's edge fade is set by scene.js (it follows the lane); the captions get a tighter measure */
  .story .caps { bottom: 28px; }
  .story .cap h2 { font-size: 20px; }
  .story .cap p { font-size: 15px; line-height: 1.45; margin-top: 10px; }
  .story .cap > .mono { margin-bottom: 10px; }
  :root { --frame: 8px; }
  .stats { grid-template-columns: 1fr; }
  .form .two { grid-template-columns: 1fr; }
  .statement { padding: 14vh var(--gutter); }
  .diagram { aspect-ratio: 4 / 5; }
  .diagram.whole { aspect-ratio: 16 / 10; }
}
@media (max-width: 360px) {
  .story .cap h2 { font-size: 19px; }
  .story .cap p { font-size: 14px; }
  .hero-copy .lede { font-size: 15px; }
}
/* low screens (a phone on its side, a low window): the hero's wordmark, headline, lede and button must all fit in one screen */
@media (max-height: 520px) {
  .hero-copy .h1 { font-size: clamp(22px, 4vw, 36px); }
  .hero-copy .lede { font-size: 14px; margin-top: 12px; max-width: 54ch; }
  .hero-copy .actions { margin-top: 16px; }
  .close.final { padding: 10vh var(--gutter); }
  .close.final .actions { margin-top: 24px; }
  .page-card { padding-top: calc(var(--nav-h) + 4vh); }
}
@media (prefers-reduced-motion: reduce) {
  [data-blur] .w, [data-blur] .c, [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .k-pulse { animation: none !important; opacity: 0 !important; }
  .k-scanband, .k-cellg, .k-livedot { animation: none !important; }
  .k-wm { opacity: 1; transition: none; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the measurement bar (analytics.js). Sits bottom-left so it never covers the CTA on the right,
   dark glass on both the dark story and the light sections, and it is removed once answered. */
  display: grid; gap: 14px; padding: 16px 18px; border-radius: 4px;
  background: rgba(10, 10, 10, .72); border: 1px solid rgba(255, 255, 255, .14); color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s cubic-bezier(.7, 0, .2, 1); }
@media (max-width: 520px) {
}
/* 05, the loop between the layer and the company: down legs (the change) in accent, up legs (what it brought) in ink */
.k-arcline { fill: none; stroke-width: 1.3; }
.k-down .k-arcline { stroke: var(--accent); opacity: .9; }
.k-up .k-arcline { stroke: var(--ink); opacity: .75; }
.k-arcglow { fill: none; stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.k-down .k-arcglow { stroke: var(--accent); }
.k-up .k-arcglow { stroke: var(--ink); }
.k-live .k-arcglow { opacity: .1; }
.k-live .k-arcpulse { stroke-width: 3.2; animation-duration: 2.4s; }
.k-up .k-arcpulse { stroke: var(--ink); }
.k-arcend { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0; }
.k-arcend-down { stroke: var(--accent); }
.k-loop .k-proj .k-pulse { stroke: var(--ink); }
.k-loop .k-proj path:first-child { opacity: .8; }
/* phones (scene.js ambient(), .k-amb): the drawing's small motion is driven by one 30 Hz clock instead of these CSS
   animations, so they step aside there; desktop keeps them */
.k-3d.k-amb .k-live .k-pulse, .k-3d.k-amb .k-live .k-cellg, .k-3d.k-amb .k-live .k-trackdot,
.k-3d.k-amb .k-live .k-livedot, .k-3d.k-amb .k-live .k-scanband { animation: none; }
/* What we do, Measured: the text in the narrow column, the drawing in the wide one, both centred on each other */
.grid-2.measured { align-items: center; }
/* Paper and Models side by side: both headings hold two lines, so the two texts under them start on one line */
@media (min-width: 901px) { .grid-2.even.top .h3 { min-height: 2.16em; } }
/* a section reached by its anchor (#how-it-searches) lands with its eyebrow clear of the bar */
.sub[id] { scroll-margin-top: calc(var(--nav-h) + 6vh); }

/* ---- What we do, shown by examples (what-we-do.html, 10 Oct evening). The hero runs a list of findings, six worked examples
   open one at a time (found -> fix -> result) beside their index, data security sits on the dark band. ---- */
/* the hero's running list: open rules on the card, no box; the newest finding arrives at the top in the accent */
.page-card.wwd { align-items: end; }
.page-card.wwd .h1 { font-size: clamp(42px, 5.6vw, 92px); }
.feed { justify-self: end; width: 100%; max-width: 760px; }
.feed .head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.feed .head .dot { display: inline-block; width: 6px; height: 6px; margin-right: 12px; vertical-align: 1px; animation: feedDot 2.8s ease-in-out infinite; }
.feed ol { list-style: none; margin: 0; padding: 0; height: 348px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline; padding: 17px 0 16px; border-bottom: 1px solid rgba(241, 237, 228, .08); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.feed li b { font-weight: 500; font-size: 16.5px; line-height: 1.35; }
.feed li .amt { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color 1.6s; }
.feed li.new { animation: feedIn .9s cubic-bezier(.2, .7, .2, 1) both; }
.feed li.new .amt { color: var(--accent); }
@keyframes feedIn { from { opacity: 0; filter: blur(6px); translate: 0 -10px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes feedDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* the examples: a head line, then the index (sticky on wide screens) beside the open case */
.examples { padding-top: 14vh; }
.ex-top { display: flex; justify-content: space-between; align-items: center; gap: 10px 32px; flex-wrap: wrap; }
.ex-top > .dim { color: var(--ink-2); }
.ex { display: grid; grid-template-columns: minmax(240px, 3.3fr) minmax(0, 8.7fr); gap: clamp(28px, 3.4vw, 60px); align-items: start; margin-top: clamp(28px, 4.4vh, 48px); }
.ex-index { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ex-tab { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; padding: 18px 0 19px; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink-2); transition: color .3s; }
.ex-tab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ex-tab .n { grid-row: span 2; padding-top: 6px; }
.ex-tab .t { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.15; letter-spacing: -0.015em; }
.ex-tab .s { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ex-tab:hover, .ex-tab.on { color: var(--ink); }
.ex-tab.on::before { transform: scaleX(1); }
.ex-tab.on .n, .ex-tab.on .s span:last-child { color: var(--accent); }
.ex-tab:focus-visible { outline-offset: -2px; }
/* the open case: the product's own dark, square-ish like the report panel, a head and three steps side by side */
.ex-case.hero-bg { background: linear-gradient(180deg, #141412 0%, #0A0A09 100%); border-radius: 6px; overflow: hidden; }
/* every case sits in the same cell, so the box keeps the height of the tallest one and nothing below jumps on a switch;
   the closed ones stay in the layout but are invisible (and out of the accessibility tree) */
.ex-panels { display: grid; }
.ex-panels > .ex-case { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr auto; }
.ex-panels > .ex-case[hidden] { display: grid; visibility: hidden; }
.ex-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: end; padding: clamp(24px, 2.6vw, 40px); border-bottom: 1px solid var(--line); }
.ex-head .tags { display: flex; gap: 14px; color: var(--ink-2); }
.ex-head .tags span + span { color: var(--accent); }
.ex-head h3 { margin-top: 18px; font-size: clamp(26px, 2.5vw, 42px); line-height: 1.08; letter-spacing: -0.028em; max-width: 19ch; }
.ex-head .worth { display: grid; justify-items: end; gap: 10px; text-align: right; }
.ex-head .worth .small { max-width: 30ch; }   /* the figure keeps its line ("0,8 mil. Kč jednorázově"), only the sentence is held narrow */
.ex-head .worth .v { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--accent); white-space: nowrap; }
.ex-case .small { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.nw { white-space: nowrap; }
.ex-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-step { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(22px, 2.2vw, 34px); }
.ex-step + .ex-step { border-left: 1px solid var(--line); }
.ex-step .lab { display: flex; gap: 12px; align-items: center; color: var(--ink); }
.ex-step .lab i { font-style: normal; color: var(--ink-3); }
.ex-step > p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.ex-step > p.metric { color: var(--ink); font-size: 17px; line-height: 1.35; }
.ex-step > .small { margin-top: auto; }
/* found: the records behind it, as a query result */
.proof { display: grid; gap: 10px; margin-top: 6px; }
.proof table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.proof th { padding: 0 10px 8px 0; text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); vertical-align: bottom; }
.proof td { padding: 8px 10px 8px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.proof th:last-child, .proof td:last-child { padding-right: 0; text-align: right; }
.proof td:last-child { color: var(--accent); }
/* fix: the steps of the agent as a line of nodes, the last one is where a person (or the owner) decides */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.flow li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 14.5px; line-height: 1.35; }
.flow li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink-2); background: #0D0D0C; z-index: 1; }
.flow li::after { content: ""; position: absolute; left: 5.5px; top: 12px; height: calc(100% + 7px); width: 1px; background: var(--line); }
.flow li:last-child::after { display: none; }
.flow li:last-child { color: var(--ink); }
.flow li:last-child::before { background: var(--accent); border-color: var(--accent); }
.ex-step .chip.lvl { align-self: flex-start; height: 28px; margin-top: auto; background: transparent; border-color: var(--line); color: var(--ink-2); }
.ex-step .chip.adv { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
/* result: before and after on one scale; the bars grow when the case comes into view */
.bars { display: grid; gap: 16px; }
.bars .b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: end; }
.bars .b .mono { color: var(--ink-2); }
.bars .b b { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.2vw, 36px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bars .b.after b { color: var(--accent); }
.bars .b i { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.bars .b i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--ink-2); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .35s; }
.bars .b.after i::after { background: var(--accent); transition-delay: .7s; }
.ex.seen .ex-case.in .bars .b i::after { transform: scaleX(1); }
.ex-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px clamp(22px, 2.2vw, 34px); border-top: 1px solid var(--line); color: var(--ink-2); }
.ex-next { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-transform: inherit; letter-spacing: inherit; font: inherit; }
.ex-next .arr { transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.ex-next:hover .arr { transform: translateX(4px); }
/* the entrance: the head, then the three steps one after another (replayed on every switch) */
.ex:not(.seen) .ex-case > * { opacity: 0; }
.ex.seen .ex-case.in .ex-head, .ex.seen .ex-case.in .ex-step, .ex.seen .ex-case.in .ex-foot { animation: exIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.ex.seen .ex-case.in .ex-step:nth-child(1) { animation-delay: .08s; }
.ex.seen .ex-case.in .ex-step:nth-child(2) { animation-delay: .18s; }
.ex.seen .ex-case.in .ex-step:nth-child(3) { animation-delay: .28s; }
.ex.seen .ex-case.in .ex-foot { animation-delay: .36s; }
@keyframes exIn { from { opacity: 0; filter: blur(6px); translate: 0 10px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }

/* data security on the dark band: the boundary drawn in the card's own light lines */
.band.dark.ds .boundary { margin-top: clamp(48px, 7vh, 84px); }
.band.dark .boundary .inside { background: rgba(241, 237, 228, .025); border: 1.5px dashed color-mix(in srgb, var(--accent) 62%, transparent); }
.band.dark .boundary .inside > .mono, .band.dark .boundary .outside > .mono:first-child { color: var(--accent); }
.band.dark .boundary .chip { background: rgba(241, 237, 228, .05); border-color: var(--line); color: var(--ink); }
.band.dark .boundary .outside { background: rgba(241, 237, 228, .055); border: 1px solid var(--line); }
.band.dark .boundary .outside > .mono.dim { color: var(--ink-2); }
.band.dark .boundary .cross i { background: var(--ink-2); }
.band.dark .boundary .cross i::after { border-left-color: var(--ink-2); }
.ds-rules { margin-top: clamp(84px, 13vh, 150px); }
.ds-rules .rules { margin-top: 26px; }
.ds-paper { margin-top: clamp(72px, 11vh, 130px); }
.close.paper { padding-bottom: 16vh; }

@media (max-width: 1100px) {
  .ex { grid-template-columns: 1fr; }
  /* the index turns into a sideways strip above the case */
  .ex-index { position: relative; top: auto; flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; scroll-padding: 0 var(--gutter); }
  .ex-index::-webkit-scrollbar { display: none; }
  .ex-tab { flex: 0 0 auto; grid-template-columns: auto auto; align-items: baseline; gap: 10px; margin-right: 26px; padding: 14px 0 15px; border-bottom: 0; }
  .ex-tab::before { top: auto; bottom: -1px; }
  .ex-tab .n { grid-row: auto; padding-top: 0; }
  .ex-tab .t { font-size: 17px; white-space: nowrap; }
  .ex-tab .s { display: none; }
}
@media (max-width: 900px) {
  .page-card.wwd .feed { justify-self: stretch; max-width: none; }
  .ex-head { grid-template-columns: 1fr; align-items: start; }
  .ex-head .worth { justify-items: start; text-align: left; }
  .ex-head .worth .small { max-width: 44ch; }
  .ex-steps { grid-template-columns: 1fr; }
  /* one column: the cases are of very different heights, a shared box would leave holes in the short ones, so each takes
     its own height (the strip above stays put when they switch) */
  .ex-panels > .ex-case[hidden] { display: none; }
  .ex-step + .ex-step { border-left: 0; border-top: 1px solid var(--line); }
  .ex-step .chip.lvl, .ex-step > .small { margin-top: 0; }
  .bars { max-width: 460px; }
}
@media (max-width: 720px) {
  .feed ol { height: 300px; }
  .feed li { grid-template-columns: 1fr; padding: 14px 0 13px; }
  .feed li b { font-size: 15.5px; }
  .ex-head h3 { font-size: 26px; }
  .examples { padding-top: 10vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-case > *, .ex .ex-case.in > * { animation: none !important; opacity: 1 !important; }
  .bars .b i::after { transform: none !important; transition: none !important; }
  .feed .head .dot { animation: none; }
}

/* ---- home, 15 Oct (ChatGPT copy approved by Adam): the growth-partner line over the headline, the way into the story,
   the first engagement's two lists, the four-step loop, the questions ---- */
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero-copy .eyebrow::before { display: none; }
.hero-copy .actions .link { color: var(--ink-2); transition: color .3s; }
.hero-copy .actions .link:hover { color: var(--ink); }
.close.final .lede { max-width: 46ch; }
.close.final .fine { margin-top: 22px; }
.offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 120px); align-items: start; }
.ticks, .starts { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ticks li, .starts li { position: relative; padding: 16px 0 17px 30px; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 12px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.starts li { padding-left: 44px; }
.starts li .mono { position: absolute; left: 0; top: 20px; color: var(--accent); }
.offer .actions { margin-top: 36px; }
.offer .small { margin-top: 18px; color: var(--ink-2); font-size: 14.5px; max-width: 52ch; }
.trio.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trio.four .mono { color: var(--accent); }
.trio.four h3 { font-size: clamp(20px, 1.7vw, 26px); margin-top: 14px; }
.faq { display: grid; gap: 10px; }
.faq .qa { border: 1px solid rgba(241, 237, 228, .1); border-radius: 14px; background: rgba(241, 237, 228, .03); padding: 0 clamp(18px, 2vw, 28px); transition: background .4s, border-color .4s; }
.faq .qa:hover, .faq .qa[open] { background: rgba(241, 237, 228, .055); border-color: rgba(241, 237, 228, .18); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 24px; align-items: center; padding: 22px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(20px, 1.8vw, 28px); text-wrap: balance; }
.faq summary i { position: relative; width: 22px; height: 22px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10.5px; height: 1px; background: var(--ink); transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.faq summary i::after { transform: rotate(90deg); }
.faq .qa[open] summary i::after { transform: rotate(0deg); }
.faq .qa p { color: var(--ink-2); max-width: 62ch; padding: 0 0 26px; margin-left: calc((100% - clamp(32px, 6vw, 120px)) * 5 / 12 + clamp(32px, 6vw, 120px)); }
@media (max-width: 1100px) { .trio.four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } }
@media (max-width: 900px) {
  .offer { grid-template-columns: 1fr; }
  .faq .qa p { margin-left: 0; }
}
@media (max-width: 720px) { .trio.four { grid-template-columns: 1fr; } }

/* ---- home below the story, 15 Oct evening: the drawing continues. Dark from the hero through security (one stage, no band
   edges), one paper interlude (about, questions), the dark last screen with the form on it. ---- */
.band.paper + .band.paper, .band.light + .band.light, .band.dark + .band.dark { padding-top: 6vh; }
/* 2 the sprint: a ruler of ten business days, the three starting steps in the bracket before day 0, the six deliverables along it */
.offer { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 36px clamp(32px, 6vw, 120px); }
.offer > .sheet { grid-column: 1 / -1; }
.offer .ruler { width: 100%; height: auto; display: block; overflow: visible; }
.offer .offer-foot { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; }
.offer .offer-foot .actions { margin-top: 0; }
.offer .offer-foot .small { margin-top: 0; }
.ticks { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 clamp(24px, 3vw, 48px); }
.ticks li { padding-left: 44px; opacity: .5; transition: opacity .5s; }
.ticks li::before { display: none; }
.ticks li .mono { position: absolute; left: 0; top: 20px; color: var(--ink-2); transition: color .4s; }
.ticks li.is-on { opacity: 1; }
.ticks li.is-on .mono { color: var(--accent); }
.k-ruler .k-lab { font-size: 13px; }
.k-ruler-fill { opacity: .95; }
.k-ruler-head { fill: var(--accent); opacity: 0; transition: opacity .3s; }
.k-ruler-ring { fill: none; stroke: var(--ink); stroke-width: .9; opacity: .5; transition: fill .4s, stroke .4s, opacity .4s; }
.k-ruler-mark.is-on .k-ruler-ring { fill: var(--accent); stroke: var(--accent); opacity: 1; }
.k-ruler-mark .k-lab { transition: fill .4s, opacity .4s; }
.k-ruler-mark.is-on .k-lab { fill: var(--accent); opacity: 1; }
/* 3 what happens next: the loop seen from the side, a dot going round, a mark on the ring for every measured pass */
.band .loop, .band .enclosure { width: 100%; height: auto; display: block; overflow: visible; }
.band > .sheet { margin-top: clamp(40px, 6vh, 72px); }
.band > .sheet + .trio { margin-top: clamp(40px, 6vh, 72px); }
.k-loop-ring { fill: none; stroke: var(--ink); stroke-width: .9; opacity: .45; transition: stroke .3s, opacity .3s; }
.k-loop-dot { fill: var(--ink); opacity: .55; transition: fill .3s, opacity .3s; }
.k-loop-node { opacity: 0; transition: opacity .6s; }
.k-loop-node.is-on { opacity: 1; }
.k-loop-node.is-hot .k-loop-ring { stroke: var(--accent); opacity: 1; }
.k-loop-node.is-hot .k-loop-dot { fill: var(--accent); opacity: 1; }
.k-loop-node.is-hot .k-lab { fill: var(--accent); opacity: 1; }
.k-loop-runner { fill: var(--accent); opacity: 0; transition: opacity .4s; }
.k-loop-mark { stroke: var(--accent); stroke-width: 1.4; }
.trio.num .mono { color: var(--accent); }
.trio.num h3 { margin-top: 14px; }
/* 4 security: the client's environment, the agreed sources, one read-only line out; the pulses run once the line is drawn */
.k-encl-wall { opacity: 0; }
.k-encl-sys { opacity: 0; transition: opacity .5s; }
.k-encl-sys.is-on { opacity: .4; }
.k-encl-sys.in-scope.is-on { opacity: 1; }
.k-encl-gate { fill: #121110; stroke: var(--accent); stroke-width: 1; }
.k-encl-part .k-lab { transition: fill .3s, opacity .3s; }
.k-encl-part.is-hot .k-lab { fill: var(--accent); opacity: 1; }
.enclosure:not(.is-done) .k-pulse { animation: none; opacity: 0; }
/* 5 about (round 4): a glass card on the stage, the symbol faint behind the text */
.about-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; padding: clamp(28px, 4.5vw, 64px); background: linear-gradient(155deg, rgba(241, 237, 228, .07), rgba(241, 237, 228, .025) 60%, rgba(201, 176, 138, .045)); border: 1px solid rgba(241, 237, 228, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 120px -30px rgba(201, 176, 138, .14); }
.about-card .sym-bg { position: absolute; right: -3%; top: -16%; width: min(44%, 520px); aspect-ratio: 1; z-index: -1; opacity: .055; color: var(--ink); pointer-events: none; }
.about-card .sym-bg svg { width: 100%; height: 100%; }
.about-card .prose p { color: var(--ink); max-width: 56ch; }
.about-card .prose .sig { color: var(--ink-2); }
/* 6 questions: the heading stays on the left, the questions pass on the right */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 120px); align-items: start; }
.faq-wrap > div:first-child { position: sticky; top: 110px; }
.faq summary { grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 0 24px; }
.faq summary .n { color: var(--ink-2); transition: color .3s; }
.faq .qa[open] summary .n { color: var(--accent); }
.faq-wrap .faq .qa p { margin-left: 68px; }
/* 7 the last screen (round 4): the gold atmosphere under it, the form on a glass card */
.close.final { overflow: hidden; isolation: isolate; }
.close.final > * { position: relative; }
.close.final .final-atmo { position: absolute; z-index: -1; }
.close.final .final-atmo .atmo-c { opacity: .75; }
.final-form .form.glass { padding: clamp(22px, 3vw, 34px) !important; border-radius: 18px; background: rgba(12, 12, 11, .55); border: 1px solid rgba(241, 237, 228, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 100px -40px rgba(0, 0, 0, .9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.form input, .form textarea, .form select { border-radius: 8px; }
.final-form { width: min(100%, 640px); margin-top: 40px; text-align: left; }
@media (max-width: 1100px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap > div:first-child { position: static; }
}
@media (max-width: 900px) {
  .offer { grid-template-columns: 1fr; }
  .offer .offer-starts { order: 1; }
  .offer > .sheet { order: 2; }
  .offer .offer-gets { order: 3; }
  .offer .offer-foot { order: 4; }
  .ticks { grid-auto-flow: row; grid-template-rows: none; }
  .faq summary { grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 0 14px; }
  .faq-wrap .faq .qa p { margin-left: 50px; }
}
@media (max-width: 720px) {
  .k-ruler .k-lab { font-size: 15px; }
}

/* ---- round 4 (15 Oct evening, Adam: "the animation is the only nice thing", the rest flat and boring): the whole page lives in
   the animation's world. One dark stage from the hero to the footer with the drafting sheet's dot grid, gold light in motion
   (atmo.js) at three moments (the hero, the sprint, the last screen), every drawing on a glass sheet in perspective with a gold
   glow where the finding is, glass cards for About, the questions and the form. ---- */
.page-home .hero-card { inset: 0; border-radius: 0; }
.page-home .band.dark { background-color: var(--bg); background-image: radial-gradient(90% 50% at 50% 0%, rgba(241, 237, 228, .035), transparent 70%), radial-gradient(rgba(241, 237, 228, .09) .8px, transparent 1.7px); background-size: 100% 100%, 72px 72px; background-position: 50% 0, 50% 0; }
/* the atmosphere: a small canvas stretched over its host, soft at the edges */
.atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 15 Oct late evening (Adam): the flow runs across the whole monitor, so the mask softens only the top and the bottom */
.atmo .atmo-c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.hero-card .atmo { z-index: 0; }
.band.lit { isolation: isolate; }
.band .band-atmo { z-index: -1; }
.band .band-atmo .atmo-c { opacity: .6; }
/* the glass sheets: the story's sheet as a CSS object on the stage, tilted a few degrees, a gold glow at --gx/--gy (the finding),
   a light that sweeps across once as the sheet reveals. Wide sheets (.sheet-x) straighten as they come up the screen (below.js) */
@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 60%; }
@property --gy { syntax: '<percentage>'; inherits: true; initial-value: 55%; }
.sheet { position: relative; }
.sheet-in { --sx: 0deg; --sy: 0deg; position: relative; border-radius: 14px; padding: clamp(18px, 2.6vw, 40px); overflow: hidden; background: linear-gradient(155deg, rgba(241, 237, 228, .075) 0%, rgba(241, 237, 228, .028) 48%, rgba(201, 176, 138, .05) 100%); border: 1px solid rgba(241, 237, 228, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(0, 0, 0, .5), 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(201, 176, 138, .16); transform: perspective(1500px) rotateX(var(--sx)) rotateY(var(--sy)); transform-origin: 50% 50%; will-change: transform; transition: --gx .7s cubic-bezier(.2, .7, .2, 1), --gy .7s cubic-bezier(.2, .7, .2, 1); }
.sheet-in::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 46% at var(--gx) var(--gy), color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); pointer-events: none; }
.sheet-in::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .07) 50%, transparent 58%); transform: translateX(-60%); pointer-events: none; }
.sheet.is-in .sheet-in::after { transition: transform 1.6s .3s cubic-bezier(.2, .7, .2, 1); transform: translateX(60%); }
.sheet-x .sheet-in { --sx: 12deg; }
.sheet-in > svg, .sheet-in > .diagram { position: relative; }
@media (max-width: 900px) {
  .sheet-x .sheet-in { --sx: 6deg; }
  .sheet-in { padding: 14px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-in::after { display: none; }
  .sheet-in { transition: none; }
}

/* the About card as the founder's card (15 Oct late evening, Adam's photo): the photo on the left, a placeholder text, the name
   and the role under it; one column on phones */
.about-card.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.founder-photo { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(241, 237, 228, .14); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 100px -30px rgba(201, 176, 138, .2); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.92) contrast(1.03); }
.founder-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(6, 6, 6, .45)); pointer-events: none; }
.founder-text { display: grid; gap: 26px; }
.founder-quote { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.32; letter-spacing: -0.015em; color: var(--ink); max-width: 38ch; text-wrap: pretty; }   /* Adam's text is ~70 words: one step smaller than a pull quote */
.founder-sig { display: grid; gap: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.founder-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.founder-role { display: grid; gap: 2px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }   /* two lines: the institute, then KESTIR */
/* 15 Oct late evening (Adam, a ~730 px window: "doesn't look good"): two columns down to 640 px, photo beside the text at the
   top; one column only on phones, photo the card's full width, the faint symbol hidden there */
@media (max-width: 900px) and (min-width: 641px) {
  .about-card.founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 32px; }
  .founder-photo { margin-top: 40px; }
  .about-card .sym-bg { display: none; }
  .founder-role span { white-space: nowrap; font-size: min(15px, 1.9vw); }
}
@media (max-width: 640px) {
  .about-card.founder { grid-template-columns: 1fr; }
  .founder-photo { width: 100%; max-width: 420px; }
  .about-card .sym-bg { display: none; }
}
/* the role on two lines on phones too (Adam): each line held on one line, the type scaled to the card's width */
@media (max-width: 520px) { .founder-role span { white-space: nowrap; font-size: min(15px, 3.25vw); } }

/* 15 Oct late evening: the story goes on after beat 05 (the home script's END = 0.86 of the scroll, .story lengthened by 1 / 0.86):
   caption 05 fades, the drawing dims, and the call comes in where the centred caption sat (phones: in the middle of the stage) */
.story .story-cta { position: absolute; left: 50%; bottom: 72px; translate: -50% 0; z-index: 7; width: min(700px, calc(100% - 2 * var(--gutter))); display: grid; justify-items: center; gap: 16px; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; }
.story .story-cta.is-on { visibility: visible; pointer-events: auto; }
.story .story-cta::before { content: ""; position: absolute; inset: -70px -110px; z-index: -1; background: radial-gradient(closest-side, rgba(6, 6, 6, .82), rgba(6, 6, 6, 0)); pointer-events: none; }
.story .stage:not(.is-side) .story-cta, .story .stage.is-short .story-cta { top: 50%; bottom: auto; translate: -50% -50%; }
.story-cta h2 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
.story-cta p { color: #D8D3CA; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.story-cta .actions { margin-top: 8px; }
.story-static .story-cta { display: grid; gap: 16px; justify-items: start; margin-top: 56px; }
/* the hero's smaller copy over the gold flow (Adam: hardly visible): lighter, a soft shadow, and a quiet dark field behind the copy */
.hero-copy .lede { color: #D6D1C8; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 22px rgba(6, 6, 6, .9); }
.hero-copy .eyebrow { color: #BDB8AE; text-shadow: 0 0 14px rgba(6, 6, 6, .9); }
.hero-copy::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 110%); height: 135%; translate: -50% -50%; z-index: -1; background: radial-gradient(closest-side, rgba(6, 6, 6, .62), rgba(6, 6, 6, 0)); pointer-events: none; }

/* 15 Oct late evening: the story ends on one button (bottom centre everywhere); the call with "Don't take my word for it" is at the
   end of Adam's text in the founder card */
.story .stage:not(.is-side) .story-cta, .story .stage.is-short .story-cta { top: auto; bottom: max(40px, 9svh); translate: -50% 0; }
.story .story-cta::before { inset: -40px -90px; }
.story-static .story-cta { justify-items: start; }
.founder-cta { display: grid; gap: 12px; justify-items: start; }
.founder-close { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: var(--accent); }
.founder-offer { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; max-width: 50ch; }
.founder-cta .actions { margin-top: 6px; }
.faq .qa p + p { margin-top: -14px; }
/* phones (15 Oct mobile check on kestir.co): tap targets of at least 44 px for the bar mark, the footer links and the e-mail */
@media (max-width: 720px) {
  .nav .mark { min-height: 44px; }
  .foot { grid-template-columns: 1fr; gap: 18px; }
  .foot .footnav { gap: 0 24px; }
  .foot .footnav a, .foot .row.legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 15 Oct late evening: the bar has no links any more, only the lockup and the call */
.nav .links:empty { display: none; }
.nav { grid-template-columns: 1fr auto; }

/* ---- 16 Oct (Adam: "use cases, viz lepshee.ai" + a simple roadmap): two sections between the story and the founder card ---- */
/* use cases: lepshee's case-study carousel. A warm light behind the cards, the heading centred, one card in front, the two
   neighbours tilted behind it; the card's picture is the finding as a small query result with before / after */
.page-home .band.dark.uc-band { overflow-x: clip; background-image: radial-gradient(55% 42% at 50% 46%, rgba(201, 176, 138, .11), transparent 72%), radial-gradient(90% 50% at 50% 0%, rgba(241, 237, 228, .035), transparent 70%), radial-gradient(rgba(241, 237, 228, .09) .8px, transparent 1.7px); background-size: 100% 100%, 100% 100%, 72px 72px; background-position: 50% 0, 50% 0, 50% 0; }
.uc-head { display: grid; justify-items: center; text-align: center; }
.uc-head .h2 { margin-top: 26px; max-width: 14em; }
.uc-head .lede { margin-top: 22px; max-width: 60ch; }
.uc { margin-top: clamp(48px, 7vh, 84px); }
.uc-track { position: relative; display: grid; justify-items: center; touch-action: pan-y; }
.uc-card { grid-area: 1 / 1; width: min(540px, 84vw); display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 18px; padding: clamp(20px, 2.2vw, 28px); border-radius: 20px; text-align: left;
  background: linear-gradient(155deg, rgba(241, 237, 228, .075), rgba(241, 237, 228, .02) 55%, rgba(201, 176, 138, .06)), #0D0D0C;
  border: 1px solid rgba(241, 237, 228, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -36px rgba(0, 0, 0, .95), 0 0 110px -40px rgba(201, 176, 138, .22);
  transition: transform .75s cubic-bezier(.2, .7, .2, 1), opacity .55s, filter .55s; will-change: transform; }
.uc-card[data-pos="c"] { z-index: 3; }
.uc-card[data-pos="l"], .uc-card[data-pos="r"] { z-index: 2; opacity: .5; filter: brightness(.7) saturate(.8); cursor: pointer; }
.uc-card[data-pos="l"] { transform: translate(-62%, 7%) rotate(-7deg) scale(.84); }
.uc-card[data-pos="r"] { transform: translate(62%, 7%) rotate(7deg) scale(.84); }
.uc-card[data-pos="fl"], .uc-card[data-pos="fr"] { z-index: 1; opacity: 0; pointer-events: none; }
.uc-card[data-pos="fl"] { transform: translate(-96%, 12%) rotate(-12deg) scale(.7); }
.uc-card[data-pos="fr"] { transform: translate(96%, 12%) rotate(12deg) scale(.7); }
.uc-card[data-pos="l"]:hover, .uc-card[data-pos="r"]:hover { opacity: .68; }
.uc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.uc-badge { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); background: rgba(241, 237, 228, .07); border: 1px solid rgba(241, 237, 228, .15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px -10px rgba(0, 0, 0, .8); white-space: nowrap; }
.uc-badge .dot { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
/* the picture: a small panel of the records that prove the finding, tilted in perspective like lepshee's dashboards */
.uc-vis { display: grid; place-items: center; padding: 6px 0 8px; perspective: 1000px; }
.uc-panel { width: min(100%, 390px); padding: 14px 16px 16px; border-radius: 12px; transform: rotateX(9deg) rotateY(-9deg) rotateZ(.6deg); transform-origin: 50% 60%;
  background: linear-gradient(160deg, #1B1A17, #0F0F0E 70%); border: 1px solid rgba(241, 237, 228, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 26px 50px -22px rgba(0, 0, 0, .95), 0 0 70px -24px rgba(201, 176, 138, .3); }
.uc-src, .uc-metric, .uc-more { font-size: 9.5px; color: var(--ink-2); }
.uc-src { color: var(--accent); }
.uc-panel table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.uc-panel th { font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 0 6px; }
.uc-panel td { padding: 6px 0; border-top: 1px solid rgba(241, 237, 228, .08); color: var(--ink); white-space: nowrap; }
.uc-panel th:last-child, .uc-panel td:last-child { text-align: right; }
.uc-panel td:last-child { color: var(--accent); font-weight: 600; }
.uc-more { margin-top: 4px; }
.uc-metric { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(241, 237, 228, .1); }
.uc-bars { display: grid; gap: 7px; margin-top: 9px; }
.uc-bars .b { display: grid; grid-template-columns: 54px minmax(0, 1fr) 42px; align-items: center; gap: 10px; }
.uc-bars .b .mono { font-size: 9px; color: var(--ink-2); }
.uc-bars .b i { position: relative; height: 6px; border-radius: 3px; background: rgba(241, 237, 228, .08); overflow: hidden; }
.uc-bars .b i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--ink-3); }
.uc-bars .b.after i::after { background: linear-gradient(90deg, #A88F68, var(--accent)); box-shadow: 0 0 10px rgba(201, 176, 138, .5); }
.uc-bars .b b { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.uc-bars .b.after b { color: var(--ink); }
.uc-card h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.uc-card > p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
/* 16 Oct: what changes, one line under the text, the label in gold mono like the panel source */
.uc-card > .uc-next { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(241, 237, 228, .1); font-size: 14.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.uc-next ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 5px; }
.uc-next li { position: relative; padding-left: 16px; }
.uc-next li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .8; }
.uc-card > p .uc-p { display: block; margin-top: 10px; }
.uc-next .mono { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.uc-nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: clamp(36px, 5vh, 52px); }
.uc-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(241, 237, 228, .18); background: rgba(241, 237, 228, .04); transition: background .3s, border-color .3s; }
.uc-btn:hover { background: rgba(241, 237, 228, .1); border-color: rgba(241, 237, 228, .34); }
.uc-btn svg { width: 16px; height: 16px; }
.uc-dots { display: flex; align-items: center; }
.uc-dot { height: 44px; padding: 0 4px; display: grid; place-items: center; }
.uc-dot::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgba(241, 237, 228, .26); transition: width .35s cubic-bezier(.2, .7, .2, 1), background .35s; }
.uc-dot.on::before { width: 22px; background: var(--accent); }
@media (max-width: 700px) {
  .uc-card { width: min(440px, calc(100vw - 2 * var(--gutter) - 8px)); }
  .uc-card[data-pos="l"] { transform: translate(-80%, 6%) rotate(-6deg) scale(.86); opacity: .35; }
  .uc-card[data-pos="r"] { transform: translate(80%, 6%) rotate(6deg) scale(.86); opacity: .35; }
  .uc-panel { padding: 12px 13px 14px; transform: rotateX(7deg) rotateY(-6deg); }
  .uc-panel table { font-size: 11.5px; }
  .uc-card > p { font-size: 15px; }
  .uc-card > .uc-next { font-size: 14px; }
}

/* roadmap: four steps on one line, a gold line runs along them as the section comes up (below.js) and runs on past the last one (then the next); vertical on narrow screens */
.rd { --p: 0; position: relative; }
.rd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.rd-line { position: absolute; left: 11px; right: 0; top: 11px; height: 1px; background: rgba(241, 237, 228, .14); }
.rd-line > i { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #A88F68, var(--accent) 70%, #E6D2AE); box-shadow: 0 0 12px rgba(201, 176, 138, .65); }
.rd-step { position: relative; display: grid; grid-template-rows: auto 1fr; }
.rd-node { position: relative; z-index: 1; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid rgba(241, 237, 228, .26); transition: border-color .5s, box-shadow .5s; }
.rd-node i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background .5s; }
.rd-step.is-lit .rd-node { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(201, 176, 138, .12), 0 0 24px rgba(201, 176, 138, .45); }
.rd-step.is-lit .rd-node i { background: var(--accent); }
.rd-card { margin-top: 24px; padding: clamp(20px, 2vw, 28px); border-radius: 16px; background: linear-gradient(155deg, rgba(241, 237, 228, .065), rgba(241, 237, 228, .02) 60%, rgba(201, 176, 138, .04)); border: 1px solid rgba(241, 237, 228, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: border-color .6s, box-shadow .6s; }
.rd-step.is-lit .rd-card { border-color: rgba(201, 176, 138, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 80px -34px rgba(201, 176, 138, .35); }
.rd-n { color: var(--ink-2); transition: color .5s; }
.rd-step.is-lit .rd-n { color: var(--accent); }
.rd-card h3 { margin-top: 14px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -0.02em; }
.rd-card p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.rd-cta { margin-top: clamp(40px, 6vh, 64px); }
@media (max-width: 900px) {
  .rd-steps { grid-template-columns: 1fr; gap: 14px; }
  .rd-step { grid-template-columns: 23px minmax(0, 1fr); grid-template-rows: none; gap: 0 18px; align-items: start; }
  .rd-card { margin-top: 0; }
  .rd-node { margin-top: 22px; }
  .rd-line { left: 11px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .rd-line > i { width: 1px; height: calc(var(--p) * 100%); background: linear-gradient(180deg, #A88F68, var(--accent) 70%, #E6D2AE); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-card, .uc-dot::before, .rd-node, .rd-card { transition: none; }
}

/* 16 Oct, phone pass on the use cases and the roadmap (iPhone 13 in Safari: the card and its arrows did not fit one screen,
   9 px labels in the panel, dots 15 px wide to tap, the roadmap line ran on past the last step) */
@media (max-width: 700px) {
  .uc { margin-top: 36px; }
  .uc-card { gap: 14px; padding: 18px; border-radius: 18px; grid-template-rows: auto auto auto auto 1fr; }
  .uc-vis { padding: 0; }
  .uc-panel { transform: rotateX(5deg) rotateY(-4deg); }
  .uc-panel tbody tr:nth-child(3), .uc-more { display: none; }
  .uc-src, .uc-metric, .uc-panel th, .uc-bars .b .mono { font-size: 10.5px; letter-spacing: .05em; }
  .uc-panel table { font-size: 13px; margin-top: 8px; }
  .uc-metric { margin-top: 10px; padding-top: 10px; }
  .uc-bars .b { grid-template-columns: 62px minmax(0, 1fr) 42px; }
  .uc-bars .b b { font-size: 13px; }
  .uc-card h3 { font-size: 21px; }
  .uc-nav { margin-top: 20px; gap: 10px; }
  .uc-dot { padding: 0 6px; }   /* 16 Oct: twelve cards; 8 px squeezed the arrows into ovals at 390 */
}
@media (max-width: 900px) {
  .rd-line { bottom: auto; height: var(--lh, calc(100% - 44px)); }
}

/* 16 Oct (Adam: "na mobilu udělej u těch carouselů slide effect"): on phones the cards slide side by side in a native
   scroll-snap strip under the finger, the next card peeking at the edge; no tilt, no filter, no 3D (below.js sets .is-slide) */
@media (max-width: 700px) {
  .uc.is-slide .uc-track { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: auto;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
  .uc.is-slide .uc-track::-webkit-scrollbar { display: none; }
  .uc.is-slide .uc-card, .uc.is-slide .uc-card[data-pos] { flex: 0 0 auto; width: calc(100vw - 2 * var(--gutter) - 22px); transform: none; opacity: 1; filter: none; cursor: auto; scroll-snap-align: center; scroll-snap-stop: always; will-change: auto; transition: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px -30px rgba(0, 0, 0, .9); }
  .uc.is-slide .uc-panel { transform: none; }
  /* 16 Oct: each card keeps its own height (the capacity card is ~240 px longer than the rest and stretched them all); the strip
     takes the height of the card in front (below.js) and the arrows follow it */
  .uc.is-slide .uc-track { align-items: flex-start; overflow-y: hidden; transition: height .4s cubic-bezier(.2, .7, .2, 1); }
  .uc.is-slide .uc-card { grid-template-rows: auto; }
}

/* 16 Oct (Adam: on his iPhone the scroll and the animations are jerky, "není to vůbec ladné"). On a phone nothing blurs while
   the page moves: a backdrop blur is recomputed from everything under it on every frame of the scroll (the bar is fixed over
   the whole page), and a blur filter on text that fades in repaints the block on every frame. The glass keeps its look with a
   denser fill; the reveals fade and rise without the blur. Desktop unchanged. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .nav { background: rgba(12, 12, 11, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass { background: rgba(16, 16, 15, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .final-form .form.glass { background: rgba(14, 14, 13, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-blur] .w, [data-blur] .c, [data-reveal], .report .r, .story .cap p { filter: none !important; }
  [data-blur] .w, [data-blur] .c { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
  [data-reveal] { transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
  .story.scroll-caps .cap.is-on { will-change: opacity, transform; }
}

/* 16 Oct (Adam on kestir.co/cz/ in a ~680 px high window: the card barely fits and the buttons to click through it are below
   the screen). Desktop: the arrows sit on both sides of the front card, at its middle, so they are on screen whenever the card
   is; the card is wider and tighter (less wrapping, smaller gaps), the dots stay under it. Phones unchanged. */
@media (min-width: 701px) {
  .uc { position: relative; margin-top: clamp(32px, 5vh, 64px); }
  .uc-track { align-items: start; transition: height .55s cubic-bezier(.2, .7, .2, 1); }
  .uc-card { width: min(620px, 54vw); gap: 14px; align-self: start; grid-template-rows: auto auto auto auto auto; }
  .uc-panel td { padding: 5px 0; }
  /* a card behind the front one may be taller than it: its lower part fades out about where the front card ends, so it never
     runs into the dots or the next section */
  .uc-card[data-pos="l"], .uc-card[data-pos="r"], .uc-card[data-pos="fl"], .uc-card[data-pos="fr"] {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--fh, 600px) - 220px), transparent calc(var(--fh, 600px) - 40px));
    mask-image: linear-gradient(180deg, #000 calc(var(--fh, 600px) - 220px), transparent calc(var(--fh, 600px) - 40px)); }
  .uc-vis { padding: 0; }
  .uc-card > p .uc-p { margin-top: 6px; }
  .uc-nav { margin-top: 22px; }
  .uc-btn { position: absolute; z-index: 5; top: 214px; width: 52px; height: 52px; background: rgba(13, 13, 12, .88); border-color: rgba(241, 237, 228, .28); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8); }
  .uc-btn:hover { background: rgba(32, 31, 29, .95); border-color: rgba(241, 237, 228, .5); }
  .uc-btn.prev { left: calc(50% - min(620px, 54vw) / 2 - 76px); }
  .uc-btn.next { right: calc(50% - min(620px, 54vw) / 2 - 76px); }
  .uc-btn svg { width: 18px; height: 18px; }
}