/* coreservices.shop | components
   The pieces the cs scripts are made of, sized for a page that scrolls.
   Needs tokens.css first. */

/* --- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground-end);
  color: var(--text-body);
  font: 500 var(--fs-body)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The panel's own light, once, at the top of the page. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(1100px, 140vh);
  background: radial-gradient(90% 100% at 50% 0%, var(--ground-top) 0%, rgb(1 13 15 / 0) 100%);
  pointer-events: none;
  z-index: -1;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, ul, ol, h1, h2, h3, h4, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 600; color: var(--text); }

::selection { background: var(--accent-40); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-ctl); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); position: relative; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 14px; height: 14px; }
.icon.lg { width: 22px; height: 22px; }

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

/* The headline pair: the name in silver Gilroy, one word in Brothership.
   Both are clipped gradients, and Brothership reaches above its line box, so
   the accent grows upwards by its padding or its capitals lose their tops. */
.title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .28em;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--text);
}
.title .n,
.title .s {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title .n { background-image: var(--text-silver); }
.title .s {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  background-image: var(--text-accent);
  padding: .22em .12em 0 .04em;
  margin: -.22em -.12em 0 -.04em;
}
/* The umlaut Brothership cannot draw: the base letter with two of its own
   full stops over it. background-clip: text only takes what is painted in the
   text's own layer, so the stops stay in flow: no position, no transform, no
   pseudo-element. A zero-width box pulled back over the letter and raised. */
.title .s .dd {
  display: inline-block;
  width: 0;
  white-space: nowrap;
  text-indent: var(--dd-x, -.33em);
  vertical-align: var(--dd-y, .5em);
  letter-spacing: .03em;
}
.title .s .dd.cap { --dd-y: .66em; --dd-x: -.5em; }
.title.xl { font-size: var(--fs-display); }
.title.xl .s { font-size: var(--fs-display-acc); }
.title.md { font-size: var(--fs-h2); }
.title.md .s { font-size: var(--fs-h2-acc); }
.title.sm { font-size: 30px; }
.title.sm .s { font-size: 29px; }
.title.stack { flex-direction: column; align-items: flex-start; }
.title.center { justify-content: center; text-align: center; }
.title.stack.center { align-items: center; }

/* The two-line block heading from cs_banking: a thin word over a fat one,
   whatever the block needs on the other side. */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.head .a { display: block; font-size: 15px; font-weight: 400; color: var(--text-soft); line-height: 1.2; }
.head .b { display: block; font-size: var(--fs-h3); font-weight: 600; color: var(--text); line-height: 1.25; }
.head.ruled { padding-bottom: 14px; border-bottom: var(--hairline) solid var(--rule); }

/* cs_menu's section heading: the word, the card dot, and a rule running off
   in the theme colour. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-soft);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-55);
  order: 2;
}
.eyebrow::after {
  content: "";
  flex: 0 1 120px;
  height: var(--hairline);
  background: linear-gradient(90deg, rgb(26 150 207 / .6), rgb(26 150 207 / .05));
  order: 3;
  margin-left: -4px;
}
.eyebrow.center { justify-content: center; }
.eyebrow.bare::after { display: none; }

.lead { font-size: clamp(17px, 1rem + .3vw, 19px); line-height: 1.55; color: var(--text-body); max-width: 60ch; }
.small { font-size: var(--fs-small); color: var(--text-soft); }
.faint { color: var(--text-faint); }
.num { font-variant-numeric: tabular-nums; }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-55); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
code, kbd, pre { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { padding: 1px 6px; border-radius: var(--r-chip); background: var(--sunk); color: var(--text); }
pre { padding: 16px 18px; border-radius: var(--r-card); background: var(--sunk); box-shadow: inset 0 0 0 var(--hairline) var(--hair); overflow: auto; line-height: 1.55; color: var(--text); }

/* --- the ring ----------------------------------------------------------- */

/* A masked pseudo-element, not a border, because a border cannot fade out
   round a corner. Grey at rest, the theme when it is the one being used. */
.edge { position: relative; isolation: isolate; }
.edge::before,
.edge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: var(--hairline);
  background-size: 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 220ms var(--ease-in);
}
.edge::before { background-image: var(--stroke); }
.edge::after { background-image: var(--stroke-lit); opacity: 0; }
.edge.lit::after,
a.edge:hover::after,
button.edge:hover::after,
.edge:focus-within::after { opacity: 1; }

