/* Mock landing (EP-001.T-05). Palette and fonts follow the game (client/styles/tokens.css). */
:root {
  --ek-icon-accent: var(--ek-icon-accent-night);   /* the library's pictograms on the night sky (client/styles/icons.css) */
  --sky-top: #0f1633;
  --sky-mid: #1f2a55;
  --sky-low: #3a3f6e;
  --parchment: #FBF6EC;
  --gold: #AB8248;
  --gold-light: #E0BD7B;
  --glow: #F7B44F;
  --glass: rgba(15, 22, 51, .55);
  --glass-line: rgba(224, 189, 123, .22);
  --hint: #b4b0c4;                                 /* small muted text on the cards: a plain colour, ≈ 7:1 over the glass (landing-cards.sh: ≥ 4.5:1) */
  --font-display: 'Philosopher', Georgia, serif;
  --font-ui: 'Nunito', system-ui, sans-serif;
  /* Game panel width (EP-023, decision C2). Settings, not numbers in landing.js: the script reads the limits
     and the keyboard steps from these tokens. --panel-user-w is the viewer's choice (landing.js, localStorage);
     the clamp keeps it inside the limits whatever the viewport. */
  --panel-min: 320px;
  --panel-default: 420px;
  --panel-max: min(960px, calc(100vw - 360px));   /* the page keeps at least 360 px */
  --panel-step: 16px;                              /* ← / → on the handle */
  --panel-step-big: 64px;                          /* Shift + ← / →, Page Up / Page Down */
  --panel-handle: 12px;                            /* hit area of the resize edge */
  --panel-w: clamp(var(--panel-min), var(--panel-user-w, var(--panel-default)), var(--panel-max));
  --t-panel: .35s;
  /* the panel bar's tooltips (.panel-icon): shown after the same dwell as the game's (config/game TOOLTIP.dwellMs) */
  --tip-dwell: 500ms;
  --t-tip: .15s;
  /* hero kins: the glow, the clouds and every kin rise in together with the reveal (landing.js) */
  --t-kin-scene: .9s;
  --t-kin-in: .6s;
  --kin-wait-max: 4000ms;                          /* read by landing.js: a kin shows after this even if a layer is late */
  /* the first screen appears whole, once (EP-037.T-05): the splash covers it until its fonts and images are decoded and
     the hero's kins are built, at most --reveal-max after landing.js starts, then fades out over --reveal-fade; without
     the script it goes by itself --reveal-fallback after the page started */
  --reveal-max: 1800ms;                            /* read by landing.js */
  --reveal-fade: 300ms;                            /* read by landing.js */
  --reveal-fallback: 4s;
  --t-road-in: .6s;                                /* the road fades in whole once its art is decoded */
  --kin-rise: 8%;
  /* The sky behind the page (html::before, html::after, body::before): the game's stars and a fog band along the bottom
     of the viewport. Fixed, under every block and the game panel, no pointer events, CSS only — no script, no frame
     loop; the animations are opacity and transform (the compositor's), off with reduced motion and in a hidden tab. */
  --star-r: .85px;                                 /* a star's radius; each star is .6–1.3 of it, a big one 1.65 */
  --stars-tile: 230px;                             /* stars repeat on three tiles: this, ×1.37, ×1.83 (6 stars each a layer) */
  --stars-fade-to: min(900px, 80%);                /* stars fade out down to here, as in the game (STARS.fadeToH, coverH) */
  --stars-twinkle: 5s;                             /* one twinkle of the second layer, as the game's MOTION.t.twinkle */
  --stars-dim: .15;                                /* its opacity at the faint end (MOTION.kf.twinkle.dim) */
  --stars-bright: .9;                              /* and at the bright end (MOTION.kf.twinkle.bright) */
  --fog-h: 170px;                                  /* height of the fog band at the bottom of the viewport */
  --fog-opacity: .45;
  --fog-brightness: .3;                            /* darker than the sky at the bottom: text over the fog loses no contrast */
  --fog-drift: 160s;                               /* the fog drifts one cloud tile in this time */
  /* The road to light (index.html #road; owner, 27.10.2026). Its art is these tokens and the trail's islets, built from
     design/art/source by design/art/tools/build.py landing (design/art/batch-landing.md). The trail is no tile:
     landing.js lays one continuous trail of islets down the rail (art/islets.json: each frame and its foot point) and
     puts each step's island beside it, on the side of the step's text. */
  --road-stone: url(art/road-stone.webp);          /* the island each lantern stands on */
  --lantern-done: url(art/lantern-full.webp);
  --lantern-current: url(art/lantern-dim.webp);
  --lantern-ahead: url(art/lantern-out.webp);
  --road-rail: 380px;                              /* wide: the middle column — the trail and the islands; text either side */
  --road-rail-s: 96px;                             /* narrow (≤ 760 px of page): the rail on the left, text right */
  --isle-w: 96px;                                  /* a step's island (road-stone.webp); on the narrow rail: -s */
  --isle-w-s: 50px;
  --road-kin: 96px;                                /* the kin on its islet by the current step; on the rail: -s */
  --road-kin-s: 56px;
  --islet-w: 44px;                                 /* read by landing.js: a trail islet's frame, the mean of islets 1–8; -s narrow */
  --islet-w-s: 24px;
  --trail-x: 50%;                                  /* read by landing.js: the trail's middle, of the road's width or px */
  --trail-x-s: 14px;
  --trail-sway: 36px;                              /* read by landing.js: the S — the trail this far toward each step's side */
  --trail-sway-s: 3px;
  --trail-tail: 150px;                             /* room above the first island and under the last for the trail's fading ends */
  --trail-tail-s: 96px;
  --t-flicker: 2.6s;                               /* one cycle of the current lantern's flicker (opacity of its glow) */
}

* { box-sizing: border-box; }
/* The hero glow and clouds, the trail's fog reach past the page column and, on a phone, past the screen: they are cut
   at the window's edge, never at the column's (no overflow on .page). html clips too, so body's clip is its own, not
   handed on to the viewport: body clips its box, the width of the window (without a classic scrollbar: nothing paints
   under it anyway), and neither becomes a scroll container. The phone's panel lock is on html for the same reason
   (the panel's @media below). */
