/* Termina landing — page styles on top of design/tokens/*.css (tokens are law).

   The page is one working day: it opens at 8.00 in the hero and closes at 19.00 at the
   contact. The clock in the header and the rule under it are driven by scroll position,
   so scrolling the page *is* moving through the day. Everything else follows from that:
   the pain section is a call log with real times, the close is the moment you lock up. */

/* ---------- base ---------- */
:root {
  /* semantic stacking order — sticky chrome only, nothing else layers on this page */
  --z-sticky: 100;
  --z-header: 200;

  /* Display scale — this page is a poster. Boldonse sets narrow (~0.44em per character), so it
     can take the full ceiling where a wider face had to be pulled back.
     The hero ceiling is set by the headline's own column, not by taste: above ~1270px the title
     column stops growing at 775px, and at 96px "Odslej ga imaš." measured 808px — so the two
     authored lines broke into four, which is what put the j of "Odslej" through the caron of
     "imaš". 88px fits both lines with room for a rasteriser that rounds the other way. */
  --fs-hero: clamp(30px, 6.6vw, 88px);
  --fs-h2: clamp(25px, 4.6vw, 56px);
  --fs-mega: clamp(23px, 4.2vw, 52px);

  --header-h: 66px;
}
/* No scroll-behavior here on purpose: Lenis owns anchor scrolling, and js/site.js falls back to
   scrollIntoView when it is absent. Declaring it would fight Lenis for the same scroll. */
*, *::before, *::after { box-sizing: border-box; }
html:not(.js) { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
body { overflow-x: clip; }
/* grid children default to min-width:auto and can force page-wide overflow on narrow screens */
.hero-inner > *, .hero-foot > *, .steps > *, .features > *, .live-grid > *, .proof > * { min-width: 0; }
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

.section { padding-block: clamp(72px, 11vw, 140px); }
.section--ink { background: var(--surface-inverse); color: var(--text-on-inverse); }
/* sticky header would otherwise sit on top of the anchored heading */
section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- type helpers ---------- */
.hero-title {
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
  /* keeps the descenders of "Odslej ga" off the floor rule the mascot stands on */
  padding-bottom: 0.06em;
}
.h2 {
  font-size: var(--fs-h2);
  /* two-line display statements with carons on one line and descenders on the next — 1.14 put
     the j of "rezervacij" inside the ž of "deleža". Measured floor for these strings is 1.30
     (at 375, where "Ne jemljemo deleža" wraps with its j directly over the d of "od tvojih"). */
  line-height: 1.32;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lead { font-size: clamp(17px, 2vw, 21px); max-width: 32em; text-wrap: pretty; }

/* Scale variance. Eight of the nine display headings used to be the same size on the same left
   edge, which reads as a template however well each one is set. Two sections now take the hero
   size, and two drop to a size the mono eyebrow above them can out-shout. */
.live .h2 { font-size: var(--fs-hero); line-height: var(--leading-display); letter-spacing: -0.035em; }
.own .h2 { font-size: var(--fs-hero); letter-spacing: -0.035em; }
.section--features .h2, .faq .h2 { font-size: clamp(21px, 2.6vw, 32px); }
/* the eyebrow carries the weight where the heading gives it up */
.eyebrow {
  margin: 0 0 var(--space-4); font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--red);
}

/* the day-marker: mono time over a tiny uppercase label. Used exactly twice — at the
   moment the shop opens and the moment it closes. Not a per-section eyebrow. */
.stamp { margin: 0; display: grid; gap: 2px; justify-items: start; }
.stamp .num { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: clamp(22px, 3vw, 32px); }
.stamp span + span {
  font-size: var(--text-label); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}

/* ---------- the brand shape ---------- */
.ast-sep { width: 0.62em; height: 0.62em; flex: none; margin-inline: 0.5em; vertical-align: -0.03em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h-lg); padding: 12px 28px;
  border-radius: var(--radius-pill); border: var(--border-w) solid var(--black);
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-lg);
  text-decoration: none; box-shadow: var(--shadow-md); cursor: pointer; white-space: nowrap;
  /* magnetism rides on `translate` so it composes with the hover/press `transform` rather than
     overwriting it — the press physics is part of the design system and has to survive */
  translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--black); }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn--sm { min-height: var(--control-h-md); padding: 8px 22px; font-size: var(--text-md); }
.btn--red { background: var(--red); color: var(--cream); }
.btn--red:hover { color: var(--cream); }
.btn--red:active { background: var(--red-press); }
.btn--cream { background: var(--cream-bright); color: var(--black); }
.btn--cream:hover { color: var(--black); }
.btn--ghost-cream {
  background: transparent; color: var(--cream);
  border-color: var(--cream); box-shadow: 2px 2px 0 var(--cream);
}
.btn--ghost-cream:hover { color: var(--cream); box-shadow: 4px 4px 0 var(--cream); }
.btn--ghost-cream:active { box-shadow: 0 0 0 var(--cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* on dark and red surfaces an ink focus ring disappears — switch it to cream */
.section--ink .btn:focus-visible, .hero .btn:focus-visible,
.close .btn:focus-visible, .own .btn:focus-visible { outline-color: var(--cream); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--black); color: var(--cream);
  padding-block: var(--space-3);
}
.site-header .container { display: flex; align-items: center; gap: var(--space-5); }
.site-header .wordmark { height: 28px; width: auto; }
/* an ink border and ink shadow are invisible on the ink header — swap both to cream so the
   button keeps the system's frame and its press physics stay readable */
.site-header .btn { margin-left: auto; border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); }
.site-header .btn:hover { box-shadow: 5px 5px 0 var(--cream); }
.site-header .btn:active { box-shadow: 0 0 0 var(--cream); }
/* Section links. Same breakpoint as the ruler, for the same reason: below 900px the bar only
   has room for the wordmark and the CTA. ponytail: three <a>s in a <nav> — no new component,
   no overlay, no drawer, and nothing to open or close. */