/* --- surfaces ----------------------------------------------------------- */

.row { background: var(--surface-row); border-radius: var(--r-row); }
.tile { background: var(--surface-tile); border-radius: var(--r-card); }
.rest { background: var(--surface-rest); border-radius: var(--r-ctl); }
.rule { height: var(--hairline); background: var(--rule); border: 0; margin: 0; }

/* An icon tile is a rounded square. A circle means a person. */
.ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-ctl);
  background: var(--accent-20);
  color: var(--accent-line);
}
.ico.sm { width: 32px; height: 32px; }
.ico.person { border-radius: 50%; background: var(--surface-rest); color: var(--text); font-weight: 600; font-size: 13px; }

/* --- buttons ------------------------------------------------------------ */

.btn {
  --btn-ink: var(--accent);
  --btn-fill: radial-gradient(136.49% 182.43% at 50% 50%, rgb(26 150 207 / .40) 0%, rgb(26 150 207 / .19) 100%);
  --btn-glow: rgb(26 150 207 / .25);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r-ctl);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  background: var(--btn-fill);
  box-shadow: 0 0 36px var(--btn-glow), inset 0 0 13px var(--btn-glow);
  transition: box-shadow .35s var(--ease-in), filter .3s ease;
}
/* cs_menu's outline: brightest along the top edge and into the upper
   corners, gone by the bottom. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: var(--hairline);
  background: radial-gradient(120% 160% at 50% 0%, var(--btn-ink) 0%, transparent 70%);
  opacity: .8;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* cs_banking floods the button with its own colour under the pointer. */
.btn:hover { box-shadow: 0 0 36px var(--btn-glow), inset 0 0 120px var(--btn-glow); }
.btn:active { filter: brightness(.8); transition-duration: .08s; }
.btn .icon { width: 16px; height: 16px; }

.btn.lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; gap: 8px; }
.btn.block { display: flex; width: 100%; }

/* Grey at rest, the theme when it is used: cs_shops' basket button. */
.btn.ghost {
  background: var(--surface-rest);
  box-shadow: none;
  color: var(--text);
}
.btn.ghost::before { background: var(--stroke) 0 0 / 100% 100%; opacity: 1; }
.btn.ghost:hover { background: var(--surface-lit); box-shadow: 0 0 36px var(--btn-glow); }
.btn.ghost:hover::before { background: var(--stroke-lit) 0 0 / 100% 100%; }

.btn.quiet { background: none; box-shadow: none; padding: 0 6px; color: var(--text-soft); }
.btn.quiet::before { display: none; }
.btn.quiet:hover { color: var(--text); box-shadow: none; }

.btn.danger {
  --btn-ink: var(--cancel);
  --btn-fill: radial-gradient(136.49% 182.43% at 50% 50%, rgb(207 26 26 / .40) 0%, rgb(207 26 26 / .19) 100%);
  --btn-glow: rgb(207 26 26 / .25);
}

.btn[disabled], .btn.off { opacity: .35; pointer-events: none; }

