/* Thors, night edition: a dark room where the example sites play as a reel. One blue satellite, and each
   example lights the room in its own colour. Motion is transform and opacity, plus the circle of the switch. */
:root {
  --bg: #060709;
  --bg-2: #0a0c0f;
  --panel: #0d1014;
  --panel-2: #13171d;
  --ink: #eef0f3;
  --ink-2: #aab0b9;
  --mute: #737a84;
  --line: rgba(238, 240, 243, .08);
  --line-2: rgba(238, 240, 243, .16);
  --line-3: rgba(238, 240, 243, .32);
  --blue: #3d6bff;
  --blue-hi: #8aa5ff;
  --err: #ff7a6b;
  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 48px);
  --nav-h: 68px;
  /* one easing for everything that moves, at .24s, .48s or .96s */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-io: cubic-bezier(.2, 0, 0, 1);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: dark;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
/* the page's ink is typed so it can fade: when the room changes colour, every word on the page changes with it, so no
   text is ever left in one room's ink on the next room's colour */
@property --ink { syntax: '<color>'; inherits: true; initial-value: #eef0f3; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: #aab0b9; }
@property --mute { syntax: '<color>'; inherits: true; initial-value: #737a84; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(238, 240, 243, .08); }
@property --line-2 { syntax: '<color>'; inherits: true; initial-value: rgba(238, 240, 243, .16); }
@property --line-3 { syntax: '<color>'; inherits: true; initial-value: rgba(238, 240, 243, .32); }
main { color: var(--ink); transition: --ink .6s var(--ease), --ink-2 .6s var(--ease), --mute .6s var(--ease), --line .6s var(--ease), --line-2 .6s var(--ease), --line-3 .6s var(--ease); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); background: var(--bg); }
html.is-locked { overflow: hidden; }
/* the body is its own layer, so the room's colour (.backdrop, behind everything else) paints over its background */
body {
  margin: 0; background: var(--bg); color: var(--ink); isolation: isolate;
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--blue); color: #fff; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { left: 8px; }
.wrap {
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}

/* ---------- type ---------- */
/* section titles are one quiet size, so the work and the figures lead */
.h2 { font: 800 clamp(30px, 2.9vw, 42px)/1 var(--display); font-variation-settings: 'wdth' 100; letter-spacing: -.03em; text-wrap: balance; }
.h3 { font: 800 clamp(26px, 2.6vw, 38px)/1 var(--display); font-variation-settings: 'wdth' 110; letter-spacing: -.035em; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 6vw, 88px); }
.head__p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em; height: 50px; padding: 0 22px;
  font: 600 15px/1 var(--display); font-variation-settings: 'wdth' 106; letter-spacing: .005em;
  border-radius: 999px; white-space: nowrap; text-decoration: none;
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn .arr { display: inline-block; transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn--light { background: var(--ink); color: #07080a; }
.btn--light:hover { background: #fff; }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--big { height: 60px; padding: 0 28px; font-size: 17px; }
.btn__min { font-weight: 500; font-size: .82em; opacity: .66; padding-left: .8em; border-left: 1px solid currentColor; line-height: 1; }

/* ---------- nav ---------- */
/* the nav takes the ink and colour of the room it is over */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); --nav-fg: var(--ink); --nav-bg: var(--bg); color: var(--nav-fg); transition: background-color .6s var(--ease), box-shadow .6s var(--ease), color .6s var(--ease); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; gap: 28px; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.nav.is-solid { background: var(--nav-bg); box-shadow: 0 1px 0 color-mix(in srgb, var(--nav-fg) 9%, transparent); }
.nav__logo { display: block; flex: none; }
.nav__logo { color: inherit; }
.nav__mark { display: block; width: 98px; height: auto; }
.nav__sat { fill: #5b84ff; }
.nav[data-ink="dark"] .nav__sat { fill: var(--blue); }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { text-decoration: none; font: 500 15px/1 var(--text); color: color-mix(in srgb, var(--nav-fg) 72%, transparent); position: relative; padding: 6px 0; transition: color .24s var(--ease); }
.nav__links a:hover { color: var(--nav-fg); }
.nav .lang button { color: color-mix(in srgb, var(--nav-fg) 54%, transparent); }
.nav .lang button:hover, .nav .lang button[aria-pressed="true"] { color: var(--nav-fg); }
.nav .nav__cta { background: var(--nav-fg); color: var(--nav-bg); transition: background-color .6s var(--ease), color .6s var(--ease); }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.lang { display: flex; gap: 2px; }
.lang button { font: 600 13px/1 var(--display); font-variation-settings: 'wdth' 92; letter-spacing: .05em; padding: 8px 7px; color: var(--mute); position: relative; transition: color .3s; }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--ink); }
.lang button[aria-pressed="true"]::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 1px; background: currentColor; }