html { color-scheme: dark; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%) fixed;
  color: var(--parchment);
  font: 500 17px/1.55 var(--font-ui);
}
a { color: var(--gold-light); }

/* ── the sky behind the page (tokens above). Two star layers like the game's (client/styles/island.css .stars): one
   still, one twinkling; the gradients were drawn once from the game's STARS look (seeded, positions in % of the tile)
   and cycle through the three tile sizes of background-size. ── */
html::before, html::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-size: var(--stars-tile) var(--stars-tile), calc(var(--stars-tile) * 1.37) calc(var(--stars-tile) * 1.37),
    calc(var(--stars-tile) * 1.83) calc(var(--stars-tile) * 1.83);
  -webkit-mask-image: linear-gradient(#000, transparent var(--stars-fade-to));
  mask-image: linear-gradient(#000, transparent var(--stars-fade-to));
}
html::before {
  background-image:
    radial-gradient(circle at 45.6% 55.5%, rgb(228 234 255 / 0.65) calc(var(--star-r) * 0.96), transparent calc(var(--star-r) * 0.96 + 1px)),
    radial-gradient(circle at 58.0% 21.0%, rgb(250 229 184 / 0.76) calc(var(--star-r) * 1.16), transparent calc(var(--star-r) * 1.16 + 1px)),
    radial-gradient(circle at 12.7% 31.9%, rgb(250 229 184 / 0.88) calc(var(--star-r) * 1.09), transparent calc(var(--star-r) * 1.09 + 1px)),
    radial-gradient(circle at 7.9% 94.4%, rgb(228 234 255 / 0.78) calc(var(--star-r) * 1.03), transparent calc(var(--star-r) * 1.03 + 1px)),
    radial-gradient(circle at 18.5% 5.4%, rgb(250 229 184 / 0.39) calc(var(--star-r) * 0.73), transparent calc(var(--star-r) * 0.73 + 1px)),
    radial-gradient(circle at 26.3% 6.8%, rgb(250 229 184 / 0.64) calc(var(--star-r) * 1.19), transparent calc(var(--star-r) * 1.19 + 1px)),
    radial-gradient(circle at 51.8% 62.9%, rgb(250 229 184 / 0.78) calc(var(--star-r) * 0.92), transparent calc(var(--star-r) * 0.92 + 1px)),
    radial-gradient(circle at 29.6% 95.8%, rgb(228 234 255 / 0.9) calc(var(--star-r) * 1.1), transparent calc(var(--star-r) * 1.1 + 1px)),
    radial-gradient(circle at 33.0% 25.1%, rgb(250 229 184 / 0.4) calc(var(--star-r) * 1.14), transparent calc(var(--star-r) * 1.14 + 1px)),
    radial-gradient(circle at 40.8% 81.9%, rgb(250 229 184 / 0.97) calc(var(--star-r) * 1.19), transparent calc(var(--star-r) * 1.19 + 1px)),
    radial-gradient(circle at 4.1% 23.3%, rgb(228 234 255 / 0.66) calc(var(--star-r) * 1.29), transparent calc(var(--star-r) * 1.29 + 1px)),
    radial-gradient(circle at 40.6% 10.7%, rgb(255 244 220 / 0.86) calc(var(--star-r) * 0.79), transparent calc(var(--star-r) * 0.79 + 1px)),
    radial-gradient(circle at 12.0% 34.6%, rgb(228 234 255 / 0.84) calc(var(--star-r) * 0.68), transparent calc(var(--star-r) * 0.68 + 1px)),
    radial-gradient(circle at 26.7% 13.3%, rgb(250 229 184 / 0.87) calc(var(--star-r) * 1.65), rgb(250 229 184 / .35) calc(var(--star-r) * 1.65 + 1px), transparent calc(var(--star-r) * 6.6)),
    radial-gradient(circle at 20.3% 55.5%, rgb(250 229 184 / 0.47) calc(var(--star-r) * 1.11), transparent calc(var(--star-r) * 1.11 + 1px)),
    radial-gradient(circle at 16.0% 63.2%, rgb(250 229 184 / 0.62) calc(var(--star-r) * 0.75), transparent calc(var(--star-r) * 0.75 + 1px)),
    radial-gradient(circle at 28.8% 93.3%, rgb(255 244 220 / 0.55) calc(var(--star-r) * 1.22), transparent calc(var(--star-r) * 1.22 + 1px)),
    radial-gradient(circle at 23.4% 40.3%, rgb(228 234 255 / 0.77) calc(var(--star-r) * 0.67), transparent calc(var(--star-r) * 0.67 + 1px));
}
html::after {
  opacity: var(--stars-bright);
  animation: stars-twinkle var(--stars-twinkle) ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle at 95.0% 23.6%, rgb(250 229 184 / 0.85) calc(var(--star-r) * 0.83), transparent calc(var(--star-r) * 0.83 + 1px)),
    radial-gradient(circle at 31.3% 10.8%, rgb(250 229 184 / 0.73) calc(var(--star-r) * 0.77), transparent calc(var(--star-r) * 0.77 + 1px)),
    radial-gradient(circle at 59.3% 38.2%, rgb(250 229 184 / 0.97) calc(var(--star-r) * 0.94), transparent calc(var(--star-r) * 0.94 + 1px)),
    radial-gradient(circle at 56.9% 83.7%, rgb(250 229 184 / 0.45) calc(var(--star-r) * 1.24), transparent calc(var(--star-r) * 1.24 + 1px)),
    radial-gradient(circle at 79.2% 27.0%, rgb(250 229 184 / 0.83) calc(var(--star-r) * 1.26), transparent calc(var(--star-r) * 1.26 + 1px)),
    radial-gradient(circle at 22.1% 91.4%, rgb(228 234 255 / 0.74) calc(var(--star-r) * 0.9), transparent calc(var(--star-r) * 0.9 + 1px)),
    radial-gradient(circle at 13.6% 7.6%, rgb(228 234 255 / 0.5) calc(var(--star-r) * 1.09), transparent calc(var(--star-r) * 1.09 + 1px)),
    radial-gradient(circle at 27.6% 79.8%, rgb(255 244 220 / 0.54) calc(var(--star-r) * 0.72), transparent calc(var(--star-r) * 0.72 + 1px)),
    radial-gradient(circle at 70.3% 10.3%, rgb(250 229 184 / 0.71) calc(var(--star-r) * 1.2), transparent calc(var(--star-r) * 1.2 + 1px)),
    radial-gradient(circle at 60.5% 29.8%, rgb(228 234 255 / 0.48) calc(var(--star-r) * 0.61), transparent calc(var(--star-r) * 0.61 + 1px)),
    radial-gradient(circle at 28.8% 45.0%, rgb(250 229 184 / 0.46) calc(var(--star-r) * 0.86), transparent calc(var(--star-r) * 0.86 + 1px)),
    radial-gradient(circle at 56.6% 16.1%, rgb(250 229 184 / 0.93) calc(var(--star-r) * 1.29), transparent calc(var(--star-r) * 1.29 + 1px)),
    radial-gradient(circle at 64.4% 67.6%, rgb(255 244 220 / 0.44) calc(var(--star-r) * 0.62), transparent calc(var(--star-r) * 0.62 + 1px)),
    radial-gradient(circle at 5.6% 87.7%, rgb(255 244 220 / 0.98) calc(var(--star-r) * 1.65), rgb(250 229 184 / .35) calc(var(--star-r) * 1.65 + 1px), transparent calc(var(--star-r) * 6.6)),
    radial-gradient(circle at 6.0% 62.5%, rgb(250 229 184 / 0.82) calc(var(--star-r) * 0.82), transparent calc(var(--star-r) * 0.82 + 1px)),
    radial-gradient(circle at 95.9% 10.9%, rgb(250 229 184 / 0.83) calc(var(--star-r) * 1.23), transparent calc(var(--star-r) * 1.23 + 1px)),
    radial-gradient(circle at 71.8% 68.7%, rgb(255 244 220 / 0.94) calc(var(--star-r) * 0.85), transparent calc(var(--star-r) * 0.85 + 1px)),
    radial-gradient(circle at 67.0% 86.9%, rgb(228 234 255 / 0.62) calc(var(--star-r) * 1.15), transparent calc(var(--star-r) * 1.15 + 1px));
}
@keyframes stars-twinkle { from { opacity: var(--stars-dim); } to { opacity: var(--stars-bright); } }