/* The close button every cs window has in the same corner. */
.close {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: none;
  border-radius: 4px;
  background: radial-gradient(115.72% 115.72% at 51.43% 51.43%, var(--close) 0%, var(--close-deep) 100%);
  transition: box-shadow .3s ease, filter .3s ease;
}
.close svg { width: 15px; height: 15px; transition: transform .3s ease; }
.close:hover { box-shadow: 0 0 3px 0 #FF5656 inset, 0 13px 16px 0 rgb(255 72 72 / .25); }
.close:hover svg { transform: rotate(-90deg); }
.close:active { filter: brightness(70%); transition-duration: .08s; }

/* A text link with an arrow, for "see all". */
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.more .icon { width: 16px; height: 16px; color: var(--accent-line); transition: transform .3s var(--ease-in); }
.more:hover .icon { transform: translateX(3px); }

/* --- form --------------------------------------------------------------- */

/* A field is a well cut into the surface. The hairline lights on focus and
   the placeholder steps out of the way. */
.field {
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--sunk);
  box-shadow: inset 0 0 0 var(--hairline) var(--hair);
  font: 500 15px/1.4 var(--font);
  color: var(--text);
  caret-color: var(--accent);
  transition: box-shadow .22s var(--ease-in);
}
.field::placeholder { color: rgb(255 255 255 / .35); transition: opacity .22s ease; }
.field:focus { outline: none; box-shadow: inset 0 0 0 var(--hairline) var(--accent-55), 0 0 0 3px var(--accent-12); }
.field:focus::placeholder { opacity: 0; }
textarea.field { min-height: 120px; resize: vertical; }
.label { display: block; margin-bottom: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.hint { margin-top: 6px; font-size: 13px; color: var(--text-soft); }

.search { position: relative; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.search .field { padding-left: 42px; }

/* cs_menu's switch: a cross in the knob when off, a tick when on. */
.switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: 13px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 var(--hairline) rgb(255 255 255 / .13);
  transition: background .25s ease, box-shadow .25s ease;
}
.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / .3);
  color: rgb(0 0 0 / .6);
  transition: transform .3s var(--ease-in), background .25s ease, box-shadow .25s ease;
}
.switch .knob svg { grid-area: 1 / 1; width: 11px; height: 11px; transition: opacity .2s ease, transform .3s var(--ease-in); }
.switch .yes { opacity: 0; transform: scale(.5); }
.switch[aria-checked="true"] {
  background: linear-gradient(90deg, rgb(20 113 155 / .9) 0%, rgb(28 163 225 / .95) 100%);
  box-shadow: inset 0 0 0 var(--hairline) rgb(26 150 207 / .85), 0 0 13px rgb(26 150 207 / .35);
}
.switch[aria-checked="true"] .knob { transform: translateX(18px); background: #fff; color: #19678B; box-shadow: 0 0 9px rgb(255 255 255 / .45); }
.switch[aria-checked="true"] .no { opacity: 0; transform: scale(.5); }
.switch[aria-checked="true"] .yes { opacity: 1; transform: none; }

/* --- choosing ----------------------------------------------------------- */

/* cs_garage's tabs: grey at rest, the theme when chosen. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 2px;
  background: var(--surface-rest);
  font-size: 14px;
  font-weight: 500;
  color: rgb(255 255 255 / .62);
  transition: background .25s ease, color .25s ease;
}
.tab:hover { background: var(--accent-12); color: var(--text); }
.tab[aria-selected="true"], .tab.on { background: var(--accent-26); color: var(--text); }
.tab[aria-selected="true"]::after, .tab.on::after { opacity: 1; }
.tab .count { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tab.on .count, .tab[aria-selected="true"] .count { color: var(--text-soft); }

/* cs_banking's account switch: two named halves and a thumb that slides. */
.seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: var(--r-ctl);
  background: rgb(255 255 255 / .05);
  box-shadow: inset 0 0 0 var(--hairline) var(--hair);
}
.seg .thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n, 2));
  border-radius: 4px;
  background: var(--accent-55);
  box-shadow: 0 0 16px var(--accent-26);
  transform: translateX(calc(100% * var(--i, 0)));
  transition: transform .32s var(--ease-in);
}
.seg button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .2s ease;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: var(--text); }
.seg .save { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-chip); background: rgb(70 199 126 / .18); color: var(--good); }

/* --- labels ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-chip);
  background: var(--accent-26);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.badge.grey { background: rgb(255 255 255 / .08); color: var(--text-body); }
.badge.good { background: rgb(70 199 126 / .16); color: var(--good); }
.badge.warn { background: rgb(224 169 59 / .16); color: var(--warn); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-chip); background: rgb(0 0 0 / .42); box-shadow: inset 0 0 0 var(--hairline) rgb(255 255 255 / .07); font-size: 12px; font-weight: 500; color: var(--text-body); }

.stars { display: inline-flex; gap: 2px; color: #FFC53D; }
.stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* --- the window --------------------------------------------------------- */

/* A cs panel with its furniture: two soft lights, the lit line along the
   bottom, a lit line into two opposite corners and two notch strips.
   cs.js hangs the furniture in, so the markup only says data-window. Kept for
   what you hold in your hand: the Pass, the buy box, the basket, a dialog. */
