/* ============================================================================
   ASAS POS — SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  transition: background-color var(--d-mid) var(--e-out),
              border-color var(--d-mid) var(--e-out),
              backdrop-filter var(--d-mid) var(--e-out);
  border-block-end: 1px solid transparent;
}

.nav[data-stuck="true"] {
  background: color-mix(in srgb, var(--brand-ink) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-block-end-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-4);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.brand__mark {
  inline-size: 30px;
  block-size: 30px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-accent);
  color: var(--fg-on-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -0.04em;
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variation-settings: "wdth" 105, "wght" 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brand__name em {
  font-style: normal;
  color: var(--fg-dim);
  font-weight: 500;
}

.nav__links { display: flex; align-items: center; gap: var(--s-2); margin-inline: auto; }

.nav__link {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--e-out);
  white-space: nowrap;
}

.nav__link:hover { color: var(--fg); }

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0.15rem;
  inset-inline: 0.85rem;
  block-size: 1px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-mid) var(--e-out);
}

[dir="rtl"] .nav__link::after { transform-origin: right center; }

.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav__burger {
  display: none;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  place-items: center;
  gap: 4px;
  flex-direction: column;
}

.nav__burger i { display: block; inline-size: 15px; block-size: 1.5px; background: var(--fg); }

/* Appearance toggle. Same 42px hairline disc as the burger and the menu's
   close button, so the bar keeps one control shape. The glyph's filled half
   sits on the reading side and flips with `dir` for free — it is drawn from
   the element's own inline axis, not from a hard-coded left. */
.appearance {
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}

.appearance svg { inline-size: 20px; block-size: 20px; }

.appearance:hover {
  color: var(--fg-accent);
  border-color: var(--line-accent);
  background: var(--bg-tint-accent);
}

@media (max-width: 68rem) {
  .nav__links { display: none; }
  .nav__burger { display: flex; align-items: center; justify-content: center; }
  .nav__actions .btn--ghost { display: none; }
}

/* Below this the bar cannot hold brand + language + CTA + burger, so the
   descriptor and the CTA step out — both are one tap away inside the menu. */
@media (max-width: 34rem) {
  .brand__name em { display: none; }
  .nav__actions .btn--primary { display: none; }
  .nav__inner { gap: var(--s-3); }
}

/* Mobile menu — Motion owns the panel + item transforms */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s-4) 0 var(--s-7);
  visibility: hidden;
  opacity: 0;
}

.menu__top { display: flex; align-items: center; justify-content: space-between; }

.menu__close {
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--fg);
}

.menu__list { display: grid; align-content: center; gap: var(--s-1); }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 105, "wght" 800;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.menu__link em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono-xs);
  color: var(--fg-accent);
  letter-spacing: var(--tr-mono);
}

.menu__foot { display: grid; gap: var(--s-4); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  /* Centred, not bottom-hugged: min-block-size means the box grows to fit its
     content, so centring can never push the headline under the nav — but on a
     tall screen it stops the whole hero from sinking to the floor and leaving
     a dead band under the nav. */
  align-items: center;
  /* Top clears the fixed nav. Bottom is the scroll cue's own band. Both are
     as tight as they can be: the copy column runs ~790px on a laptop, and
     every rem of padding is a rem the receipt loses below the fold. */
  padding-block: calc(var(--s-8) + 2.5rem) calc(var(--s-7) + 1.5rem);
  overflow: hidden;
  isolation: isolate;
  /* The one perspective the whole hero is seen through. Long, because a short
     one turns a two-degree tilt into a funhouse. */
  perspective: 1400px;
  perspective-origin: 50% 44%;
}

/* --------------------------------------------------------------------------
   The diorama.
   overflow:hidden on .hero would force transform-style back to flat, so the
   3D space lives in these stages, and .hero keeps the clipping. Nothing here
   may take opacity, filter, mask or clip-path — every one of them collapses
   a 3D rendering context, and the roll would fall flat.
   -------------------------------------------------------------------------- */

.hero__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero__stage--back { z-index: -3; }

.hero__stage--front {
  z-index: -1;
  pointer-events: none;
}

/* Each plane is pushed back and scaled by exactly what the perspective takes
   away — k = (p + |z|) / p — so depth reads as parallax, never as a size
   change or an uncovered edge. */
.plane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(var(--z)) scale(var(--k));
}

.plane--photo { --z: -420px; --k: 1.3; }
.plane--roll  { --z: -200px; --k: 1.143; }
.plane--glow  { --z: -120px; --k: 1.086; }

.hero__bg {
  position: absolute;
  inset: -8% 0 -8% 0;
}

.hero__bg .media { position: absolute; inset: 0; }

/* Flat, and between the two stages on purpose: the veil that buys the
   headline its contrast must not tilt, scale or parallax with anything. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% 88%, color-mix(in srgb, var(--brand-ink) 96%, transparent) 0%, transparent 62%),
    linear-gradient(to top, var(--brand-ink) 2%, color-mix(in srgb, var(--brand-ink) 68%, transparent) 42%, color-mix(in srgb, var(--brand-ink) 88%, transparent) 100%);
}

.hero__glow {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -12%;
  inline-size: min(46rem, 70vw);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 22%, transparent) 0%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   THE TERMINAL — a POS device, built as a solid, printing forever.

   A countertop terminal: a tilted screen head on a base, a printer slot in the
   base's front, a platen roller turning behind the slot, and the receipt it is
   printing hanging down the front and feeding without end. Scroll feeds it;
   grab the paper and you can pull it down or push it back, and it carries on
   with the throw.

   Everything is one scalar — `p`, how many pixels of paper have been fed. The
   roller's turn and the tape's travel both come off it, so they cannot drift.

   The device is real geometry, not a picture of one: every slab is a six-faced
   box, and the assembly is YAWED so you see its side and top. Square-on, any
   of this would collapse back into flat rectangles.
   -------------------------------------------------------------------------- */