/* the fog band: the game's cloud tile, greyed like its fog of oblivion (island.css .fog) and dimmed below the sky's own
   brightness, so the footer over it keeps its contrast; soft at the top, one tile wider on the left so the drift loops
   without a seam; a fixed layer is clipped by the viewport and never makes a scrollbar */
body::before {
  --fog-tile: calc(var(--fog-h) * 941 / 455);      /* clouds.webp is 941 × 455 */
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--fog-tile)); right: 0; bottom: 0; height: var(--fog-h);
  background: url(/client/assets/sky/clouds.webp) 0 0 / var(--fog-tile) 100% repeat-x;
  filter: grayscale(.7) brightness(var(--fog-brightness)) hue-rotate(10deg);
  opacity: var(--fog-opacity);
  -webkit-mask-image: linear-gradient(transparent, #000 65%);
  mask-image: linear-gradient(transparent, #000 65%);
  animation: fog-drift var(--fog-drift) linear infinite;
}
@keyframes fog-drift { to { transform: translateX(var(--fog-tile)); } }

/* the page is a size container: with the game panel open it gets narrower, and its blocks reflow by its own width */
/* The splash (#boot; EP-037.T-05): the game's night sky with the app's kin and its star dust, as the game's own
   (client/styles/boot.css). Only while html.booting (set by the page's first script): without scripts there is none. */
.boot {
  position: fixed; inset: 0; z-index: 100; display: none; place-items: center;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, #1f2a55, #0f1633 72%);
  transition: opacity var(--reveal-fade) ease-out;
}
html.booting .boot { display: grid; animation: boot-gone var(--reveal-fade) ease-out var(--reveal-fallback) forwards; }
/* under the splash the page is laid out, not drawn: nothing seen moving into place; shown with the splash's own fallback */
html.booting .page { visibility: hidden; animation: boot-shown 0s var(--reveal-fallback) forwards; }
@keyframes boot-shown { to { visibility: visible; } }
.boot.gone { display: grid; opacity: 0; pointer-events: none; }
.boot-dust, .boot-kin { grid-area: 1 / 1; }
.boot-kin { width: min(24vmin, 128px); aspect-ratio: 1; border-radius: 24%; box-shadow: 0 0 0 1px rgba(251, 230, 178, .35), 0 14px 40px rgba(4, 6, 20, .55), 0 2px 6px rgba(4, 6, 20, .5); }
/* star dust, no glow (К-22, variant D): eight tiny stars around the kin twinkle out of phase; reduced motion: still, dim */
.boot-dust { position: relative; width: calc(min(24vmin, 128px) + 120px); aspect-ratio: 1; opacity: .9; pointer-events: none; }
.boot-dust i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: rgba(255, 236, 196, .9); box-shadow: 0 0 8px 2px rgba(255, 214, 150, .35); opacity: .5;
  animation: boot-dust 2.4s cubic-bezier(.42, 0, .58, 1) infinite alternate; animation-delay: calc(2.4s * var(--phase) * -1);
}
.boot-dust i:nth-child(1) { --x: 12%; --y: 30%; --s: 4px; --phase: 0; }
.boot-dust i:nth-child(2) { --x: 86%; --y: 22%; --s: 3px; --phase: .375; }
.boot-dust i:nth-child(3) { --x: 92%; --y: 62%; --s: 4px; --phase: .7083; }
.boot-dust i:nth-child(4) { --x: 20%; --y: 78%; --s: 3px; --phase: .25; }
.boot-dust i:nth-child(5) { --x: 50%; --y: 6%; --s: 3px; --phase: .5417; }
.boot-dust i:nth-child(6) { --x: 70%; --y: 92%; --s: 4px; --phase: .125; }
.boot-dust i:nth-child(7) { --x: 6%; --y: 54%; --s: 3px; --phase: .875; }
.boot-dust i:nth-child(8) { --x: 34%; --y: 96%; --s: 3px; --phase: .625; }
@keyframes boot-dust { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes boot-gone { to { opacity: 0; visibility: hidden; } }

.page { max-width: 1120px; margin: 0 auto; padding: 0 20px; container-type: inline-size; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { border-radius: 10px; }
.brand-name { font: 700 24px var(--font-display); letter-spacing: .02em; }
.top-nav { display: flex; gap: 18px; font-size: 15px; }
.top-nav a { text-decoration: none; opacity: .85; }
.top-nav a:hover { opacity: 1; text-decoration: underline; }


.hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 48px 0 32px; }
.hero h1 { font: 700 clamp(34px, 5vw, 56px)/1.1 var(--font-display); margin: 0 0 16px; }
.lead { font-size: 19px; opacity: .9; max-width: 34em; }
.note { font-size: 14px; opacity: .65; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }

/* hero art: kins of the game by the lantern light, standing in a cloud (landing.js, HERO_KINS). Layers, back to front:
   glow, back cloud, back row, mid cloud (hides the back row's feet: they stand in it), front row. The cloud band of
   the game is opaque at the bottom, so both clouds fade out to every side through a soft elliptical mask. */
.hero-art { position: relative; aspect-ratio: 1; max-height: 70vh; width: 100%; margin-inline: auto; }
.kin-glow, .kin-cloud { opacity: 0; transition: opacity var(--t-kin-scene) ease-out; }
.hero-art.ready .kin-glow, .hero-art.ready .kin-cloud { opacity: 1; }
.hero-art.ready .kin-cloud.mid { opacity: .92; }
.kin-glow {
  position: absolute; inset: -16% -20% -4%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(247, 180, 79, .30), rgba(247, 180, 79, .14) 35%, rgba(247, 180, 79, .05) 65%, transparent);
}
.kin-cloud {
  position: absolute; left: -12%; width: 124%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, .25) 82%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, .25) 82%, transparent);
}
.kin-cloud.back { bottom: 2%; height: 56%; object-position: 50% 20%; filter: blur(1px) brightness(.85); }
.kin-cloud.mid { bottom: -8%; height: 46%; object-position: 30% 35%; }
.kin-row { position: absolute; inset: 0; }
/* --x is the kin's centre, --y the bottom of its square, % of the art square. margin, not translate: the game's
   .kinfig uses translate for its feet line (--feet-shift) */