.window {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--panel);
  color: var(--text-body);
  box-shadow: 0 30px 80px rgb(0 0 0 / .45);
}
.window.sm { border-radius: var(--r-win); }
.window > .kit { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kit .glow { position: absolute; border-radius: 50%; background: var(--accent); }
.kit .glow.a { top: 104px; left: 10px; width: 131px; height: 131px; filter: blur(110px); }
.kit .glow.b { top: 60%; left: 40%; width: 165px; height: 165px; filter: blur(119px); }
.kit .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: radial-gradient(150% 150% at 50% -50%, var(--accent) 0%, rgb(26 150 207 / 0) 100%);
  box-shadow: 0 0 86px 0 var(--accent);
}
.kit .corner { position: absolute; width: 189px; height: auto; }
.kit .corner.tl { top: -5px; left: 0; }
.kit .corner.br { bottom: -5px; right: 0; transform: scale(-1, -1); }
.kit .ticks { position: absolute; width: 11px; height: 123px; }
/* In the padding, where cs_banking has them. Never over a line of content. */
.kit .ticks.r { top: 150px; right: 8px; }
.kit .ticks.l { bottom: 120px; left: 8px; transform: scale(-1, 1); }
.window.sm .kit .corner { width: 130px; }
.window.sm .kit .ticks { display: none; }
.cs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.window .whead {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 18px;
  border-bottom: var(--hairline) solid var(--rule);
}
.window .wbody { padding: 24px 28px 32px; }

/* The staged reveal cs_banking, cs_garage, cs_shops, cs_revivestation and
   cs_menu open with. The same numbers for the same piece. Only with JS, so a
   page without it shows everything where it is. */
.js .window[data-reveal]:not(.is-open) { opacity: 0; }
.window.is-open { animation: panelin .42s var(--ease-in) both; }
.window.is-open .kit .glow { animation: fadein .75s ease .05s both; }
.window.is-open .kit .line { animation: edgein .7s var(--ease-in) .08s both; }
.window.is-open .kit .corner { animation: fadein .6s ease .14s both; }
.window.is-open .kit .ticks { animation: fadein .6s ease .3s both; }
.window.is-open .whead { animation: risein .5s var(--ease-in) .05s both; }
.window.is-open .wbody { animation: risein .5s var(--ease-in) .11s both; }
.window.is-open .close { animation: fadein .4s ease .24s both; }

@keyframes panelin { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes risein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes edgein { from { opacity: 0; transform: scaleX(.25); } to { opacity: 1; transform: none; } }

/* Everything else on the page rises in once, and a list arrives one row
   after another, 28ms apart and never more than ten deep. */
.js .rise:not(.is-in) { opacity: 0; }
.rise.is-in { animation: risein .5s var(--ease-in) calc(var(--d, 0) * 1ms) both; }
.js .stagger > *:not(.is-in) { opacity: 0; }
.stagger > .is-in { animation: risein .45s var(--ease-in) calc(min(var(--i, 0), 10) * 28ms) both; }

/* --- rows and lists ----------------------------------------------------- */

.list { display: grid; gap: 6px; }
.item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--surface-row);
  border-radius: var(--r-row);
}
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.item .t span { display: block; font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.item .v { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A tick list, for what something includes. */
.ticks-list { display: grid; gap: 10px; }
.ticks-list li { display: flex; gap: 12px; align-items: flex-start; }
.ticks-list .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-line); }

/* FAQ, drawn as rows that open. */
.faq { display: grid; gap: 6px; }
.faq details { background: var(--surface-row); border-radius: var(--r-row); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--text-soft); transition: transform .3s var(--ease-in), color .2s ease; }
.faq details[open] summary .icon { transform: rotate(45deg); color: var(--accent-line); }
.faq summary:hover .icon { color: var(--text); }
.faq .answer { padding: 0 20px 20px; max-width: 72ch; }

/* --- cards -------------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

/* A script in the catalogue. The picture is the product, so it takes the top
   and everything else stays quiet under it. */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--surface-tile);
  transition: transform .35s var(--ease-in);
}
.product:hover { transform: translateY(-3px); }
.product .media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--sunk); }
.product .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-in); }
.product:hover .media img { transform: scale(1.03); }
.product .media .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.product .body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 16px 18px; }
.product .name { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; }
.product .sum { font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.product .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: var(--hairline) solid var(--hair); }
.product .price { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.product .price small { display: block; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.product .pass { font-size: 12px; font-weight: 600; color: var(--accent-line); }
.product > a.cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.product .foot .btn { position: relative; z-index: 2; }
/* cs_shops' lit mark along the bottom edge, only on the one under the pointer. */
.product::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 -2px 33px #fff;
  transform: translateX(-50%) scaleX(.2);
  opacity: 0;
  transition: opacity .3s ease, transform .4s var(--ease-in);
}
.product:hover::after { opacity: 1; transform: translateX(-50%); }

/* A fact: a number and what it is. */
.stat { padding: 18px 20px; border-radius: var(--r-card); background: var(--surface-tile); }
.stat b { display: block; font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-soft); }