.hero__roll {
  /* THE DEVICE DOES NOT INVERT.

     Everything below builds a physical object out of the identity: the shell
     and the LCD out of --brand-ink, the thermal tape and its print out of
     --brand-paper. Those two swap places in day mode, and the object came
     apart — a white shell with a white screen, and 180 lines of pale print on
     pale paper. It was reading the tokens as "background" and "foreground"
     when it means "housing" and "paper".

     A thermal receipt is pale and printed dark in any light; an LCD is dark
     in any light. So the whole subtree is pinned to one scheme, and every
     light-dark() inside it — ink, paper, all three accents, and every derived
     token that reaches them — resolves to the night side at the point of use.
     One declaration, because the object is one object. */
  color-scheme: dark;

  --dev: clamp(196px, 24vw, 366px);        /* device width — drives everything */
  --roll-r: calc(var(--dev) * 0.085);      /* platen roller radius */
  --roll-step: 11.6129deg;                 /* 360 / N, N written from JS */
  --roll-lineh: clamp(21px, 2vw, 28px);    /* printed line depth */
  --throat: calc(var(--dev) * 0.34);       /* tape length still inside */
  /* The device's own height, derived once and used by everything that has to
     stay welded to it — the shell, the front face, the slot, the lip and the
     paper's start. It was a literal 1.16 in six places, which is why the
     keypad could not be given the room it needed without the receipt
     detaching from the slot it comes out of. */
  --devh: calc(var(--dev) * 1.46);
  /* Where the paper leaves the machine, measured UP from the shell's floor
     rather than guessed. The printer bay is pinned to that floor and the slot
     is the lowest thing on the shell, so its cavity sits a fixed
     0.054–0.110 x --dev above the bottom edge; 0.066 puts the tape's origin
     just inside the lower jaw, which is exactly where the lip covers it. */
  --slot-y: calc(var(--devh) - var(--dev) * 0.066);

  --roll-paper: color-mix(in srgb, var(--brand-paper) 97%, var(--brand-accent));
  --roll-shade: color-mix(in srgb, var(--brand-paper) 74%, var(--brand-accent));
  --roll-deep: color-mix(in srgb, var(--brand-paper) 48%, var(--brand-accent));
  --roll-ink: color-mix(in srgb, var(--brand-ink) 86%, transparent);
  --roll-ink-soft: color-mix(in srgb, var(--brand-ink) 54%, transparent);
  --roll-ink-hot: color-mix(in srgb, var(--brand-accent) 56%, var(--brand-ink));

  --shell: color-mix(in srgb, var(--brand-ink) 82%, var(--brand-paper));
  --shell-lit: color-mix(in srgb, var(--brand-ink) 70%, var(--brand-paper));
  --shell-dark: color-mix(in srgb, var(--brand-ink) 94%, var(--brand-paper));
  --shell-edge: color-mix(in srgb, var(--brand-paper) 22%, transparent);

  position: relative;
  inline-size: var(--dev);
  /* The device, then as much paper as the hero can spare below it. */
  /* the device (1.23 x --dev) plus as much paper as the hero can spare */
  block-size: calc(var(--devh) + clamp(170px, 24vh, 320px));
  margin-inline-start: auto;
  margin-inline-end: 4%;
  transform-style: preserve-3d;
  pointer-events: none;
  /* Dragging paper must never start a text selection. Killed here rather than
     on the handle so it covers the printed lines underneath too — those were
     what flickered a highlight in and out mid-drag. */
  -webkit-user-select: none;
  user-select: none;
}

.roll__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Yawed and pitched. This is the whole reason it reads as an object. */
  transform: rotateY(-26deg) rotateX(7deg) rotateZ(-1.5deg);
}

/* --------------------------------------------------------------------------
   A six-faced box. --w/--h/--d in px; every face is centred on the box centre
   and then pushed out to its own plane, which keeps the arithmetic trivial.
   -------------------------------------------------------------------------- */

.box { position: absolute; transform-style: preserve-3d; }

.box__f {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  backface-visibility: hidden;
  background: var(--shell);
}

.f-front, .f-back {
  inline-size: var(--w); block-size: var(--h);
  margin-inline-start: calc(var(--w) / -2); margin-block-start: calc(var(--h) / -2);
}
.f-front { transform: translateZ(calc(var(--d) / 2)); }
.f-back  { transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); background: var(--shell-dark); }

.f-left, .f-right {
  inline-size: var(--d); block-size: var(--h);
  margin-inline-start: calc(var(--d) / -2); margin-block-start: calc(var(--h) / -2);
}
.f-right { transform: translateX(calc(var(--w) / 2)) rotateY(90deg); background: var(--shell-dark); }
.f-left  { transform: translateX(calc(var(--w) / -2)) rotateY(-90deg); background: var(--shell-lit); }

.f-top, .f-bottom {
  inline-size: var(--w); block-size: var(--d);
  margin-inline-start: calc(var(--w) / -2); margin-block-start: calc(var(--d) / -2);
}
.f-top    { transform: translateY(calc(var(--h) / -2)) rotateX(90deg); background: var(--shell-lit); }
.f-bottom { transform: translateY(calc(var(--h) / 2)) rotateX(-90deg); background: var(--shell-dark); }

/* --------------------------------------------------------------------------
   THE TERMINAL — one shell, not a stack of slabs.

   The previous build was three separate boxes floating apart, which is exactly
   why it never read as a device. A terminal is a single body with the screen
   sunk INTO it and the keys standing OUT of it, and both of those are real
   depth here: the screen well is pushed back in Z, every key is pushed forward.
   Under the yaw you see the recess and the key relief, not a printed bevel.
   -------------------------------------------------------------------------- */

.pos {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: var(--devh);
  transform-style: preserve-3d;
}

.pos__body {
  --w: var(--dev);
  --h: var(--devh);
  --d: calc(var(--dev) * 0.3);
  inline-size: var(--w);
  block-size: var(--h);
  inset-inline-start: 0;
  inset-block-start: 0;
  /* Leaning back the way a terminal sits on a counter. */
  transform: rotateX(-7deg);
}

/* The shell's own materials. Top and side faces catch more light than the
   front, which is what makes the box read as moulded plastic. */
.pos__body > .f-front { background: var(--shell); }
.pos__body > .f-top {
  background: linear-gradient(to bottom, var(--shell-lit), var(--shell));
}
.pos__body > .f-left {
  background: linear-gradient(to right, var(--shell-lit), var(--shell));
}
.pos__body > .f-right { background: var(--shell-dark); }
.pos__body > .f-bottom { background: var(--shell-dark); }