.hero-kin {
  position: absolute; width: var(--size); left: var(--x); bottom: var(--y); margin-inline-start: calc(var(--size) / -2);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
  opacity: 0; transform: translateY(var(--kin-rise)) scale(.96);
  transition: opacity var(--t-kin-in) ease-out, transform var(--t-kin-in) cubic-bezier(.2, .8, .3, 1.2);
}
.hero-kin.in { opacity: 1; transform: none; }
.kin-row.back .hero-kin { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)) brightness(.9); }
.kin-row.back .hero-kin:nth-child(1) { --size: 30%; --x: 23%; --y: 30%; }
.kin-row.back .hero-kin:nth-child(2) { --size: 30%; --x: 50%; --y: 33%; }
.kin-row.back .hero-kin:nth-child(3) { --size: 30%; --x: 77%; --y: 30%; }
.kin-row.front .hero-kin:nth-child(1) { --size: 38%; --x: 22%; --y: 6%; }
.kin-row.front .hero-kin:nth-child(2) { --size: 44%; --x: 50%; --y: 2%; }
.kin-row.front .hero-kin:nth-child(3) { --size: 38%; --x: 78%; --y: 6%; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: var(--glass);
  color: var(--parchment);
  font: 700 16px var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn:hover { border-color: var(--gold-light); background: rgba(31, 42, 85, .8); }
.btn.primary { background: linear-gradient(180deg, #f7c46a, var(--gold)); color: #2b1f12; border-color: var(--gold-light); }
.btn.primary:hover { background: linear-gradient(180deg, #fbd488, #b88c50); }
.btn:focus-visible, .panel-icon:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn { white-space: nowrap; }

/* The three cards (owner, 27.10.2026; probe deploy/tests/landing-cards.sh): title, text, button, two hint lines — four
   rows of the .surfaces grid shared by the cards side by side (subgrid). So the cards of a row are as tall as each
   other, every button starts on the same line however short the text above it, and a hint that wraps (a longer
   language, "build not available") moves no button. One column (phones): the cards just flow. The buttons fill the
   card: the same size in every card. */
.surfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 24px 0 56px; }
.card {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  padding: 22px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass); backdrop-filter: blur(6px);
}
.card h2 { font: 700 22px var(--font-display); margin: 0 0 8px; color: var(--gold-light); }
.card-text { margin: 0 0 16px; opacity: .88; }
.card .btn { justify-content: center; white-space: normal; text-align: center; }
/* Hints: small and calm, but no opacity — a plain colour that keeps WCAG AA (≥ 4.5:1) over the card glass. One empty
   line keeps its height while latest.json loads, so nothing jumps. */
.hints { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--hint); }
.hints p { margin: 0; min-height: 1lh; }

/* ── The road to light (owner, 27.10.2026, variant A; index.html #road, roadmap.json, probe landing-roadmap.sh). One
   trail of small islets runs down the rail in a gentle S (.road-trail: landing.js lays it, an even step apart); each
   step's island with its lantern stands beside the trail on the side of its text, a step from the nearest islet
   (landing.js sets --isle-x); the text alternates right and left. data-status: done = lit, current = lit and
   flickering, our kin on the islet beside it, ahead = cold in a wisp of fog. The flicker is the glow's opacity only (the
   compositor's); none with reduced motion. Text sits on the cards' glass: its contrast does not depend on the trail. ── */
.road {
  padding: 8px 0 72px; opacity: 0; transition: opacity var(--t-road-in) ease-out;
  /* the lantern on its island and the glow centred on its flame: one set of numbers, the glow's place is computed */
  --isle-h: calc(var(--isle-w) * 110 / 224);       /* road-stone.webp is 224 × 110 */
  --isle-y: 50%;                                   /* the island's middle, from the top of its step */
  --lantern-w: 44px; --lantern-h: 66px; --lantern-bottom: 30px;   /* the lantern's foot on the middle of the island's top */
  --flame-at: .45;                                 /* the flame's height in the lantern art, from its bottom (lantern-*.webp) */
  --glow-size: 168px;
}
.road-head { max-width: 36em; margin: 0 auto 36px; text-align: center; }
.road-head h2 { font: 700 clamp(28px, 3.6vw, 40px)/1.15 var(--font-display); margin: 0 0 8px; color: var(--gold-light); }
.road-head p { margin: 0; color: #dcd6e6; }
.road-way { position: relative; padding-block: var(--trail-tail); }
.road-trail { position: absolute; inset: 0; pointer-events: none; }
/* one islet: its frame of islets.json at the page's scale (landing.js: left, top, width, height) */
.trail-islet { position: absolute; background: var(--art) center / 100% 100% no-repeat; }
.road-steps { position: relative; display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.road-step { position: relative; display: grid; grid-template-columns: 1fr var(--road-rail) 1fr; align-items: center; }
/* the island and its lantern: out of the grid flow, the island's middle at --isle-y; --isle-x (landing.js) is its
   left edge in the step; before the script, the rail's side of the text */
.road-mark {
  position: absolute; width: var(--isle-w); height: calc(var(--lantern-bottom) + var(--lantern-h));
  top: calc(var(--isle-y) + var(--isle-h) / 2 - var(--lantern-bottom) - var(--lantern-h));
  left: var(--isle-x, calc(50% + var(--road-rail) / 2 - var(--isle-w)));
}
.road-step:nth-child(even) .road-mark { left: var(--isle-x, calc(50% - var(--road-rail) / 2)); }
.road-text { position: relative; grid-row: 1; grid-column: 3; justify-self: start; }
.road-step:nth-child(even) .road-text { grid-column: 1; justify-self: end; }
/* back to front: the island, the light on it, the lantern */
.road-stone { position: absolute; inset-inline: 0; bottom: 0; height: var(--isle-h); background: var(--road-stone) center bottom / 100% 100% no-repeat; }
.lantern {
  position: absolute; left: 50%; bottom: var(--lantern-bottom); width: var(--lantern-w); height: var(--lantern-h);
  margin-left: calc(var(--lantern-w) / -2);
  background: var(--lantern-ahead) center bottom / contain no-repeat;
}
.road-step[data-status="done"] .lantern { background-image: var(--lantern-done); }
.road-step[data-status="current"] .lantern { background-image: var(--lantern-current); }
/* the light around a lantern, centred on its flame; for a cold one, a wisp of grey fog instead */
.road-glow {
  position: absolute; left: 50%; width: var(--glow-size); height: var(--glow-size); margin-left: calc(var(--glow-size) / -2); border-radius: 50%;
  bottom: calc(var(--lantern-bottom) + var(--lantern-h) * var(--flame-at) - var(--glow-size) / 2);
  background: radial-gradient(closest-side, rgba(190, 196, 222, .16), rgba(190, 196, 222, .06) 55%, transparent);
}
.road-step:is([data-status="done"], [data-status="current"]) .road-glow {
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(247, 180, 79, .44), rgba(247, 180, 79, .16) 45%, rgba(247, 180, 79, .05) 75%, transparent);
}
.road-step[data-status="done"] .road-glow { opacity: .75; }
.road-step[data-status="current"] .road-glow { animation: lantern-flicker var(--t-flicker) ease-in-out infinite; }
@keyframes lantern-flicker {
  0%, 100% { opacity: .95; } 14% { opacity: .72; } 26% { opacity: 1; } 41% { opacity: .8; }
  55% { opacity: .97; } 68% { opacity: .66; } 82% { opacity: .9; }
}
/* the kin of the hero's pool (landing.js): on the larger islet of the trail beside the current step, its feet on the
   islet's foot point (landing.js: left, top) */
.road-kin {
  position: absolute; width: var(--road-kin);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35));
  opacity: 0; transition: opacity var(--t-kin-in) ease-out;
}
.road-kin.in { opacity: 1; }
.road.in { opacity: 1; }
.road-text {
  max-width: 26em; padding: 16px 20px 18px;
  border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); backdrop-filter: blur(6px);
}
.road-text h3 { font: 700 21px/1.25 var(--font-display); margin: 0 0 6px; color: var(--gold-light); }
.road-desc { margin: 0; font-size: 16px; line-height: 1.5; color: #ebe5d8; }
.road-step[data-status="ahead"] h3 { color: #ddd6ea; }
.road-step[data-status="current"] .road-text { border-color: rgba(247, 180, 79, .55); box-shadow: 0 0 28px rgba(247, 180, 79, .14); }
/* the status: read by screen readers on every step; shown as a badge on the current one only */
.road-status { margin: 0; }
.road-step:not([data-status="current"]) .road-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.road-step[data-status="current"] .road-status {
  display: inline-block; margin-bottom: 8px; padding: 1px 9px; border: 1px solid var(--glow); border-radius: 999px;
  color: var(--glow); font: 700 13px/1.6 var(--font-ui); letter-spacing: .02em;   /* no text-transform: a screen reader gets the words as written */
}

.foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 28px; font-size: 13px; opacity: .6; border-top: 1px solid var(--glass-line); }
/* the status light: a drawn dot, not a glyph (pictograms only from the library, D140) */
#api-status.ok::before, #api-status.down::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-inline-end: .45em; border-radius: 50%; background: currentColor; vertical-align: .05em; }
#api-status.ok::before { color: #7bd88f; }
#api-status.down::before { color: #e07b7b; }

/* ── game side panel (like Chrome's side panel): beside the page, resizable by its left edge ── */
.panel {
  position: fixed; top: 0; right: 0; z-index: 20;
  width: var(--panel-w); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--sky-top);
  border-inline-start: 1px solid var(--glass-line);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-panel) cubic-bezier(.6, 0, .25, 1), visibility 0s linear var(--t-panel);
}
.panel.open { transform: none; visibility: visible; transition: transform var(--t-panel) cubic-bezier(.6, 0, .25, 1); }
/* The bar (owner, 27.10.2026; probe landing-panel.sh): the name, «beta» beside it, then two icon buttons as one pair. */
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--glass-line); }
.panel-title { font: 700 17px var(--font-display); flex: 1; }
/* «beta» (the panel bar and the page header, owner 27.10.2026): no pill — a quiet word in muted brass small caps on the
   name's baseline (inline inside the name, vertical-align baseline);
   --gold on --sky-top ≈ 5:1 */