/* ---------- hero: a film poster. The title fitted to the grid, one image (the reel), the billing under it ---------- */
/* clipped sideways, so the ring flying past the screen's edges never widens the page */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
/* the room light: the colours of whatever is playing, a faint wash over the whole room (a 4x3 canvas, scaled up smooth) */
.amb { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 2s var(--ease);
  -webkit-mask: radial-gradient(70% 60% at 50% 58%, #000 20%, transparent 100%); mask: radial-gradient(70% 60% at 50% 58%, #000 20%, transparent 100%); }
.amb.is-on { opacity: .26; }
.hero__in {
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "stage" "bill";
  /* the first screen under the nav, the padding over and under the poster, the gap between its rows */
  --V: calc(var(--vh) - var(--nav-h) - env(safe-area-inset-top, 0px));
  --pt: clamp(6px, 1.4vh, 16px); --pb: clamp(18px, 3.4vh, 36px); --g: clamp(14px, 2.5vh, 26px);
  row-gap: var(--g); align-content: center;
  min-height: var(--V);
  padding-block: var(--pt) var(--pb);
  /* the whole poster fits the first screen: the title is .0758 and the stage .4387 of the grid's width, and the billing
     under them is one row from 1240px of width (68px tall, 90px in English, whose words run a line longer), two rows
     104px tall below that. Where taking the billing in too would shrink the poster by more than 15% (short laptops),
     only the title and the stage are fitted, over 26px of air, and the billing waits whole under the fold. The min()s
     with a * 1000 are switches. */
  --w-stage: calc((var(--V) - var(--pt) - var(--g) - 26px) / .5145);
  --bh1: 68px;
  --w-one: calc((var(--V) - var(--pt) - 2 * var(--g) - var(--bh1) - var(--pb)) / .5145);
  --w-two: calc((var(--V) - var(--pt) - 2 * var(--g) - 104px - var(--pb)) / .5145);
  --w-fit: max(min(var(--w-two), 1239px), min(var(--w-one), (var(--w-one) - 1240px) * 1000));
  --w-only: min(var(--wrap), 100vw - 2 * var(--gut), var(--w-stage));
  max-width: calc(min(var(--wrap), max(var(--w-fit), min(var(--w-only), (var(--w-only) * .85 - var(--w-fit)) * 1000))) + 2 * var(--gut));
}
.hero__in:lang(en) { --bh1: 90px; }
/* the title spans the grid exactly: per language, Archivo's width axis is set so the line is --k em wide (tools/v18/fit.py,
   measured with WS=0.08), and the size is the grid's width divided by --k. On phones it runs in two lines, each with its
   own width. The extra word space keeps the narrowest lines from running their words together. */
.hero__h { grid-area: h; --k: 11; --w0: 84.1; --k2: 5.6164; --w1: 104.9; --w2: 75.1;
  font: 800 calc(100cqw / var(--k) * .996)/.84 var(--display); font-variation-settings: 'wdth' var(--w0); letter-spacing: -.04em; word-spacing: .08em; white-space: nowrap; margin-bottom: .05em; }
.hero__h:lang(sv) { --w0: 95; --k2: 4.9223; --w1: 70.6; --w2: 109.4; }
.hero__h:lang(en) { --w0: 82.2; --k2: 5.7848; --w1: 77.7; --w2: 102.3; }

/* the stage: the screen and the phone side by side at one height (the fractions are the two recordings' widths per unit
   of height), no bezels: each window has its device's own corner and a hairline */
.stage { grid-area: stage; position: relative; --sg: clamp(10px, 1.82cqw, 24px);
  display: grid; grid-template-columns: minmax(0, 1.77778fr) minmax(0, .46209fr); column-gap: var(--sg); align-items: start; cursor: pointer; }
.win { position: relative; min-width: 0; overflow: hidden; transform: translateZ(0); background: var(--panel); }
.win::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(238, 240, 243, .14); pointer-events: none; }
.win__view { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.win--screen { aspect-ratio: 16 / 9; border-radius: clamp(6px, .76cqw, 10px); }
.win--phone { aspect-ratio: 390 / 844; border-radius: 12% / 5.545%; }
.vid { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; background: transparent; }
.vid.is-top { z-index: 2; }
/* the layer that waits under the playing site with the next one loaded: never seen, so never painted */
.vid.is-parked { visibility: hidden; }
/* the switch: a ring of light opens out of the satellite and the next site is inside it */
.iris { position: absolute; left: 0; top: 0; z-index: 3; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(138, 165, 255, 0) 88%, rgba(138, 165, 255, .28) 95%, rgba(225, 233, 255, .95) 99%, rgba(255, 255, 255, 0) 100%); }
/* the clock: the satellite runs the edge of the screen (the phone, on phones) once per site, and the edge it has
   passed is lit */
.lap { position: absolute; left: 0; top: 0; z-index: 6; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .48s var(--ease); }
.lap path { fill: none; stroke: rgba(238, 240, 243, .78); stroke-width: 1.5px; stroke-linecap: butt; stroke-dasharray: 0 1; }
.sat { position: absolute; left: 0; top: 0; z-index: 7; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--bg); pointer-events: none; opacity: 0; will-change: transform; transition: opacity .48s var(--ease); }
.stage.is-clock .lap, .stage.is-clock .sat { opacity: 1; }
/* the aperture: on load the logo's ring stands over the screen with the first site already playing in its opening and
   the satellite docked in its socket. The satellite lifts out and flies to the screen's edge to be the clock, the opening
   widens into the screen and the ring flies past the edges. */
.aukko { position: absolute; z-index: 8; left: calc((100% - var(--sg)) * .39684); top: 50%; width: calc((100% - var(--sg)) * .39288); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; display: none; }
.stage.is-closed .aukko, .stage.is-opening .aukko { display: block; }
/* the ring and its satellite are stills of the logo's own 3D model (brand/logo/3d), face on: spun chrome with rolled
   edges, and a glass bead in a socket bored through the ring (tools/v18/aukko-assets.py). The ring is painted as a
   border image: it frames the content, so the browser's largest-paint measure goes to the headline, not to the frame. */