.pos__face {
  border-radius: calc(var(--dev) * 0.045);
  box-shadow:
    inset 0 0 0 1px var(--shell-edge),
    inset 0 calc(var(--dev) * 0.006) 0 color-mix(in srgb, var(--brand-paper) 16%, transparent);
  padding: calc(var(--dev) * 0.055) calc(var(--dev) * 0.06) calc(var(--dev) * 0.05);
  /* The children need their own Z, so this face is a 3D context. */
  transform-style: preserve-3d;
  display: grid;
  /* Screen, keypad, printer bay. The bay takes the free row so it is pinned to
     the BOTTOM of the shell and the slot's distance from the device's lower
     edge is a constant — which is what the paper is anchored to. Under
     `align-content: start` the whole stack floated up as soon as the face had
     any slack in it, and the receipt appeared out of thin air below a slot it
     was no longer attached to. */
  grid-template-rows: auto auto 1fr;
  /* Definite lengths. A percentage gap on a grid resolves against a block size
     that is itself content-derived here, which is how the rows ended up
     closer together than the keys standing out of them are tall. */
  gap: calc(var(--dev) * 0.038);
}

/* ---- recessed screen ---- */

.pos__bezel {
  border-radius: calc(var(--dev) * 0.022);
  padding: calc(var(--dev) * 0.018);
  background: var(--shell-dark);
  /* The recess is drawn, not translated. A negative Z here put the bezel
     BEHIND the face's own background plane — this face is a preserve-3d
     context, so paint order follows Z and the shell covered the screen
     completely. The inset shadows carry the well instead. */
  transform: translateZ(0);
  box-shadow:
    inset 0 calc(var(--dev) * 0.01) calc(var(--dev) * 0.02) color-mix(in srgb, var(--brand-ink) 82%, transparent),
    0 1px 0 color-mix(in srgb, var(--brand-paper) 13%, transparent);
}

.pos__screen {
  border-radius: calc(var(--dev) * 0.012);
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--brand-paper) 11%, transparent) 0%,
      transparent 30%,
      transparent 70%,
      color-mix(in srgb, var(--brand-paper) 6%, transparent) 100%),
    var(--brand-ink);
  padding: 7% 7.5%;
  overflow: hidden;
  block-size: calc(var(--dev) * 0.47);
  /* header / cart / total / status. minmax(0,1fr) on the cart, because a
     plain 1fr let it hold its content and squeezed the status row to zero
     height inside the screen's fixed box. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 3%;
}

/* ---- keypad ---- */

/* The gap here is doing 3D work, not just 2D spacing. Every key stands out of
   the face on its own translateZ, and the whole assembly is yawed 26deg and
   pitched 7deg under a 1200px perspective — so a key projects LOWER on screen
   than its layout box sits. At 5% the payment row's projection climbed over
   the * 0 # row above it and the two collided. This clears it. */
.pos__pad {
  transform-style: preserve-3d;
  display: grid;
  gap: calc(var(--dev) * 0.062);
}

.pos__keys {
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--dev) * 0.026) calc(var(--dev) * 0.03);
}

.pos__keys i,
.pos__fkeys i {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border-radius: calc(var(--dev) * 0.016);
  /* Standing out of the shell — real geometry, so the yaw offsets them. */
  transform: translateZ(calc(var(--dev) * 0.016));
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-paper) 21%, var(--shell)) 0%,
    color-mix(in srgb, var(--brand-paper) 9%, var(--shell)) 52%,
    var(--shell-dark) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--brand-paper) 26%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--brand-ink) 46%, transparent),
    0 calc(var(--dev) * 0.006) calc(var(--dev) * 0.01) color-mix(in srgb, var(--brand-ink) 62%, transparent);
}

.pos__keys i {
  block-size: calc(var(--dev) * 0.088);
  padding-block-start: 4%;
}

.pos__keys i b {
  font-family: var(--font-mono);
  font-size: calc(var(--dev) * 0.042);
  font-variation-settings: "wdth" 75, "wght" 700;
  letter-spacing: 0;
  line-height: 1;
  color: color-mix(in srgb, var(--brand-paper) 88%, transparent);
}

/* The letter legend a real keypad carries under each digit. */
.pos__keys i u {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: calc(var(--dev) * 0.019);
  font-variation-settings: "wdth" 75, "wght" 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: color-mix(in srgb, var(--brand-paper) 40%, transparent);
}

.pos__fkeys {
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--dev) * 0.03);
}

.pos__fkeys i { block-size: calc(var(--dev) * 0.075); }

.pos__fkeys i em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: calc(var(--dev) * 0.03);
  font-variation-settings: "wdth" 75, "wght" 700;
  letter-spacing: 0;
  color: var(--fg-on-accent);
  white-space: nowrap;
}

/* The terminal convention — cancel / correct / enter — in the identity's own
   three accents, so a re-skin re-skins the hardware too. */
.k-cancel {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-accent-3) 74%, var(--brand-paper)),
    var(--brand-accent-3) 60%,
    color-mix(in srgb, var(--brand-accent-3) 80%, var(--brand-ink)) 100%) !important;
}
.k-correct {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-accent) 74%, var(--brand-paper)),
    var(--brand-accent) 60%,
    color-mix(in srgb, var(--brand-accent) 80%, var(--brand-ink)) 100%) !important;
}
.k-enter {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-accent-2) 74%, var(--brand-paper)),
    var(--brand-accent-2) 60%,
    color-mix(in srgb, var(--brand-accent-2) 80%, var(--brand-ink)) 100%) !important;
}

/* ---- printer bay ---- */

.pos__printer {
  position: relative;
  transform-style: preserve-3d;
  display: grid;
  /* Wide enough to clear the tape standing in the slot. The throat is pitched
     back 74deg on its bottom edge, so it still projects about 0.06 x --dev
     ABOVE the slot — that sliver of paper waiting inside the cavity is the
     point of it, but it was landing straight on top of the brand mark. */
  gap: calc(var(--dev) * 0.075);
  padding-block-start: calc(var(--dev) * 0.014);
  /* Sits on the floor of the shell, whatever slack the face has above it. */
  align-content: end;
}