.channel {
  margin-inline-start: 1px; color: var(--gold);
  font: 600 14px var(--font-ui); vertical-align: baseline; font-variant-caps: all-small-caps; letter-spacing: .1em;
}
/* full screen and close: one size, one weight, the library's pictograms (D140) */
.panel-icon {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--glass-line); background: transparent; color: var(--parchment);
  cursor: pointer; text-decoration: none;
}
.panel-icon .ico { width: 18px; height: 18px; }
.panel-icon:hover { border-color: var(--gold); }
/* their tooltip: the button's own name (aria-label, translated with the page) in the look of the game's tooltip (dark
   wood, cream words, brass rim; client/styles/ui.css .tip.simple), under the button and inside the panel. On hover
   after --tip-dwell, at once on keyboard focus; a screen reader already has the name. */
.panel-icon::after, .panel-icon::before {
  position: absolute; pointer-events: none; z-index: 1;
  background: rgb(78, 54, 30); border: 1px solid rgba(240, 200, 130, .6);
  opacity: 0; visibility: hidden; transition: opacity var(--t-tip) ease-out, visibility 0s linear var(--t-tip);
}
.panel-icon::after {
  content: attr(aria-label); top: calc(100% + 9px); inset-inline-end: -2px;
  width: max-content; max-width: 220px; padding: 5px 10px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color: rgba(251, 246, 236, .9); font: 600 11.5px/1.35 var(--font-ui); text-align: center; white-space: normal;
}
.panel-icon::before {   /* the corner pointing at the button */
  content: ""; top: calc(100% + 4px); inset-inline-end: 12px; width: 10px; height: 10px; rotate: 45deg;
  border-bottom-color: transparent; border-right-color: transparent;
}
.panel-icon:hover::after, .panel-icon:hover::before { opacity: 1; visibility: visible; transition-delay: var(--tip-dwell); }
.panel-icon:focus-visible::after, .panel-icon:focus-visible::before { opacity: 1; visibility: visible; transition-delay: 0s; }
.panel-frame { flex: 1; width: 100%; border: 0; background: var(--sky-top); }
.panel-resize {
  position: absolute; inset-block: 0; inset-inline-start: calc(var(--panel-handle) / -2); z-index: 1;
  width: var(--panel-handle);
  cursor: col-resize; touch-action: none;
}
.panel-resize::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% - 1px);
  width: 2px; background: transparent; transition: background .2s;
}
.panel-resize:hover::after, .panel-resizing .panel-resize::after { background: var(--gold); }
.panel-resize:focus-visible { outline: none; }
.panel-resize:focus-visible::after { inset-inline-start: calc(50% - 2px); width: 4px; background: var(--glow); }
/* while dragging: the game iframe would swallow the pointer, and no transition may lag behind it */
.panel-resizing, .panel-resizing * { cursor: col-resize; user-select: none; }
.panel-resizing .panel-frame { pointer-events: none; }
.panel-resizing .panel, .panel-resizing body { transition: none; }

