:root { --bg: #0A0A0A; --text: #F2EFE9; --body: #D3CFC7; --muted: #9A968E; --line: #2A2A2A; --accent: #D4FF00;
  --cr: #A56BFF; --mg: #22D3C5; --b: #6A6BFF; --d3: #FFB81F; --zma: #FF4545; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { color: var(--text); font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono', monospace; }

.nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  /* on wide screens the logo and the button stand on the edges of the 1320 content column, not of the screen (same sum as --gutter) */
  padding: 18px max(clamp(16px, 4vw, 48px), calc((100vw - 1320px) / 2)); }
.logo { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: .08em; }
.logo b { color: var(--accent); font-weight: 600; }
.nav-btn { font-family: 'JetBrains Mono', monospace; background: var(--accent); color: #0A0A0A; font-size: 11px; font-weight: 500; letter-spacing: .08em; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; transition: transform .2s cubic-bezier(.23,1,.32,1), translate .35s cubic-bezier(.23,1,.32,1); }
.nav-btn:hover { transform: scale(1.04); } .nav-btn:active { transform: scale(.97); }
/* "back" link on inner pages */
.p-back { display: block; width: max-content; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--muted); padding: 10px 0; margin: -10px 0 22px; transition: color .2s ease; }
.p-back:hover { color: var(--text); }

/* film finish: a barely visible moving grain over everything, and a soft vignette under the text */
.grain { position: fixed; inset: -50%; z-index: 13; pointer-events: none; opacity: .055; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); } 50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0, 0); } }
.vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.38) 100%); }   /* centred: both sides of the shelf get the same light */
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }
/* touch screens: no grain. The iPhone draws this noise in colour and much stronger than on a computer (it read as confetti
   behind the jars), and on a small screen it costs the graphics card a full-screen layer for nothing */
@media (pointer: coarse) { .grain { display: none; } }