.aukko__ring { position: absolute; inset: 0; border-image: url(../img/aukko-ring.webp) 0 fill / 0 / 0 stretch; will-change: transform, opacity; }
/* the light the bead throws on the socket's rim and the ring's inner edge, added on top; it goes out as the bead leaves */
.aukko__ring::after { content: ''; position: absolute; inset: 0; border-image: url(../img/aukko-lit.webp) 0 fill / 0 / 0 stretch; mix-blend-mode: screen; mix-blend-mode: plus-lighter; opacity: var(--lit, 1); }
.aukko__bead { position: absolute; left: 66.359%; top: 11.592%; width: 25.451%; height: 25.636%; background: url(../img/aukko-bead.webp) center / 100% 100% no-repeat; will-change: transform, opacity; }
/* before the script runs the opening is already round, the same size the script gives it */
.stage.is-closed .win--screen .win__view { clip-path: circle(17.26% at 50% 50%); }
.stage.is-closed .win, .stage.is-opening .win { background: transparent; }
.stage.is-closed .win::after, .stage.is-opening .win::after { opacity: 0; }
.stage.is-closed .win--phone .win__view { clip-path: inset(50% 50% round 50%); }

/* the billing: the four sites as credits (the one playing in white, each a button), the words, the two buttons */
.bill { grid-area: bill; display: flex; align-items: center; gap: 14px clamp(24px, 3.4cqw, 52px); min-width: 0;
  /* when the poster was fitted without it, the billing starts just past the fold instead of peeking in sliced: --D is the
     room left under the stage on the first screen, and the margin switches on when the billing is taller than that */
  --bill-h: var(--bh1); --D: calc(var(--V) - var(--pt) - var(--g) - .5145 * 100cqw);
  margin-top: max(0px, min(var(--D) - var(--g) + 2px, (var(--g) + var(--bill-h) + 8px - var(--D)) * 1000)); }
.credits { display: flex; align-items: center; gap: 16px; flex: none; }
.credits__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px clamp(14px, 1.9cqw, 28px); }
.cr { display: block; padding: 8px 0; font: 700 17px/1.2 var(--display); font-variation-settings: 'wdth' 100; letter-spacing: -.012em; white-space: nowrap; color: rgba(238, 240, 243, .56); transition: color .48s var(--ease); }
.cr:hover { color: rgba(238, 240, 243, .82); }
.cr.is-on { color: var(--ink); }
.cr__kind { display: none; }
.hero__sub { margin: 0 0 0 auto; flex: 0 1 46ch; min-width: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hero__actions { flex: none; display: flex; gap: 10px; }
/* under 1240px of grid the words would be squeezed between the credits and the buttons: the credits take a row of their own */
@container (max-width: 1239px) {
  .bill { flex-wrap: wrap; --bill-h: 104px; }
  .credits { flex: 1 1 100%; }
  .hero__sub { margin-left: 0; flex: 1 1 22rem; max-width: 70ch; }
  .hero__actions { margin-left: auto; }
}
/* pause / play for every video on the page */
.reel__toggle { order: -1; position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); transition: box-shadow .24s var(--ease); }
.reel__toggle:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.reel__toggle::before, .reel__toggle::after { content: ''; position: absolute; top: 12px; width: 3px; height: 10px; background: var(--ink); }
.reel__toggle::before { left: 13px; }
.reel__toggle::after { left: 18px; }
.reel__toggle[data-state="off"]::before { left: 14px; top: 11px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--ink); }
.reel__toggle[data-state="off"]::after { display: none; }

/* ---------- the examples: a chapter each, laid out for its business. The room takes each business's colour when its
   chapter reaches the middle of the screen; the info block is the same in all four. ---------- */