.site-nav { display: none; margin-left: auto; gap: var(--space-5); }
.site-nav a {
  /* 44px of hit area, which is exactly what the CTA beside it already stands at, so the bar
     does not grow — a new link with a 21px hit box would be new debt for Pass 5.1 */
  display: flex; align-items: center; min-height: var(--control-h-md);
  color: var(--cream); text-decoration: none; white-space: nowrap;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
/* underline only: the trades strip turns red on hover, but red on ink is 2.6:1 and the page
   has zero contrast failures today */
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  /* nav takes the slack, so the CTA sits against it rather than a lone element floating right */
  .site-header .site-nav + .btn { margin-left: 0; }
}
.clock {
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-sm); color: var(--cream); flex: none;
  counter-reset: hr var(--hr);
}
.clock::after { content: counter(hr) ".00"; }

/* The visitor's own clock, beside the page's. Empty until JS fills it, and an empty one takes no
   room — the header must not reserve space for something that may never arrive. */
.now {
  flex: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--cream-deep);
}
.now:empty { display: none; }
/* the toggle is the only thing standing between this page and an autoplaying noise, so it is a
   real button with a real pressed state and it ships in the off position */
.snd {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: transparent; color: var(--cream);
  border: var(--border-w) solid var(--cream); padding: 4px 9px; cursor: pointer;
  font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.snd[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.snd:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
/* The header bar is a fixed budget and the ruler is the one thing on it that must not shrink.
   With the section nav, the page clock, this readout and the toggle all claiming room, the ruler
   collapsed to 77px at 900px — 7px an hour, which reads as a smear rather than as a day. So the
   two newest passengers give their space back first: below 1200px the visitor's clock goes
   entirely, and the toggle keeps its glyph but loses its word (the sr-only label carries it). */
@media (max-width: 1199px) {
  .now { display: none; }
  .snd-word { display: none; }
  .snd { padding-inline: 7px; }
}

/* The hour ruler: eleven equal hours from 8.00 to 19.00, cream on ink, filling red as the day
   goes. The single most identifying object on the page, so it lives in the persistent header. */
.railset { display: none; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; max-width: 420px; }
.rail-end {
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-xs); color: var(--cream); flex: none;
}
.rail {
  position: relative; flex: 1; min-width: 0; height: 22px;
  border: var(--border-w) solid var(--cream);
}
/* one hour wide at rest, so the ruler reads as 8.00-and-counting rather than an empty row */
.rail-fill {
  position: absolute; inset: 0; background: var(--red);
  transform-origin: 0 50%; transform: scaleX(0.0909);
}
.rail-ticks { position: relative; display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.rail-ticks li { flex: 1; border-left: var(--border-w) solid var(--cream); }
.rail-ticks li:first-child { border-left: 0; }
@media (min-width: 900px) { .railset { display: flex; } }

/* Below 900px the ruler cannot hold 22px and two end caps beside a wordmark and a button — but
   it is the concept, so it does not get to disappear. It survives as a 3px hairline bonded to
   the bottom edge of the ink header: full bleed, no end caps, same red fill, same scroll
   timeline. The clock stays at every width, because a phone visitor who never sees either one
   never learns the page is a day. */
@media (max-width: 899px) {
  .site-header .container { gap: var(--space-3); }
  /* absolute against the sticky header, not the container — this has to run edge to edge */
  .railset {
    display: block; position: absolute; inset: auto 0 0 0;
    height: 3px; max-width: none; gap: 0;
  }
  .rail-end { display: none; }
  .rail { height: 3px; border: 0; background: var(--cream-deep); }
  /* at 3px a tick is a dash, and below ~600px each hour is under 60px wide — the marks stop
     reading as hours and start reading as noise */
  .rail-ticks { display: none; }
  .clock { margin-left: auto; font-size: var(--text-xs); }
  .site-header .btn { margin-left: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .rail-ticks { display: flex; }
  .rail-ticks li { border-left-color: var(--cream-deep); }
}

/* ---------- 8.00 — hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--surface-accent); color: var(--text-on-accent);
  padding-block: clamp(48px, 8vw, 88px) clamp(40px, 5vw, 64px);
}
/* depth without a gradient: the same red one step darker, as a giant cropped brand shape */
.hero-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(320px, 62vw, 760px); aspect-ratio: 1;
  top: -18%; right: -14%; color: var(--red-press);
}

/* The split headline: one masked row per authored line, characters ride up out of it. The mask
   has to reach below the baseline or it shears the descenders off "Odslej ga" — the padding
   opens it up and the negative margin gives the space straight back to the layout.
   The word wrapper is not optional: inline-block characters on their own let the browser break
   a line between any two letters, which tears words in half ("Nimaš t / ermina?"). */
/* The mask has to open at BOTH ends: the bottom for the descenders of "Odslej ga", the top for
   the carons of Š and š, which at 1.28 leading stand above the line box. Each padding is given
   straight back to the layout as a negative margin, so opening the mask moves nothing. */
.split-line {
  display: block; overflow: hidden;
  padding-block: 0.16em 0.24em; margin-block: -0.16em -0.24em;
}
.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; }

/* row-gap 0 on purpose: the mascot has to stand *on* the floor rule, not float above it */
.hero-inner { position: relative; z-index: 1; display: grid; row-gap: 0; }
.hero-stage { position: relative; justify-self: center; width: min(100%, 340px); margin-top: var(--space-6); }
.bubble {
  position: relative; background: var(--cream-bright); color: var(--black);
  border: var(--border-w) solid var(--black); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 12px 18px;
  font-weight: var(--weight-medium); font-size: var(--text-md);
  rotate: -2deg; margin: 0 0 var(--space-5); max-width: 100%;
}
.bubble::after {
  /* the tail has to point at the mascot's head, which sits centred under the bubble */
  content: ""; position: absolute; left: 46%; bottom: -9px; width: 16px; height: 16px;
  background: var(--cream-bright); border-right: var(--border-w) solid var(--black);
  border-bottom: var(--border-w) solid var(--black); rotate: 45deg;
}
/* <picture> is only a format switch — the <img> stays the grid/flow item, so `justify-self`,
   `margin-inline: auto` and the absolute close pose all keep addressing the image itself. */
picture { display: contents; }
.mascot { width: clamp(150px, 23vw, 272px); margin-inline: auto; }
/* the floor the mascot stands on — and the line the day is measured against */
.hero-floor { height: 0; border-top: var(--border-w-heavy) solid var(--cream); }
.hero-foot { display: grid; gap: var(--space-6); margin-top: var(--space-6); justify-items: start; }
.hero-inner > .stamp { margin-bottom: var(--space-5); }

/* ---------- pain — the day as a call log ---------- */
.log { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; border-top: var(--border-w) solid var(--black); }
.log-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
  align-items: baseline; padding-block: var(--space-5);
  border-bottom: var(--border-w) solid var(--black);
}
.log-t { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: clamp(18px, 2.6vw, 28px); }
.log-w { font-size: clamp(16px, 1.9vw, 21px); font-weight: var(--weight-medium); text-wrap: pretty; }
.log-s {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}
.log-tail {
  margin: var(--space-6) 0 0; color: var(--red);
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(22px, 3.4vw, 40px); letter-spacing: var(--tracking-display);
}