.pos__slot {
  display: block;
  block-size: calc(var(--dev) * 0.058);
  border-radius: calc(var(--dev) * 0.008);
  /* A cavity, not a line: dark at the top where it goes in, with a lit lower
     jaw where the paper rides out over it. */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-ink) 97%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 92%, transparent) 62%,
    var(--shell-lit) 82%,
    var(--shell) 100%);
  box-shadow:
    inset 0 calc(var(--dev) * 0.008) calc(var(--dev) * 0.012) color-mix(in srgb, var(--brand-ink) 90%, transparent),
    0 1px 0 color-mix(in srgb, var(--brand-paper) 14%, transparent);
}

.pos__brand {
  justify-self: center;
  font-family: var(--font-display);
  font-size: calc(var(--dev) * 0.026);
  font-variation-settings: "wdth" 105, "wght" 700;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--brand-paper) 34%, transparent);
}

.pos__led {
  position: absolute;
  inset-block-start: 4.5%;
  inset-inline-end: 7%;
  inline-size: calc(var(--dev) * 0.022);
  block-size: calc(var(--dev) * 0.022);
  border-radius: 50%;
  transform: translateZ(calc(var(--dev) * 0.008));
  background: var(--brand-accent-2);
  box-shadow: 0 0 calc(var(--dev) * 0.05) var(--brand-accent-2);
}

/* ---- the screen's own readout ---- */

.pos__ui-top,
.pos__ui-row,
.pos__ui-foot,
.pos__ui-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: calc(var(--dev) * 0.032);
  letter-spacing: 0;
  font-variation-settings: "wdth" 75, "wght" 500;
  color: color-mix(in srgb, var(--brand-paper) 66%, transparent);
  white-space: nowrap;
  min-inline-size: 0;
}

.pos__ui-top {
  color: var(--fg-accent);
  padding-block-end: 3%;
  border-block-end: 1px solid color-mix(in srgb, var(--brand-paper) 13%, transparent);
}

.pos__ui-top b { font-variation-settings: "wdth" 75, "wght" 700; letter-spacing: 0.08em; }

.pos__ui-live { display: flex; align-items: center; gap: 0.4em; color: var(--fg-positive); }

.pos__ui-live i {
  inline-size: calc(var(--dev) * 0.02);
  block-size: calc(var(--dev) * 0.02);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 calc(var(--dev) * 0.028) currentColor;
}

.pos__ui-live em { font-style: normal; }

.pos__ui-lines { display: grid; align-content: start; gap: 4%; min-inline-size: 0; }

.pos__ui-row b {
  font-weight: 500;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--brand-paper) 82%, transparent);
}

.pos__ui-row span { flex: none; font-variant-numeric: tabular-nums; }

.pos__ui-foot {
  align-items: baseline;
  padding-block-start: 3%;
  border-block-start: 1px solid color-mix(in srgb, var(--brand-paper) 13%, transparent);
}

.pos__ui-foot em { font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }

.pos__ui-total {
  font-family: var(--font-display);
  font-size: calc(var(--dev) * 0.082);
  font-weight: 800;
  font-variation-settings: "wdth" 105, "wght" 800;
  letter-spacing: var(--tr-display);
  color: var(--brand-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  flex: none;
}

.pos__ui-total small {
  font-family: var(--font-mono);
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0;
  font-variation-settings: "wdth" 75;
  color: color-mix(in srgb, var(--brand-accent) 70%, transparent);
}

/* The status line. Its text is cycled by the GSAP layer. */
.pos__ui-status {
  justify-content: flex-start;
  /* Floors the row so it can never be collapsed away again. */
  min-block-size: calc(var(--dev) * 0.032);
  gap: 0.5em;
  font-size: calc(var(--dev) * 0.028);
  color: var(--fg-positive);
  overflow: hidden;
}

.pos__ui-status i {
  flex: none;
  inline-size: calc(var(--dev) * 0.014);
  block-size: calc(var(--dev) * 0.014);
  border-radius: 50%;
  background: currentColor;
}

.pos__ui-status em {
  font-style: normal;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   The platen roller, turning behind the slot as paper feeds through it.
   -------------------------------------------------------------------------- */

.pos__roller {
  position: absolute;
  inset-inline: 12%;
  inset-block-start: calc(var(--dev) * 1.064);
  block-size: calc(var(--roll-r) * 2);
  transform-style: preserve-3d;
}

/* --------------------------------------------------------------------------
   The paper coming out of it
   -------------------------------------------------------------------------- */

.roll__feed {
  position: absolute;
  /* Narrower than the terminal, because till paper is. */
  inset-inline: 19%;
  /* Starts where the throat ends, so the sheet BENDS here rather than
     beginning here. */
  inset-block-start: var(--slot-y);
  inset-block-end: 0;
  transform: translateZ(calc(var(--dev) * 0.28));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0 58%, transparent 100%);
}

/* The tape that has not come out yet. Hinged on its BOTTOM edge and pitched
   back 74deg, so its far end is ~0.96 x --throat deeper into the machine than
   the hanging sheet — behind the printer's own front face, which then covers
   it. That is the curl: one continuous tape, two planes, bending at the slot. */
.roll__throat {
  position: absolute;
  inset-inline: 19%;
  inset-block-start: var(--slot-y);
  block-size: var(--throat);
  margin-block-start: calc(var(--throat) * -1);
  transform-origin: bottom center;
  transform: translateZ(calc(var(--dev) * 0.28)) rotateX(74deg);
  overflow: hidden;
}

/* Inside the machine it is dark. */
.roll__gloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-ink) 94%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 66%, transparent) 42%,
    color-mix(in srgb, var(--brand-ink) 18%, transparent) 100%);
}

/* The lip of the slot, in front of everything, so the sheet passes behind a
   real edge instead of just stopping. */
.roll__lip {
  position: absolute;
  inset-inline: 17%;
  inset-block-start: calc(var(--dev) * 1.055);
  block-size: calc(var(--dev) * 0.055);
  transform: translateZ(calc(var(--dev) * 0.3));
  border-radius: 0 0 calc(var(--dev) * 0.012) calc(var(--dev) * 0.012);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-ink) 96%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 88%, transparent) 46%,
    var(--shell-lit) 62%,
    var(--shell) 100%);
  box-shadow: 0 3px 7px -2px color-mix(in srgb, var(--brand-ink) 82%, transparent);
  pointer-events: none;
}