/* like Chrome's side panel: the page makes room instead of being covered */
@media (min-width: 641px) {
  body { transition: padding-inline-end var(--t-panel) cubic-bezier(.6, 0, .25, 1); }
  body.panel-open { padding-inline-end: var(--panel-w); }
}

@container (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 8px; }
  .hero-art { max-width: 340px; }
}
@container (max-width: 600px) {
  .top-nav a[href="#surfaces"] { display: none; }
}
/* the road on a narrow page: the trail and the islands on a rail down the left edge, every text to its right; the kin on
   its islet in the trail */
@container (max-width: 760px) {
  .road { --road-kin: var(--road-kin-s); --islet-w: var(--islet-w-s); --trail-x: var(--trail-x-s); --trail-sway: var(--trail-sway-s);
    --trail-tail: var(--trail-tail-s); --isle-w: var(--isle-w-s); --isle-y: 64px;
    --lantern-w: 28px; --lantern-h: 42px; --lantern-bottom: 16px; --glow-size: 96px; }
  .road-steps { gap: 22px; }
  .road-step { grid-template-columns: var(--road-rail-s) 1fr; column-gap: 8px; align-items: start; }
  .road-step .road-mark, .road-step:nth-child(even) .road-mark { left: var(--isle-x, calc(var(--road-rail-s) - var(--isle-w))); }
  .road-text, .road-step:nth-child(even) .road-text { grid-column: 2; justify-self: stretch; max-width: none; padding: 14px 16px 16px; }
  .road-text h3 { font-size: 19px; }
}
/* A phone: the panel is the whole window and the page behind it stands still. The lock is on html: its overflow goes to
   the viewport (body's own is not handed on while html clips), so the window's scrollbar goes too. 100%, not 100vw: a
   fixed box's 100% is the window without a classic scrollbar, 100vw is with it (the panel would start 15 px left of
   the window); with overlay scrollbars both are the same. */