/* ---------- the notebook — the thing this page is actually competing with ----------
   A cream page on ink, tipped off square, with the day written into it by hand: ruled lines in
   cream-deep, three entries scratched out, a phone number nobody will ever read again, and one
   corner turned. No asset, no gradient — the fold is two clip-paths, the ruling is a border. */
.note { padding-block: clamp(64px, 9vw, 112px); }
.pad { margin: clamp(40px, 6vw, 72px) 0 0; display: flex; justify-content: center; }
.pad-page {
  position: relative; width: min(100%, 520px);
  background: var(--cream-bright); color: var(--black);
  box-shadow: var(--shadow-red); rotate: -1.2deg;
  padding: var(--space-6) var(--space-6) var(--space-8);
  /* the sheet with its top-right corner missing… */
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}
/* …and the flap that came off it, lying where it was folded down */
.pad-page::after {
  content: ""; position: absolute; top: 0; right: 0; width: 44px; height: 44px;
  background: var(--cream-deep); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.pad-date {
  margin: 0 0 var(--space-4); font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--muted);
}
.pad-lines { list-style: none; margin: 0; padding: 0; }
/* block, not flex: line-through has to run across the time and the name as one stroke, and a
   flex container breaks it into two strikes with a gap */
.pad-lines li {
  padding-block: 9px; border-bottom: var(--border-w) solid var(--cream-deep);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5;
}
.pad-lines .num { display: inline-block; width: 4.6em; font-weight: var(--weight-bold); }
.pad-lines .is-struck { color: var(--muted); text-decoration: line-through; }
/* the hour nobody got round to filling in */
.pad-lines li:last-child { min-height: 2.6em; }
.pad-margin {
  position: absolute; right: var(--space-5); bottom: var(--space-4); rotate: -7deg;
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-xs); color: var(--red);
}
.note-tail { margin: clamp(32px, 5vw, 56px) 0 0; font-size: var(--text-lg); max-width: 34em; text-wrap: pretty; }

/* ---------- the arithmetic ---------- */
/* Red, not ink: the number has to be the loudest thing on the page, and red type on ink
   is 2.6:1 — below AA even at display size. Cream on red is 4.9:1 and hits harder anyway. */
/* Padding carries meaning on this page rather than being one constant: 88px above a section
   that continues the previous thought (the arithmetic is still the call log talking), 140px for
   a new subject, 200px above the two red sections that are the page's loudest statements. */
.calc {
  background: var(--surface-accent); color: var(--text-on-accent);
  padding-block: clamp(48px, 7vw, 88px) clamp(64px, 9vw, 112px);
}
.calc-inner { display: grid; gap: var(--space-5); justify-items: start; }
.calc-line { font-family: var(--font-mono); font-size: clamp(15px, 1.8vw, 19px); margin: 0; line-height: 1.8; }
.calc-result {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-metric-xl); line-height: 0.9; letter-spacing: var(--tracking-metric);
}
.roll-k { counter-reset: k var(--k); }
.roll-k::after { content: counter(k); }
.roll-n { counter-reset: n var(--n); }
.roll-n::after { content: counter(n); }
.calc-note { margin: 0; font-size: var(--text-lg); max-width: 24em; }

/* ---------- marquee — the day, running as a ticker ----------
   Mono rather than display: this band is a log now, and a log is set in the face that sets
   every other time on the page. */
.marquee {
  overflow: hidden; background: var(--cream-bright); color: var(--black);
  border-block: var(--border-w-heavy) solid var(--black);
  padding-block: var(--space-4);
}
.marquee-track { display: flex; width: max-content; }
/* block, not flex: the strip is a sentence now, and flex layout drops the whitespace either
   side of the inline <em> — "klic —zgrešen" */
.marquee-track span {
  display: block; white-space: nowrap;
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0;
}
/* the one word in the band the whole page is about */
.marquee-track em { font-style: normal; color: var(--red); }
.marquee .ast-sep { color: var(--red); }

/* ---------- how — three columns divided by rules, no cards ---------- */
.steps {
  list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0;
  display: grid; gap: 0; border-top: var(--border-w) solid var(--black);
}
.step { padding-block: var(--space-6); border-bottom: var(--border-w) solid var(--black); display: grid; gap: var(--space-3); }
.step-num {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: var(--tracking-metric);
  color: var(--muted);
}
/* the one step that is actually the owner's work gets the red */
.step--mine .step-num { color: var(--red); }
/* the one h3 that wraps into a p-over-t column at 768 ("Sistem poskrbi / za ostalo") — that pair
   still touched at 1.5, and the shared heading leading is not going to 1.55 for one card */