/* The tape that has not come out yet. Hinged on its BOTTOM edge and pitched
   back 74deg, so its far end sits ~0.96 x --throat deeper into the machine
   than the hanging sheet — behind the printer's own front face, which then
   covers it. That is the curl: one continuous tape, two planes, bending at
   the slot. */
.roll__throat {
  position: absolute;
  inset-inline: 19%;
  inset-block-start: var(--slot-y);
  block-size: var(--throat);
  margin-block-start: calc(var(--throat) * -1);
  transform-origin: bottom center;
  transform: translateZ(calc(var(--dev) * 0.28)) rotateX(74deg);
  overflow: hidden;
}

/* Inside the machine it is dark. */
.roll__gloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-ink) 95%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 68%, transparent) 44%,
    color-mix(in srgb, var(--brand-ink) 16%, transparent) 100%);
}

/* The lip of the slot, parked in front of everything, so the sheet passes
   behind a real edge instead of simply stopping. */
.roll__lip {
  position: absolute;
  inset-inline: 17%;
  inset-block-start: calc(var(--slot-y) - var(--dev) * 0.038);
  block-size: calc(var(--dev) * 0.055);
  transform: translateZ(calc(var(--dev) * 0.3));
  border-radius: 0 0 calc(var(--dev) * 0.014) calc(var(--dev) * 0.014);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-ink) 96%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 86%, transparent) 44%,
    var(--shell-lit) 60%,
    var(--shell) 100%);
  box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--brand-ink) 84%, transparent);
  pointer-events: none;
}

.roll__strip {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--roll-cycle, 0px) * -1);
  will-change: transform;
}

/* Continuity: for the throat's bottom edge to show exactly the line the
   hanging sheet starts with, its strip must sit --throat earlier on the tape.
   Both then take the identical translateY, and the paper cannot tear. */
.roll__throat .roll__strip {
  inset-block-start: calc(var(--throat) - var(--roll-cycle, 0px));
}

.roll__line {
  block-size: var(--roll-lineh);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  /* Tight, because the tape is only ~170px wide and the amount on the right
     must never be clipped. */
  padding-inline: 7%;
  font-family: var(--font-mono);
  font-size: calc(var(--roll-lineh) * 0.315);
  /* Martian Mono at its narrowest width axis — the default is very wide, and
     it was what pushed the amounts off the edge of the paper. */
  font-variation-settings: "wdth" 75, "wght" 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--roll-ink);
  overflow: hidden;
  background: linear-gradient(to right,
    var(--roll-deep) 0%,
    var(--roll-shade) 5%,
    var(--roll-paper) 26%,
    var(--roll-paper) 74%,
    var(--roll-shade) 95%,
    var(--roll-deep) 100%);
}

/* The label may shrink and ellipsize; the amount never may. */
.roll__line b {
  font-weight: 600;
  font-variation-settings: "wdth" 75, "wght" 600;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roll__line span {
  font-variant-numeric: tabular-nums;
  flex: none;
  white-space: nowrap;
}

.roll__line--head {
  justify-content: center;
  letter-spacing: 0.1em;
  font-variation-settings: "wdth" 75, "wght" 700;
}

.roll__line--meta { color: var(--roll-ink-soft); }

.roll__line--total {
  font-size: calc(var(--roll-lineh) * 0.37);
  font-variation-settings: "wdth" 75, "wght" 700;
  color: var(--roll-ink-hot);
}

.roll__line--perf { padding-inline: 6%; }

.roll__line--perf i {
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--brand-ink) 44%, transparent) 0 4px,
    transparent 4px 9px);
}

.roll__line--code { padding-inline: 16%; }

.roll__line--code i {
  display: block;
  inline-size: 100%;
  block-size: 52%;
  opacity: 0.8;
  background: repeating-linear-gradient(to right,
    var(--brand-ink) 0 1.5px,
    transparent 1.5px 3px,
    var(--brand-ink) 3px 5px,
    transparent 5px 6.5px,
    var(--brand-ink) 6.5px 7.5px,
    transparent 7.5px 10px);
}

/* The paper curls as it leaves the slot, and throws shade at its edges. */
.roll__shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--brand-ink) 52%, transparent) 0%,
      transparent 9%),
    linear-gradient(to right,
      color-mix(in srgb, var(--brand-ink) 40%, transparent) 0%,
      transparent 18%,
      transparent 84%,
      color-mix(in srgb, var(--brand-ink) 32%, transparent) 100%);
}

.roll__grab {
  position: absolute;
  /* On the paper's own plane and slightly wider than it, so the handle is
     exactly where the sheet appears — and a little easier to catch. */
  inset-inline: 11%;
  inset-block: calc(var(--dev) * 1.146) 6%;
  transform: translateZ(calc(var(--dev) * 0.28));
  pointer-events: none;
  cursor: grab;
  /* none, not pan-y: pan-y let the browser scroll the page from the same
     gesture, and that fight is what made the drag stutter and drop out. */
  touch-action: none;
}

.roll__grab.is-held { cursor: grabbing; }

@media (hover: hover) and (pointer: fine) and (min-width: 68rem) {
  .roll__grab { pointer-events: auto; }
}

/* Single column: the device shrinks and the paper drops the words it is too
   narrow to set. Its stock, perforations and barcodes still carry it. */
@media (max-width: 68rem) {
  .hero__roll {
    /* Single column, so the terminal can be much wider — which is what buys
       the printed lines enough depth to stay legible. */
    --dev: clamp(215px, 64vw, 336px);
    --roll-lineh: clamp(25px, 7.4vw, 31px);
    margin-inline: auto;
  }
  /* The paper KEEPS its words here. Wider sheet, deeper lines, larger type
     ratio — at the old 22px depth the type landed at 7px and had to be
     dropped; at this size it reads. */
  .roll__feed,
  .roll__throat { inset-inline: 12%; }
  .roll__lip { inset-inline: 10%; }
  .roll__grab { inset-inline: 10%; }
  .roll__line { font-size: calc(var(--roll-lineh) * 0.4); }
  .roll__line--total { font-size: calc(var(--roll-lineh) * 0.46); }
  .pos__keys i u { display: none; }
  .pos__keys i { padding-block-start: 0; }
}