.backdrop { position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; background: var(--bg); transition: background-color .6s var(--ease); pointer-events: none; }
.demos { padding-top: clamp(80px, 10vw, 150px); }
.demo { position: relative; padding-block: clamp(72px, 9vw, 140px); --sg: clamp(10px, 1.82vw, 24px); }
.demo ::selection { background: var(--c-fg); color: var(--c-bg); }
.demo__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 3.4vw, 50px); }
.demo__media { min-width: 0; }
.demo__rig { display: grid; column-gap: var(--sg); align-items: start; color: inherit; text-decoration: none; }
.demo__rig .win { background: color-mix(in srgb, var(--c-fg) 9%, var(--c-bg)); }
.demo__rig .win::after { box-shadow: inset 0 0 0 1px var(--c-line); }
.demo__name { margin: 0; line-height: 0; min-width: 0; }
/* the name is the site's own lettering, cut out of the room's ink */
.demo__wm { display: block; width: 100%; aspect-ratio: var(--wa); background: currentColor; -webkit-mask: var(--wm) center / 100% 100% no-repeat; mask: var(--wm) center / 100% 100% no-repeat; }
.demo__wm--rakennus { --wm: url(../img/wm-rakennus.svg?v=26); }
.demo__wm--kahvila { --wm: url(../img/wm-kahvila.svg?v=26); }
.demo__wm--sauna { --wm: url(../img/wm-sauna.svg?v=26); }
.demo__wm--hammas { --wm: url(../img/wm-hammas.svg?v=26); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo__info { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px clamp(16px, 1.8vw, 24px); align-items: start; }
.demo__kind { grid-column: 1 / span 3; margin: 0; padding-top: 3px; font-size: 15px; color: var(--ink-2); }
.demo__line { grid-column: 4 / span 4; margin: 0; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; text-wrap: pretty; }
.demo__feats { grid-column: 8 / span 3; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.demo__feats li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
/* "open the site" wears that site's own button */
.demo__go { grid-column: 11 / span 2; justify-self: end; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; font: 600 15px/1 var(--text); letter-spacing: .005em; text-decoration: none; white-space: nowrap; color: var(--c-btn-fg); background: var(--c-btn-bg); transition: filter .24s var(--ease), color .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease); }
.demo__go[data-btn="box"] { border-radius: 3px; }
.demo__go[data-btn="pill"] { border-radius: 999px; }
.demo__go[data-btn="line"] { height: auto; padding: 0 0 7px; font-size: 18px; border-bottom: 1px solid currentColor; }
/* while another chapter has the room (the next one's colour comes in while this info is still on screen), the button
   steps back to the room's own line button, so it never sits unreadable on another business's colour */
.demo:not(.is-room) .demo__go { color: var(--ink); background-color: transparent; box-shadow: inset 0 0 0 1px var(--line-3); }
.demo:not(.is-room) .demo__go[data-btn="line"] { box-shadow: none; }
.demo__go:hover { filter: brightness(1.1); }
.demo--light .demo__go:hover { filter: brightness(1.25); }
.demo__arr { display: inline-block; transition: transform .24s var(--ease); }
.demo__go:hover .demo__arr { transform: translateX(3px); }
.demo .win--screen { border-radius: clamp(6px, .76vw, 10px); }
/* Mäki: heavy and flush left. The screen and the phone across the grid, the name huge under them */
.demo--wide .demo__rig { grid-template-columns: minmax(0, 1.77778fr) minmax(0, .46209fr); }
/* Laituri: centred. The phone first, and the name stands behind the windows like a magazine's masthead behind its
   cover, its foot hidden by their top edge */
.demo--center .demo__in { justify-items: center; }
.demo--center .demo__name { order: -1; position: relative; z-index: 0; width: min(60%, 760px); margin-bottom: calc(min(60%, 760px) * var(--wr) * -.2 - clamp(26px, 3.4vw, 50px)); }
.demo--center .demo__media { position: relative; z-index: 1; width: 86%; }
.demo--center .demo__rig { grid-template-columns: minmax(0, .46209fr) minmax(0, 1.77778fr); }
.demo--center .demo__rig .win--phone { order: -1; }
.demo--center .demo__info { justify-self: stretch; }
/* Saunasaari: wide. The screen runs edge to edge like a film; the film carries the big title, so the name is a credit
   under it, in the first column */
.demo--cinema .demo__media { width: 100vw; margin-left: calc(50% - 50vw); }
.demo--cinema .demo__rig { grid-template-columns: minmax(0, 1fr); }
.demo--cinema .win--screen { aspect-ratio: 2.35 / 1; border-radius: 0; }
.demo--cinema .win--screen .vid { object-position: 50% 42%; }
.demo--cinema .demo__rig .win::after { box-shadow: none; }
.demo--cinema .demo__name { grid-column: 1 / span 3; width: min(100%, 280px); padding-top: 4px; }
.demo--cinema .win--phone { display: none; }
/* Lumo: strictly symmetrical. The name, the phone and the words on one axis */
.demo--calm .demo__in { justify-items: center; text-align: center; }
.demo--calm .demo__name { order: -1; width: min(28%, 360px); }
.demo--calm .demo__media { width: min(25vw, 340px, calc(70lvh * .46209)); }
.demo--calm .demo__rig { grid-template-columns: minmax(0, 1fr); }
.demo--calm .win--screen { display: none; }
.demo--calm .demo__info { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 46rem; }
.demo--calm .demo__kind { padding: 0; }
.demo--calm .demo__feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; border: 0; }
.demo--calm .demo__feats li { border: 0; padding: 0; }
.demo--calm .demo__go { justify-self: center; }

/* ---------- already online: smaller, after the examples ---------- */
.live { padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 150px); border-top: 1px solid var(--line); }
.live__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.live__head p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.live__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lv { display: block; min-width: 0; text-decoration: none; color: inherit; }
.lv__fig { position: relative; margin: 0; border-radius: clamp(6px, .76vw, 10px); overflow: hidden; background: var(--panel); transform: translateZ(0); }
.lv__fig::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; }
.lv__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
/* the first screen of each site as a visitor sees it on a laptop, taken 2026-10-19 */
.lv__shot img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: opacity .48s var(--ease); }
.lv:hover .lv__shot img, .lv:focus-visible .lv__shot img { opacity: 1; }
.lv__cap { display: grid; gap: 3px; padding-top: 14px; }
.lv__name { font: 700 17px/1.15 var(--display); font-variation-settings: 'wdth' 106; letter-spacing: -.01em; }
.lv__role { font-size: 14px; color: var(--ink-2); }
.lv__url { margin-top: 6px; font-size: 13px; color: var(--mute); }