.step h3 { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.55; text-wrap: balance; }
.step p { margin: 0; max-width: 34em; }

/* ---------- product proof (the two screens) ----------
   Tighter than the standard section: the pin already adds its own scroll length below the grid,
   and poster padding on top of that is what put a full viewport of empty ink under the cards. */
.live { padding-block: clamp(64px, 9vw, 112px) clamp(48px, 7vw, 88px); }
.live-lead { font-size: clamp(18px, 2.2vw, 24px); font-weight: var(--weight-medium); margin-top: var(--space-5); max-width: 34em; text-wrap: pretty; }
.live-grid { display: grid; gap: var(--space-8); margin-top: clamp(40px, 6vw, 72px); }

/* on ink, cards take a cream border and a red offset — ink borders would vanish */
.mock {
  margin: 0; background: var(--surface-card); color: var(--black);
  border: var(--border-w-heavy) solid var(--cream);
  box-shadow: 10px 10px 0 var(--red);
}
.mock-bar {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--black); color: var(--cream);
  padding: 12px var(--space-5);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.mock-glyph { width: 10px; height: 10px; background: var(--red); flex: none; }
.mock-body { padding: var(--space-5); display: grid; gap: var(--space-5); }
.mock-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 22px; letter-spacing: var(--tracking-display); margin: 0; }
.mock-meta { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.mock-list { list-style: none; margin: 0; padding: 0; }
.mock-list li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: 12px; border-top: var(--border-w) solid var(--border-soft);
  font-weight: var(--weight-medium);
}
.mock-list li:first-child { border-top: 0; padding-top: 0; }
.mock-list .num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.mock-day { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); }
.slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slot {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-bold);
  border: var(--border-w) solid var(--black); padding: 7px 14px;
}
/* The one chip that is a real control. Declared BEFORE .slot--on on purpose: the two carry the
   same specificity, so when the visitor books this hour the later rule is the one that paints it
   red, exactly as it paints the chip that starts out chosen. */
.slot--btn {
  background: transparent; cursor: pointer;
  line-height: inherit; text-align: inherit;
  /* The rule the chips now follow: red outline = you can take this hour, red fill = you have.
     Red on cream-bright is 5.39:1, so the affordance costs no contrast. The offset shadow is
     this system's one signal for "this can be pressed" and gives it the press physics. */
  color: var(--red); border-color: var(--red);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.slot--btn:hover { background: var(--black); color: var(--cream-bright); }
.slot--btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--black); }
.slot--btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.slot--on { background: var(--red); color: var(--cream); box-shadow: var(--shadow-sm); }
.slot--btn.slot--on:hover { background: var(--red-press); color: var(--cream); }
.slot--off { color: var(--text-muted); border-color: var(--border-soft); text-decoration: line-through; }
.mock-cta {
  margin: 0; background: var(--black); color: var(--cream); text-align: center;
  padding: 16px; font-weight: var(--weight-bold); font-size: var(--text-lg);
}
.day { list-style: none; margin: 0; padding: 0; }
.day-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center;
  padding: 16px var(--space-5); border-top: var(--border-w) solid var(--border-soft);
}
.day-row:first-child { border-top: 0; }
.day-time { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.day-who { font-weight: var(--weight-medium); }
.day-row--free { color: var(--text-muted); }
.day-row--free .day-who { font-weight: var(--weight-body); font-style: italic; }
/* the hour the visitor is actually reading this at, marked on the owner's board — set by JS from
   the local clock, and only while the shop is open */
.day-row.is-now { box-shadow: inset 4px 0 0 var(--red); }
.day-row.is-now .day-time { color: var(--red); }
.tag {
  transform-origin: 100% 50%;
  background: var(--red); color: var(--cream); padding: 4px 9px;
  font-size: var(--text-label); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.mock-foot {
  margin: 0; padding: 14px var(--space-5); border-top: var(--border-w-heavy) solid var(--black);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-muted);
}
.mock-foot .num { color: var(--black); }

/* the section closes on the claim it has just demonstrated, in the same mono as the times */
.live-tally {
  margin: clamp(32px, 5vw, 56px) 0 0;
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: clamp(13px, 1.5vw, 17px); color: var(--cream);
  border-top: var(--border-w) solid var(--cream); padding-top: var(--space-5);
}

/* ---------- features — the six things, hung off the day ----------
   Not a 2x3 text grid: one vertical rule is the 8-to-19 day, each feature is tied to the hour it
   happens at, and the vertical gap between two features is the gap between their hours. The two
   that happen after closing sit below the rule, outside the day, on their own. */
.features {
  list-style: none; margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0 0 0 var(--space-6);
  border-left: var(--border-w) solid var(--black);
  display: grid;
}
.feature {
  --pt: 0px;
  position: relative; display: grid; gap: var(--space-2);
  padding-block: var(--pt) var(--space-6);
}
/* The tick that pins the feature to the hour rule. It has to clear the item's own top padding,
   or every hour after the first marks the rule where the gap starts rather than where the hour
   is — hence --pt rather than a plain padding-top. */
.feature::before {
  content: ""; position: absolute; top: calc(var(--pt) + 0.5em);
  left: calc((var(--space-6) + var(--border-w)) * -1); width: 18px; height: var(--border-w);
  background: var(--red);
}
/* hour-proportional rhythm: 8.00 -> 12.00 is four hours and gets four hours of air */
.features > .feature + .feature { --pt: var(--space-6); }
.features:not(.features--after) > .feature:nth-child(2) { --pt: 40px; }
.features:not(.features--after) > .feature:nth-child(3) { --pt: 50px; }
.features:not(.features--after) > .feature:nth-child(4) { --pt: 25px; }
.feature-h {
  margin: 0; font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-sm); color: var(--red);
}
.feature-note {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted);
}
.feature h3 { font-size: clamp(20px, 2.4vw, 26px); }
.feature p { margin: 0; max-width: 42em; text-wrap: pretty; }
/* below the rule: the shop is shut, so these two lose the day's column entirely */
.features--after {
  border-left: 0; border-top: var(--border-w) solid var(--black);
  padding-left: 0; padding-top: var(--space-6);
}
.features--after .feature::before { display: none; }
.features--after .feature:last-child { padding-bottom: 0; }