/* The grid's own box spans the hero, and the gap between its two columns is
   empty — so it stops swallowing pointers there and lets them reach the roll
   behind it. The columns themselves take them back. */
.hero__grid { pointer-events: none; }
.hero__copy,
.hero__panel { pointer-events: auto; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  /* end-aligned, the short receipt card hung off the bottom of a much taller
     copy column and opened a ~340px hole beside the headline. Centred, the
     card sits against the copy and the hole closes. */
  align-items: center;
  width: 100%;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}

/* Capped against the viewport's height as well as its width. --fs-4xl alone
   is a width-only clamp: on a short screen it set four Arabic lines at 96px,
   which drove the receipt column below the fold. min() only ever bites when
   the screen is short — tall screens still get the full display size. */
.hero__title {
  font-size: min(var(--fs-4xl), 8.5svh);
  margin-block-end: var(--s-5);
}

.hero__title .line { display: block; overflow: hidden; }

.hero__sub { max-width: 34ch; margin-block-end: var(--s-4); }

.hero__support {
  max-width: 44ch;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  margin-block-end: var(--s-5);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* The panel owns the perspective for its own little scene, so the roll and
   the receipt inside it share one vanishing point. The tilt writer therefore
   must NOT inject a perspective() of its own here — hence data-tilt="scene". */
.hero__panel {
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 38%;
}

.hero__panel-frame {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The flat receipt card that used to stand here is gone — the terminal prints
   the same sale, and two copies of it left neither with room to be legible. */

/* Centred in the bottom band rather than tucked into the inline-start corner,
   where it collided with the CTA row. --fg-dim over graded photography was
   unreadable, so it steps up to --fg-muted and carries an ink halo — the same
   trick the pointer uses to stay legible on any ground. */
.hero__cue {
  position: absolute;
  inset-block-end: var(--s-5);
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  text-shadow: 0 1px 2px var(--brand-ink), 0 2px 14px var(--brand-ink);
  pointer-events: none;
}

.hero__cue i {
  display: block;
  inline-size: 1px;
  block-size: 34px;
  background: linear-gradient(to bottom, var(--brand-accent), transparent);
  animation: cue 2.6s var(--e-in-out) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 68rem) {
  .hero { align-items: center; padding-block: calc(var(--s-11) + 2rem) var(--s-9); }
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track refuses to shrink below
     its content's min-content width, which pushed the hero column 52px wider
     than the shell at 375px. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .hero__cue { display: none; }
  .hero__panel { max-width: 30rem; }
}

/* Every single-column fallback needs the same treatment. */
@media (max-width: 62rem) {
  .screens__panel,
  .trust__grid,
  .about__grid,
  .faq__grid,
  .demo__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 52rem) {
  .fit__grid,
  .reconcile__equation,
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Stats ticker
   -------------------------------------------------------------------------- */

.ticker {
  position: relative;
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
  background: var(--bg-sunken);
  overflow: hidden;
}

.ticker__note {
  display: flex;
  justify-content: center;
  padding-block-start: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Reconcile — the signature pinned moment
   -------------------------------------------------------------------------- */

.reconcile { position: relative; background: var(--bg-sunken); }

.reconcile__pin {
  min-block-size: 100svh;
  display: grid;
  align-content: center;
  gap: var(--s-6);
  padding-block: var(--s-8);
  overflow: hidden;
}

.reconcile__lede {
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  text-align: center;
}

.reconcile__equation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.75rem, 2.5vw, 2.5rem);
}

.reconcile__cell {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
  position: relative;
}

.reconcile__cell[data-role="profit"] { border-block-start-color: var(--brand-accent); }

.reconcile__op {
  position: absolute;
  inset-block-start: -0.72em;
  inset-inline-start: calc(var(--s-5) * -1);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--fg-dim);
  line-height: 1;
}

.reconcile__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.reconcile__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7.2vw, 5.75rem);
  font-weight: 800;
  font-variation-settings: "wdth" 108, "wght" 800;
  line-height: 0.94;
  letter-spacing: var(--tr-mega);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.16em;
}

.reconcile__value small {
  font-family: var(--font-mono);
  font-size: 0.24em;
  letter-spacing: var(--tr-mono);
  color: var(--fg-muted);
  font-weight: 500;
}

.reconcile__cell[data-role="sales"] .reconcile__value { color: var(--fg); }
.reconcile__cell[data-role="cost"] .reconcile__value { color: var(--fg-negative); }
.reconcile__cell[data-role="profit"] .reconcile__value { color: var(--fg-accent); }

.reconcile__bar {
  block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.reconcile__bar i {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: inline-start;
}

.reconcile__cell[data-role="sales"] .reconcile__bar i { background: var(--fg-muted); }
.reconcile__cell[data-role="cost"] .reconcile__bar i { background: var(--brand-accent-3); }
.reconcile__cell[data-role="profit"] .reconcile__bar i { background: var(--brand-accent); }

.reconcile__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}

.reconcile__margin {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.reconcile__margin b {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 52rem) {
  .reconcile__equation { grid-template-columns: 1fr; gap: var(--s-5); }
  .reconcile__op { position: static; display: block; }
}

/* --------------------------------------------------------------------------
   Steps — pinned horizontal track
   -------------------------------------------------------------------------- */

.steps { position: relative; overflow: clip; }

.steps__viewport { overflow: hidden; }

.steps__track {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--gutter);
  will-change: transform;
}

.step {
  flex: none;
  inline-size: min(30rem, 78vw);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-4);
}

.step__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  order: -1;
  /* What the frame shows before the photograph prints into it: blank ruled
     thermal paper. An unprinted card is then a state, not a missing image. */
  background-color: var(--bg-sunken);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-soft) 0 1px,
    transparent 1px 15px
  );
}

.step__media .media { block-size: 100%; }

/* The print head. It rides the edge of the unrolling photograph as the card
   prints, which is why it is inside the frame and not a section-level line:
   the boundary it marks is the card's own, at any layout or direction. */