/* A review. The words first, who said it under them. */
.review { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-card); background: var(--surface-tile); }
.review q { quotes: none; font-size: 16px; line-height: 1.55; color: var(--text); }
.review .by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review .by b { display: block; font-size: 14px; line-height: 1.2; }
.review .by span { display: block; font-size: 13px; color: var(--text-soft); }

/* A reason, on the page's own ground: an icon tile, a line, a sentence. */
.point { display: flex; flex-direction: column; gap: 12px; }
.point h3 { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.3; }
.point p { font-size: 15px; color: var(--text-soft); }

/* --- the pass ----------------------------------------------------------- */

.price-big { display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.price-big b { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-big span { font-size: 16px; color: var(--text-soft); }
.worth { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-row); background: var(--sunk); font-size: 14px; }
.worth s { color: var(--text-faint); }
.worth b { color: var(--good); }

/* --- messages ----------------------------------------------------------- */

/* cs_config's toast. */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: 0 0 54px rgb(0 0 0 / .5), inset 0 0 0 2px rgb(255 255 255 / .07);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  animation: toastin .4s var(--ease-in) both;
}
.toast .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.toast.bad .dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.toast.static { position: static; animation: none; }
@keyframes toastin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.note { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-row); background: var(--accent-12); box-shadow: inset 2px 0 0 var(--accent); font-size: 15px; }
.note.warn { background: rgb(224 169 59 / .1); box-shadow: inset 2px 0 0 var(--warn); }
.note .icon { margin-top: 2px; color: var(--accent-line); }
.note.warn .icon { color: var(--warn); }

/* A dialog over a veil that keeps the middle lit and darkens the corners. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(100% 100% at 50% 50%, rgb(0 0 0 / .52) 0%, rgb(0 0 0 / .74) 100%);
  animation: fadein .2s ease both;
}
.veil .window { width: min(480px, 100%); }
.veil .window .close { position: absolute; top: 24px; right: 24px; }

/* --- page furniture ----------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-head.stuck { background: rgb(1 13 15 / .97); box-shadow: 0 var(--hairline) 0 var(--rule); }
.site-head .bar { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo img { width: 30px; height: 30px; }
.logo .word { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.logo .n { font-size: 18px; font-weight: 800; letter-spacing: .02em; background: var(--text-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo .s { font-family: var(--script); font-size: 18px; padding-top: 6px; margin-top: -6px; background: var(--text-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; padding: 10px 12px; font-size: 15px; font-weight: 500; color: var(--text-soft); transition: color .2s ease; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.nav .pass-link { color: var(--text); }
.nav .pass-link .badge { height: 18px; padding: 0 6px; font-size: 10px; margin-left: 6px; vertical-align: 1px; }
.head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.iconbtn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-ctl); color: var(--text-soft); transition: color .2s ease, background .2s ease; }
.iconbtn:hover { color: var(--text); background: rgb(255 255 255 / .06); }
.iconbtn .n { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; color: #fff; }
.lang { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--text-soft); padding: 8px; }
.lang b { color: var(--text); font-weight: 600; }
.burger { display: none; }
@media (max-width: 900px) {
  .nav, .head-tools .lang, .head-tools .btn { display: none; }
  .burger { display: grid; }
}

.site-foot { margin-top: var(--sec); padding: 56px 0 32px; border-top: var(--hairline) solid var(--rule); font-size: 14px; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.site-foot h4 { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.site-foot li + li { margin-top: 8px; }
.site-foot a { color: var(--text-soft); transition: color .2s ease; }
.site-foot a:hover { color: var(--text); }
.site-foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: var(--hairline) solid var(--hair); font-size: 13px; color: var(--text-faint); }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } .site-foot .cols > :first-child { grid-column: 1 / -1; } }

/* --- motion off --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .js .rise:not(.is-in), .js .stagger > *:not(.is-in), .js .window[data-reveal]:not(.is-open) { opacity: 1; }
}