/* the one deliberately tilted object on the page — it is the one thing that is not shipped yet */
.soon-card {
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border: var(--border-w-heavy) solid var(--black); box-shadow: var(--shadow-red);
  padding: var(--space-6); rotate: -1deg;
  display: grid; gap: var(--space-3); justify-items: start;
}
.soon-badge {
  background: var(--red); color: var(--cream);
  padding: 5px 12px; font-size: var(--text-label); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.soon-card h3 { font-size: clamp(23px, 3vw, 34px); }
.soon-card p { margin: 0; max-width: 36em; font-size: var(--text-lg); text-wrap: pretty; }

/* ---------- ownership / proof ---------- */
/* the two red sections are the page's loudest statements and take the widest air */
.own {
  position: relative; overflow: hidden;
  background: var(--surface-accent); color: var(--text-on-accent);
  padding-block: clamp(88px, 14vw, 200px) clamp(72px, 11vw, 140px);
}
.own-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(300px, 50vw, 620px); aspect-ratio: 1;
  bottom: -22%; left: -12%; color: var(--red-press);
}
.own .container { position: relative; z-index: 1; }
/* The one heading on the page whose two lines stack a deep descender directly over a tall
   ascender in the same column — the j of "jemljemo" over the d of "od", the lj of "deleža" over
   the j of "tvojih". Everything else clears at 1.32; these strings need 1.55 to stop touching,
   and one looser heading beats loosening all six. */
.own .h2 { max-width: 11em; line-height: 1.55; }
.own-lead { font-size: clamp(18px, 2.2vw, 24px); font-weight: var(--weight-medium); max-width: 28em; margin-top: var(--space-5); text-wrap: pretty; }
.proof { margin-top: clamp(48px, 7vw, 88px); display: grid; gap: var(--space-6); border-top: var(--border-w-heavy) solid var(--cream); padding-top: var(--space-6); }
/* what the two numbers are evidence OF — stated before them, not left to the reader */
.proof-label {
  margin: 0; font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.proof-num { margin: 0; }
.proof-num strong {
  display: block; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-metric-xl); line-height: 0.9; letter-spacing: var(--tracking-metric);
}
/* the zero is the claim; 152 is only the denominator that makes it mean something */
.proof-num--lead strong { font-size: clamp(72px, 9vw, 132px); }
/* signature: tiny uppercase letterspaced label beneath the oversized numeral */
.proof-num span {
  display: block; margin-top: var(--space-3); font-size: var(--text-label);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
/* provenance, not argument: mono, small, under its own rule */
.proof-caption {
  margin: 0; max-width: 46em; text-wrap: pretty;
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7;
  border-top: var(--border-w) solid var(--cream); padding-top: var(--space-4);
}

/* ---------- who — six trades, six versions of the same eleven hours ----------
   This used to pin the section and scrub the six names sideways: 1100px of scroll for six words,
   the worst information rate on the page. The names stay; what changed is that each one now
   carries the day's ruler with its own shape of booked hours, so the section restates the spine
   instead of merely passing time. */
.trades {
  list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0;
  border-top: var(--border-w) solid var(--black);
}
.trade {
  display: grid; gap: var(--space-3);
  padding-block: clamp(14px, 2vw, 22px);
  border-bottom: var(--border-w) solid var(--black);
}
.trade-name {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(19px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.03em;
}
/* eleven equal hours, 8.00 to 19.00 — the header's ruler laid on its side, six times over. The
   repeating stripe is the hour divisions: hard stops, one colour, no gradient. */
.trade-day {
  display: grid; grid-template-columns: repeat(11, 1fr);
  height: 20px; align-self: center;
  border: var(--border-w) solid var(--black);
  background-image: repeating-linear-gradient(
    90deg, var(--cream-deep) 0 var(--border-w), transparent var(--border-w) calc(100% / 11));
}
.trade-day i {
  grid-row: 1; grid-column: calc(var(--s) + 1) / calc(var(--e) + 1);
  background: var(--black);
  transition: background-color var(--dur-fast) var(--ease-snap);
}
.trade:hover .trade-day i { background: var(--red); }
@media (min-width: 760px) {
  /* wide enough that "Lokali z rezervacijami" holds one line at the display size it is set in */
  .trade { grid-template-columns: clamp(190px, 26vw, 360px) 1fr; gap: var(--space-7); align-items: center; }
}
.who-tail { margin-top: var(--space-6); font-size: var(--text-lg); max-width: 32em; }

/* hand-drawn underline doodle on a key word */
.doodle { position: relative; white-space: nowrap; }
.doodle svg {
  position: absolute; left: -2%; right: -2%; width: 104%; height: 0.34em;
  bottom: -0.28em; overflow: visible;
}
.doodle path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; }

/* ---------- faq ---------- */
.faq { padding-block: clamp(56px, 8vw, 88px) clamp(72px, 11vw, 140px); }
.qa-list { margin-top: clamp(40px, 6vw, 72px); border-bottom: var(--border-w) solid var(--black); }
.qa { border-top: var(--border-w) solid var(--black); }
.qa summary {
  display: flex; align-items: center; gap: var(--space-5); justify-content: space-between;
  padding-block: var(--space-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(19px, 2.2vw, 26px); letter-spacing: var(--tracking-display);
  /* display face on inherited body leading: at 375 the j of "moj" landed on the t of "termini" */
  line-height: 1.6;
}
.qa summary::-webkit-details-marker { display: none; }
/* The marker is one hour off the ruler: an empty tick when the question is shut, the same tick
   filled red when it is open. A plus belongs to every accordion ever shipped; this one belongs
   to this page. */
.qa summary::after {
  content: ""; flex: none; width: 24px; height: 24px;
  border: var(--border-w) solid var(--black); background: transparent;
  transition: background-color var(--dur-fast) var(--ease-snap);
}
.qa[open] summary::after { background: var(--red); }
.qa summary:hover { color: var(--red); }
.qa summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.qa p { margin: 0 0 var(--space-5); max-width: 58ch; font-size: var(--text-lg); text-wrap: pretty; }
.faq-tail { margin-top: var(--space-6); font-size: var(--text-lg); }

/* ---------- 19.00 — close ---------- */
/* 112px rather than the 200px the other red section takes: the receipt below adds a block of its
   own where there used to be air, and the two together would push the button off a laptop screen. */
.close {
  position: relative; overflow: hidden;
  background: var(--surface-accent); color: var(--text-on-accent);
  padding-block: clamp(64px, 9vw, 112px) 0;
}
.close-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(340px, 58vw, 700px); aspect-ratio: 1;
  top: -16%; right: -18%; color: var(--red-press);
}
.close-inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); justify-items: start; }
.close-title { max-width: 15em; }
.close-lead { margin: 0; font-size: clamp(17px, 2vw, 21px); max-width: 30em; text-wrap: pretty; }
/* The day, handed back at the door. Set in the mono every other time on this page is set in, so
   it reads as the log it is rather than as a feature list wearing a rule. */