.step__feed {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 5;
  block-size: 1px;
  background: var(--brand-accent);
  box-shadow: 0 0 2px color-mix(in srgb, var(--brand-accent) 90%, transparent),
              0 0 22px 3px color-mix(in srgb, var(--brand-accent) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.step__n {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Drawn by the print sequence. A pseudo-element cannot be reached by either
   motion library, so the scalar is the animated handle. */
@property --draw {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.step__n::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--line-accent);
  transform: scaleX(var(--draw));
  transform-origin: left center;
}

.step h3 { font-size: var(--fs-xl); }
.step p { color: var(--fg-muted); font-size: var(--fs-sm); }

.steps__progress {
  margin-block-start: var(--s-7);
  block-size: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.steps__progress i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: inline-start;
}

/* --------------------------------------------------------------------------
   Screens
   -------------------------------------------------------------------------- */

.screens__tabs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-end: var(--s-6); }

/* No perspective here — the tilt transform carries its own, so a second one
   would compound and distort. */
.screens__stage {
  position: relative;
  display: grid;
}

.screens__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.screens__panel[hidden] { display: none; }

.screens__tilt { will-change: transform; }

.screens__caption { display: grid; gap: var(--s-4); align-content: center; }

.screens__caption h3 { font-size: var(--fs-lg); }
.screens__caption p { color: var(--fg-muted); font-size: var(--fs-sm); }

.screens__facts { display: grid; gap: var(--s-2); }

.screens__fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.screens__fact b { color: var(--fg-accent); font-variant-numeric: tabular-nums; font-weight: 500; }

@media (max-width: 62rem) {
  .screens__panel { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Retail band — full-bleed photo
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  min-block-size: min(88svh, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.band__bg { position: absolute; inset: -10% 0; z-index: -1; }
.band__bg .media { position: absolute; inset: 0; }

/* The copy's own ground.

   The photograph's veil fades the image into the page, but it is a gradient
   built for the SECTION, not for this paragraph — and a lead set in --fg-muted
   over the middle of a lit display of bottles was landing at barely 2:1. The
   text needed a ground of its own.

   Full-bleed, and the page's existing device rather than a new one: the hero
   carries its headline over photography the same way. A panel behind the words
   would have been a card, and this page does not have cards. Sized to cover
   the copy block with the fade finishing well above it, so the transition is
   never visible as an edge.

   ::before, not ::after — a pseudo-element with `z-index: auto` paints in tree
   order, and ::after would have covered the very text it exists to carry. */
.band::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 88%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--brand-ink) 6%,
    color-mix(in srgb, var(--brand-ink) 90%, transparent) 38%,
    color-mix(in srgb, var(--brand-ink) 60%, transparent) 66%,
    transparent 100%
  );
}

.band__content {
  position: relative;
  padding-block: var(--s-8);
  display: grid;
  gap: var(--s-5);
  max-width: 46rem;
}

/* Over photography the lead is body text, not a caption: it takes the full
   foreground. --fg-muted is for a lead on a flat ground. */
.band__content .t-lead { color: var(--fg); }

.band__types { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   Fit / not fit
   -------------------------------------------------------------------------- */

.fit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.fit__aside { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }

.fit__media {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fit__media .media { block-size: 100%; }

.fit__note {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-wrap: pretty;
}

@media (max-width: 74rem) {
  .fit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fit__aside {
    grid-column: 1 / -1;
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: center;
    gap: var(--s-5);
    justify-items: stretch;
  }
  .fit__media { grid-row: span 2; aspect-ratio: 1; }
}

.fit__col { display: grid; gap: var(--s-4); align-content: start; }

.fit__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.fit__col[data-tone="yes"] .fit__head { color: var(--fg-positive); border-block-end-color: color-mix(in srgb, var(--brand-accent-2) 40%, transparent); }
.fit__col[data-tone="no"] .fit__head { color: var(--fg-negative); border-block-end-color: color-mix(in srgb, var(--brand-accent-3) 40%, transparent); }

.fit__item { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
.fit__item h3 { font-size: var(--fs-md); }
.fit__item p { color: var(--fg-muted); font-size: var(--fs-sm); }

.fit__mark {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  line-height: 1;
}

.fit__mark svg { inline-size: 13px; block-size: 13px; }

/* The tick and the cross draw themselves in — GSAP animates the dash offset
   on scroll, so the verdict is written rather than just printed. */
.fit__stroke { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (max-width: 52rem) {
  .fit__grid { grid-template-columns: minmax(0, 1fr); }
  .fit__aside { grid-template-columns: minmax(0, 1fr); }
  .fit__media { grid-row: auto; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   FAQ side card
   -------------------------------------------------------------------------- */

.faq__side { display: grid; gap: var(--s-6); align-content: start; }

.faq__card {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
}

.faq__media {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-block-end: var(--s-2);
}
.faq__media .media { block-size: 100%; }

/* --------------------------------------------------------------------------
   Walkthrough layout
   -------------------------------------------------------------------------- */

.meeting__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}

.meeting__media {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.meeting__media .media { block-size: 100%; }

@media (max-width: 62rem) {
  .meeting__layout { grid-template-columns: minmax(0, 1fr); }
  .meeting__media { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Trust — interactive permissions
   -------------------------------------------------------------------------- */

.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.perm {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  overflow: hidden;
}

.perm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
}

.perm__who { display: grid; gap: 2px; }
.perm__who b { font-size: var(--fs-sm); font-weight: 600; }
.perm__who span { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-dim); }

.perm__list { display: grid; }

.perm__row {
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}

.perm__row:last-child { border-block-end: 0; }

.perm__ico {
  inline-size: 1.7rem;
  block-size: 1.7rem;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
}

.perm__ico svg { inline-size: 13px; block-size: 13px; }

.perm__state {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.perm__row[data-allowed="true"] .perm__ico { color: var(--fg-positive); border-color: color-mix(in srgb, var(--brand-accent-2) 45%, transparent); background: var(--bg-tint-2); }
.perm__row[data-allowed="true"] .perm__state { color: var(--fg-positive); }
.perm__row[data-allowed="false"] .perm__ico { color: var(--fg-negative); border-color: color-mix(in srgb, var(--brand-accent-3) 35%, transparent); }
.perm__row[data-allowed="false"] { color: var(--fg-dim); }

.trust__cloud {
  margin-block-start: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--s-3);
  background: var(--bg-panel);
}

@media (max-width: 62rem) { .trust__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   About / Who we are
   -------------------------------------------------------------------------- */

.about { position: relative; }

.about__statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.7rem);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "wght" 600;
  line-height: 1.32;
  letter-spacing: var(--tr-heading);
  max-width: 26ch;
  text-wrap: pretty;
}

.about__statement .w { color: var(--fg-dim); transition: none; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
  margin-block-start: var(--s-6);
}

.about__body { display: grid; gap: var(--s-5); }
.about__body p { color: var(--fg-muted); max-width: 60ch; }
.about__body strong { color: var(--fg); font-weight: 600; }

.about__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.about__media .media { block-size: 100%; }

.about__pull {
  position: absolute;
  inset-block-end: var(--s-5);
  inset-inline: var(--s-5);
  z-index: 4;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--tr-heading);
  line-height: 1.24;
  text-wrap: balance;
}

.about__principles { margin-block-start: var(--s-7); display: grid; }

.about__principle {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
  align-items: start;
}

.about__principle b { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--fg); }
.about__principle p { color: var(--fg-muted); font-size: var(--fs-sm); }

.about__principle em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono-xs);
  color: var(--fg-dim);
  letter-spacing: var(--tr-mono);
  padding-block-start: 0.4em;
}

.placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  border: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
}

@media (max-width: 62rem) {
  .about__grid { grid-template-columns: 1fr; }
  .about__principle { grid-template-columns: 2rem 1fr; }
  .about__principle p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Demo + walkthrough
   -------------------------------------------------------------------------- */

.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.cred { display: grid; gap: var(--s-3); margin-block: var(--s-5); max-width: 34rem; }

.cred__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
}

.cred__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.cred__val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg);
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: start;
}

