/* The front page (/): the website shop, on top of the shared public/ink.css. The entrance is the landing (the big 3D m on its glass, mcat.js); scrolling on fades
   it to black while the m flies to the top-right corner. Then plain black, one screen per question, each laid out its
   own way (question and answer in different corners, so the screens don't repeat), with the answers kept compact so
   the empty space stays empty. White type, grey for what you haven't picked (light enough to read: 5:1 and up on
   black), pink for what you have. The wordmark is centred, so the entrance is symmetric.
   .sx-stage is fixed behind the page at the entrance and lifted over it once the m is docked (body.docked), where it
   lets every click through; a band at the top then fades the page out under it.
   Font: Instrument Sans. No inline styles anywhere: the CSP forbids them. */

.sx { --word: clamp(1.45rem, 2.3vw, 2.7rem); }
/* no snapping: the page flows, and the wheel glides (public/js/glide.js); links to a screen scroll there smoothly */
html:has(body.sx) { scroll-behavior: smooth; }
/* ---- the entrance: the m's outline traces itself in one pass and fills; then (public/js/store.js) it glides onto the
   3D m waiting behind and dissolves into it while the black falls away (the first visit of a session only: html.no-intro
   is set before the first paint; a click, tap, key or scroll fades it at once) ---- */
.sx-intro { position: fixed; inset: 0; z-index: 60; overflow: hidden; }
.sx-im-black, .sx-im-ink { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sx-im-black { background: #000; }
.sx-im-ink { transform-origin: 0 0; }
.sx-im-fill { fill: var(--pink); opacity: 0; animation: sx-fill .2s ease-out .62s forwards; }
.sx-im-line { fill: none; stroke: var(--pink); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: sx-trace .6s cubic-bezier(.65, 0, .35, 1) .05s forwards; }
@keyframes sx-trace { to { stroke-dashoffset: 0; } }
@keyframes sx-fill { to { opacity: 1; } }
/* the black goes first, around the flat m; then the flat m dissolves into the 3D one, which is in the clear by then */
.sx-intro.is-open .sx-im-black { opacity: 0; transition: opacity .45s ease-out; }
.sx-intro.is-open .sx-im-ink { opacity: 0; transition: opacity .35s ease-in-out .3s; }
html.no-intro .sx-intro, html:not(.js) .sx-intro { display: none; }
.sx-intro.is-skipped { transition: opacity .25s; opacity: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sx-form input[type="radio"], .sx-form input[type="checkbox"], .sx-form input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sx-form label { cursor: pointer; }
.sx-form label:has(> input:disabled) { cursor: not-allowed; opacity: .35; }
.sx-form label:has(> input:is([type="radio"], [type="checkbox"], [type="file"]):focus-visible) { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 4px; }

/* ---- the stage ---- */
.sx-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sx.docked .sx-stage { z-index: 4; }
/* on the front page the m belongs to the entrance and scrolls away with it; once the entrance is covered it is taken
   off the page (stage.js), so nothing is drawn behind the other screens */
.sx:not(.sx-order) .sx-stage { position: absolute; inset: 0 0 auto; height: 100svh; }
.sx.past-hero .sx-stage { display: none; }
.sx-stage > svg { display: none; position: absolute; right: var(--gut); top: 1.3rem; width: clamp(44px, 4vw, 84px); }
.sx-stage.no-3d > svg { display: block; } /* the flat m only where the 3D one can't run */
.sx-stage.no-3d canvas { visibility: hidden; } /* a lost 3D canvas can show white */
/* at the entrance the flat m stands where the 3D one would, large in the middle, not small in the corner */
.sx:not(.docked) .sx-stage.no-3d > svg { right: auto; left: 50%; top: 40%; width: min(48vw, 64svh); translate: -50% -50%; }
.sx-stage canvas { display: block; width: 100%; height: 100%; }
.sx-band { position: fixed; top: 0; left: 0; right: 0; z-index: 3; height: 5.4rem; pointer-events: none; background: linear-gradient(#000 50%, rgba(0, 0, 0, 0)); opacity: 0; transition: opacity .3s; }
.sx.docked .sx-band { opacity: 1; }
.sx-hero { position: relative; z-index: 1; min-height: 100svh; }
/* the other language, quietly under the way in, so the entrance stays symmetric */
.sx-foot .sx-lang { color: var(--ink-3); font-size: .85rem; text-decoration: none; }
.sx-foot .sx-lang:hover { color: var(--ink); text-decoration: underline; }
.sx-foot { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 7vh, 4.5rem); display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 0 1rem; text-align: center; pointer-events: none; }
.sx-foot h1 { margin: 0; font-size: clamp(1.25rem, 1.9vw, 2rem); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.sx-foot a { pointer-events: auto; color: var(--ink-2); font-size: .98rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .4em; transition: color .3s, text-decoration-color .3s; }
.sx-foot a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.sx-form { position: relative; z-index: 1; }

/* ---- the collection: one site to a screen, playing in a frame on a dark tint of its own colours, with one line under
   it (its name, which links to it, and its trade); every other screen the frame sits to the other side. The screens
   stack like the questions do ---- */
.sx-show { position: relative; z-index: 1; }
.sx-piece { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: center; row-gap: 1.2rem;
  min-height: 100svh; box-sizing: border-box; padding: clamp(5rem, 11vh, 7rem) var(--gut) clamp(5rem, 11vh, 7rem); overflow: hidden; isolation: isolate; background: var(--tint); }
.sx-piece-kuvitelma { --tint: #0b0d0e; --glow: rgba(214, 222, 224, .16); }
.sx-piece-hanki { --tint: #110a09; --glow: rgba(196, 46, 56, .18); }
.sx-piece-frame { grid-area: 1 / 1 / 2 / 10; display: block; aspect-ratio: 16 / 10; max-height: 68svh; overflow: hidden; border-radius: 6px; background: #111;
  box-shadow: 0 0 0 1px var(--line), 0 2.5rem 7rem -2rem var(--glow); }
.sx-piece-frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sx-piece-cap { grid-area: 2 / 1 / 3 / 10; margin: 0; color: var(--ink-2); font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 400; line-height: 1.4; }
.sx-piece-cap a { margin-right: .5em; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: text-decoration-color .3s; }
.sx-piece-cap a:hover { text-decoration-color: currentColor; }
.sx-piece.is-flip .sx-piece-frame { grid-area: 1 / 4 / 2 / 13; }
.sx-piece.is-flip .sx-piece-cap { grid-area: 2 / 4 / 3 / 13; }

/* ---- who makes them: the sentence large in the top half, the name at the bottom ---- */
.sx-maker { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--gap);
  min-height: 100svh; box-sizing: border-box; padding: clamp(6rem, 14vh, 8.5rem) var(--gut) clamp(6.5rem, 14vh, 8.5rem); overflow: hidden; isolation: isolate; background: #000; }
.sx-maker h2 { grid-area: 1 / 1 / 2 / 10; align-self: center; margin: 0; font-size: clamp(2.4rem, 5vw, 6rem); line-height: 1.02; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.sx-maker p { grid-area: 2 / 1 / 3 / 13; margin: 0; font-size: clamp(1rem, 1.15vw, 1.2rem); }
.sx-maker a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .4em; transition: color .3s, text-decoration-color .3s; }
.sx-maker a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---- how your site is made: the screen holds while you scroll, and the scroll takes it through the making
   (public/js/made.js sets data-at 0-4): the moodboard, the wireframe, the finished design sweeping over it, the phone
   version sliding in, the address going live. The heading and four stops on the left, one real screen on the right; a lens shows the
   wireframe under the design where the pointer is. overflow: clip, not hidden, so the pin can stick ---- */
.sx-made { position: relative; z-index: 1; height: calc(100svh + 6 * 40svh); overflow: clip; isolation: isolate; background: #000; }
.sx-made-pin { position: sticky; top: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); row-gap: 2.5rem;
  height: 100svh; box-sizing: border-box; padding: clamp(6rem, 14vh, 8.5rem) var(--gut) clamp(6.5rem, 14vh, 8.5rem); }
.sx-made h2 { grid-area: 1 / 1 / 2 / 5; margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.sx-made-stops { grid-area: 2 / 1 / 3 / 4; align-self: end; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
.sx-made-stops button { position: relative; display: block; padding: .55rem 0 .55rem 1.3rem; background: none; border: 0; color: var(--ink-3); font: inherit; font-size: clamp(1.05rem, 1.3vw, 1.4rem); letter-spacing: -.01em; text-align: left; cursor: pointer; transition: color .4s; }
.sx-made-stops button::before { content: ""; position: absolute; left: -4px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .4s, box-shadow .4s; }
.sx-made-stops button:hover { color: var(--ink); }
.sx-made-stops button.is-past { color: var(--ink-2); }
.sx-made-stops button.is-past::before { background: var(--ink-2); box-shadow: none; }
.sx-made-stops button[aria-pressed="true"] { color: var(--ink); }
.sx-made-stops button[aria-pressed="true"]::before { background: var(--pink); box-shadow: 0 0 0 4px rgba(228, 95, 155, .2); }
.sx-made-stops em { display: block; color: var(--pink); font-size: .8rem; font-style: normal; letter-spacing: 0; }
.sx-made-stage { grid-area: 1 / 5 / 3 / 13; align-self: center; position: relative; padding: 0 4% 6% 0; }
.sx-made-frame { overflow: hidden; border-radius: 8px; background: #050505; box-shadow: 0 0 0 1px var(--line), 0 2.5rem 7rem -2.5rem rgba(228, 95, 155, .22); }
.sx-made-url { display: grid; margin: 0; padding: .6rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.sx-made-url span { grid-area: 1 / 1; transition: opacity .5s, translate .5s var(--ease); }
.sx-made-url span + span { opacity: 0; translate: 0 .4rem; color: var(--ink); }
.sx-made-url span + span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--pink); vertical-align: .1em; }
.sx-made[data-at="5"] .sx-made-url span:first-child { opacity: 0; translate: 0 -.4rem; }
.sx-made[data-at="5"] .sx-made-url span + span { opacity: 1; translate: 0 0; }
.sx-made-screen { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; }
.sx-made[data-at="0"] .sx-made-url span { opacity: 0; }
.sx-made-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the sketch: twelve faint columns, and the screen's main areas as dashed boxes with a word in each, roughly where the
   design will put them */
.sx-wire { position: absolute; inset: 0; background: #070707 repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 calc(100% / 12 - 1.4cqw), transparent 0 calc(100% / 12)); background-origin: content-box; padding: 0 3cqw; }
.wb { position: absolute; display: flex; align-items: flex-start; padding: .7cqw .9cqw; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, .24); border-radius: 3px; background: rgba(255, 255, 255, .025); color: var(--ink-3); font-size: 1.15cqw; line-height: 1.2; }
.wb-0 { left: 4%; top: 3%; width: 7%; height: 5%; }
.wb-1 { left: 62%; top: 3%; width: 34%; height: 5%; }
.wb-2 { left: 4%; top: 12%; width: 56%; height: 26%; font-size: 1.6cqw; }
.wb-3 { left: 65%; top: 16%; width: 30%; height: 76%; }
.wb-4 { left: 4%; top: 70%; width: 30%; height: 12%; }
.wb-5 { left: 4%; top: 85%; width: 11%; height: 7%; border-color: rgba(228, 95, 155, .6); color: var(--pink); }
/* the moodboard: the salon's own photos (the bob, two colour locks, the foils), its typeface, its three colours and its
   line, pinned up on a dark board; it lifts away to the sketch under it */
@font-face { font-family: "Imbue"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/demo/kampaamo/fonts/imbue-var.woff2") format("woff2"); }
.sx-made-mood { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 1.6cqw; padding: 4cqw;
  background: #0b0a0b; transition: opacity .6s, scale .8s var(--ease); }
.sx-made-mood img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.mm-a { grid-area: 1 / 1 / 6 / 3; }
.mm-b { grid-area: 1 / 3 / 4 / 4; }
.mm-c { grid-area: 1 / 4 / 4 / 5; }
.mm-d { grid-area: 4 / 3 / 6 / 5; object-position: 50% 35%; }
.mm-aa { grid-area: 1 / 5 / 3 / 9; display: grid; place-items: center; background: #e7eaea; color: #111517; font: 300 9cqw/1 "Imbue", serif; }
.mm-chips { grid-area: 3 / 5 / 4 / 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.mm-chips i { border-radius: 2px; background: #e7eaea; }
.mm-chips i + i { background: #111517; box-shadow: inset 0 0 0 1px var(--line-2); }
.mm-chips i + i + i { background: #b4602f; box-shadow: none; }
.mm-line { grid-area: 4 / 5 / 6 / 9; align-self: end; color: var(--ink); font: 300 4.6cqw/1 "Imbue", serif; }
.sx-made:not([data-at="0"]) .sx-made-mood { opacity: 0; scale: 1.04; pointer-events: none; }
/* search and speed: the page as a search shows it (its real title and description), and its measured scores */
.sx-made-seo { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 5cqw 5cqw 4cqw; background: #050505;
  opacity: 0; transition: opacity .5s; pointer-events: none; }
.sx-made[data-at="4"] .sx-made-seo { opacity: 1; }
.seo-hit { display: grid; gap: .5cqw; max-width: 62%; margin: 0; }
@container (max-width: 520px) { .seo-hit { max-width: 100%; } }
.seo-hit span:first-child { color: var(--ink-3); font-size: max(1.3cqw, 8px); }
.seo-hit b { color: var(--pink-hi); font-size: max(2.3cqw, 11px); font-weight: 500; letter-spacing: -.01em; }
.seo-hit span + b + span { color: var(--ink-2); font-size: max(1.4cqw, 9px); line-height: 1.45; }
.seo-scores { display: flex; gap: 5cqw; margin: 0; }
.seo-scores div { display: flex; flex-direction: column-reverse; }
.seo-scores dt { color: var(--ink-2); font-size: max(1.4cqw, 9px); }
.seo-scores dd { margin: 0; color: var(--ink); font-size: 9cqw; font-weight: 500; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.seo-note { position: absolute; left: 5cqw; bottom: 1.4cqw; margin: 0; color: var(--ink-3); font-size: 1cqw; }
.sx-made-fin { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); }
.sx-made:is([data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"]) .sx-made-fin { clip-path: inset(0 0 0 0); }
.sx-made-lens { z-index: 1; opacity: 0; transition: opacity .25s; -webkit-mask-image: radial-gradient(circle 7rem at var(--lx, 50%) var(--ly, 50%), #000 97%, transparent 100%); mask-image: radial-gradient(circle 7rem at var(--lx, 50%) var(--ly, 50%), #000 97%, transparent 100%); pointer-events: none; }
.sx-made:is([data-at="2"], [data-at="3"], [data-at="5"]) .is-lens .sx-made-lens { opacity: 1; }
.sx-made-phone { position: absolute; z-index: 2; right: 0; bottom: 0; width: 21%; height: auto; border-radius: 1rem; box-shadow: 0 0 0 1px var(--line-2), 0 1.5rem 4rem rgba(0, 0, 0, .7);
  opacity: 0; translate: 0 12%; transition: opacity .7s, translate .9s var(--ease); }
.sx-made:is([data-at="3"], [data-at="4"], [data-at="5"]) .sx-made-phone { opacity: 1; translate: 0 0; }

/* ---- the front page's last screen: what you need to know before you start, and the way in to the order page ---- */
.sx-last { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(1.5rem, 4vh, 2.5rem);
  min-height: 100svh; box-sizing: border-box; padding: clamp(6rem, 14vh, 8.5rem) var(--gut); background: #000; border-top: 1px solid var(--line); }
.sx-last h2 { max-width: 16ch; margin: 0; font-size: clamp(2.6rem, 6vw, 6rem); line-height: 1; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.sx-last ul { display: flex; flex-wrap: wrap; gap: .6rem 2.5rem; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.35rem); }
.sx-last li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .7rem; border-radius: 50%; background: var(--pink); vertical-align: .2em; }
.sx-last .ink-btn { margin-top: .5rem; padding: 1.1rem 2.4rem; font-size: 1.1rem; }

/* ---- a screen: a 12-column grid in three bands (top, middle, bottom); each screen places its question and its
   answer in its own corners ---- */
.sx-step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: clamp(1rem, 2vw, 2.5rem); row-gap: 2.5rem;
  min-height: 100svh; box-sizing: border-box; padding: clamp(6rem, 14vh, 8.5rem) var(--gut) clamp(6.5rem, 14vh, 8.5rem); }
.sx-q, .sx-a { min-width: 0; }
.sx-n { display: block; margin-bottom: 1.2rem; color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sx-q h2 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }

/* words you pick: grey until picked, then pink */
.sx-word > span { color: var(--ink-2); transition: color .2s; }
.sx-word:hover > span { color: var(--ink); }
.sx-word:has(> input:checked) > span { color: var(--pink); }

/* 1. Mitä teet? Question top left; the trades stacked bottom right */
.sx-mita .sx-q { grid-area: 1 / 1 / 2 / 7; }
/* the sample from your trade: quiet, bottom left, once you have picked */
.sx-demos { grid-area: 3 / 1 / 4 / 7; align-self: end; }
.sx-demo { margin: 0; color: var(--ink-3); font-size: 1.05rem; animation: sx-demo-in .3s ease-out; }
.sx-demo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .3em; }
.sx-demo a:hover { text-decoration-color: currentColor; }
@keyframes sx-demo-in { from { opacity: 0; } }
.sx-list { grid-area: 3 / 8 / 4 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; font-size: var(--word); line-height: 1.25; letter-spacing: -.02em; }

/* 2. The name: the question top left, the name itself huge across the middle, the rest on one quiet line under it */
.sx-nimi .sx-q { grid-area: 1 / 1 / 2 / 8; }
.sx-nimi .sx-a { grid-area: 2 / 1 / 3 / 13; align-self: center; }
.sx-name input { display: block; width: 100%; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 500; font-size: clamp(3rem, 9vw, 10rem); line-height: 1.05; letter-spacing: -.045em; caret-color: var(--pink); }
.sx-name input::placeholder { color: #262626; }
.sx-name input:focus { outline: none; }
.sx-name-more { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.6rem; }
.sx-about { flex: 1 1 24rem; max-width: 40rem; }
.sx-about input { width: 100%; padding: .5rem 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 1.1rem; caret-color: var(--pink); }
.sx-about input::placeholder { color: var(--ink-3); }
.sx-about input:focus { outline: none; border-color: var(--ink-2); }
.sx-file span { color: var(--ink-2); font-size: 1rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .35em; }
.sx-file:hover span { color: var(--ink); }
.sx-logo-img:empty, .sx-logo-note:empty { display: none; }
.sx-logo-img img { display: block; max-height: 2.6rem; max-width: 8rem; object-fit: contain; border-radius: 3px; background: #fff; padding: .3rem; }
.sx-logo-note { color: var(--ink-3); font-size: .85rem; }
[aria-invalid="true"] { border-bottom: 1px solid #ff7a9c !important; }

/* 3. The main job: the question top right; the answers flow as one line of text, bottom left */
.sx-tehtava .sx-q { grid-area: 1 / 7 / 2 / 13; }
.sx-line { grid-area: 3 / 1 / 4 / 11; font-size: var(--word); line-height: 1.35; letter-spacing: -.02em; }
.sx-line .sx-word { display: inline; }
.sx-line .sx-word:not(:last-child)::after { content: " / "; color: var(--ink-3); opacity: .5; }

/* 4. Asiallinen vai villi? The question top left; a scale of five stops right across the middle */
.sx-tyyli .sx-q { grid-area: 1 / 1 / 2 / 7; }
/* the style card previews its own answer, all of it, on this card only (always dark: tinted black, never a light
   screen). The motion shows the style: businesslike, a grid draws itself and a rule under the question, exact and
   still; clear, nothing moves; personal, the shop's own look; bold, a thick pink bar shoots out and the 4 rises; wild,
   the card shakes once, the labels fall and bounce into place, the question's last word keeps wobbling, the 4 spins
   in as a pink outline and stripes slide across a wine ground. The font has weight, not width. Transforms use the
   separate translate / rotate / scale properties, so a state and its animation don't fight. */
.sx-tyyli { transition: background-color .7s var(--ease); }
.sx-tyyli::before { content: ""; position: absolute; inset: 0 var(--gut); z-index: -2; pointer-events: none; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .4s;
  --c: calc((100% - 11 * var(--gap)) / 12);
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .022) 0 var(--c), transparent var(--c) calc(var(--c) + var(--gap))); }
.sx-tyyli::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: 0; transition: opacity .7s;
  background: repeating-linear-gradient(-45deg, rgba(228, 95, 155, .045) 0 2px, transparent 2px 46px); background-size: 130px 130px; }
.sx-tyyli h2 { position: relative; transition: font-size .6s var(--ease), font-weight .6s var(--ease), letter-spacing .6s var(--ease); }
.sx-tyyli h2::after { content: ""; position: absolute; left: 0; top: calc(100% + .35em); height: 1px; width: 0; background: var(--ink-3); transition: width .5s var(--ease), height .3s, background-color .3s; }
.sx-wild-w { display: inline-block; transform-origin: 0 0; transition: translate .8s var(--ease), rotate .8s var(--ease), scale .8s cubic-bezier(.3, 1.5, .5, 1); }
.sx-tyyli .sx-giant { transition: color .7s var(--ease), opacity .7s var(--ease), translate .9s var(--ease), rotate .9s var(--ease), scale .9s var(--ease); transform-origin: 100% 100%; }
.sx-tyyli .sx-stop-t { transition: color .2s, translate .7s var(--ease), rotate .7s var(--ease), scale .7s var(--ease), font-size .6s var(--ease), letter-spacing .6s var(--ease); }
.sx-tyyli .sx-scale::before { transition: background-color .7s, height .4s; }

/* businesslike */
.sx-tyyli:has(input[name="tone"][value="0"]:checked)::before { opacity: 1; animation: sx-grid 1.1s var(--ease) both; }
.sx-tyyli:has(input[name="tone"][value="0"]:checked) h2 { font-size: clamp(1.8rem, 2.8vw, 3.4rem); font-weight: 400; letter-spacing: -.015em; }
.sx-tyyli:has(input[name="tone"][value="0"]:checked) h2::after { width: 100%; transition-delay: .25s; }
.sx-tyyli:has(input[name="tone"][value="0"]:checked) .sx-stop-t { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.sx-tyyli:has(input[name="tone"][value="0"]:checked) .sx-giant,
.sx-tyyli:has(input[name="tone"][value="1"]:checked) .sx-giant { opacity: 0; }
@keyframes sx-grid { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.sx-tyyli:has(input[name="tone"][value="0"]:checked)::before { clip-path: inset(0); }

/* clear */
.sx-tyyli:has(input[name="tone"][value="1"]:checked) h2 { font-weight: 450; letter-spacing: -.025em; }
.sx-tyyli:has(input[name="tone"][value="1"]:checked) .sx-stop-t { letter-spacing: .01em; }

/* bold */
.sx-tyyli:has(input[name="tone"][value="3"]:checked) { background-color: #0f0509; }
.sx-tyyli:has(input[name="tone"][value="3"]:checked) h2 { font-weight: 650; letter-spacing: -.045em; }
.sx-tyyli:has(input[name="tone"][value="3"]:checked) h2::after { width: 3.2em; height: .16em; background: var(--pink); transition: width .45s cubic-bezier(.3, 1.6, .5, 1) .15s, height .2s, background-color .2s; }
.sx-tyyli:has(input[name="tone"][value="3"]:checked) .sx-wild-w { translate: .15em .1em; rotate: -3deg; scale: 1.7; }
.sx-tyyli:has(input[name="tone"][value="3"]:checked) .sx-stop-t { font-weight: 600; }
.sx-tyyli:has(input[name="tone"][value="3"]:checked) .sx-giant { color: #2e1020; scale: 1.25; animation: sx-rise .9s var(--ease) both; }
@keyframes sx-rise { from { translate: 0 30%; } }

/* wild */
.sx-tyyli:has(input[name="tone"][value="4"]:checked) { background-color: #1a0711; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked)::after { opacity: 1; animation: sx-stripes 6s linear infinite; }
@keyframes sx-stripes { to { background-position: 130px 0; } }
/* (the question and the scale shake, not .sx-q: a transform there would move the giant 4 positioned against the card) */
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-q h2,
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-scale { animation: sx-shake .45s ease-in-out; }
@keyframes sx-shake { 15% { translate: -10px 3px; } 30% { translate: 9px -4px; } 45% { translate: -7px 2px; } 60% { translate: 5px -2px; } 75% { translate: -3px 1px; } 100% { translate: 0 0; } }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) h2 { font-weight: 700; letter-spacing: -.05em; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) h2::after { width: 0; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-wild-w { translate: 36vw .3em; rotate: -7deg; scale: 5.4; animation: sx-wobble 2.8s ease-in-out .8s infinite; }
@keyframes sx-wobble { 0%, 100% { rotate: -7deg; } 30% { rotate: -3deg; } 65% { rotate: -10deg; } }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-scale::before { height: 3px; background: var(--pink); }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:has(input:checked) .sx-dot { scale: 1.5; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop-t { font-weight: 650; color: var(--ink); animation: sx-fall .8s cubic-bezier(.3, 1.6, .45, 1) both; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:has(input:checked) .sx-stop-t { color: var(--pink); }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(1) .sx-stop-t { translate: 0 .9rem; rotate: -9deg; animation-delay: .05s; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(2) .sx-stop-t { translate: 0 -.4rem; rotate: 7deg; animation-delay: .15s; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(3) .sx-stop-t { translate: 0 1.6rem; rotate: -4deg; animation-delay: .25s; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(4) .sx-stop-t { translate: 0 .2rem; rotate: 11deg; animation-delay: .35s; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(5) .sx-stop-t { translate: 0 1.1rem; rotate: -13deg; scale: 1.6; transform-origin: 100% 0; animation-delay: .45s; }
@keyframes sx-fall { from { translate: 0 -3.5rem; opacity: 0; } }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-giant { color: transparent; -webkit-text-stroke: 2px var(--pink); rotate: 9deg; scale: 1.1; animation: sx-spin 1.1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes sx-spin { from { rotate: -40deg; scale: .6; } }
/* landing on wild, the word bursts apart and its letters fly in from all sides, then wave (each in turn lighter,
   higher and leaning). Where scripts run, public/js/wild.js takes over: the word becomes live particles (.has-fx) */
.sx-wl { display: inline-block; transition: font-weight .4s; }
.sx-wl:nth-child(1) { --x: -2.4em; --y: -1.6em; --r: -70deg; --d: 0s; }
.sx-wl:nth-child(2) { --x: 1.2em; --y: -2.2em; --r: 95deg; --d: .07s; }
.sx-wl:nth-child(3) { --x: -1em; --y: 1.9em; --r: -120deg; --d: .14s; }
.sx-wl:nth-child(4) { --x: 2.1em; --y: 1.3em; --r: 60deg; --d: .21s; }
.sx-wl:nth-child(5) { --x: -1.8em; --y: .8em; --r: 150deg; --d: .28s; }
.sx-wl:nth-child(6) { --x: 2.6em; --y: -1em; --r: -90deg; --d: .35s; }
.sx-wl:nth-child(7) { --x: .6em; --y: 2.4em; --r: 40deg; --d: .42s; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-wl { animation: sx-burst .9s cubic-bezier(.2, 1.4, .4, 1) var(--d) both, sx-wave 1.8s ease-in-out calc(1s + var(--d) * 2) infinite; }
.sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-wl:last-child { color: var(--pink); }
@keyframes sx-burst { from { translate: var(--x) var(--y); rotate: var(--r); scale: .4; opacity: 0; } }
@keyframes sx-wave { 0%, 100% { font-weight: 700; translate: 0 0; rotate: 0deg; } 50% { font-weight: 400; translate: 0 -.09em; rotate: -6deg; } }
/* the particles: the canvas behind the card's content, the word itself kept (for its place and for screen readers) but
   unseen and still */
.sx-fx { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sx-tyyli.has-fx .sx-wild-w { opacity: 0; animation: none !important; }
.sx-tyyli.has-fx .sx-wl { animation: none !important; }
.sx-tyyli.has-fx::after { opacity: 0 !important; animation: none !important; } /* the mesh replaces the sliding stripes */
.sx-tyyli.has-fx .sx-scale::before { opacity: 0; } /* the scale's line is redrawn on the mesh (public/js/wild.js) */

@media (prefers-reduced-motion: reduce) {
  .sx-wl { animation: none !important; transition: none !important; }
  .sx-tyyli, .sx-tyyli::before, .sx-tyyli::after, .sx-tyyli h2, .sx-tyyli h2::after, .sx-wild-w, .sx-tyyli .sx-giant, .sx-tyyli .sx-stop-t, .sx-tyyli .sx-q h2, .sx-tyyli .sx-scale { transition: none !important; animation: none !important; }
}
.sx-scale { grid-area: 2 / 1 / 3 / 13; align-self: center; position: relative; display: flex; justify-content: space-between; }
.sx-scale::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: .5rem; height: 1px; background: var(--line-2); }
.sx-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.sx-stop:first-child { align-items: flex-start; }
.sx-stop:last-child { align-items: flex-end; }
.sx-dot { width: 1rem; height: 1rem; border-radius: 50%; background: #000; border: 1.5px solid var(--ink-2); transition: background-color .2s, border-color .2s, transform .3s var(--ease); }
.sx-stop:hover .sx-dot { border-color: var(--ink); }
.sx-stop:has(input:checked) .sx-dot { background: var(--pink); border-color: var(--pink); transform: scale(1.5); }
.sx-stop-t { color: var(--ink-2); font-size: var(--word); letter-spacing: -.02em; transition: color .2s; }
.sx-stop:hover .sx-stop-t { color: var(--ink); }
.sx-stop:has(input:checked) .sx-stop-t { color: var(--pink); }

/* 5. What goes on the site: the question middle left; the products on the right, each saying what you get and its price */
.sx-miten .sx-q { grid-area: 2 / 1 / 3 / 6; align-self: center; }
.sx-dos { grid-area: 1 / 7 / 4 / 13; align-self: center; display: flex; flex-direction: column; }
.sx-do { display: flex; align-items: flex-start; gap: .9rem; padding: .6rem 0; }
.sx-do .sx-box { margin-top: .3rem; }
.sx-do-t { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.sx-do-t b { font-weight: 500; font-size: 1.1rem; color: var(--ink-2); transition: color .2s; }
.sx-do-t small { color: var(--ink-3); font-size: .9rem; line-height: 1.4; }
.sx-do:hover .sx-do-t b, .sx-do:has(input:checked) .sx-do-t b { color: var(--ink); }
.sx-do-p { color: var(--ink-2); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-do:has(input:checked) .sx-do-p { color: var(--pink); }

/* the tick box */
.sx-box { flex: none; position: relative; width: 1rem; height: 1rem; border: 1.5px solid var(--ink-3); border-radius: 3px; transition: background-color .2s, border-color .2s; }
.sx-box::after { content: ""; position: absolute; left: .28rem; top: .08rem; width: .26rem; height: .52rem; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
input:checked + .sx-box { background: var(--pink); border-color: var(--pink); }
input:checked + .sx-box::after { transform: rotate(45deg) scale(1); }

.sx-hint { margin: 1rem 0 0; max-width: 34rem; color: var(--ink-3); font-size: .95rem; line-height: 1.5; }
/* a step you may skip says so under its question */
.sx-opt { margin: 1rem 0 0; color: var(--ink-2); font-size: 1rem; }

/* 6. Colours: the answer top left, the question bottom right; saying yes brings out fields for the exact codes */
.sx-varit .sx-a { grid-area: 1 / 1 / 3 / 8; }
.sx-varit .sx-q { grid-area: 3 / 7 / 4 / 13; }
.sx-yesno { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; font-size: var(--word); letter-spacing: -.02em; }
/* the codes (yes) and the colours you like (no, but ideas) share one place under the answers */
.sx-brand { display: grid; align-content: start; }
.sx-codes, .sx-likes { grid-area: 2 / 1; }
.sx-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 14rem)); align-content: start; gap: 1rem 2.5rem; margin-top: 2.2rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease), visibility 0s .3s; }
.has-brand .sx-codes, .has-pick .sx-likes { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease); }
.sx-likes { margin-top: 2.2rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease), visibility 0s .3s; }
.sx-picks { display: flex; gap: 1.2rem; }
/* a picker: an empty dashed ring with a plus until you pick, then a disc of your colour (--c, set by store.js) */
.sx-pick { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px dashed var(--line-2); transition: border-color .2s, transform .3s var(--ease); }
.sx-pick::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 1.5rem; pointer-events: none; }
.sx-pick:hover { border-color: var(--ink-2); }
.sx-pick.is-set { border: 0; background: var(--c); }
.sx-pick.is-set::after { content: none; }
.sx-pick:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 3px; }
.sx-form .sx-pick input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sx-code { display: flex; align-items: center; gap: .8rem; cursor: text !important; }
.sx-code-c { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px dashed var(--line-2); }
.sx-code-c.is-set { border: 1px solid var(--line-2); }
.sx-code input { flex: 1; min-width: 0; padding: .4rem 0; background: none; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font: inherit; font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; caret-color: var(--pink); }
.sx-code input::placeholder { color: var(--ink-3); }
.sx-code input:focus { outline: none; border-color: var(--pink); }

/* 7. Wishes: you write top left, straight on the page, on a ruled line; the question bottom right */
.sx-toiveet .sx-a { grid-area: 1 / 1 / 3 / 8; }
.sx-toiveet .sx-q { grid-area: 3 / 7 / 4 / 13; }
.sx-note textarea { display: block; width: 100%; min-height: 9rem; padding: 0 0 .6rem; background: none; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font: inherit; font-size: clamp(1.3rem, 1.8vw, 2rem); line-height: 1.4; letter-spacing: -.01em; resize: none; caret-color: var(--pink); field-sizing: content; }
.sx-note textarea::placeholder { color: var(--ink-3); }
.sx-note textarea:focus { outline: none; border-color: var(--pink); }

/* 9. The till: the line bottom left; what you asked for and your details side by side at the top */
.sx-kassa .sx-q { grid-area: 3 / 1 / 4 / 6; }
.sx-sum { grid-area: 1 / 6 / 4 / 9; align-self: start; }
.sx-contact { grid-area: 1 / 10 / 4 / 13; align-self: start; display: flex; flex-direction: column; gap: 1.1rem; }
.sx-sum dl { margin: 0; }
.sx-sum dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .55rem 0; }
.sx-sum dt { color: var(--ink-3); font-size: .9rem; flex: none; }
.sx-sum dd { margin: 0; text-align: right; font-size: .98rem; font-variant-numeric: tabular-nums; }
.sx-sum dd a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .3em; }
.sx-sum dd a:hover { color: var(--ink); }
.sx-lines { margin-top: 1.4rem !important; padding-top: .8rem; border-top: 1px solid var(--line); }
.sx-sum .sx-total { margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.sx-sum .sx-now { margin-top: .8rem; }
.sx-chip-t { margin-left: .5rem; font-size: .9rem; }
.sx-sum s { color: var(--ink-3); margin-right: .5rem; font-size: .8em; }
.sx-sum small { color: var(--pink); font-size: .8rem; margin-left: .4rem; }
.sx-offer { margin: 1rem 0 0; max-width: 32rem; color: var(--ink-2); font-size: .85rem; line-height: 1.5; }
.sx-chip-c { display: inline-block; width: 1rem; height: 1rem; margin-left: .35rem; border-radius: 50%; border: 1px solid var(--line-2); vertical-align: -.15rem; }
.sx-sum .sx-total dd { font-size: 1.1rem; }
.sx-sum .sx-now dt { color: var(--ink); font-size: 1rem; }
.sx-sum .sx-now dd { color: var(--pink); font-size: clamp(1.6rem, 2.2vw, 2.4rem); letter-spacing: -.02em; font-weight: 500; }
.sx-field { display: flex; flex-direction: column; gap: .2rem; cursor: text !important; }
.sx-field > span { color: var(--ink-3); font-size: .85rem; }
.sx-field em { font-style: normal; }
.sx-field input { width: 100%; box-sizing: border-box; padding: .45rem 0; background: none; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; font: inherit; font-size: 1.05rem; caret-color: var(--pink); transition: border-color .2s; }
.sx-field input:hover { border-color: var(--ink-2); }
.sx-field input:focus { outline: none; border-color: var(--pink); }
.sx-go { margin-top: .8rem; }
.sx-status { margin: 0; color: #ff9ab5; font-size: .95rem; }
.sx-need { margin: 1.2rem 0 0; color: #ff9ab5; font-size: clamp(1rem, 1.2vw, 1.2rem); }

/* "Loput": the word opens what we promise; a path across the screen from the request to the upkeep, drawn left to
   right as it opens, each step showing as the line reaches it */
.sx-rest { padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: .06em; text-underline-offset: .12em; transition: color .2s; }
.sx-rest:hover { color: var(--pink); }
.sx-promise { box-sizing: border-box; width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: clamp(6rem, 16vh, 9rem) var(--gut) clamp(3rem, 8vh, 5rem); border: 0; background: #000; color: var(--ink); }
.sx-promise::backdrop { background: #000; }
.sx-promise[open] { display: flex; flex-direction: column; justify-content: center; }
.sx-path { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 clamp(1rem, 1.8vw, 2.2rem); margin: 0; padding: 2.4rem 0 0; list-style: none; }
.sx-path::before { content: ""; position: absolute; left: 0; right: 0; top: .5rem; height: 1px; background: var(--line-2); transform-origin: left; animation: sx-draw 1.1s var(--ease) both; }
.sx-path > li { position: relative; display: flex; flex-direction: column; gap: .45rem; animation: sx-reach .5s ease both; }
.sx-path > li::before { content: ""; position: absolute; left: 0; top: -2.4rem; width: 1rem; height: 1rem; border-radius: 50%; background: #000; border: 1.5px solid var(--ink-2); box-sizing: border-box; }
.sx-path > li:last-child::before { background: var(--pink); border-color: var(--pink); }
.sx-path > li:nth-child(2) { animation-delay: .12s; } .sx-path > li:nth-child(3) { animation-delay: .24s; } .sx-path > li:nth-child(4) { animation-delay: .36s; }
.sx-path > li:nth-child(5) { animation-delay: .48s; } .sx-path > li:nth-child(6) { animation-delay: .6s; } .sx-path > li:nth-child(7) { animation-delay: .72s; }
.sx-path-n { color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.sx-path b { font-weight: 500; font-size: clamp(1.15rem, 1.45vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15; }
.sx-path em { font-style: normal; color: var(--pink); font-size: .9rem; }
.sx-path-what { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
/* a step's tasks, numbered by the till's count, under the step on hover, focus or a tap */
.sx-path > li { z-index: 1; cursor: default; outline: none; }
.sx-path > li:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; }
.sx-path > li:hover, .sx-path > li:focus-within { z-index: 3; }
.sx-path > li:hover b, .sx-path > li:focus-within b { color: var(--pink); }
.sx-path-tasks { position: absolute; top: calc(100% + 1rem); left: 0; z-index: 2; width: max(100%, 15rem); margin: 0; padding: .9rem 1rem .9rem 2.4rem; background: #000; border: 1px solid var(--line-2); color: var(--ink); font-size: .88rem; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; }
.sx-path > li:nth-child(n+6) .sx-path-tasks { left: auto; right: 0; }
.sx-path-tasks li { padding: .12rem 0; }
.sx-path-tasks li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sx-path > li:hover .sx-path-tasks, .sx-path > li:focus-within .sx-path-tasks { opacity: 1; visibility: visible; transform: none; }
.sx-split { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 clamp(1rem, 1.8vw, 2.2rem); margin-top: clamp(3rem, 9vh, 6rem); animation: sx-reach .6s .9s ease both; }
.sx-split > div:first-child { grid-column: 1 / 4; }
.sx-split > div:last-child { grid-column: 5 / 8; }
.sx-split h3 { margin: 0 0 .8rem; color: var(--ink-3); font-size: .85rem; font-weight: 400; letter-spacing: .04em; }
.sx-split ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.sx-split li { color: var(--ink); font-size: 1rem; line-height: 1.45; }
.sx-close { position: absolute; top: 1.6rem; left: var(--gut); padding: 0; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 1rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .35em; }
.sx-close:hover { color: var(--ink); }
@keyframes sx-draw { from { transform: scaleX(0); } }
@keyframes sx-reach { from { opacity: 0; } }
.sx.promise-open .sx-stage, .sx.promise-open .sx-band { visibility: hidden; }

/* ---- rules broken on purpose (never the buying ones): the step number giant and half off the edge, behind
   everything; one question as a staircase ---- */
.sx-step { position: relative; overflow: hidden; isolation: isolate; }
/* the screens stack like cards (.stacking, public/js/store.js): when the next one comes up from below, the one above
   stays where it is (a transform that matches the scroll) and the next slides over it, while it dims (--dim on its
   ::after). So every screen after the first is opaque, with a hairline along its top edge. The page itself scrolls
   as usual; only the screen being covered moves */
.sx.stacking :is(.sx-step, .sx-break), .sx.stacking .ink-end { background-color: #000; border-top: 1px solid var(--line); }
.sx.stacking .sx-step { z-index: 1; } /* same layer as the breaks, so each later screen slides over the one before */
.sx.stacking :is(.sx-piece, .sx-maker, .sx-made) { border-top: 1px solid var(--line); }
.sx.stacking .sx-step::after, .sx.stacking .sx-break::after, .sx.stacking .sx-piece::after, .sx.stacking .sx-maker::after, .sx.stacking .sx-made::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.sx-giant { position: absolute; right: -.12em; bottom: -.22em; z-index: -1; color: #161616; transition: color .8s var(--ease); font-size: clamp(14rem, 34vw, 44rem); font-weight: 500; line-height: 1; letter-spacing: -.06em; pointer-events: none; user-select: none; }
.sx-q { position: static; }
.sx-q h2, .sx-n { position: relative; }
.sx-stair { display: block; }
.sx-stair:nth-child(2) { padding-left: 1.2em; }
.sx-stair:nth-child(3) { padding-left: 2.4em; }
.sx-stair:nth-child(4) { padding-left: 3.6em; }
.sx-q.is-stair h2 { font-size: clamp(2.4rem, 4.6vw, 5.6rem); }

/* ---- the two moments that break the scrolling: a tall stretch with a screen pinned in it (the script sizes them and
   drives them from the scroll position; without it, or on phones and with reduced motion, they are one quiet screen) */
.sx-break { position: relative; z-index: 1; }
.sx-break-pin { position: sticky; top: 0; display: flex; align-items: center; height: 100svh; overflow: hidden; padding: 0 var(--gut); }
.sx-big-name { display: inline-block; margin: 0; font-size: clamp(5rem, 24vw, 30rem); font-weight: 500; line-height: .9; letter-spacing: -.05em; white-space: nowrap; transform-origin: 0 50%; will-change: transform; }
.sx-recap { display: inline-block; margin: 0; font-size: clamp(3.5rem, 10vw, 12rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; white-space: nowrap; will-change: transform; }
.sx-recap i { font-style: normal; color: var(--ink-3); padding: 0 .3em; }
.sx-recap b { font-weight: 500; color: var(--pink); }
.sx:not(.breaks-on) .sx-big-name { font-size: clamp(2.6rem, 11vw, 9rem); white-space: normal; }
.sx:not(.breaks-on) .sx-recap { font-size: clamp(1.8rem, 6vw, 4rem); white-space: normal; line-height: 1.2; }

/* ---- the bar: price and the way to the till, in view from the entrance on; at the till (which has its own price and
   button) it hands over to the rest of the site, so the shop never looks like the end of the page; it goes once the
   footer itself is in view ---- */
.sx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; padding: .75rem var(--gut);
  background: rgba(0, 0, 0, .92); border-top: 1px solid var(--line); transform: translateY(105%); transition: transform .45s var(--ease); }
.sx.in-shop .sx-bar { transform: none; }
.sx.at-end .sx-bar, .sx.at-till .sx-bar { transform: translateY(105%); } /* the till shows the price itself; nothing covers its form */
.sx-bar-shop, .sx-bar-links { grid-area: 1 / 1; display: flex; align-items: center; gap: 1.2rem; min-width: 0; transition: opacity .35s, visibility .35s, translate .45s var(--ease); }
.sx-bar-links { justify-content: space-between; opacity: 0; visibility: hidden; translate: 0 .4rem; }
.sx.at-till .sx-bar-shop { opacity: 0; visibility: hidden; translate: 0 -.4rem; }
.sx.at-till .sx-bar-links { opacity: 1; visibility: visible; translate: 0 0; }
.sx-bar-links nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.sx-bar-links a { color: var(--ink-2); font-size: .92rem; text-decoration: none; }
.sx-bar-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.sx-bar-links p { margin: 0; color: var(--ink-3); font-size: .88rem; white-space: nowrap; }
.sx-bar-free { flex: 1; min-width: 0; font-size: 1rem; }
.sx-bar-free b { font-weight: 500; }
.sx-bar-free span { color: var(--ink-2); }
.sx-bar-price { color: var(--ink-2); font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-bar-price b { color: var(--ink); font-weight: 400; }
.sx-bar-price s { color: var(--ink-3); margin-right: .2rem; }
.sx-bar-go { padding: .5rem .95rem; background: var(--pink); color: #14070d; border-radius: 4px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.sx-bar-go:hover { background: #f07aae; }

@media (max-width: 1100px) {
  .sx-list { grid-column: 7 / 13; }
  .sx-dos { grid-column: 7 / 13; }
  .sx-sum { grid-column: 1 / 7; grid-row: 1 / 3; }
  .sx-contact { grid-column: 8 / 13; grid-row: 1 / 3; }
  .sx-kassa .sx-q { grid-column: 1 / 8; }
}
/* phones: still one screen per question, the question first */
@media (max-width: 800px) {
  .sx-made-pin { display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 6rem var(--gut) 6.5rem; }
  .sx-made-stage, .sx-made-stops { align-self: stretch; }
  .sx-made-stage { padding: 0 6% 10% 0; }
  .sx-made-phone { width: 30%; }
  .sx-made-stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; border-left: 0; order: 3; }
  .sx-made-stops button { padding-left: 1rem; font-size: 1rem; }
  .sx-made-stops button::before { left: 0; top: .95em; }
  .sx-piece-frame, .sx-piece.is-flip .sx-piece-frame { grid-area: 1 / 1 / 2 / 13; }
  .sx-piece-cap, .sx-piece.is-flip .sx-piece-cap { grid-area: 2 / 1 / 3 / 13; }
  .sx-step { display: flex; flex-direction: column; justify-content: center; gap: 2.2rem; padding: 6rem var(--gut) 6.5rem; }
  .sx-step > * { align-self: stretch !important; }
  .sx-giant { font-size: 16rem; }
  .sx-bar-shop { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .05rem; }
  .sx-bar-links nav { gap: .3rem 1.1rem; }
  .sx-bar-links a { font-size: .85rem; }
  .sx-bar-links p { display: none; }
  .sx-bar-free { grid-area: 1 / 1; font-size: .95rem; }
  .sx-bar-free span { display: none; }
  .sx-bar-price { grid-area: 2 / 1; font-size: .85rem; }
  .sx-bar-go { grid-area: 1 / 2 / 3 / 3; align-self: center; }
  .sx-promise[open] { justify-content: flex-start; overflow-y: auto; }
  .sx-path { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 0 0 0 2.2rem; }
  .sx-path::before { left: .5rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top; animation-name: sx-draw-down; }
  .sx-path > li::before { left: -2.2rem; top: .15rem; }
  .sx-path-tasks, .sx-path > li:nth-child(n+6) .sx-path-tasks { position: static; display: none; width: auto; margin-top: .4rem; }
  .sx-path > li:focus-within .sx-path-tasks { display: block; }
  .sx-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 3rem; }
  .sx-split > div:first-child, .sx-split > div:last-child { grid-column: auto; }
  .sx-toiveet .sx-q, .sx-kassa .sx-q { order: -1; }
  .sx-tyyli .sx-q { margin-bottom: 0; }
  .sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-wild-w { translate: .1em .1em; scale: 2.2; }
  .sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(odd) .sx-stop-t { translate: 0 0; rotate: -5deg; }
  .sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(even) .sx-stop-t { translate: 0 0; rotate: 4deg; }
  .sx-tyyli:has(input[name="tone"][value="4"]:checked) .sx-stop:nth-child(5) .sx-stop-t { translate: 0 0; rotate: -8deg; scale: 1.3; transform-origin: 0 50%; }
  .sx-varit .sx-q { order: -1; }
  .sx-scale { flex-direction: column; gap: 1.1rem; }
  .sx-scale::before { left: .5rem; right: auto; top: .5rem; bottom: .5rem; width: 1px; height: auto; }
  .sx-stop, .sx-stop:first-child, .sx-stop:last-child { flex-direction: row; align-items: center; }
  .sx-name input { font-size: clamp(2rem, 10vw, 4rem); }
}
@keyframes sx-draw-down { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .sx-made { height: auto; }
  .sx-made-pin { position: static; height: auto; min-height: 100svh; }
  html:has(body.sx) { scroll-behavior: auto; }
  .sx *, .sx *::before, .sx *::after { transition: none !important; animation: none !important; }
}