.receipt-block { width: min(100%, 30em); }
.receipt { list-style: none; margin: 0; padding: 0; border-top: var(--border-w) solid var(--cream); }
.receipt li {
  display: flex; gap: var(--space-5); align-items: baseline;
  padding-block: 10px; border-bottom: var(--border-w) solid var(--cream);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.receipt .num { flex: none; width: 4.6em; font-weight: var(--weight-bold); }
.receipt-total {
  /* space-5, not space-4: the total is set at 0.9 leading, so its ink starts well above its line
     box and a standard gap puts the zero on the rule above it */
  margin: var(--space-5) 0 0; display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: clamp(14px, 1.6vw, 17px); text-wrap: pretty;
}
/* the total is a number first and a sentence second */
.receipt-total .num {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(34px, 4.4vw, 56px); line-height: 0.9; letter-spacing: var(--tracking-metric);
}
.close-mail { margin: 0; font-size: var(--text-lg); }
.close-mail a { color: var(--cream); text-decoration-color: var(--cream); }
/* the mascot closes the page the way it opened it — standing on the bottom edge */
.mascot--close { width: clamp(120px, 20vw, 210px); justify-self: end; margin: 0; }

/* ---------- footer — the day is over ---------- */
.site-footer {
  position: relative;
  background: var(--surface-inverse); color: var(--text-on-inverse);
  /* room for the fixed phone CTA so it never sits on the last line of the footer */
  padding-block: var(--space-7); padding-bottom: calc(var(--space-7) + 96px);
}
/* The header's ruler, run out to 19.00 and left there. Same eleven hours, same red, and it is
   the last thing on the document — the page literally ends where the working day does. */
.site-footer::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background-color: var(--red);
  background-image: repeating-linear-gradient(
    90deg, var(--black) 0 var(--border-w), transparent var(--border-w) calc(100% / 11));
}
.footer-close {
  margin: 0; font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: var(--text-sm); color: var(--cream); letter-spacing: var(--tracking-caps);
}
.site-footer .container { display: grid; gap: var(--space-5); justify-items: start; }
.site-footer .wordmark { height: 26px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer a { color: var(--cream); text-decoration-color: var(--cream); font-weight: var(--weight-medium); }
/* muted (#6B6456) only clears 3.3:1 on ink — footer meta stays cream for AA */
.site-footer small { color: var(--cream); font-size: var(--text-sm); }

/* ---------- sticky phone CTA ---------- */
.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  background: var(--cream-bright); border-top: var(--border-w-heavy) solid var(--black);
  padding-block: var(--space-3);
  translate: 0 110%; transition: translate var(--dur-med) var(--ease-snap);
}
.cta-bar.is-on { translate: 0 0; }
.cta-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cta-bar p { margin: 0; font-weight: var(--weight-bold); }

/* ---------- the day, standing up in the gutter ----------
   The header's ruler on its end: same eleven hours, same red fill, same scroll timeline, but
   present on every screenful instead of only when the visitor looks up. It is an ink slab with
   its own cream marks, so it survives sitting over cream, ink and red sections alike.

   Hidden by default and shown only where BOTH conditions hold: the browser can drive it from
   scroll (otherwise it is a bar frozen at 8.00, which is worse than no bar), and the viewport is
   wide enough that it lives entirely in the gutter beside the 1200px container. At 1280px that
   gutter is 64px; the slab takes 26 of them. Below that it would sit on the text. */
.daybar { display: none; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 1280px) {
    .daybar {
      position: fixed; right: 18px; top: 50%; translate: 0 -50%; z-index: var(--z-sticky);
      display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
      gap: 5px; width: 26px; height: min(58vh, 460px);
      background: var(--black); padding-block: 5px; pointer-events: none;
    }
    .daybar-end {
      font-family: var(--font-mono); font-weight: var(--weight-bold);
      font-size: 9px; line-height: 1; color: var(--cream);
    }
    .daybar-track {
      position: relative; width: 14px; height: 100%; overflow: hidden;
      border: var(--border-w) solid var(--cream);
    }
    .daybar-fill {
      position: absolute; inset: 0; background: var(--red);
      transform-origin: 50% 0; transform: scaleY(0.0909);
    }
    /* in flow and positioned, so the hour divisions paint over the fill rather than under it */
    .daybar-ticks {
      position: relative; display: grid; grid-template-rows: repeat(11, 1fr);
      height: 100%; margin: 0; padding: 0; list-style: none;
    }
    .daybar-ticks li { border-top: var(--border-w) solid var(--cream); }
    .daybar-ticks li:first-child { border-top: 0; }
    /* the four hours the page stamps by name — three times the weight of an hour division, so
       the strip reads as this day rather than as a generic eleven-step gauge */
    .daybar-mark {
      position: absolute; left: 0; right: 0; height: 3px;
      top: calc(var(--h) / 11 * 100%); translate: 0 -1px;
      background: var(--cream-deep);
    }
  }
}