.cred__copy {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-accent);
  display: inline-flex;
  align-items: center;
  min-block-size: 34px;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-accent);
  white-space: nowrap;
}

.meeting__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-5);
  margin-block: var(--s-6);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
}

.meeting__cell { display: grid; gap: var(--s-2); align-content: start; }

.meeting__cell em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.meeting__cell b {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variation-settings: "wdth" 103, "wght" 700;
  letter-spacing: var(--tr-heading);
  color: var(--fg);
}

.consultation-form {
  display: grid;
  gap: var(--s-5);
  margin-block-start: var(--s-6);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
}

.consultation-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.consultation-form__field {
  display: grid;
  gap: var(--s-2);
}

.consultation-form__field--wide { grid-column: 1 / -1; }

.consultation-form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.consultation-form__label small {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.consultation-form__input {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.consultation-form__input::placeholder { color: var(--fg-dim); }

.consultation-form__input:focus {
  outline: none;
  border-color: var(--fg-accent);
  box-shadow: 0 0 0 3px var(--bg-tint-accent);
}

.consultation-form__textarea {
  min-block-size: 7rem;
  resize: vertical;
}

.consultation-form__error {
  color: var(--fg-negative);
  font-size: var(--fs-xs);
}

.consultation-form__status {
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--fg-positive) 45%, transparent);
  border-radius: var(--r-sm);
  background: var(--bg-tint-2);
  color: var(--fg-positive);
  font-size: var(--fs-sm);
}

.consultation-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.consultation-form__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .consultation-form__grid { grid-template-columns: minmax(0, 1fr); }
  .consultation-form__field--wide { grid-column: auto; }
  .consultation-form__actions .btn { inline-size: 100%; }
}

@media (max-width: 62rem) { .demo__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 62rem) { .faq__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Close + footer
   -------------------------------------------------------------------------- */

.close {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  border-block-start: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 50% 120%, color-mix(in srgb, var(--brand-accent) 16%, transparent) 0%, transparent 62%),
    var(--bg-sunken);
}

.close__inner { display: grid; gap: var(--s-6); justify-items: center; text-align: center; }
.close__title { max-width: 15ch; }
.close__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* --------------------------------------------------------------------------
   SECTION MOTION SCAFFOLDING
   The four elements assets/js/section-motion.js injects, plus the positioning
   contexts they need. They are created and destroyed by that module (tagged
   .js-anim-node so a language rebuild sweeps them), carry aria-hidden, and are
   pure decoration — every one of them is absent under prefers-reduced-motion
   and the sections read identically without them.

   They are all hairlines, because that is the vocabulary the rest of the page
   already speaks: rules, perforations and print heads.
   -------------------------------------------------------------------------- */

.ledger,
.about__principles,
.perm { position: relative; }

.reconcile__equation { position: relative; }

/* 01 — the print head that travels the feature ledger */
.ledger__head,
/* 07 — the scan that authorises the permission rows */
.perm__scan {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 4;
  block-size: 1px;
  background: var(--brand-accent);
  box-shadow:
    0 0 2px color-mix(in srgb, var(--brand-accent) 90%, transparent),
    0 0 24px 3px color-mix(in srgb, var(--brand-accent) 38%, transparent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 02 — the rule an accountant draws under a resolved total */
.reconcile__tally {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--s-4) * -1);
  block-size: 1px;
  background: var(--line-accent);
  pointer-events: none;
  will-change: transform;
}

/* 08 — the margin rule of a ruled page, drawn as the principles are written */
.about__ruler {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 1px;
  background: linear-gradient(to bottom, var(--line-accent), var(--line));
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 62rem) {
  /* The principles collapse to a two-column grid with no margin left to rule. */
  .about__ruler { display: none; }
}

.footer { border-block-start: 1px solid var(--line); padding-block: var(--s-7) var(--s-5); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  padding-block-end: var(--s-6);
  border-block-end: 1px solid var(--line);
}

.footer__col { display: grid; gap: var(--s-3); align-content: start; }

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-block-end: var(--s-1);
}

.footer__col a { color: var(--fg-muted); font-size: var(--fs-sm); transition: color var(--d-fast) var(--e-out); width: fit-content; }
.footer__col a:hover { color: var(--fg-accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
}

@media (max-width: 52rem) { .footer__top { grid-template-columns: 1fr; gap: var(--s-6); } }

/* --------------------------------------------------------------------------
   Language toggle
   -------------------------------------------------------------------------- */

.lang { flex: none; }
.lang .seg__btn { padding-inline: 0.8rem; }