.rail { position: fixed; z-index: 15; left: clamp(16px, 6vw, 110px); bottom: 26px; width: min(38vw, 440px); display: flex; gap: 10px; font-family: 'JetBrains Mono', monospace; }
.rail .it { flex: 1; display: flex; flex-direction: column-reverse; gap: 8px; font-size: 10px; letter-spacing: .16em; color: var(--muted); }
.rail .bar { position: relative; width: 100%; height: 2px; background: #232323; overflow: hidden; }
.rail .bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.rail .it.on { color: var(--text); }

/* overflow-x: clip — each hit on the glass shakes the whole frame (.sticky) by a few px; its edge went past the window and the
   browser showed a horizontal scrollbar for a moment. clip (not hidden) keeps .sticky sticky */
.stage { position: relative; height: 1770vh; overflow-x: clip; }   /* 1700 → 1770 with creatine's own pain (12.10): every beat keeps its length */
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* only as wide as the text column, so it darkens the text's background and not the jars next to it */
.shade { position: absolute; inset: 0 auto 0 0; width: 50%; z-index: 4; pointer-events: none;
  background: linear-gradient(to right, rgba(10,10,10,.96) 0%, rgba(10,10,10,.88) 72%, rgba(10,10,10,0) 100%); }

#line { position: absolute; z-index: 5; display: none; align-items: center; justify-content: center; overflow: hidden; background: var(--accent); color: #0A0A0A;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; pointer-events: none; }
#line span { display: block; }
#line.live { pointer-events: auto; transition: translate .35s cubic-bezier(.23,1,.32,1); }
#line.live:hover span { animation: nudge 1.2s cubic-bezier(.5,0,.3,1) infinite; }

/* ---------- text system ---------- */
.panel { position: absolute; z-index: 6; left: clamp(16px, 6vw, 110px); width: min(38vw, 540px); top: 19vh; visibility: hidden; }
.panel.center { top: 50%; transform: translateY(-50%); width: min(40vw, 580px); }
/* the mask a line slides out of: it cuts only above and below — a word longer than its column ("Восстановление")
   keeps its last letter and simply runs on into the free space beside it */
.ln { display: block; clip-path: inset(0 -100vw); padding: .24em 0 .04em; margin-top: -.24em; }
.ln > span { display: block; will-change: transform; }
.kick { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .14em; color: #B5B1A9; margin-bottom: 22px; }
.kick .idx { color: var(--accent); font-weight: 500; margin-right: 12px; }
.kick .rule { display: inline-block; width: 28px; height: 1px; background: #9A968E; vertical-align: middle; margin-right: 12px; }
.kick .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 12px; vertical-align: 1px; }
.h { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .005em; }
.h-hero { font-size: clamp(52px, 6.8vw, 112px); line-height: 1.2; }   /* room for the dots of Ё under the comma above */
.h-fin { font-size: clamp(42px, 4.6vw, 80px); line-height: 1.18; }
.h-m { font-size: clamp(42px, 4.6vw, 72px); line-height: 1.08; }
.body { font-size: 18px; line-height: 1.55; color: var(--body); margin-top: 20px; max-width: 30em; text-wrap: pretty; }
.ln > .tags { display: flex; }
.tags { gap: 8px; margin-top: 22px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; flex-wrap: wrap; }
.tag { border: 1px solid #333; padding: 7px 10px; color: var(--muted); }
/* price row of an answer: price · old price · add to cart; under it how long a jar lasts · more about it */
.ln > .buy { display: grid; }
.buy { grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: 14px; row-gap: 6px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.buy .now { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(32px, 2.8vw, 42px); font-variant-numeric: tabular-nums; line-height: 1.1; }
.buy s { color: var(--muted); font-size: 14px; }
.buy .per { grid-column: 1 / 4; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.buy .add { grid-column: 4; }
.buy .more { grid-column: 4; justify-self: end; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); padding: 6px 0; transition: color .2s ease; }
.buy .more:hover { color: var(--text); }
/* add to cart, outlined in the jar's colour (the lime fill stays for "free selection") */
.add { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; min-height: 44px; padding: 0 16px; background: transparent; color: var(--text);
  border: 1px solid currentColor; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.23,1,.32,1); }
.add:hover { transform: translateY(-1px); } .add:active { transform: scale(.97); }
.add.in { background: var(--text); color: #0A0A0A; border-color: var(--text); }
/* focus: our own lime ring for the keyboard, nothing after a mouse click or a tap */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lime { color: var(--accent); }
/* read by search engines and screen readers, not shown: e.g. the product's plain name inside a headline that is a slogan */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-cr { color: var(--cr); } .c-mg { color: var(--mg); } .c-b { color: var(--b); } .c-d3 { color: var(--d3); } .c-zma { color: var(--zma); }
.bg-cr { background: var(--cr); } .bg-mg { background: var(--mg); } .bg-b { background: var(--b); } .bg-d3 { background: var(--d3); } .bg-zma { background: var(--zma); }
.slot { height: 58px; width: min(100%, 380px); margin-top: 30px; }
.sub { font-size: 14px; color: var(--muted); margin-top: 14px; }

#ice { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* scroll cues along the way */
.cue { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-top: 21px; }   /* same ~24px step as the other blocks */
.chev { display: inline-block; color: var(--accent); font-style: normal; margin-left: 6px; animation: nudge 1.4s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
#idle { position: fixed; z-index: 16; right: clamp(16px, 3vw, 40px); bottom: 26px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  color: var(--text); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s cubic-bezier(.23,1,.32,1); pointer-events: none; }
#idle.on { opacity: 1; transform: none; }
.rail .bar.segs { display: flex; gap: 3px; background: none; overflow: visible; }
.rail .bar.segs b { position: relative; flex: 1; height: 2px; background: #232323; overflow: hidden; }
.rail .bar.segs b i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .chev { animation: none; } }

/* the closing line of an answer: what it was → when → what it becomes */
.ln > .res { display: grid; }
.res { grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; margin-top: 22px; padding-left: 14px; border-left: 2px solid currentColor; }
.res .was { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); text-decoration: line-through; text-transform: uppercase; }
.res .when { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.res .to { grid-column: 1 / -1; font-size: 21px; line-height: 1.4; font-weight: 600; color: var(--text); text-wrap: pretty; }
.why { font-size: 16px; line-height: 1.55; color: #A9A59D; margin-top: 16px; max-width: 30em; text-wrap: pretty; }
/* how to take it — on desktop only, the phone has no room for it */
.how { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 14px; }
.how b { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: .12em; color: #B5B1A9; margin-right: 8px; }
.mob-only { display: none; }
/* short laptop screens: the answer block has to fit above the chapter rail */
@media (min-aspect-ratio: 9/10) and (max-height: 820px) {
  .panel { top: 15vh; }
  .h-m { font-size: clamp(36px, 7.4vh, 60px); }
  .kick { margin-bottom: 14px; }
  .body { font-size: 16px; margin-top: 14px; }
  .why { font-size: 14px; margin-top: 10px; }
  .res { margin-top: 14px; } .res .to { font-size: 18px; }
  .buy { margin-top: 16px; padding-top: 12px; }
  .how { display: none; }
}

@media (max-aspect-ratio: 9/10) {
  .nav { background: linear-gradient(to bottom, rgba(10,10,10,.9) 40%, rgba(10,10,10,0)); padding-bottom: 26px; }
  .panel, .panel.center { left: 20px; right: 20px; width: auto; top: auto; bottom: 32px; transform: none; }
  .shade { inset: auto 0 0 0; width: auto; height: 58%;
    background: linear-gradient(to bottom, rgba(10,10,10,0), rgba(10,10,10,.88) 30%, rgba(10,10,10,.97)); }
  .h-hero { font-size: clamp(44px, 13vw, 80px); }
  .h-fin { font-size: clamp(40px, 11.6vw, 72px); }
  .h-m { font-size: clamp(32px, 9.4vw, 52px); }
  .body { font-size: 15px; margin-top: 14px; }
  .kick { font-size: 11px; margin-bottom: 14px; }
  .tags { margin-top: 16px; }
  .buy { margin-top: 18px; padding-top: 12px; }
  /* phones: only the progress line, on the nav's lower edge (the button ends at 62 px, the line sits 18 px under it, as the
     button sits 18 px under the top); the chapter names crowded the button, and the scene numbers its steps itself (01/05) */
  .rail { top: 80px; bottom: auto; right: 16px; left: 16px; width: auto; gap: 8px; }
  .rail .it { gap: 0; font-size: 0; letter-spacing: 0; }
  .slot { width: 100%; }
  .why { font-size: 14px; margin-top: 10px; }
  .how { display: none; }
  .res { margin-top: 14px; }
  .res .to { font-size: 16px; }
  #idle { top: 90px; bottom: auto; }
  .cue { margin-top: 16px; }
}
/* short phones (small Android, Telegram's in-app browser): the answer must stay under the jar, not on it */
@media (max-aspect-ratio: 9/10) and (max-height: 720px) {
  .panel, .panel.center { bottom: 20px; }
  .h-m { font-size: clamp(28px, 8.4vw, 40px); }
  .h-hero { font-size: clamp(38px, 11.5vw, 60px); }
  .h-fin { font-size: clamp(34px, 10vw, 54px); }
  .kick { margin-bottom: 10px; }
  .why { display: none; }
  .res { margin-top: 12px; } .res .to { font-size: 15px; }
  .buy { margin-top: 12px; padding-top: 10px; }
  .buy .now { font-size: 30px; }
  .body { font-size: 14px; margin-top: 10px; }
  .tags { margin-top: 12px; }
  .cue { margin-top: 12px; }
  .slot { height: 52px; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hint .track i { animation: none; top: 14px; } }

/* ================= the rest of the site, after the shelf ================= */
.rail { transition: opacity .4s ease; }
.rail.gone { opacity: 0; pointer-events: none; }
/* the scene goes into shadow as the page moves on; its lower edge melts into the page, so there is no seam */
.dim { position: absolute; inset: 0; z-index: 12; background: linear-gradient(to bottom, rgba(10,10,10,.72), #0A0A0A 72%); opacity: 0; pointer-events: none; }
.nav { transition: background-color .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(10,10,10,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: #191919; }
.page { position: relative; z-index: 2; background: var(--bg); }
/* side gutter: the usual one, or — on wide screens — whatever centres a 1320 px column (content stopped at 1320 and hugged the left) */
:root { --gutter: max(clamp(16px, 6vw, 110px), calc((100vw - 1320px) / 2)); }
.sec { padding: clamp(96px, 11vw, 168px) var(--gutter); }
.sec + .sec { border-top: 1px solid #191919; }
.sec .kick { margin-bottom: 22px; }
.h-s { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.08; }
.cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; max-width: 1320px; }
.lead { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 30em; text-wrap: pretty; }
.btn { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .1em; min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: #0A0A0A; border: 0; cursor: pointer; transition: transform .2s cubic-bezier(.23,1,.32,1), background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid #3A3A3A; }
.btn.ghost:hover { border-color: var(--text); }
.link { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; color: var(--text); border-bottom: 1px solid #4A4A4A; padding-bottom: 4px; transition: border-color .2s ease, color .2s ease; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.link:hover { border-bottom-color: var(--accent); color: var(--accent); }
.link { position: relative; } .link::after { content: ''; position: absolute; inset: -12px -6px; }   /* a finger-sized hit area around a thin text link */
/* reveal: headline lines slide out of their masks, the rest rises softly; once */
.rv .ln > span { transform: translateY(110%); transition: transform .9s cubic-bezier(.23,1,.32,1) var(--d, 0s); }
.rv .up { opacity: 0; transform: translateY(22px); transition: opacity .8s ease var(--d, 0s), transform .9s cubic-bezier(.23,1,.32,1) var(--d, 0s); }
.rv.in .ln > span, .rv.in .up { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rv .ln > span, .rv .up { transform: none; opacity: 1; transition: none; } }

/* no WebGL: the scene and its chapter rail give way to a plain first screen */
.nogl-hero { display: none; }
html.no-gl .stage, html.no-gl #rail, html.no-gl #idle { display: none; }
html.no-gl .nogl-hero { display: block; padding: 132px var(--gutter) 40px; }
.nogl-hero .kick { margin-bottom: 18px; }
.nogl-hero h1 { max-width: 10em; }
.nogl-hero img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 24px auto 28px; }
.nogl-hero .btn { min-height: 56px; }

/* line-up: five jars side by side, the place to buy after the scene */
#shelf { scroll-margin-top: 40px; }
.lineup-ship { width: min(100%, 360px); }
.lineup { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1320px; }
.lu { display: flex; flex-direction: column; }
/* the colour line is the card's own top border: the same width as the card and the button under it, no inset */
.lu-card { position: relative; flex: 1; display: flex; flex-direction: column; padding: 24px 20px 20px; background: #101010; border: 1px solid #1C1C1C; border-top: 3px solid var(--oc);
  transition: border-color .25s ease, background-color .25s ease; }
.lu-card:hover { border-color: var(--oc); background: #131313; }   /* no lift: the card and its button stay one block */
.lu-nm { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #B5B1A9; text-transform: uppercase; line-height: 1.4; }
.lu-nm i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lu-h { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.12; text-transform: uppercase; margin-top: 16px; }
.lu-to { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 12px; flex: 1; text-wrap: pretty; }
.lu-p { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.lu-p b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 28px; line-height: 1; }
.lu-p s { font-size: 13px; color: var(--muted); }
.lu-per { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--muted); margin-top: 8px; }
.lu-a { display: flex; flex-direction: column; }
.lu-a .add { width: 100%; margin-top: -1px; }
/* once the jar is in the cart, the button becomes − В КОРЗИНЕ · N + right where it was */
.lu-a .add.in { display: none; }
.stepper.zero { display: none; }
.lu-a .lu-step { display: flex; width: 100%; min-height: 44px; margin: -1px 0 0; border: 1px solid var(--text); background: var(--text); color: #0A0A0A; }
.lu-a .lu-step.zero { display: none; }
.lu-a .lu-step button { width: 52px; height: auto; flex: none; color: #0A0A0A; font-size: 20px; line-height: 1; }
.lu-a .lu-step button:hover:not(:disabled) { background: rgba(10,10,10,.08); }
.lu-a .lu-step output { flex: 1; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.lu-a .lu-step output::before { content: 'В\00a0КОРЗИНЕ\00a0·\00a0'; }
.lu-more { align-self: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--muted); padding: 12px 0 4px; transition: color .2s ease; }
.lu-more:hover { color: var(--text); }
/* the hover, like choosing a character in a game (prototype, branch feature/lineup-hover): an aura bigger than the card —
   the jar's own label as a texture in its colour, the jar rising from behind the card, its sign floating round it; the
   other cards step back. Touch screens: the card in the middle of the screen (.on, site.js) */
.lineup { gap: 36px; padding-top: 76px; }   /* room above the cards for the rising jar, between them for the signs */
.lu { position: relative; isolation: isolate; transition: opacity .4s ease, filter .4s ease; }
.lu-card, .lu-a { position: relative; z-index: 1; }
.lu-aura { position: absolute; inset: -40px -34px -26px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
/* the jar comes up from behind the card: its box ends exactly at the card's top edge and hides what is below */
.lu-rise { position: absolute; left: 0; right: 0; bottom: calc(100% - 40px); height: 190px; overflow: hidden; }
.lu-tex { position: absolute; inset: 0; background-size: auto 150%; background-position: 50% 42%; opacity: .9; filter: saturate(1.3) blur(1.5px);
  -webkit-mask-image: radial-gradient(ellipse 66% 60% at 50% 48%, #000 42%, transparent 82%); mask-image: radial-gradient(ellipse 66% 60% at 50% 48%, #000 42%, transparent 82%);
  transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.lu-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 52% at 50% 46%, color-mix(in srgb, var(--oc) 30%, transparent), transparent 72%); }
.lu-jar { position: absolute; left: 50%; bottom: -34px; height: 150px; width: auto; transform: translate(-50%, 112%); opacity: 0;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--oc) 55%, transparent)); transition: transform .6s cubic-bezier(.2,.8,.2,1.15), opacity .35s ease; }
.lu-sym { position: absolute; translate: -50% -50%; fill: none; stroke: var(--oc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
  filter: drop-shadow(0 0 6px var(--oc)); transition: opacity .5s ease; animation: lu-float 3.4s ease-in-out calc(var(--d) * -1) infinite alternate; }
@keyframes lu-float { from { transform: translateY(7px) rotate(-7deg); } to { transform: translateY(-9px) rotate(7deg); } }
.lu:is(:hover, :focus-within, .on) { z-index: 2; }
.lu:is(:hover, :focus-within, .on) .lu-aura { opacity: 1; }
.lu:is(:hover, :focus-within, .on) .lu-tex { transform: scale(1); }
.lu:is(:hover, :focus-within, .on) .lu-jar { transform: translate(-50%, 0); opacity: 1; }
.lu:is(:hover, :focus-within, .on) .lu-sym { opacity: .85; }
/* the texture is a halo round the card: under the text its big letters fought the copy, so the card stays nearly solid */
.lu:is(:hover, :focus-within, .on) .lu-card { border-color: var(--oc); background: rgba(14, 14, 14, .93); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--oc) 70%, transparent); }
.lu:is(:hover, :focus-within, .on) .lu-a .add { background: #0E0E0E; }
/* "more": the whole card leads to the jar's page; an arrow in its corner says so (the separate link under the button read
   as part of the button), and lights up in the jar's colour */
.lu-nm { padding-right: 22px; }
.lu-go { position: absolute; top: 19px; right: 16px; font-family: 'JetBrains Mono', monospace; font-size: 15px; line-height: 1; color: var(--muted);
  transition: color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1.2); }
.lu:is(:hover, :focus-within, .on) .lu-go { color: var(--oc); transform: translateX(4px); }
/* the chosen card steps forward a little — the card and its button as one block */
@media (hover: hover) { .lu { transition: opacity .4s ease, filter .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .lu:hover { transform: scale(1.035); } }   /* the aura must not show through the button */
@media (hover: hover) { .lineup:has(.lu:hover) .lu:not(:hover) { opacity: .42; filter: saturate(.45); } }
@media (prefers-reduced-motion: reduce) { .lu-sym { animation: none; } .lu-jar, .lu-tex { transition: opacity .3s ease; } }
#shelf { overflow-x: clip; }   /* the auras of the edge cards must not widen the page (clip: up and down stay open for the jar) */
@media (max-width: 1180px) { .lineup { row-gap: 120px; } }   /* three a row: the jar of the lower row rises into the gap */
@media (max-width: 640px) { .lu-aura { inset: -34px -12px -14px; } .lu-jar { height: 116px; bottom: -26px; } .lineup.lineup { gap: 96px; padding-top: 70px; } .lu-sym:nth-of-type(n+3) { display: none; } }
.lineup-help { margin-top: 28px; font-size: 15px; color: var(--muted); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sub-link { color: var(--text); border-bottom: 1px solid #4A4A4A; padding-bottom: 2px; transition: border-color .2s ease, color .2s ease; }
.sub-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* three a row (tablet): six half-columns, each card takes two — so the lower pair can stand in the middle, not hug the left */
@media (max-width: 1180px) and (min-width: 641px) {
  .lineup { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lineup > .lu { grid-column: span 2; }
  .lineup > .lu:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
  /* phones: a compact column — read, compare, tap; no sideways swiping in the place where people buy */
  .lineup { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lu { display: grid; grid-template-columns: 1fr; }
  .lu-card { padding: 20px 18px 16px; }
  .lu-h { font-size: 22px; margin-top: 10px; }
  .lu-to { font-size: 14px; margin-top: 8px; }
  .lu-p { margin-top: 14px; padding-top: 12px; }
  .lu-a { flex-direction: row; align-items: stretch; }
  .lu-a .add, .lu-a .lu-step { flex: 1; width: auto; }
  .lu-more { align-self: center; padding: 0 0 0 16px; min-height: 44px; display: flex; align-items: center; }
  .lineup-ship { width: 100%; }
}

/* approach */
.quote { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.22; margin-top: 34px; max-width: 16em; text-wrap: balance; }
.five { display: flex; gap: 6px; margin: 30px 0 22px; }
.five i { width: 26px; height: 3px; }
/* "our kitchen drawer": the five 3D jars instead of five colour dashes; standing on a hairline, like the scene's shelf */
.five-shelf { display: block; width: min(100%, 440px); height: auto; margin: 26px 0 22px -10px; padding-bottom: 6px;
  background: linear-gradient(90deg, transparent, #2A2A2A 18%, #2A2A2A 82%, transparent) bottom / 100% 1px no-repeat; }
.facts { list-style: none; border-top: 1px solid var(--line); margin-top: 8px; }
.fact { display: grid; grid-template-columns: 64px 1fr; padding: 30px 0; border-bottom: 1px solid var(--line); }
.fact .n { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .14em; color: var(--accent); padding-top: 9px; }
.fact h3 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(24px, 2vw, 30px); text-transform: uppercase; line-height: 1.15; }
.fact p { font-size: 17px; line-height: 1.55; color: var(--body); margin-top: 10px; max-width: 32em; text-wrap: pretty; }
.fact .link { margin-top: 16px; display: inline-block; }

/* reviews */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1320px; margin-bottom: clamp(48px, 5vw, 72px); }
.revs { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); max-width: 1320px; align-items: start; }
.circs { display: flex; flex-direction: column; gap: 40px; position: sticky; top: 120px; }   /* stay in view while the text reviews scroll past */
.circ figcaption { margin-top: 16px; }
.circ .who { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.circ .hook { display: block; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px; margin-top: 6px; }
.circ-v { position: relative; display: block; width: 220px; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: #151515; cursor: pointer; }
.circ-v video { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; object-fit: cover; display: block; }
.circ-v .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.circ-v .ring circle { fill: none; stroke-width: 1.4; }
.circ-v .ring .bg { stroke: #2E2E2E; } .circ-v .ring .fg { stroke: var(--accent); stroke-dasharray: 304.7; stroke-dashoffset: 304.7; }
.circ-v .play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(10,10,10,.55); backdrop-filter: blur(6px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.23,1,.32,1); }
.circ-v .play::after { content: ''; position: absolute; left: 22px; top: 18px; border-left: 16px solid var(--text); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.circ-v:hover .play { transform: scale(1.08); }
.circ-v.on .play { opacity: 0; transform: scale(.8); }
.circ-note { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 18em; }
.txt { columns: 2; column-gap: 20px; }
.rev { break-inside: avoid; margin-bottom: 20px; padding: 26px 26px 28px; background: #101010; border: 1px solid #1C1C1C; }
.rev header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rev .nm { font-weight: 600; font-size: 16px; color: var(--text); }
.rev .pr { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rev .pr i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rev .pr i:last-of-type { margin-right: 6px; }
.rev p { font-size: 16px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
/* the line of the jar(s) the review is about, as on the line-up cards: drawn from the left on hover; on touch screens always on */
/* The line is the card's own background (a strip 3 px tall, its width 0 → 100 %), not a pseudo-element: the reviews sit in
   CSS columns, and a line 1 px above the first card of a column was painted at the foot of the previous column — two cards
   lit at once. Leaving is quick (.15 s), so the old line is gone before the next one draws */
.rev { position: relative; background: var(--rc) left top / 0 3px no-repeat, #101010;
  transition: border-color .3s ease, background-color .3s ease, background-size .15s ease-in; }
/* sizes for BOTH layers (the strip, then the plain colour): a one-value list against the two-value one did not interpolate,
   so the line popped in instead of drawing from the left */
.rev:hover { border-color: #262626; background-color: #121212; background-size: 100% 3px, auto; transition: border-color .3s ease, background-color .3s ease, background-size .5s cubic-bezier(.2,.8,.2,1); }
@media (hover: none) { .rev { background-size: 100% 3px, auto; } }
.swipe { display: none; }

/* FAQ */
#faq .cols > :first-child { position: sticky; top: 120px; }
.faq { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
.q:hover .pm { border-color: var(--accent); }
.pm { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid #3A3A3A; border-radius: 50%; transition: transform .45s cubic-bezier(.23,1,.32,1), border-color .2s ease; }
.pm::before, .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--text); }
.pm::after { transform: rotate(90deg); }
.qa.open .pm { transform: rotate(135deg); border-color: var(--accent); }
.a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.23,1,.32,1); }
.a > div { overflow: hidden; }
.qa.open .a { grid-template-rows: 1fr; }
.a p, .a ul { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 36em; padding-bottom: 28px; text-wrap: pretty; }
.a .link { margin: -10px 0 30px; display: inline-block; }
.eff { list-style: none; display: grid; gap: 10px; }
.eff li { display: grid; grid-template-columns: 14px 150px 1fr; align-items: baseline; gap: 10px; }
.eff li i { width: 8px; height: 8px; border-radius: 50%; }
.eff b { font-weight: 600; color: var(--text); }

/* order */
.ways { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; max-width: 1320px; }
.way { display: flex; flex-direction: column; padding: 32px 30px 30px; background: #101010; border: 1px solid #1C1C1C; }
.way.main { background: #12140A; border-color: #3B4410; }
.way .n { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.way.main .n { color: var(--accent); }
.way h3 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(24px, 2vw, 30px); text-transform: uppercase; line-height: 1.12; margin-top: 18px; }
.way p { font-size: 16px; line-height: 1.55; color: var(--body); margin-top: 12px; text-wrap: pretty; }
.way .btn { margin-top: auto; align-self: flex-start; }
.way .sp { flex: 1; min-height: 28px; }
.shops { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.shops a, .shops button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #333; background: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--text); transition: border-color .2s ease, background-color .2s ease; }
.shops a:hover, .shops button:hover { border-color: currentColor; }
.shops a i, .shops button i { width: 7px; height: 7px; border-radius: 50%; }
.shops button.in { border-color: var(--text); background: #1A1A1A; }
.shops .mini-jar { height: 30px; width: auto; margin: -4px -2px -4px -6px; transition: transform .3s cubic-bezier(.2,.8,.2,1.3);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--oc, #fff) 55%, transparent)); }   /* black jars on a dark chip: a glow in their colour */
.shops button:hover .mini-jar { transform: translateY(-2px) rotate(-4deg); }
/* FAQ: a way out under the heading for whoever didn't find their question; on phones the same under the list */
.faq-ask { margin-top: 40px; max-width: 22em; }
.faq-ask p { font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.faq-ask .btn { margin-top: 18px; }
.faq-ask-end { display: none; }
@media (max-width: 860px) { .faq-ask:not(.faq-ask-end) { display: none; } .faq-ask-end { display: block; margin-top: 30px; } .faq-ask-end .btn { width: 100%; } }
/* the open question: a short lime mark at its left */
.qa { position: relative; }
.qa::before { content: ''; position: absolute; left: -18px; top: 28px; width: 2px; height: 22px; background: var(--accent); transform: scaleY(0); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.qa.open::before { transform: scaleY(1); }
@media (max-width: 860px) { .qa::before { left: -10px; top: 24px; } }
/* the delivery line in "how to order": the same text size as its neighbours */
.ship-dd.ship-bar p { font-size: 18px; font-weight: 600; color: var(--text); }
.ship-dd.ship-bar span { max-width: 260px; }
@media (max-width: 640px) { .ship-dd.ship-bar p { font-size: 16px; } }
.shops + .btn { margin-top: 14px; }
.shops-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-top: 14px; }
.ship { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1320px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.ship dt { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.ship dd { font-size: 18px; font-weight: 600; line-height: 1.4; margin-top: 8px; }

/* footer */
.foot { padding: 56px var(--gutter) 40px; border-top: 1px solid #191919; }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1320px; }
.foot .logo { font-size: 24px; }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-cat { display: flex; flex-wrap: wrap; gap: 0 26px; max-width: 1320px; margin-top: 28px; }
.foot-cat a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--body); transition: color .2s ease; }
.foot-cat a:hover { color: var(--text); }
.foot-cat i { width: 7px; height: 7px; border-radius: 50%; }
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a:hover, .foot-bot a:hover { color: var(--text); }
.foot-bot a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #444; }
.foot-legal a { text-decoration: none; }
.req { max-width: 1320px; margin-top: 36px; border-top: 1px solid var(--line); }
.req summary { list-style: none; cursor: pointer; padding: 18px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); display: flex; justify-content: space-between; }
.req summary::-webkit-details-marker { display: none; }
.req summary::after { content: '+'; font-size: 16px; line-height: 1; transition: transform .3s ease; }
.req[open] summary::after { transform: rotate(45deg); }
.req dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; padding: 6px 0 22px; }
.req dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.req dd { font-size: 14px; color: var(--body); margin-top: 4px; font-variant-numeric: tabular-nums; word-break: break-all; }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1320px; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); }

/* certificates */
.certs { margin: auto; width: min(560px, calc(100% - 32px)); background: #111; color: var(--text); border: 1px solid #262626; padding: 0; }
.certs::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.certs[open] { animation: pop .35s cubic-bezier(.23,1,.32,1); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.certs-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 18px 24px; border-bottom: 1px solid #222; }
.certs-hd h2 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 24px; text-transform: uppercase; }
.x { width: 44px; height: 44px; background: none; border: 1px solid #333; color: var(--text); font-size: 16px; cursor: pointer; }
.certs ul { list-style: none; }
.certs li a { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid #1C1C1C; transition: background-color .2s ease; }
.certs li a:hover { background: #171717; }
.certs li i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.certs .nm { font-weight: 600; font-size: 16px; }
.certs .mt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--muted); margin-top: 3px; }
.certs .op { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.certs-note { padding: 18px 24px 22px; font-size: 13px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1100px) {
  .revs { grid-template-columns: minmax(0, 1fr); }
  .revs > * { min-width: 0; }   /* the swipe row must not widen the grid */
  .circs { position: static; flex-direction: row; flex-wrap: wrap; gap: 28px 40px; margin-bottom: 48px; }
}
@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  #faq .cols > :first-child { position: static; }
  .cols > * + * { margin-top: 48px; }
  .lead { font-size: 16px; }
  .fact { grid-template-columns: 44px 1fr; padding: 24px 0; }
  .fact p { font-size: 15px; }
  .circs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .circ { min-width: 0; }
  .circ-v { width: 100%; max-width: 220px; }
  .circ-note { grid-column: 1 / -1; }
  .circ .hook { font-size: 18px; }
  .txt { columns: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .txt::-webkit-scrollbar { display: none; }
  .rev { flex: 0 0 84%; margin: 0; scroll-snap-align: start; scroll-margin-left: 16px; padding: 22px 20px 24px; }
  .rev p { font-size: 15px; }
  .swipe { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-top: 16px; }
  .q { padding: 22px 0; font-size: 17px; }
  .a p, .a ul { font-size: 15px; }
  .eff li { grid-template-columns: 12px 1fr; }
  .eff li span { grid-column: 2; }
  .ways { grid-template-columns: 1fr; gap: 12px; }
  .way { padding: 26px 22px 24px; }
  .way .btn { align-self: stretch; }
  .ship { grid-template-columns: 1fr; gap: 18px; }
  .ship dd { font-size: 16px; }
  .req dl { grid-template-columns: 1fr; }
  .foot-links { gap: 20px; }
}

/* ================= cart ================= */
.nav-r { display: flex; align-items: center; gap: 10px; }
.cart-btn { position: relative; width: 44px; height: 44px; display: none; place-items: center; background: rgba(10,10,10,.5); border: 1px solid #333; color: var(--text); cursor: pointer;
  transition: border-color .2s ease, translate .35s cubic-bezier(.23,1,.32,1); }
.cart-btn.shown { display: grid; animation: pop .4s cubic-bezier(.23,1,.32,1); }
/* the channel: a paper plane, with a word where there is room; same frame as the cart */
.nav-tg { height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 14px 0 12px; background: rgba(10,10,10,.5); border: 1px solid #333; color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em; transition: border-color .2s ease, color .2s ease; }
.nav-tg:hover { border-color: var(--text); }
.nav-tg svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transform: translateX(-1px); }
.nav-tg[aria-current] { border-color: var(--accent); color: var(--accent); }
.nav-tg { position: relative; }
.nav-tg b { color: var(--accent); font-weight: 500; }
/* phones: the plane alone, the discount as a badge on it (like the cart's count) */
.nav-tg-b { display: none; position: absolute; top: -8px; right: -9px; padding: 2px 4px; border-radius: 9px; background: var(--accent); color: #0A0A0A;
  font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9px; font-weight: 500; letter-spacing: 0; line-height: 1.2; }
@media (max-width: 860px) { .nav-tg { padding: 0; width: 44px; } .nav-tg span { display: none; } .nav-tg-b { display: block; } }
/* "free selection" breaks into two lines only on phones (cart + channel + button + logo in one row) */
.nav-btn br { display: none; }
@media (max-width: 480px) {
  .nav .logo { white-space: nowrap; }
  .nav-btn br { display: inline; }
  .nav .nav-btn { font-size: 10px; letter-spacing: .06em; line-height: 1.25; padding: 0 10px; }
}
@media (max-width: 400px) { .nav .logo { font-size: 16px; } .nav-r { gap: 6px; } }
@media (max-width: 350px) { .nav-tg { display: none; } }   /* the smallest phones: the channel stays in the footer */
.cart-btn:hover { border-color: var(--text); }
.cart-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cart-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #0A0A0A;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; display: grid; place-items: center; }
.cart-badge:empty { display: none; }
.cart-btn.bump .cart-badge { animation: bump .5s cubic-bezier(.23,1,.32,1); }
@keyframes bump { 30% { transform: scale(1.35); } }

.cart { margin: 0 0 0 auto; width: min(440px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid #262626; background: #0F0F0F; color: var(--text); }
.cart::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.cart[open] { animation: slideL .45s cubic-bezier(.23,1,.32,1); }
@keyframes slideL { from { transform: translateX(40px); opacity: 0; } }
.cart-in { display: flex; flex-direction: column; height: 100%; }
.cart-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-bottom: 1px solid #222; }
.cart-hd h2 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 24px; text-transform: uppercase; }
.cart-n { color: var(--muted); font-weight: 500; }
.cart-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px; }
.cart-ft { padding: 18px 24px 22px; border-top: 1px solid #222; display: flex; flex-direction: column; gap: 12px; }
.btn.wide { width: 100%; }

/* the lime line again: how far to free delivery */
.ship-bar p { font-size: 14px; color: var(--body); }
.ship-bar b { color: var(--text); font-weight: 600; }
.ship-bar span { display: block; height: 2px; background: #262626; margin-top: 10px; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .6s cubic-bezier(.23,1,.32,1); }
.ship-bar.done b { color: var(--accent); }

.cart-lines { list-style: none; margin-top: 14px; }
.cart-lines li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid #1E1E1E; }
/* our own 3D jar on a transparent ground (assets/thumbs, rendered by tools/render.html) */
.cart-img { width: 64px; height: 78px; background: radial-gradient(closest-side, #1E1E1E, #121212); display: grid; place-items: center; overflow: hidden; }
.cart-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-nm { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.cart-nm i, .toast > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cart-mt { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--muted); margin-top: 4px; }
.stepper { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid #333; }
.stepper button { width: 40px; height: 40px; background: none; border: 0; color: var(--text); font-size: 18px; cursor: pointer; }
.stepper button:hover:not(:disabled) { background: #1A1A1A; } .stepper button:disabled { color: #444; cursor: default; }
.stepper output { min-width: 28px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.cart-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cart-sum b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 20px; white-space: nowrap; }
.cart-sum span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cart-rm { margin-top: auto; background: none; border: 0; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; cursor: pointer; padding: 8px 0 4px; }
.cart-rm:hover { color: var(--text); }
.cart-tip { margin-top: 16px; padding: 14px 16px; background: #141414; border-left: 2px solid #333; }
.cart-tip.warn { border-left-color: var(--d3); }
/* the title says it all — which jar and what is offered (13.10: a small grey "ПОЛНЫЙ КУРС" didn't) */
.cart-tip b { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--text); }
.cart-tip p { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 6px; }
.cart-tip .link { display: inline-block; margin-top: 10px; font-size: 11px; }
.cart-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cart-quick button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: none; border: 1px solid #333; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; cursor: pointer; }
.cart-quick button:hover { border-color: var(--text); }
.cart-quick i { width: 7px; height: 7px; border-radius: 50%; }
/* promo code: hidden behind a quiet "have a code?" so the field does not send people off hunting for one */
.promo-open { background: none; border: 0; padding: 4px 0; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #444; transition: color .2s ease; }
.promo-open:hover { color: var(--text); }
.promo-f { display: flex; }
.promo-f input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; background: #141414; border: 1px solid #333; border-right: 0; color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.promo-f input::placeholder { text-transform: none; letter-spacing: 0; font-family: 'Manrope', sans-serif; color: #66625C; }
.promo-f input:focus { outline: none; border-color: var(--text); }
.promo-f button { min-height: 44px; padding: 0 16px; background: var(--text); color: #0A0A0A; border: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; cursor: pointer; }
.promo-f button:disabled { opacity: .6; cursor: progress; }
.promo-e { font-size: 13px; color: #FF7A6B; margin-top: 8px; }
.promo-on { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 0 0 14px; border: 1px solid #3B4410; background: #12140A;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--body); }
.promo-on b { color: var(--accent); font-weight: 500; }
.promo-on button { min-height: 42px; padding: 0 14px; background: none; border: 0; color: var(--muted); font: inherit; letter-spacing: .1em; cursor: pointer; }
.promo-on button:hover { color: var(--text); }
.cart-rows div { display: flex; justify-content: space-between; font-size: 14px; color: var(--body); padding: 3px 0; }
.cart-rows .disc span:last-child, .co-money .disc dd, .co-lines .disc b { color: var(--accent); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; }
.cart-total span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.cart-total b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 30px; }
.cart-note { font-size: 13px; color: var(--muted); margin-top: -6px; }
.cart-help { align-self: center; font-size: 11px; margin-top: 4px; }
/* the empty cart (15.10): a heading, the base set in one tap, then every jar as a row with its use, price and a "+" */
.ce-h { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.15; text-transform: uppercase; color: var(--text); }
.ce-sub { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 6px; }
.ce-set { margin-top: 18px; padding: 16px; background: #141414; border: 1px solid #222; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; }
.ce-jars { display: flex; }
.ce-jars img { width: 40px; height: 50px; object-fit: contain; }
.ce-jars img + img { margin-left: -12px; }
.ce-set-t b { display: block; font-weight: 600; font-size: 15px; color: var(--text); }
.ce-set-t span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.ce-set .btn { grid-column: 1 / -1; }
.ce-list { list-style: none; margin-top: 10px; }
.ce-list li { display: grid; grid-template-columns: 44px 1fr auto 40px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #1E1E1E; }
.ce-img { width: 44px; height: 54px; display: grid; place-items: center; }
.ce-img img { width: 100%; height: 100%; object-fit: contain; }
.ce-txt { min-width: 0; }
.ce-head { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ce-p { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 17px; white-space: nowrap; }
.ce-add { width: 40px; height: 40px; background: none; border: 1px solid #333; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.ce-add:hover { border-color: var(--oc); color: var(--oc); }
.ce-ask { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 18px; background: #161616; border: 1px solid #2A2A2A; box-shadow: 0 18px 50px rgba(0,0,0,.5); width: max-content; max-width: calc(100% - 32px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.23,1,.32,1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast div { display: flex; flex-direction: column; gap: 2px; }
.toast b { font-weight: 600; font-size: 14px; }
.toast span { font-size: 12px; color: var(--muted); }
.toast button { margin-left: 8px; min-height: 40px; padding: 0 14px; background: var(--text); color: #0A0A0A; border: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cart[open], .cart-btn.shown, .cart-btn.bump .cart-badge { animation: none; } }

@media (max-width: 640px) {
  /* phones: the cart is a sheet from the bottom, where the thumb is */
  .cart { margin: auto 0 0; width: 100%; height: auto; max-height: 88dvh; border-left: 0; border-top: 1px solid #262626; }
  .cart[open] { animation: slideU .45s cubic-bezier(.23,1,.32,1); }
  .cart-hd { padding: 12px 12px 12px 20px; }
  .cart-body { padding: 14px 20px; }
  .cart-ft { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
  .cart-lines li { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .cart-img { width: 52px; height: 64px; }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .nav-btn { padding: 0 12px; }
}
@keyframes slideU { from { transform: translateY(60px); opacity: 0; } }

/* ================= the channel on the home page ================= */
.tg-home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 120px); row-gap: 40px; align-items: center; max-width: 1320px; }
.tg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2AABEE; margin-right: 12px; vertical-align: 1px; box-shadow: 0 0 12px rgba(42,171,238,.7); }
.tg-home .lead { margin-top: 22px; }
.tg-home-off { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 14px 18px; border: 1px solid rgba(212,255,0,.3); background: rgba(212,255,0,.04); max-width: 30em; }
.tg-home-off b { flex: none; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 40px; line-height: 1; color: var(--accent); }
.tg-home-off span { font-size: 15px; line-height: 1.45; color: var(--body); }
.tg-home-a { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 28px; }
/* the notifications: the iOS lock-screen look, the newest on top; they tilt a little, as if in a hand */
.tg-home-notes { display: grid; gap: 10px; perspective: 1200px; }
.hn { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; padding: 12px 14px 13px; border-radius: 22px;
  background: rgba(38,38,42,.72); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.35); color: #F4F2EE; font-family: 'Manrope', sans-serif;
  transition: transform .35s cubic-bezier(.23,1,.32,1), background-color .2s ease, box-shadow .3s ease; }
.hn:nth-child(2) { margin-left: 4%; } .hn:nth-child(3) { margin-left: 8%; }
.hn:hover { transform: translateY(-3px); background: rgba(48,48,54,.8); box-shadow: inset 0 0 0 1px rgba(212,255,0,.4), 0 24px 44px rgba(0,0,0,.4); }
.hn-ava { width: 40px; height: 40px; border-radius: 50%; }
.hn-b { display: block; min-width: 0; }
.hn-hd { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.hn-hd b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-hd time { flex: none; font-size: 12.5px; color: rgba(244,242,238,.55); }
.hn-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 1.35; color: rgba(244,242,238,.88); }
.hn-t b { font-weight: 700; }
.hn-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; margin-top: 18px; }
.tg-home-more { justify-self: end; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--muted); padding: 8px 0; transition: color .2s ease; }
.tg-home-more:hover { color: var(--accent); }
@media (max-width: 900px) {
  .tg-home { grid-template-columns: minmax(0, 1fr); }
  .hn:nth-child(2), .hn:nth-child(3) { margin-left: 0; }
  .tg-home-off b { font-size: 32px; }
  .tg-home-a .btn { width: 100%; }
}

/* the cart: where the code word is, under "Есть промокод?" */
.promo-tg { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); transition: color .2s ease; }
.promo-tg b { color: var(--accent); font-weight: 600; }
.promo-tg:hover { color: var(--text); }

/* cookie notice (js/cookie.js): bottom-right — bottom-left holds the home page's chapter rail, the middle the toasts */
.cookie-bar { position: fixed; z-index: 31; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); width: min(440px, calc(100vw - 32px)); padding: 18px 20px; background: #141414; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.cookie-bar p { font-size: 13px; line-height: 1.55; color: var(--body); }
.cookie-bar a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.cookie-bar-a { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cookie-bar .btn { min-height: 42px; padding: 0 16px; font-size: 11px; }