/* ---------- the torn hour edge ----------
   Every section boundary on this page was a straight horizontal cut. This is the one device that
   replaces three of them, and it is the same eleven hours as everything else: the bottom edge
   steps up and down on the hour grid, so the seam is the ruler seen edge-on.

   The teeth cut into the section's own bottom padding — layout height is untouched and no
   content is clipped, because every section that carries this has at least --tooth of padding
   under its last line. Used exactly three times: hero->pain, live->features, own->who. */
.torn {
  --tooth: 24px;
  clip-path: polygon(
    0 0, 100% 0,
    100% 100%, 90.909% 100%,
    90.909% calc(100% - var(--tooth)), 81.818% calc(100% - var(--tooth)),
    81.818% 100%, 72.727% 100%,
    72.727% calc(100% - var(--tooth)), 63.636% calc(100% - var(--tooth)),
    63.636% 100%, 54.545% 100%,
    54.545% calc(100% - var(--tooth)), 45.455% calc(100% - var(--tooth)),
    45.455% 100%, 36.364% 100%,
    36.364% calc(100% - var(--tooth)), 27.273% calc(100% - var(--tooth)),
    27.273% 100%, 18.182% 100%,
    18.182% calc(100% - var(--tooth)), 9.091% calc(100% - var(--tooth)),
    9.091% 100%, 0 100%
  );
}
/* under 600px each hour is ~35px wide and a 24px tooth reads as a rendering fault rather than a
   decision — same eleven steps, a third of the amplitude */
@media (max-width: 599px) { .torn { --tooth: 8px; } }

/* ==========================================================================
   Motion. Scroll-driven, no library, no fades — the system forbids fades, so
   everything here is a hard wipe, a counter tick or a constant-speed slide.
   Gated on @supports so browsers without scroll timelines simply get the
   finished state: every animated element is fully visible by default.
   ========================================================================== */
@property --hr { syntax: "<integer>"; initial-value: 8; inherits: false; }
@property --k  { syntax: "<integer>"; initial-value: 7; inherits: false; }
@property --n  { syntax: "<integer>"; initial-value: 800; inherits: false; }

@keyframes clock-hr { to { --hr: 19; } }
@keyframes roll-k { from { --k: 0; } }
@keyframes roll-n { from { --n: 0; } }
@keyframes progress-x { from { transform: scaleX(0.0909); } to { transform: scaleX(1); } }
@keyframes progress-y { from { transform: scaleY(0.0909); } to { transform: scaleY(1); } }
/* page-load sequence — the shop opening: headline, then the floor, then whoever stands on it */
@keyframes intro-wipe { from { clip-path: inset(-0.6em 100% -0.6em -0.6em); } to { clip-path: inset(-0.6em); } }
@keyframes intro-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-drop {
  from { translate: 0 -18px; clip-path: inset(0 -1em 100% -1em); }
  to   { translate: 0 0;     clip-path: inset(-1em); }
}
/* The end state insets are NEGATIVE on purpose: inset(0) would clip to the border box and
   shave anything that legitimately hangs outside it — Archivo Black descenders under a tight
   0.95 line-height, and the hand-drawn underline under "na termine". */
@keyframes wipe-in {
  from { clip-path: inset(-0.6em 100% -0.6em -0.6em); }
  to   { clip-path: inset(-0.6em -0.6em -0.6em -0.6em); }
}
@keyframes marquee-x { to { transform: translateX(-50%); } }
@keyframes spin-slow { to { rotate: 120deg; } }
/* the customer's slot being chosen, and the row that lands because of it */
@keyframes slot-on {
  from { background-color: transparent; color: var(--black); box-shadow: 0 0 0 var(--black); }
}
@keyframes tag-pop { from { scale: 0; } }