@media (max-width: 640px) {
  :root { --panel-w: 100%; }
  html:has(> body.panel-open) { overflow: hidden; }
  .panel-resize { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html::after, body::before { animation: none; }   /* the sky stands still: the twinkling layer at its bright end */
  .panel, .panel.open, body { transition: none; }
  .panel-icon::after, .panel-icon::before { transition-duration: 0s; }   /* the tooltip just appears (after its dwell) */
  .hero-kin, .kin-glow, .kin-cloud { transition: none; transform: none; }
  .road-step[data-status="current"] .road-glow { animation: none; }   /* the current lantern burns steady */
  .road-kin { transition: none; }
  .boot, .road { transition: none; }
  .boot-dust i { animation: none; }   /* the stars stand still, dim */
}
/* the realms the landing links to (landing.json, EP-030.T-08) */
.worlds a { color: inherit; }

/* The language row (index.html #langs): its own quiet line under the build and the server status, each language in
   its own name. The current one is lit; one not yet available is dimmer, no link, "coming soon" on hover. */
/* A dot sits in the gap before each name; the clipped list hides the dot that would start a wrapped line (320 px);
   its padding keeps the focus ring inside the clip. */
.langs { --langs-gap: 15px; flex-basis: 100%; display: flex; align-items: flex-start; gap: 5px; font-size: 12px; letter-spacing: .02em; }
.langs-icon { width: 14px; height: 14px; margin-block-start: 9px; opacity: .75; }
.langs ul { display: flex; flex-wrap: wrap; column-gap: var(--langs-gap); margin: 0; padding: 3px; list-style: none; overflow: hidden; }
.langs li::before {
  content: "·"; content: "·" / "";
  display: inline-block; inline-size: var(--langs-gap); margin-inline-start: calc(-1 * var(--langs-gap)); text-align: center; opacity: .6;
}
.langs a { display: inline-block; padding-block: 4px; color: inherit; text-decoration: none; border-radius: 4px; }
.langs a[href]:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.langs a[aria-current="true"] { color: var(--gold-light); font-weight: 700; }
.langs a[aria-disabled="true"] { opacity: .5; cursor: default; }
.langs a:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }

/* Footer links to the legal pages; the pages themselves (deploy/legal.py, apps/landing/legal/): a readable column. */
.foot .legal-links { margin-inline-start: auto; }
.legal { max-width: 46em; padding: 12px 0 40px; }
.legal h1 { font: 700 clamp(30px, 4vw, 42px)/1.15 var(--font-display); margin: 12px 0 8px; }
.legal h2 { font: 700 22px/1.3 var(--font-display); margin: 32px 0 8px; }
.legal .meta { font-size: 14px; opacity: .7; margin: 0 0 16px; }
.legal .note { opacity: .85; padding: 12px 16px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass); }
.legal li { margin: 0 0 10px; }