/* ---------- packages: a plain price list ---------- */
.packages { position: relative; padding: clamp(80px, 10vw, 150px) 0; border-top: 1px solid var(--line); }
.pk { border-top: 1px solid var(--line-3); }
.pkr { position: relative; display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 4fr) 13rem 8.5rem; gap: 14px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(26px, 3vw, 38px) 0; border-bottom: 1px solid var(--line); }
/* the whole row picks the package (the button's hit area covers it) */
.pkr::before { content: ''; position: absolute; inset: 0 calc(-1 * clamp(12px, 1.4vw, 20px)); border-radius: 4px; background: var(--ink); opacity: 0; transition: opacity .24s var(--ease); pointer-events: none; }
.pkr:has(.pkr__pick:hover)::before { opacity: .035; }
.pkr__pick::after { content: ''; position: absolute; inset: 0; }
.pkr__head, .pkr__body { min-width: 0; }
.pkr__name { font: 800 clamp(26px, 2.4vw, 34px)/1 var(--display); font-variation-settings: 'wdth' 110; letter-spacing: -.03em; }
.pkr__line { margin: 0; font-size: 17px; max-width: 40ch; text-wrap: pretty; }
.pkr__inc { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: 15px; color: var(--ink-2); }
.pkr__price { margin: 0; display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 6px; white-space: nowrap; }
.pkr__from { grid-column: 1 / -1; justify-self: end; margin-bottom: 6px; font-size: 13px; color: var(--mute); }
.pkr__num { font: 800 clamp(40px, 4vw, 62px)/.86 var(--display); font-variation-settings: 'wdth' 112; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pkr__eur { font: 700 clamp(18px, 1.5vw, 22px)/1 var(--display); color: var(--ink-2); }
.pkr__pick { justify-self: end; align-self: center; }
.pkr--care .pkr__name { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.02em; }
.pkr--care .pkr__line { color: var(--ink-2); font-size: 16px; }
.pkr--care .pkr__num { font-size: clamp(28px, 2.4vw, 36px); }
.pkr--care .pkr__eur { font-size: 16px; }

/* ---------- how: one week drawn to scale. Your fifteen minutes are 15 of its 10 080 minutes, a blue sliver at the
   start; the rest of the bar is ours; the ring at the end is the day it goes live ---------- */
.how { --g: clamp(20px, 3vw, 48px); padding: clamp(80px, 10vw, 150px) 0; border-top: 1px solid var(--line); }
.week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "you us" "bar bar" "end end"; row-gap: 14px; margin-bottom: clamp(40px, 5vw, 64px); }
.week p { margin: 0; }
.week__you { grid-area: you; position: relative; padding-left: 14px; }
.week__you::before { content: ''; position: absolute; left: 0; top: .2em; bottom: -14px; width: 1px; background: var(--blue-hi); }
.week__us { grid-area: us; }
.week__n { display: block; font: 800 clamp(30px, 3vw, 44px)/1 var(--display); font-variation-settings: 'wdth' 108; letter-spacing: -.04em; }
.week__l { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.week__bar { grid-area: bar; position: relative; display: flex; align-items: center; height: 22px; padding-right: 11px; }
.week__mine { flex: none; width: max(2px, calc((100% - 11px) * 15 / 10080)); height: 22px; background: var(--blue); }
.week__ours { flex: 1; height: 10px; background: var(--line-3); }
.week__live { position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--ink); background: var(--bg); }
.week__end { grid-area: end; justify-self: end; font-size: 15px; color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.step { min-width: 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.step h3 { font: 700 20px/1.2 var(--display); font-variation-settings: 'wdth' 104; letter-spacing: -.01em; }
.step p:last-child { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; max-width: 40ch; text-wrap: pretty; }

/* ---------- questions: a plain list that opens in place, in the price list's text column ---------- */
.faq { padding: clamp(80px, 10vw, 150px) 0; border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 4fr) 13rem 8.5rem; gap: 0 clamp(20px, 3vw, 48px); }
.faq__list { grid-column: 2 / -1; border-top: 1px solid var(--line-3); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; cursor: pointer; font: 700 clamp(18px, 1.5vw, 21px)/1.3 var(--display); font-variation-settings: 'wdth' 104; letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .35s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: #fff; }
.qa summary:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; border-radius: 2px; }
.qa p { margin: 0; padding: 0 0 26px; max-width: 62ch; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
main:focus { outline: none; }
@media (max-width: 1080px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__list { grid-column: 1; }
}

/* ---------- CTA + footer ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(90px, 12vw, 180px) 0 clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); }
.cta__in { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 4.4vw, 64px) clamp(24px, 5vw, 80px); align-items: end; }
/* the hero title's size, in two lines; on phones each line is fitted to the grid (tools/v18/fit.py, WS=0.08) */
.cta__h { grid-column: 1 / -1; --k2: 6.0106; --w1: 87.4; --w2: 92.6;
  font: 800 calc(100cqw / 11 * .996)/.9 var(--display); font-variation-settings: 'wdth' 92; letter-spacing: -.04em; word-spacing: .08em; }
.cta__h .ln { display: block; }
.cta__h:lang(sv) { --k2: 7.2955; --w1: 80.5; --w2: 99.4; }
.cta__h:lang(en) { --k2: 8.277; --w1: 80.6; --w2: 99.4; }
.cta__sig { margin: 0; padding-top: 22px; border-top: 1px solid var(--line-2); max-width: 38rem; }
.cta__q { margin: 0; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; text-wrap: pretty; }
.cta__sig figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 18px; font-size: 15px; }
.cta__name { font-weight: 600; }
.cta__role { color: var(--ink-2); }
.cta__side { display: grid; gap: 22px; justify-items: start; }
.cta__note { margin: 0; color: var(--ink-2); max-width: 40ch; }
.cta__or { margin: 0; color: var(--ink-2); font-size: 15px; }
.cta__or a { color: var(--ink); }
.foot { padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
/* the logo's own 3D model (brand/logo/3d), still; one pass of light runs over the chrome when it comes into view */
.foot__mark { position: relative; margin: 0; padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); }
.foot__logo { display: block; width: 100%; height: auto; }
.foot__glint { position: absolute; left: 0; right: 0; top: clamp(40px, 6vw, 80px); bottom: clamp(36px, 5vw, 64px); pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, .5) 50%, transparent 60% 100%) 100% 0 / 260% 100% no-repeat; }
.foot__mark.is-on .foot__glint { -webkit-mask: url(../img/thors-3d-1200.webp) center / 100% 100% no-repeat; mask: url(../img/thors-3d-1200.webp) center / 100% 100% no-repeat; animation: glint 1.8s var(--ease) .2s both; }
@keyframes glint { from { opacity: 1; background-position: 100% 0; } to { opacity: 1; background-position: 0 0; } }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.foot__row p { margin: 0; }
.foot__row a { color: var(--ink); }
.foot__row .lang { margin-left: auto; }
.foot__c { color: var(--mute); font-size: 14px; }