/* Time-based, so no support gate needed: the marquee, and the one-shot opening sequence.
   Scoped to html:not(.js) — with the motion layer loaded, GSAP owns both of these and running
   them twice would double the reveal. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .marquee-track { animation: marquee-x 26s linear infinite; }

  html:not(.js) .hero-title { animation: intro-wipe 420ms var(--ease-snap) 60ms both; }
  html:not(.js) .hero-floor { transform-origin: 0 50%; animation: intro-rule 460ms var(--ease-snap) 400ms both; }
  html:not(.js) .hero-stage { animation: intro-drop 380ms var(--ease-snap) 640ms both; }
  html:not(.js) .hero-foot  { animation: intro-wipe 420ms var(--ease-snap) 780ms both; }
}

@supports (animation-timeline: scroll()) {
  /* The spine runs for EVERYONE, including reduced motion. The ruler and the clock are not
     decoration on this page — they are the concept, and gating them behind no-preference meant a
     reduced-motion visitor scrolled 8258px of a page about a working day with the clock frozen
     at 8.00. Under reduce they step hour by hour instead of sliding: a discrete readout that
     jumps 8.00 -> 9.00 -> 10.00 is a progress indicator, not vestibular motion. */
  .rail-fill {
    animation: progress-x linear both;
    animation-timeline: scroll(root);
  }
  .clock {
    animation: clock-hr linear both;
    animation-timeline: scroll(root);
  }
  /* the gutter strip is the same instrument and runs on the same terms */
  .daybar-fill {
    animation: progress-y linear both;
    animation-timeline: scroll(root);
  }
  @media (prefers-reduced-motion: reduce) {
    .rail-fill, .clock, .daybar-fill { animation-timing-function: steps(11, end); }
  }

  @media (prefers-reduced-motion: no-preference) {
    /* the brand shape turns a third of a revolution over the length of the page */
    .hero-watermark, .own-watermark, .close-watermark {
      animation: spin-slow linear both;
      animation-timeline: scroll(root);
    }
    /* headings, log rows and trade rows wipe in left-to-right as they enter — mechanical,
       not a fade. On a trade row the wipe uncovers the hour bars with the name. */
    /* Each of these carries its OWN view() timeline, so a single shared range already staggers
       them by however far apart they sit — the notebook writes itself line by line and the
       closing receipt prints row by row without a single nth-child rule. */
    .wipe, .log-row, .trade, .live-tally,
    .pad-lines li, .receipt li, .receipt-total {
      animation: wipe-in var(--ease-snap) both;
      animation-timeline: view();
      animation-range: entry 8% entry 62%;
    }
    .calc-result .roll-k { animation: roll-k linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }
    .calc-result .roll-n { animation: roll-n linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }

    /* The demonstration: the customer's chosen slot lights up, then the owner's day fills in row
       by row. This used to be gated to html:not(.js), which meant the one place the product
       proves itself was dead for every phone visitor — the GSAP pin that was supposed to replace
       it only runs at >=900px. It is now the default at every width, and the pin switches it off
       only where the pin actually exists.
       All five rows share one small viewport band, so the cascade comes from offset ranges
       rather than from their positions. */
    .slot--on { animation: slot-on var(--ease-snap) both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
    .day-row { animation: wipe-in var(--ease-snap) both; animation-timeline: view(); }
    .day-row:nth-child(1) { animation-range: entry 40% entry 58%; }
    .day-row:nth-child(2) { animation-range: entry 48% entry 66%; }
    .day-row:nth-child(3) { animation-range: entry 56% entry 74%; }
    .day-row:nth-child(4) { animation-range: entry 64% entry 82%; }
    .day-row:nth-child(5) { animation-range: entry 72% entry 90%; }
    .tag { animation: tag-pop var(--ease-snap) both; animation-timeline: view(); animation-range: entry 62% entry 72%; }

    @media (min-width: 900px) {
      html.js .slot--on, html.js .day-row, html.js .tag { animation: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover, .btn:active { transform: none; transition: none; }
  .cta-bar, .qa summary::after, .trade-day i, .slot--btn { transition: none; }
  .slot--btn:active { transform: none; }
  .hero-title, .hero-floor, .hero-stage, .hero-foot, .marquee-track { animation: none; }
}

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  :root { --header-h: 70px; }

  .log-row { grid-template-columns: 6rem 1fr auto; gap: var(--space-6); }

  /* Axis variance. The page set nine headings against the same left edge; the band that carries
     the page's one arithmetic sets itself against the right one instead, so the total lands on
     the container edge and the equation reads into it. */
  .calc-inner {
    grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-8);
    justify-items: end; text-align: right;
  }
  .calc-line { grid-row: span 2; }
  .calc-note { align-self: start; }

  .steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-7); }
  .step { border-bottom: 0; }
  .steps { border-bottom: var(--border-w) solid var(--black); }

  .live-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: start; }
  .mock--owner { margin-top: var(--space-6); }

  /* The two numbers sit side by side under the label that says what they are evidence of, and
     the provenance runs full width beneath them both. */
  /* space-9, not space-8: the zero is set 50% larger than the 152 and its side bearings are
     part of the glyph, so the two read as one number at the standard gap */
  .proof { grid-template-columns: auto auto 1fr; column-gap: var(--space-9); align-items: end; }
  .proof-label { grid-column: 1 / -1; }
  /* the footnote sits in the third column, bottom-aligned with the numerals' labels — it fills
     the half of the band the two numbers leave empty */
  .proof-caption { grid-column: 3; max-width: 32em; }

  .site-footer { padding-bottom: var(--space-7); }
  .site-footer .container { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer-close { grid-column: 1 / -1; }
  .site-footer nav { justify-self: end; }

  .cta-bar { display: none; }
}

/* The hero only splits into type | mascot once the headline can hold its own line
   beside a 300px figure — below this it reads better stacked. */
@media (min-width: 900px) {
  /* Axis variance, the other two positions. One heading breaks the container and runs to a 24px
     viewport gutter; one sets itself against the right edge. With the calc band right-aligned
     that gives the page a left / bleed / right cycle instead of nine identical left edges.
     The maths: the container's content box is (100% + 48px) wide including its padding, so
     pulling back half the difference between that and the viewport lands the text on 24px.
     body has overflow-x: clip, so the ~7px a classic scrollbar adds to 100vw cannot open a
     horizontal scroll. */
  .pain .h2 { max-width: none; margin-inline: calc((100% + 48px - 100vw) / 2); }
  .who .h2 { text-align: right; margin-left: auto; }

  /* The stamp anchors the top-left, the headline sits under it, the mascot fills the right
     column top-to-bottom — all four landing on the floor rule that closes the block. */
  .hero-inner { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--space-7); }
  .hero-inner > .stamp { grid-column: 1; grid-row: 1; align-self: start; }
  .hero-title { grid-column: 1; grid-row: 2; }
  .hero-stage { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: auto; margin-top: 0; }
  .hero-stage .bubble { margin-bottom: var(--space-4); }
  .hero-floor { grid-column: 1 / -1; grid-row: 3; }
  .hero-foot { grid-column: 1 / -1; grid-row: 4; }
}

/* Wide enough that the mascot can stand in the empty right half of the closing block,
   feet on the boundary with the footer — the same pose it opens the page in. */
@media (min-width: 1000px) {
  .close-inner { padding-right: 280px; }
  .mascot--close {
    position: absolute; right: var(--container-pad); bottom: 0;
    width: clamp(180px, 17vw, 240px); margin: 0;
  }
}