/* VIP comparison. Offer values and the one sales flag come from pricing.py's configured inputs. */
.pricing-page { max-width:1120px; }
.pricing-home { color:var(--gold-light); font-size:14px; padding:12px 0; }
.pricing-skip { position:fixed; left:12px; top:-80px; z-index:20; padding:12px; background:var(--parchment); color:#342a20; }
.pricing-skip:focus { top:12px; }
.pricing-hero { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:24px; align-items:center; padding:20px 0 24px; }
.pricing-kicker { color:var(--gold-light); letter-spacing:.14em; font-size:12px; font-weight:800; margin:0 0 12px; }
.pricing-hero h1 { font:700 clamp(28px,3vw,36px)/1.12 var(--font-display); margin:0 0 16px; }
.pricing-lead { max-width:650px; margin:0; color:#d6d0df; font-size:18px; line-height:1.55; }
.pricing-moon { display:grid; place-items:center; width:112px; height:112px; border:1px solid #e0bd7b45; border-radius:50%; background:radial-gradient(circle,#e0bd7b24,transparent 70%); box-shadow:0 0 70px #e0bd7b12; }
.pricing-moon > .ico { width:64px; height:64px; color:var(--gold-light); }
.pricing-plans { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:22px; align-items:start; }
.pricing-plan { display:flex; flex-direction:column; min-width:0; border-radius:14px; padding:26px; background:linear-gradient(120deg,#fbf6ec,#efdfc0); color:#392f25; border:1px solid #b49a6b; box-shadow:0 12px 36px #080c211c; }
.pricing-plan h2 { margin:0; font:700 27px/1.2 var(--font-display); }
.paid-plan { border:2px solid #d8b16d; padding:25px; }
.plan-heading { display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.pricing-status { font-size:12px; font-weight:800; line-height:1.3; padding:5px 9px; border:1px solid #aa8447; border-radius:20px; background:#e7c88b; }
.pricing-plan .plan-lead { min-height:48px; line-height:1.5; margin:10px 0 16px; color:#61503b; }
.pricing-plan .plan-price { margin:0 0 18px; font-size:40px; font-weight:800; line-height:1.2; color:#382a1c; font-variant-numeric:tabular-nums; }
.plan-price small { display:block; font:600 14px/1.5 var(--font-ui); margin-top:4px; color:#61503b; }
.pricing-plan .free-price { font:700 28px/1.2 var(--font-display); margin-top:auto; }
.free-features { display:grid; gap:6px; margin:0 0 16px; padding-left:18px; color:#61503b; font-size:14px; line-height:1.5; }
.paid-plan .plan-lead { font:700 22px/1.25 var(--font-display); min-height:0; }
.vip-perks { list-style:none; display:grid; gap:16px; padding:0; margin:0 0 22px; }
.vip-perks li > div { display:flex; gap:10px; align-items:flex-start; }
.vip-perks .ico { flex:none; width:22px; height:22px; color:#75501d; }
.vip-perks strong { font-size:16px; line-height:1.4; }
.vip-perks p { margin:4px 0 0 32px; color:#61503b; font-size:13px; line-height:1.5; }
.pricing-plan .btn { width:100%; min-height:46px; justify-content:center; font-weight:800; background:#435844; color:#fff8e9; border:1px solid #435844; text-align:center; text-decoration:none; }
.pricing-plan .buy-vip { background:#c4aa7b; border-color:#a48a61; color:#4b3a23; opacity:1; cursor:default; box-shadow:none; }
.pricing-plan .buy-vip:not(:disabled) { background:#74531f; color:#fff8e9; cursor:pointer; }
.purchase-help { color:#61503b; font-size:13px; line-height:1.5; margin:10px 0 0; }
.pricing-terms-line { display:flex; justify-content:space-between; gap:24px; color:#c9c2d7; font-size:13px; margin:12px 0 34px; }
.pricing-terms-line p { max-width:48%; margin:0; }
.pricing-section { margin:42px 0; }
.pricing-section > h2,.pricing-equal h2,.pricing-beta h2 { font:700 28px/1.2 var(--font-display); margin:0 0 10px; }
.section-intro { color:#c9c2d7; margin:0 0 20px; }
.comparisons { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.comparison { border:1px solid var(--glass-line); border-radius:12px; padding:22px; background:#0e183448; }
.benefit-heading { display:flex; align-items:flex-start; gap:12px; }
.benefit-heading > .ico { width:26px; height:26px; flex:none; color:var(--gold-light); }
.benefit-heading h3 { font:700 22px/1.2 var(--font-display); margin:0 0 20px; }
.benefit-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.benefit-columns span { color:var(--gold-light); font-size:11px; letter-spacing:.05em; font-weight:800; }
.benefit-columns p { margin:7px 0 0; font-size:15px; line-height:1.55; }
.benefit-why { color:#c9c2d7; font-size:14px; line-height:1.6; margin:18px 0 0; }
.pricing-equal,.pricing-beta { display:flex; align-items:flex-start; gap:16px; padding:24px; border:1px solid #ccb88762; border-radius:12px; margin:24px 0; background:#1d2d31b3; }
.pricing-equal > .ico,.pricing-beta > .ico { width:28px; height:28px; color:var(--gold-light); flex:none; }
.pricing-equal h2,.pricing-beta h2 { font-size:24px; }
.pricing-equal p,.pricing-beta p { margin:0; line-height:1.6; }
.pricing-beta { background:#382c2bb8; border-color:#c7a16c80; }
.pricing-how { max-width:820px; }
.pricing-how ol { padding-left:22px; line-height:1.65; }
.pricing-how li { padding-left:6px; margin:14px 0; }
.pricing-legal { display:flex; flex-wrap:wrap; gap:12px 24px; }
.pricing-page a { text-underline-offset:3px; }
.pricing-page a:focus-visible,.pricing-page button:focus-visible,.pricing-page summary:focus-visible { outline:3px solid var(--gold-light); outline-offset:3px; box-shadow:0 0 0 7px #12213c; }
.pricing-faq { max-width:860px; }
.pricing-faq details { border-bottom:1px solid var(--glass-line); }
.pricing-faq summary { padding:18px 4px; font-weight:700; cursor:pointer; line-height:1.5; }
.pricing-faq details p { padding:0 4px 20px; margin:0; color:#d6d0df; line-height:1.65; max-width:740px; }
.pricing-langs { display:flex; flex-basis:100%; gap:20px; flex-wrap:wrap; }
.pricing-langs a { padding:8px 0; }
.pricing-langs a[aria-current] { font-weight:800; color:var(--gold-light); }
@media(max-width:700px){
 .pricing-hero { grid-template-columns:1fr; gap:0; padding:20px 0 24px; }.pricing-moon{display:none;}
 .pricing-page .top {gap:12px;}.pricing-home{max-width:160px;text-align:right;line-height:1.4;font-size:12px;}
 .pricing-hero h1{font-size:28px;}.pricing-lead{font-size:16px;}.pricing-plans{grid-template-columns:1fr;gap:18px;}
 .pricing-plan{padding:20px;border-radius:10px;}.paid-plan{padding:19px;}.pricing-plan h2{font-size:24px;}
 .pricing-plan .plan-lead{font-size:16px;min-height:0;margin-bottom:18px;}.paid-plan .plan-lead{font-size:22px;}.pricing-plan .plan-price{font-size:32px;margin-bottom:14px;}
 .pricing-plan .free-price{font-size:24px;}.plan-price small{font-size:12px;}.plan-heading{gap:8px;}.pricing-status{font-size:10px;}
 .pricing-plan .btn{padding:10px 5px;font-size:14px;}.purchase-help{font-size:12px;}.pricing-terms-line{display:block;margin-bottom:28px;}
 .pricing-terms-line p{max-width:none;margin:8px 0;}.comparisons{grid-template-columns:1fr;}.comparison{padding:20px;}
 .pricing-section{margin:32px 0;}.pricing-section > h2{font-size:26px;}.pricing-equal,.pricing-beta{gap:12px;padding:18px;}
 .pricing-equal h2,.pricing-beta h2{font-size:23px;}.pricing-equal > .ico,.pricing-beta > .ico{width:23px;height:23px;}
}
/* Owner TEST checkout reuses the existing pricing card. No form is shown without the explicit URL flag. */
.pricing-test-form {display:grid;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--gold);}
.pricing-test-form label {display:grid;gap:6px;font-weight:600;}
.pricing-test-form input[type=email],.pricing-test-form select {box-sizing:border-box;width:100%;min-width:0;min-height:46px;padding:10px 14px;border:1px solid #ad8851;border-radius:10px;background:#fff9eb;color:#3e2c19;font:inherit;}
.pricing-test-form input:focus-visible,.pricing-test-form select:focus-visible {outline:2px solid #b98538;outline-offset:3px;}
.pricing-test-form select {padding-right:30px;}
.pricing-test-form small {line-height:1.5;}

.pricing-test-warning {margin:0;padding:12px 14px;border-inline-start:4px solid #9d4d32;background:#b55b3b20;color:#60341f;font-weight:600;line-height:1.5;}