/* ---------- brief dialog: the satellite travels the ring as you go ---------- */
.brief { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: grid; grid-template-columns: minmax(300px, 31vw) 1fr; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.brief[hidden] { display: none; }
.brief.is-open { opacity: 1; transform: none; }
.brief__rail { background: var(--bg-2); box-shadow: 1px 0 0 var(--line); color: var(--ink); padding: 24px clamp(24px, 3vw, 48px) clamp(28px, 5vh, 52px); display: flex; flex-direction: column; min-height: 0; }
.brief__rail > img { width: 92px; height: auto; }
.brief__orbit { position: relative; width: 168px; height: 168px; margin-top: auto; }
.brief__ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.brief__ring circle { fill: none; stroke-width: 7; }
.brief__ring .r0 { stroke: rgba(238, 240, 243, .1); }
.brief__ring .r1 { stroke: #c9ccd1; stroke-dasharray: 0 100; transition: stroke-dasharray 1.1s var(--ease-io); }
.brief__sat { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--blue); transform: rotate(var(--turn, 0deg)) translateY(-72.8px); transition: transform 1.1s var(--ease-io); }
.brief__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 40px/1 var(--display); font-variation-settings: 'wdth' 116; letter-spacing: -.04em; }
.brief__count span { color: var(--mute); }
.brief__title { margin: 34px 0 8px; font: 800 clamp(34px, 3.2vw, 52px)/.95 var(--display); font-variation-settings: 'wdth' 116; letter-spacing: -.045em; }
.brief__time { margin: 0 0 26px; color: var(--ink-2); font-size: 15px; }
.brief__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; color: var(--mute); }
.brief__steps li { position: relative; padding: 5px 0 5px 22px; transition: color .4s; }
.brief__steps li::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.brief__steps li.is-done { color: var(--ink-2); }
.brief__steps li.is-done::before { background: currentColor; }
.brief__steps li.is-now { color: var(--ink); font-weight: 600; }
.brief__form { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-rows: auto 1fr auto; padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(24px, 5vw, 88px) 0; }
.brief__top { display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-height: 44px; }
.brief__mcount { display: none; }
.brief__close { font: 600 15px/1 var(--display); display: inline-flex; gap: 8px; align-items: center; padding: 8px 0; }
.brief__close span[aria-hidden] { font-size: 24px; line-height: 1; font-weight: 400; }
.brief__body { padding: clamp(28px, 7vh, 90px) 0 40px; max-width: 880px; width: 100%; }
.bq { margin: 0; font: 800 clamp(34px, 4.2vw, 64px)/.95 var(--display); font-variation-settings: 'wdth' 112; letter-spacing: -.045em; max-width: 16ch; text-wrap: balance; }
.bq + .bh { margin: 16px 0 0; color: var(--mute); font-size: 15px; }
.bf { display: grid; gap: 18px; align-content: start; margin-top: clamp(28px, 5vh, 48px); }
.bstep.is-enter .bq, .bstep.is-enter .bf, .bstep.is-enter .bh { animation: rise .7s var(--ease) both; }
.bstep.is-enter .bf { animation-delay: .06s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.fld { display: grid; gap: 6px; }
.fld span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fld input, .fld textarea { font: inherit; font-size: 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-3); padding: 10px 0 12px; border-radius: 0; outline: none; transition: border-color .3s; resize: vertical; }
.fld input[aria-invalid="true"] { border-bottom-color: var(--err); }
.fld textarea { min-height: 84px; }
.fld input:focus, .fld textarea:focus { border-bottom-color: var(--blue-hi); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; box-shadow: inset 0 0 0 1px var(--line-3); border-radius: 999px; font-size: 16px; font-weight: 500; transition: background-color .3s, color .3s, box-shadow .3s; }
.chip:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.opt__in { display: grid; gap: 4px; padding: 14px 16px 16px; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 12px; transition: box-shadow .3s, background-color .3s; height: 100%; }
.opt:hover .opt__in { box-shadow: inset 0 0 0 1px var(--line-3); }
.opt input:checked + .opt__in { box-shadow: inset 0 0 0 2px var(--ink); background: rgba(238, 240, 243, .05); }
.opt input:focus-visible + .opt__in { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.opt__t { font-weight: 600; font-size: 17px; }
.opt__d { font-size: 14px; color: var(--mute); }
.opt__sw { height: 64px; margin-bottom: 10px; border-radius: 6px; position: relative; overflow: hidden; }
.sw-calm { background: #e9ecef; }
.sw-calm::before { content: ''; position: absolute; left: 12px; top: 14px; width: 46%; height: 8px; background: #7d8a96; border-radius: 4px; }
.sw-calm::after { content: ''; position: absolute; left: 12px; top: 30px; width: 30%; height: 5px; background: #b6bfc7; border-radius: 3px; box-shadow: 0 10px 0 #c9d0d6; }
.sw-bold { background: #1b1e24; box-shadow: inset 0 0 0 1px rgba(238, 240, 243, .08); }
.sw-bold::before { content: 'Aa'; position: absolute; left: 10px; bottom: -14px; font: 900 64px/1 var(--display); font-variation-settings: 'wdth' 125; letter-spacing: -.06em; color: #f4f5f7; }
.sw-bold::after { content: ''; position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; background: #e9e46b; }
.sw-warm { background: #d8c3a8; }
.sw-warm::before { content: ''; position: absolute; left: -10px; bottom: -26px; width: 90px; height: 70px; border-radius: 50%; background: #9c6b44; }
.sw-warm::after { content: ''; position: absolute; right: 14px; top: 12px; width: 40%; height: 6px; background: #5a4030; box-shadow: 0 12px 0 #7d5c45; }
.sw-tech { background: #dfe3e6; background-image: linear-gradient(90deg, transparent 0 49.5%, rgba(13, 15, 18, .25) 49.5% 50.5%, transparent 50.5%); }
.sw-tech::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid #1b1f24; transform: rotate(45deg); }
.pkopts { display: grid; gap: 10px; }
.pkopt .opt__in { grid-template-columns: 1fr auto; align-items: baseline; padding: 18px; }
.pkopt .opt__t { font: 800 20px/1.1 var(--display); font-variation-settings: 'wdth' 110; letter-spacing: -.02em; }
.pkopt .opt__p { font-weight: 600; font-size: 18px; white-space: nowrap; }
.pkopt .opt__d { grid-column: 1 / -1; }
.pkopt .opt__p small { font-weight: 500; font-size: 13px; color: var(--mute); margin-right: 6px; }
.care { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-size: 16px; cursor: pointer; }
.care input { width: 20px; height: 20px; accent-color: var(--blue); margin: 0; }
/* the buttons stay in reach while a long step scrolls under them */
.brief__nav { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 20px; padding: 18px 0 calc(clamp(20px, 4vh, 40px) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.brief__nav [data-brief-next] { margin-left: auto; }
.brief__err { margin: 0; font-size: 14px; color: var(--err); }
.brief__nav.is-first [data-brief-back] { visibility: hidden; }
.brief__nav.is-done { display: none; }
.thanks .bq { font-size: clamp(56px, 8vw, 132px); }
.thanks__p { font-size: 18px; color: var(--ink-2); margin: 22px 0 28px; max-width: 44ch; }
.thanks__p strong { color: var(--ink); }
.thanks dl { margin: 0 0 32px; border-top: 1px solid var(--ink); }
.thanks dl div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.thanks dt { font-size: 14px; font-weight: 600; color: var(--mute); }
.thanks dd { margin: 0; font-size: 16px; }
.brief.is-thanks .brief__sat { transform: rotate(360deg) translateY(-72.8px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .lang { margin-left: auto; }
  .live__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .pkr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head price" "body pick"; align-items: start; gap: 16px 32px; }
  .pkr__head { grid-area: head; }
  .pkr__body { grid-area: body; }
  .pkr__price { grid-area: price; }
  .pkr__pick { grid-area: pick; align-self: end; }
}
@media (max-width: 1100px) {
  .demo__info { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .demo__kind, .demo--cinema .demo__name { grid-column: 1 / span 2; }
  .demo__line { grid-column: 3 / span 4; }
  .demo__feats { grid-column: 3 / span 4; }
  .demo__go { grid-column: 3 / span 4; justify-self: start; }
}
@media (max-width: 900px) {
  .head { grid-template-columns: minmax(0, 1fr); }
  .cta__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  body { font-size: 16px; }
  .nav__in { gap: 10px; }
  .nav__mark { width: 88px; }
  .lang button { padding: 8px 5px; font-size: 12px; }
  .lang button[aria-pressed="true"]::after { left: 5px; right: 5px; }
  /* phones: the title in two fitted lines; the phone recording only, with the credits standing beside it */
  .hero__in { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); grid-template-areas: "h h" "stage credits" "sub sub" "act act"; gap: 18px 16px; align-content: start; min-height: 0; padding-block: 10px 30px; max-width: calc(var(--wrap) + 2 * var(--gut)); }
  .hero__h { font-size: calc(100cqw / var(--k2) * .996); line-height: .9; white-space: normal; }
  .hero__h .ln { display: block; white-space: nowrap; }
  .hero__h .ln:first-child { font-variation-settings: 'wdth' var(--w1); }
  .hero__h .ln + .ln { font-variation-settings: 'wdth' var(--w2); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage .win--screen { display: none; }
  .aukko { left: 50%; width: 90%; }
  .aukko__ring { border-image-source: url(../img/aukko-ring-sm.webp); }
  .aukko__ring::after { border-image-source: url(../img/aukko-lit-sm.webp); }
  .stage.is-closed .win--phone .win__view { clip-path: circle(15.11% at 50% 50%); }
  .bill { display: contents; }
  .credits { grid-area: credits; flex-direction: column; align-items: flex-start; justify-content: space-between; align-self: stretch; gap: 16px; }
  .credits__list { flex-direction: column; gap: 4px; }
  .cr { white-space: normal; font-size: 16px; padding: 6px 0; text-align: left; }
  .cr__kind { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--text); }
  .reel__toggle { order: 0; }
  .hero__sub { grid-area: sub; margin: 0; font-size: 16px; }
  .hero__actions { grid-area: act; margin-left: 0; }
  .hero__actions .btn { flex: 1 1 auto; }
  /* the examples on phones: the computer recording across the screen (Lumo keeps its phone), the info in one column */
  .demo { padding-block: 64px 84px; }
  .demo__in { row-gap: 22px; }
  .demo .demo__rig { grid-template-columns: minmax(0, 1fr); }
  .demo .demo__rig .win--phone { display: none; }
  .demo .demo__rig .win--screen { display: block; aspect-ratio: 16 / 10; }
  .demo--calm .demo__rig .win--phone { display: block; }
  .demo--calm .demo__rig .win--screen { display: none; }
  .demo--center .demo__media { width: 100%; }
  .demo--center .demo__name { width: 74%; margin-bottom: calc(74% * var(--wr) * -.2 - 22px); }
  .demo--calm .demo__media { width: 62%; }
  .demo--calm .demo__name { width: 46%; }
  .demo__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .demo--calm .demo__info { align-items: center; }
  .demo__feats { align-self: stretch; }
  .demo--calm .demo__feats { flex-direction: column; align-items: center; gap: 6px; }
  .demo__go { height: 46px; margin-top: 6px; }
  .pkr { grid-template-areas: "head head" "body body" "price pick"; align-items: center; gap: 14px 16px; }
  .pkr__price { justify-content: flex-start; }
  .live__grid { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding: 0 max(var(--gut), env(safe-area-inset-left, 0px)) 8px; scroll-padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); }
  .live__grid::-webkit-scrollbar { display: none; }
  .lv { flex: 0 0 72%; scroll-snap-align: start; }
  .week { grid-template-columns: minmax(0, 1fr); grid-template-areas: "you" "us" "bar" "end"; row-gap: 18px; }
  .week__you::before { display: none; }
  .week__you { padding-left: 0; }
  .week__us { padding-left: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cta__h { font-size: calc(100cqw / var(--k2) * .996); line-height: .9; white-space: normal; }
  .cta__h .ln { display: block; white-space: nowrap; }
  .cta__h .ln:first-child { font-variation-settings: 'wdth' var(--w1); }
  .cta__h .ln + .ln { font-variation-settings: 'wdth' var(--w2); }
  .btn--big { height: 56px; font-size: 16px; }
  .foot__row .lang { margin-left: 0; }
  .brief { grid-template-columns: 1fr; }
  .brief__rail { display: none; }
  .brief__form { padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
  .brief__top { justify-content: space-between; }
  .brief__nav.is-first [data-brief-back] { display: none; }
  .brief__mcount { display: block; font: 800 22px/1 var(--display); font-variation-settings: 'wdth' 116; letter-spacing: -.03em; color: var(--mute); }
  .brief__mcount b { color: var(--ink); }
  .brief__body { padding-top: 24px; }
  .bf { margin-top: 26px; }
  .opts { grid-template-columns: 1fr; }
  .opt__sw { height: 44px; }
  .thanks dl div { grid-template-columns: 100px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}
.lv__cap p { margin: 0; }

/* live form: a hidden field only bots fill in, the privacy line, the sending state */
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.bpriv { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--mute); }
.bpriv a { color: var(--ink-2); text-underline-offset: 3px; }
.brief__nav [data-brief-next][aria-busy="true"] { opacity: .6; cursor: progress; }

/* extras under the price list: one plain list, no cards */
.pkx { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 4fr) 13rem 8.5rem; gap: 14px clamp(20px, 3vw, 48px); padding: clamp(26px, 3vw, 38px) 0 0; }
.pkx__h { margin: 0; font: 700 clamp(20px, 1.7vw, 24px)/1.1 var(--display); letter-spacing: -.02em; }
.pkx__list { grid-column: 2 / 4; list-style: none; margin: 0; padding: 0; }
.pkx__it { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pkx__it:first-child { padding-top: 0; }
.pkx__name { font-weight: 600; }
.pkx__line { color: var(--ink-2); font-size: 15px; }
.pkx__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
  .pkx { grid-template-columns: 1fr; }
  .pkx__list { grid-column: 1; }
}
@media (max-width: 900px) {
  .pkx__it { grid-template-columns: minmax(0, 1fr) auto; }
  .pkx__line { grid-column: 1 / -1; grid-row: 2; }
}
/* the form: AI helper, colour wishes, add-ons */
.ai { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: -6px; }
.ai__btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.ai__msg { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--mute); }
.sub { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sub span { font-weight: 400; color: var(--mute); margin-left: 6px; }
.cols { margin-top: 10px; }
.cols__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cl { position: relative; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; display: grid; place-items: center; transition: box-shadow .3s; }
.cl:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cl input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; border: 0; padding: 0; cursor: pointer; }
.cl span { width: 14px; height: 14px; position: relative; }
.cl span::before, .cl span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--ink-2); }
.cl span::after { transform: rotate(90deg); }
.cl.is-set { background: var(--c); box-shadow: inset 0 0 0 1px rgba(238, 240, 243, .25); }
.cl.is-set span { display: none; }
.cl:has(input:focus-visible) { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.cols__clear { font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.xtr { margin-top: 10px; }
.xtr .chip span { height: 40px; padding: 0 16px; font-size: 15px; }
.dot { display: inline-block; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(238, 240, 243, .25); vertical-align: -3px; }