@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/zen-400.woff) format("woff");unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/zen-700.woff) format("woff");unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
/* LOOQ landing. Colours and fonts: Gold Veins tokens. @font-face rules are prepended by build.py.
   Motion: only opacity and transform change over time, so the browser can move finished layers without painting them again. */
:root {
  --ink: #081521; --slate: #5B6C82; --muted: #8592A3;
  --white: #FFFFFF; --paper: #F6F8FB; --mist: #E3EBF6; --haze: #ECF0FF;
  --line: #DDE3F1; --line-strong: #C6D3EC;
  --blue: #2D5BFF; --deep: #0100D7; --sky: #8AA7FF; --on-deep: #D9E1FF;
  --lime: #D9FF47; --lime-ink: #5C7330; --on-lime: #2B3A08; --lime-tint: #F4FFD0;
  --night: #050A14; --night-2: #0B1424; --night-line: #1B2740; --night-text: #C9D4E8; --navy: #102338;
  --alert: #B8412C;
  --font: "Onest", "Zen Kaku Gothic New", "Yu Gothic UI", Meiryo, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1360px;
  --hdr: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--night-text);
  font-family: var(--font); font-size: 17px; line-height: 1.5;
  font-feature-settings: "ss01" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, canvas { display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
section[id] { scroll-margin-top: 56px; }
#story { scroll-margin-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--lime); color: var(--on-lime); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.paper :focus-visible { outline-color: var(--blue); }

/* ---------- type */
.display {
  font-size: clamp(40px, 4.6vw, 74px); font-weight: 560; line-height: 1; letter-spacing: -.042em;
  color: var(--white); text-wrap: balance;
}
html:lang(ru) .display { font-size: clamp(36px, 4.15vw, 66px); }
.h2 { font-size: clamp(36px, 4.7vw, 72px); font-weight: 560; line-height: 1; letter-spacing: -.04em; text-wrap: balance; color: var(--white); }
.paper .h2 { color: var(--ink); }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 14px; font-weight: 520; color: var(--night-text); }
.eyebrow--light { color: var(--slate); }
.mark { display: inline-flex; gap: 4px; }
.mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.mark i:nth-child(2) { background: var(--white); }
.mark i:nth-child(3) { background: var(--lime); }
.paper .mark i:nth-child(1) { background: var(--blue); }
.paper .mark i:nth-child(2) { background: var(--sky); }
.paper .mark i:nth-child(3) { box-shadow: inset 0 0 0 1.5px var(--lime-ink); }

html:lang(ja) body { line-height: 1.75; }
html:lang(ja) .display { font-size: clamp(32px, 3.75vw, 60px); font-weight: 700; line-height: 1.2; letter-spacing: 0; font-feature-settings: "palt" 1; }
html:lang(ja) .h2, html:lang(ja) .sstep__t, html:lang(ja) .statement__t, html:lang(ja) .ftr__tag {
  font-weight: 700; letter-spacing: 0; line-height: 1.24; font-feature-settings: "palt" 1;
}
html:lang(ja) .display, html:lang(ja) .h2, html:lang(ja) .sstep__t, html:lang(ja) .statement__t,
html:lang(ja) .ftr__tag, html:lang(ja) .lead, html:lang(ja) .sstep__d, html:lang(ja) .ppanel__text, html:lang(ja) .def__d,
html:lang(ja) .lv__note, html:lang(ja) .lv__card-t, html:lang(ja) .lv__list li, html:lang(ja) .rcpt__ai-t, html:lang(ja) .rcpt__tip,
html:lang(ja) .vsrc__d, html:lang(ja) .xtra__d, html:lang(ja) .stdfact__d, html:lang(ja) .stdfact__t, html:lang(ja) .venue__lead,
html:lang(ja) .rcpt__title, html:lang(ja) .rcpt__big span, html:lang(ja) .rcpt__row dt span, html:lang(ja) .pquote__t p, html:lang(ja) .qa summary span, html:lang(ja) .qa__a p {
  word-break: auto-phrase; line-break: strict;
}
html:lang(ja) .rcpt__label, html:lang(ja) .rcpt__tag, html:lang(ja) .rcpt__std, html:lang(ja) .stdmap__h, html:lang(ja) .vsrc__w, html:lang(ja) .seal__t { letter-spacing: .02em; }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px; font-size: 16px; font-weight: 560; letter-spacing: -.005em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lime { background: var(--lime); color: var(--on-lime); }
.btn--lime:hover { background: #C4E83A; }
.btn--ghost { color: var(--white); box-shadow: inset 0 0 0 1px var(--night-line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--sky); }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--deep); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }

/* ---------- header: solid enough to read over anything, no blur (blur behind a fixed bar costs every frame on phones) */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr); padding: 0 var(--pad);
  display: flex; align-items: center; gap: 28px; color: var(--white);
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-scrolled { background: rgba(5, 10, 20, .93); box-shadow: inset 0 -1px 0 var(--night-line); }
.hdr[data-theme="light"] { color: var(--ink); }
.hdr[data-theme="light"].is-scrolled { background: rgba(246, 248, 251, .95); box-shadow: inset 0 -1px 0 var(--line); }
.hdr__logo { display: block; color: inherit; padding: 6px 0; }
.hdr[data-theme="light"] .hdr__logo { color: var(--deep); }
.logo { height: 19px; width: auto; }
.hdr__nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.hdr__nav a { text-decoration: none; opacity: .74; transition: opacity .2s; }
.hdr__nav a:hover { opacity: 1; }
.langs { display: flex; gap: 2px; font-size: 13px; font-weight: 560; }
.langs a { padding: 6px 7px; border-radius: 6px; text-decoration: none; opacity: .5; transition: opacity .2s; }
.langs a:hover, .langs a[aria-current] { opacity: 1; }
.hdr__cta { margin-left: 2px; }
@media (max-width: 1040px) { .hdr__nav { display: none; } .hdr .langs { margin-left: auto; } }
@media (max-width: 480px) { :root { --hdr: 60px; } .hdr { gap: 10px; } .hdr__cta { padding: 0 14px; height: 38px; font-size: 14px; } .logo { height: 16px; } }

/* ---------- hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--night); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 56px; padding-top: calc(var(--hdr) + 44px); padding-bottom: 56px; }
.hero__copy { max-width: 600px; padding-top: 6px; }
.hero__lead { margin-top: 28px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__note { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.hero__note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.hero__visual { position: relative; display: grid; }

/* the printer slot the hero receipt comes out of */
.slot { position: relative; z-index: 4; justify-self: end; width: 344px; max-width: 100%; margin: -30px 30px 0 0; }
.slot__mouth { position: relative; z-index: 2; height: 12px; border-radius: 8px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); }
.slot__mouth i { position: absolute; right: 12px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); opacity: .3; }
.slot.is-printing .slot__mouth i { animation: led .45s steps(2, jump-none) infinite; }
.slot__paper { margin: -6px 12px 0; overflow: hidden; }
.slot .rcpt-wrap { --rw: 100%; }
.slot .rcpt__foot { display: none; }
.js .slot .rcpt-wrap { transform: translateY(-101%); }
.slot.is-printing .rcpt-wrap { animation: feed 1.5s var(--ease) forwards; }
.slot.is-printed .rcpt-wrap { transform: none; }
@keyframes feed { 0% { transform: translateY(-101%); } 30% { transform: translateY(-68%); } 38% { transform: translateY(-64%); } 100% { transform: none; } }
@keyframes led { 0% { opacity: .2; } 100% { opacity: 1; } }

/* ---------- receipt: a thermal slip. Blocks: flow and attention (the same on every receipt), this business, summary, LOOQ AI */
.rcpt-wrap { --zz: 7px; width: 100%; max-width: var(--rw, 344px); padding-bottom: calc(var(--zz) + 2px); }
.rcpt {
  --rbg: var(--paper); position: relative; background: var(--rbg); color: var(--ink);
  padding: 22px 22px 18px; border-radius: 8px 8px 0 0;
  font-size: 13.5px; line-height: 1.35; font-feature-settings: "tnum" 1, "ss01" 1;
}
/* the torn bottom edge: teeth in the paper colour; on light pages a copy one pixel lower draws their outline */
.rcpt::after, .paper .rcpt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--zz); pointer-events: none;
  background: conic-gradient(from -45deg at 50% 100%, var(--rbg) 90deg, transparent 0) 0 0 / calc(2 * var(--zz)) var(--zz) repeat-x;
}
.paper .rcpt { --rbg: var(--white); border: 1px solid var(--line); border-bottom: 0; }
.paper .rcpt::after, .paper .rcpt::before { left: -1px; right: -1px; }
.paper .rcpt::before { top: calc(100% + 1px); background-image: conic-gradient(from -45deg at 50% 100%, var(--line-strong) 90deg, transparent 0); }
.rcpt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rcpt__logo { height: 12px; width: auto; color: var(--deep); }
.rcpt__tag { padding: 3px 8px 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); }
.rcpt__title { margin-top: 18px; font-size: 20px; font-weight: 620; letter-spacing: -.02em; line-height: 1.15; }
.rcpt__meta { margin-top: 6px; color: var(--slate); font-size: 12.5px; line-height: 1.45; }
.rcpt__rule { height: 0; margin: 14px 0; border: 0; border-top: 1px dashed var(--line-strong); }
.rcpt__label { margin-bottom: 5px; font-size: 10px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); }
.rcpt__lines { display: grid; gap: 1px; }
.rcpt__row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 -6px; padding: 4px 6px; border-radius: 6px; transition: background-color .3s var(--ease); }
.rcpt__row dt { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.rcpt__row dt .dot, .rcpt__row dt .rtag { align-self: center; }
.rcpt__row dd { font-weight: 600; white-space: nowrap; }
/* flow and attention: each line with a bar, its share of everyone who passed */
.rcpt__block--attention .rcpt__row { padding-bottom: 12px; }
.rcpt__block--attention .rcpt__row dd { font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.rcpt__bar { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--mist); }
.paper .rcpt__bar { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.rcpt__bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.rcpt__row[data-line="saw"] .rcpt__bar i { background: var(--sky); }
.rcpt__row[data-line="looked"] .rcpt__bar i { background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-ink); }
/* "of them, a minute or more" hangs under its line */
.rcpt__row--sub { padding-left: 25px; font-size: 12.5px; color: var(--slate); }
.rcpt__row--sub::before { content: ""; position: absolute; left: 11px; top: 1px; width: 8px; height: 10px; border: solid var(--line-strong); border-width: 0 0 1px 1px; border-radius: 0 0 0 4px; }
.rcpt__row--sub dd { font-weight: 560; color: var(--ink); }
.rcpt__row.is-hl, .rcpt__src.is-hl, .rcpt__ai.is-hl { background: var(--lime-tint); }
.rtag { flex: none; padding: 2px 5px 1px; border-radius: 4px; font-size: 9.5px; font-weight: 660; line-height: 1.3; letter-spacing: .03em; }
.rtag--ai { background: var(--deep); color: var(--white); }
.rtag--pos { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
/* LOOQ AI: what happened, in plain words, and one thing to try */
.rcpt__ai { margin: 16px -8px 0; padding: 12px 14px 13px; border-radius: 12px; background: var(--haze); transition: background-color .3s var(--ease); }
.rcpt__ai-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 680; letter-spacing: .01em; color: var(--deep); }
.aimark { display: inline-grid; grid-template-columns: 4px 4px; grid-template-rows: 4px 4px; gap: 1px; }
.aimark i { background: var(--deep); }
.aimark i:nth-child(2) { background: var(--blue); }
.aimark i:nth-child(3) { grid-column: 2; background: var(--sky); }
.rcpt__ai-t { margin-top: 7px; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.rcpt__tip { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-strong); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.rcpt__tip b { font-weight: 660; color: var(--deep); }
.rcpt__src { margin: 10px -6px 0; padding: 4px 6px; border-radius: 6px; font-size: 11.5px; line-height: 1.45; color: var(--slate); transition: background-color .3s var(--ease); }
.rcpt__src span { font-weight: 620; color: var(--ink); }
.rcpt__rule--foot { margin-top: 16px; }
.rcpt__std { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; }
.rcpt__std span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--deep); }
.rcpt__std span:first-child::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--deep); }
.rcpt__std span:last-child { color: var(--slate); font-feature-settings: "tnum" 1; }
.rcpt__foot { margin-top: 8px; font-size: 11.5px; color: var(--slate); }
.rcpt__codewrap { margin-top: 14px; }
.rcpt__code { width: 176px; max-width: 100%; height: 12px; fill: var(--ink); }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dot--passed { background: var(--blue); }
.dot--saw { background: var(--sky); }
.dot--looked { background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime-ink); }
.dot--action { box-shadow: inset 0 0 0 2px var(--ink); }
.dot--cost { border-radius: 3px; background: var(--ink); }

/* printing: the slip slides out of its holder (one moving layer), its lines appear one by one */
.js .rcpt-wrap--full, .js .story__receipt .rcpt-wrap { overflow: hidden; }
.js .rcpt-wrap--full .rcpt, .js .story__receipt .rcpt { transform: translateY(calc(-100% - var(--zz) - 4px)); }
.js .rcpt-wrap .rcpt.is-printing { transform: none; transition: transform 1.3s var(--ease); }
.js .rcpt-wrap .rcpt.is-printed { transform: none; }
.rcpt.is-printing > :not(.rcpt__block), .rcpt.is-printing .rcpt__label, .rcpt.is-printing .rcpt__row { animation: rline .6s var(--ease) both; animation-delay: calc(var(--i) * 40ms + 160ms); }
@keyframes rline { from { opacity: 0; } to { opacity: 1; } }

/* ---------- camera views: the photo on the left of the handle, LOOQ Vision on the right.
   app.js moves the vision box right and its content back left by the same amount: two moves, no repaint. */
.lv { --u: 1.6; position: relative; container-type: inline-size; }
.lv__frame {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: var(--night-2);
  box-shadow: 0 0 0 1px var(--night-line); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize;
}
.lv__img, .story__img, .smap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.lv__vision { position: absolute; inset: 0; overflow: hidden; transform: translateX(8%); }
.lv__vision-in { position: absolute; inset: 0; transform: translateX(-8%); }
/* with the script the view starts as the plain photo; app.js then sets these inline */
.js .lv__vision { transform: translateX(100%); }
.js .lv__vision-in { transform: translateX(-100%); }
.lv.is-glide .lv__vision, .lv.is-glide .lv__vision-in { transition: transform var(--glide, .75s) var(--ease-io); }
.lv.is-glide .lv__handle { transition: translate var(--glide, .75s) var(--ease-io); }
.lv.is-drag .lv__vision, .lv.is-drag .lv__vision-in { will-change: transform; }
.lv__dim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(138, 167, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
              linear-gradient(90deg, rgba(138, 167, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
              rgba(5, 10, 20, .52);
}
.lv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }

/* the drawing: poses, view cones, zones, dwell rings, trails (sizes in photo pixels times --u) */
.zone { fill: rgba(138, 167, 255, .08); stroke: var(--sky); stroke-width: calc(var(--u) * 1.25px); stroke-dasharray: calc(var(--u) * 6px) calc(var(--u) * 5px); stroke-linejoin: round; }
.target { fill: rgba(217, 255, 71, .1); stroke: var(--lime); stroke-width: calc(var(--u) * 2px); stroke-linejoin: round; }
.cg stop { stop-color: var(--white); }
.cg stop:first-child { stop-opacity: .34; }
.cg stop:last-child { stop-opacity: 0; }
.cg--look stop { stop-color: var(--lime); }
.cg--look stop:first-child { stop-opacity: .62; }
.cg--see stop { stop-color: var(--sky); }
.cg--see stop:first-child { stop-opacity: .5; }
.cg--phone stop:first-child { stop-opacity: .26; }
.bone { fill: none; stroke: rgba(255, 255, 255, .82); stroke-width: calc(var(--u) * 2px); stroke-linecap: round; stroke-linejoin: round; }
.joint { fill: none; stroke: var(--white); stroke-width: calc(var(--u) * 5px); stroke-linecap: round; }
.hd { fill: rgba(255, 255, 255, .16); stroke: var(--white); stroke-width: calc(var(--u) * 1.5px); }
.pp--look .bone, .pp--look .joint { stroke: var(--lime); }
.pp--look .hd { stroke: var(--lime); fill: rgba(217, 255, 71, .24); }
.pp--see .bone, .pp--see .joint { stroke: var(--sky); }
.pp--see .hd { stroke: var(--sky); fill: rgba(138, 167, 255, .24); }
.pp--staff { opacity: .55; }
.pp--staff .bone, .pp--staff .joint, .pp--staff .hd { stroke: var(--muted); }
.dwell ellipse { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .7); stroke-width: calc(var(--u) * 1.5px); stroke-dasharray: calc(var(--u) * 4px) calc(var(--u) * 4px); }
.dwell--in ellipse { fill: rgba(217, 255, 71, .16); stroke: var(--lime); stroke-dasharray: none; }
.dwell text { fill: var(--lime); font-family: var(--font); font-size: calc(var(--u) * 13px); font-weight: 640; font-feature-settings: "tnum" 1; paint-order: stroke; stroke: rgba(5, 10, 20, .7); stroke-width: calc(var(--u) * 3px); }
.dwell--out text { fill: var(--white); }
.trail { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: calc(var(--u) * 2.4px); stroke-linecap: round; stroke-dasharray: 0 calc(var(--u) * 8px); }
.trail--ahead { stroke: var(--white); stroke-width: calc(var(--u) * 2px); stroke-dasharray: none; stroke-linejoin: round; }
.pin line { stroke: rgba(255, 255, 255, .75); stroke-width: calc(var(--u) * 1.2px); }
.pin circle { fill: var(--white); r: calc(var(--u) * 3.5px); }

/* labels over the drawing */
.lv__tl {
  position: absolute; transform: translateY(-100%); padding: 3px 8px; border-radius: 6px 6px 6px 0;
  background: var(--lime); color: var(--on-lime); font-size: 12px; font-weight: 620; line-height: 1.3; white-space: nowrap;
}
/* AI notes float next to their people (app.js finds the place) when the view is wide enough;
   otherwise the photo shows numbers and the notes are listed under it */
.lv__note {
  position: absolute; z-index: 1; display: none; width: max-content; max-width: min(240px, 27cqw); padding: .55em .78em .62em; border-radius: .8em;
  background: var(--paper); color: var(--ink); font-size: clamp(11px, 1.6cqw, 13px); line-height: 1.32; text-wrap: pretty; pointer-events: none;
}
.lv__ai { display: inline-block; margin-right: .5em; padding: .2em .42em .1em; border-radius: .34em; background: var(--deep); color: var(--white); font-size: .76em; font-weight: 660; line-height: 1.3; letter-spacing: .03em; vertical-align: .1em; }
.lv__num {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--white); color: var(--night); font-size: 11px; font-weight: 680; font-feature-settings: "tnum" 1;
}
.pin line { display: none; }
.lv__list { display: grid; gap: 8px; counter-reset: note; }
.lv__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; font-size: 14px; line-height: 1.42; color: var(--white); counter-increment: note; }
.lv__list li::before { content: counter(note); display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--white); color: var(--night); font-size: 11px; font-weight: 680; font-feature-settings: "tnum" 1; }
.lv__notes { margin-top: 16px; }
.lv__notes .lv__list, .lv__card .lv__list { margin-top: 10px; }
@container (min-width: 560px) {
  .js .lv:not(.lv--list) .lv__note { display: block; }
  .js .lv:not(.lv--list) .lv__num { display: none; }
  .js .lv:not(.lv--list) .pin line { display: inline; }
  .js .lv:not(.lv--list) .lv__list, .js .lv:not(.lv--list) .lv__notes {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.lv__chip-t { margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.lv__chip dl { display: flex; gap: 16px; }
.lv__count { display: flex; flex-direction: column-reverse; }
.lv__count dt { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--night-text); white-space: nowrap; }
.lv__count dt::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.lv__count--saw dt::before { background: var(--sky); }
.lv__count--looked dt::before { background: var(--lime); }
.lv__count--stopped dt::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--white); }
.lv__count dd { font-size: 22px; font-weight: 640; line-height: 1.1; letter-spacing: -.02em; color: var(--white); font-feature-settings: "tnum" 1; }

/* the controls */
.lv__bar { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.lv__toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(5, 10, 20, .84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: auto; }
.lv__btn { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--night-text); font-size: 13px; font-weight: 560; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.lv__btn:hover { color: var(--white); }
.lv__btn[aria-pressed="true"] { background: var(--white); color: var(--night); }
.lv__btn[data-x="0"][aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.lv__btn:focus-visible { outline-offset: 1px; }
.lv__rec { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(5, 10, 20, .66); font-size: 11px; font-weight: 560; letter-spacing: .05em; color: var(--white); white-space: nowrap; font-feature-settings: "tnum" 1; }
.lv__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--alert); animation: led 1.2s steps(2, jump-none) infinite alternate; }
.lv__handle { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 44px; margin-left: -22px; translate: max(22px, 8cqw) 0; cursor: ew-resize; touch-action: none; outline: none; border-radius: 0; }
.js .lv__handle { translate: calc(100cqw - 22px) 0; }
.lv__handle::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--white); box-shadow: 0 0 0 1px rgba(5, 10, 20, .22); }
.lv__grip { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(5, 10, 20, .2); transition: transform .25s var(--ease); }
.lv__grip::before, .lv__grip::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.lv__grip::before { left: 8px; border-right: 6px solid var(--night); border-left-width: 0; }
.lv__grip::after { right: 8px; border-left: 6px solid var(--night); border-right-width: 0; }
.lv__frame:hover .lv__grip, .lv.is-drag .lv__grip { transform: scale(1.08); }
.lv__handle:focus-visible .lv__grip { outline: 2px solid var(--lime); outline-offset: 3px; }

/* the AI summary of the scene: a strip under a camera view, a card over the story */
.lv__card { color: var(--night-text); }
.lv__card-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 620; letter-spacing: .02em; color: var(--lime); }
.lv__card-h i, .live { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.lv__card-h i::after, .live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.lv__card-t { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--white); text-wrap: pretty; }
.lv__card-h--data { color: var(--sky); }
.lv__data { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lv__data li { padding: 3px 9px; border-radius: 999px; background: rgba(138, 167, 255, .14); color: var(--on-deep); font-size: 12.5px; }
.lv--card .lv__frame { border-radius: 16px 16px 0 0; }
.lv .lv__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip ai" "chip data"; gap: 12px 30px; align-items: start;
  padding: 16px 20px 18px; border-radius: 0 0 16px 16px; background: var(--night-2); box-shadow: 0 0 0 1px var(--night-line);
}
.lv .lv__chip { grid-area: chip; align-self: stretch; padding-right: 30px; border-right: 1px solid var(--night-line); }
.lv .lv__chip dl { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 22px; }
.lv__card-a { grid-area: ai; }
.lv__card-d { grid-area: data; }

/* when a view first turns on, its layers fade in one after another: poses, then gaze and zones, then the AI notes */
.js .lv .lv__svg--bones { opacity: 0; transition: opacity .7s var(--ease) .15s; }
.js .lv .lv__svg--marks, .js .lv .lv__tl { opacity: 0; transition: opacity .8s var(--ease) .55s; }
.js .lv .lv__svg--pins, .js .lv .lv__note, .js .lv .lv__num { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--n, 0) * .18s + 1.1s); }
.js .lv.is-on .lv__svg--bones, .js .lv.is-on .lv__svg--marks, .js .lv.is-on .lv__tl,
.js .lv.is-on .lv__svg--pins, .js .lv.is-on .lv__note, .js .lv.is-on .lv__num { opacity: 1; }

@container (max-width: 620px) {
  .lv .lv__card { grid-template-columns: 1fr; grid-template-areas: "chip" "ai" "data"; gap: 14px; padding: 14px 16px 16px; }
  .lv .lv__chip { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--night-line); }
  .lv .lv__chip dl { display: flex; gap: 14px; }
  .lv__count dd { font-size: 19px; }
  .lv__tl { font-size: 10.5px; padding: 2px 6px; }
  .lv__bar { left: 8px; right: 8px; top: 8px; }
  .lv__btn { height: 28px; padding: 0 10px; font-size: 12px; }
  .lv__rec { display: none; }
  .lv__grip { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
}

/* ---------- the story (pinned): one mall camera, step by step.
   app.js puts is-s1 ... is-s5 on the stage as the steps pass; every change is a timed fade or move of a whole layer. */
.story { position: relative; height: 560vh; height: 560svh; background: var(--night); }
.story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; container-type: size; }
.story__view { position: absolute; inset: 0; }
.story__frame, .smap {
  position: absolute; left: 0; top: calc(50cqh - 33.333cqw); width: 100cqw; aspect-ratio: 3 / 2;
  --crop: max(0px, 33.333cqw - 50cqh); transform-origin: 97.4% 66%;
}
.story__frame { --u: 1.07; z-index: 1; transition: transform 1.1s var(--ease-io), opacity .3s var(--ease); }
.story__wipe, .story__wipe-in { position: absolute; inset: 0; }
.story__wipe { overflow: hidden; }
/* 1: LOOQ Vision slides in from the right behind a lime scan line */
.js .story__wipe { transform: translateX(100%); transition: transform 1.1s var(--ease-io); }
.js .story__wipe-in { transform: translateX(-100%); transition: transform 1.1s var(--ease-io); }
.js .story .is-s1 .story__wipe, .js .story .is-s1 .story__wipe-in { transform: none; }
.story__scan { position: absolute; top: 0; bottom: 0; left: -1px; z-index: 1; width: 2px; background: var(--lime); opacity: 0; pointer-events: none; }
.js .story .is-s1 .story__scan { animation: scan 1.1s var(--ease-io) both; }
@keyframes scan { from { transform: translateX(100cqw); opacity: 1; } 88% { opacity: 1; } to { transform: none; opacity: 0; } }
/* 2: gaze, zones and trails, the counts */
.js .story .lv__svg--marks, .js .story .lv__tl, .js .story .lv__chip--story { opacity: 0; transition: opacity .35s var(--ease); }
.js .story .is-s2 .lv__svg--marks, .js .story .is-s2 .lv__tl, .js .story .is-s2 .lv__chip--story { opacity: 1; transition: opacity .7s var(--ease) .1s; }
/* 3: the AI notes, one after another, and the summary */
.js .story .lv__svg--pins, .js .story .lv__note, .js .story .lv__num, .js .story .lv__card--story { opacity: 0; transition: opacity .3s var(--ease), translate .3s var(--ease); }
.js .story .lv__note, .js .story .lv__card--story { translate: 0 10px; }
.js .story .is-s3 .lv__svg--pins { opacity: 1; transition: opacity .6s var(--ease) .1s; }
.js .story .is-s3 .lv__note, .js .story .is-s3 .lv__num { opacity: 1; translate: none; transition: opacity .6s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--n) * .16s + .2s); }
.js .story .is-s3 .lv__card--story { opacity: 1; translate: none; transition: opacity .6s var(--ease) .65s, translate .8s var(--ease) .65s; }
/* 4: the frame shrinks into its camera on the mall map */
.js .story .is-s4 .story__frame { transform: scale(.07); opacity: 0; transition: transform 1.2s var(--ease-io), opacity .4s var(--ease) .8s; }
.lv__chip--story, .lv__card--story {
  position: absolute; left: calc(var(--pad) + min(520px, 38cqw) + 40px); bottom: calc(var(--crop) + 9cqh);
  border-radius: 14px; background: rgba(5, 10, 20, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.lv__chip--story { padding: 11px 15px 12px; }
.lv__card--story { bottom: calc(var(--crop) + 9cqh + 104px); width: 360px; padding: 14px 16px 15px; }
.sstep__list { margin-top: 16px; }
@media (min-width: 761px) and (orientation: landscape), (min-width: 1001px) {
  .js .story:not(.story--list) .lv__note { display: block; }
  .js .story:not(.story--list) .lv__num { display: none; }
  .js .story:not(.story--list) .pin line { display: inline; }
  .js .story:not(.story--list) .sstep__list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.story__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 10, 20, .9) 0, rgba(5, 10, 20, .55) 24%, rgba(5, 10, 20, 0) 46%),
              linear-gradient(90deg, rgba(5, 10, 20, .55) 0, rgba(5, 10, 20, 0) 44%);
}
/* step text: the old one leaves upward fast, the new one rises a moment later */
.story__steps { position: absolute; z-index: 3; left: var(--pad); bottom: 12cqh; width: min(520px, 38cqw); height: 1px; }
.sstep { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; }
.js .sstep { opacity: 0; transform: translateY(18px); transition: opacity .22s var(--ease), transform .4s var(--ease); }
.js .sstep.is-past { transform: translateY(-14px); }
.js .sstep.is-on { opacity: 1; transform: none; transition: opacity .5s var(--ease) .2s, transform .75s var(--ease) .2s; }
.sstep__n { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 560; color: var(--sky); font-feature-settings: "tnum" 1; }
.sstep__t { font-size: clamp(30px, 3.3vw, 52px); font-weight: 560; line-height: 1.04; letter-spacing: -.035em; color: var(--white); text-wrap: balance; }
.sstep__d { margin-top: 16px; max-width: 30em; font-size: clamp(16px, 1.25vw, 19px); color: var(--night-text); text-wrap: pretty; }
.story__rail { position: absolute; z-index: 3; left: var(--pad); bottom: 6cqh; display: flex; gap: 6px; }
.story__rail i { position: relative; width: 30px; height: 2px; overflow: hidden; background: var(--night-line); }
.story__rail i::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(var(--f, 0)); transform-origin: left; }
/* right of the step text; nearer the middle on wide screens */
.story__receipt { position: absolute; z-index: 4; left: max(calc(var(--pad) + min(520px, 38cqw) + 40px), calc(75cqw - 368px)); top: 50%; width: 320px; transform: translateY(-50%); visibility: hidden; }
.story__receipt.is-on { visibility: visible; }
.story__receipt .rcpt-wrap { --rw: 320px; }
.story__receipt .rcpt__codewrap { display: none; }

/* the top view of the mall: every camera, the busy zones, the main flows */
.smap { z-index: 0; }
.js .smap { transform: scale(1.15); opacity: 0; transition: transform 1.1s var(--ease-io), opacity .4s var(--ease) .2s; }
.js .story .is-s4 .smap { transform: none; opacity: 1; transition: transform 1.2s var(--ease-io), opacity .6s var(--ease) .3s; }
.smap__dim { position: absolute; inset: 0; background: rgba(5, 10, 20, .46); }
.smap__shade { position: absolute; inset: 0; background: var(--night); opacity: 0; transition: opacity .5s var(--ease); }
.js .story .is-s5 .smap__shade { opacity: .55; }
.smap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz { fill: var(--sky); fill-opacity: calc(var(--h) * .42); stroke: var(--sky); stroke-opacity: calc(var(--h) * .9); stroke-width: 2; }
.mz--hot { fill: var(--lime); stroke: var(--lime); }
.flow { fill: none; stroke: var(--white); stroke-opacity: .6; stroke-width: var(--w); stroke-linecap: round; stroke-dasharray: .1 30; }
/* the flows move only while the map is the picture */
.js .story .is-s4:not(.is-s5) .flow { animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -30.1; } }
.mcone { fill: rgba(138, 167, 255, .12); stroke: var(--sky); stroke-width: 2; stroke-dasharray: 8 6; stroke-linejoin: round; }
.mcone--this { fill: rgba(217, 255, 71, .18); stroke: var(--lime); stroke-dasharray: none; stroke-width: 3; }
.mcam { fill: var(--sky); stroke: var(--night); stroke-width: 5; }
.mcam--this { fill: var(--lime); }
.smap__l, .smap__data li { border-radius: 999px; background: rgba(5, 10, 20, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--white); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.smap__l { position: absolute; padding: 5px 11px; }
.smap__l--this { transform: translate(-100%, 8px); color: var(--lime); }
.smap__l--others { color: var(--sky); }
.smap__l--zone { transform: translateY(calc(-100% - 6px)); color: var(--lime); }
.smap__l--flow { transform: translateY(calc(-100% - 4px)); }
.smap__data { position: absolute; left: var(--pad); top: calc(var(--crop) + var(--hdr) + 18px); display: grid; justify-items: start; gap: 8px; }
.smap__data li { padding: 8px 14px; font-size: 14px; }
/* labels and venue data come after the zoom and step back when the receipt prints over the map */
.js .story .smap__l, .js .story .smap__data { opacity: 0; transition: opacity .3s var(--ease); }
.js .story .is-s4 .smap__l, .js .story .is-s4 .smap__data { opacity: 1; transition: opacity .6s var(--ease) .95s; }
.js .story .is-s5 .smap__l, .js .story .is-s5 .smap__data { opacity: 0; transition: opacity .3s var(--ease); }

/* app.js measures the AI notes with every layer in its final place and nothing moving */
.is-still, .is-still *, .is-still *::before, .is-still *::after { transition: none !important; }
.is-measure .story__frame { transform: none !important; opacity: 1 !important; }
.is-measure .sstep { transform: none !important; }
.is-measure .lv__note, .is-measure .lv__card--story, .is-measure .lv__chip--story { translate: none !important; }

/* ---------- paper sections with torn edges */
.paper { position: relative; z-index: 2; background: var(--paper); color: var(--ink); }
.torn { --zz: 12px; }
.torn::before, .torn::after { content: ""; position: absolute; left: 0; right: 0; height: var(--zz); pointer-events: none; }
.torn::before { top: calc(1px - var(--zz)); background: conic-gradient(from 135deg at 50% 0, var(--paper) 90deg, transparent 0) 0 0 / calc(2 * var(--zz)) var(--zz) repeat-x; }
.torn::after { bottom: calc(1px - var(--zz)); background: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0) 0 0 / calc(2 * var(--zz)) var(--zz) repeat-x; }
.torn--top::after, .torn--bottom::before { display: none; }

/* ---------- the receipt explained: the receipt stays beside the text, the line being read lights up on it */
.explain { padding: 150px 0 160px; }
.explain__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "head receipt" "body receipt"; column-gap: 88px; align-items: start; }
.explain__head { grid-area: head; }
.explain .lead { margin-top: 24px; color: var(--slate); }
.explain__body { grid-area: body; container-type: inline-size; }
/* app.js lowers top for a receipt taller than the screen, so its end stays in view */
.explain__receipt { grid-area: receipt; position: sticky; top: calc(var(--hdr) + 32px); display: flex; justify-content: flex-end; }
.explain__receipt .rcpt-wrap { --rw: 400px; }
.dgroups { display: grid; gap: 34px; margin-top: 52px; }
.dgroup__t { display: flex; align-items: center; gap: 10px; padding-left: 16px; font-size: 14px; font-weight: 600; color: var(--slate); }
.dgroup__ic { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 4px; font-size: 9.5px; font-style: normal; font-weight: 660; letter-spacing: .03em; }
.dgroup--cam .dgroup__ic { min-width: 0; width: 22px; padding: 0; background: radial-gradient(circle, var(--paper) 0 2.5px, var(--ink) 3px); }
.dgroup--ai .dgroup__ic { background: var(--deep); color: var(--white); }
.venue .dgroup__ic { min-width: 0; width: 18px; padding: 0; box-shadow: inset 0 0 0 1.5px var(--ink); background: linear-gradient(var(--ink) 0 0) 50% 50% / 8px 1.5px no-repeat, linear-gradient(var(--ink) 0 0) 50% 50% / 1.5px 8px no-repeat; }
.xtras .dgroup__ic { min-width: 0; width: 18px; padding: 0; border-radius: 2px;
  background: linear-gradient(var(--ink) 0 0) 1px 100% / 4px 55% no-repeat, linear-gradient(var(--blue) 0 0) 7px 100% / 4px 100% no-repeat, linear-gradient(var(--ink) 0 0) 13px 100% / 4px 35% no-repeat; }
.defs { display: grid; gap: 2px; margin-top: 10px; }
.def { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 16px 20px 16px 16px; border-radius: 14px; transition: background-color .3s var(--ease); outline-offset: -2px; }
.def .dot, .def__mark { margin-top: 8px; width: 12px; height: 12px; }
.def__mark { display: inline-block; border-radius: 3px; }
.def__mark--cam { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.def__mark--ai { background: var(--deep); }
.def__mark--pos { box-shadow: inset 0 0 0 2px var(--ink); }
.def__t { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.def__d { grid-column: 2; margin-top: 4px; font-size: 16px; color: var(--slate); max-width: 34em; }
.def:hover, .def.is-hl { background: var(--white); }

/* what the venue adds: the data it already has, next to the counts for the same hour */
.venue { margin-top: 64px; }
.venue__lead { margin-top: 10px; padding-left: 16px; max-width: 36em; font-size: 16px; color: var(--slate); text-wrap: pretty; }
.venue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.vsrc { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "ic t" "ic d" "ic w"; column-gap: 14px; align-content: start; padding: 16px 18px 17px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.vsrc__ic { grid-area: ic; width: 24px; height: 24px; fill: none; stroke: var(--deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vsrc__t { grid-area: t; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.vsrc__d { grid-area: d; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--slate); }
.vsrc__w { grid-area: w; margin-top: 10px; font-size: 10.5px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }

/* the summary lines of every receipt, each drawn from the stand sample */
.xtras { margin-top: 64px; }
.xtras__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.xtra { display: grid; grid-template-rows: auto auto 1fr; align-content: start; padding: 18px 18px 20px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); outline-offset: -2px; }
.xtra:hover, .xtra.is-hl { box-shadow: inset 0 0 0 1.5px var(--blue); }
.xfig { display: flex; flex-direction: column; min-height: 104px; }
.xfig__big { font-size: 26px; font-weight: 640; letter-spacing: -.03em; line-height: 1.1; font-feature-settings: "tnum" 1; }
.xfig__bars { width: 100%; height: 44px; margin-top: auto; }
.xfig__bars rect { fill: var(--mist); }
.xfig__bars rect.is-you { fill: var(--blue); }
.xfig__axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--slate); font-feature-settings: "tnum" 1; }
.xfig__sum { margin-top: auto; padding: 8px 10px; border-radius: 8px; background: var(--paper); font-size: 13px; line-height: 1.35; color: var(--slate); font-feature-settings: "tnum" 1; }
.xtra__t { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.xtra__d { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
@container (max-width: 640px) {
  .xtras__list { grid-template-columns: 1fr; }
  .xtra { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; }
  .xfig { grid-row: span 2; }
  .xtra__t { margin-top: 0; padding-top: 0; border-top: 0; }
}
@container (max-width: 440px) {
  .venue__grid { grid-template-columns: 1fr; }
  .xtra { grid-template-columns: 1fr; }
  .xfig { grid-row: auto; min-height: 92px; }
  .xtra__t { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
}

/* ---------- picker */
.picker { position: relative; padding: 160px 0 150px; background: var(--night); }
.tabs { position: relative; display: inline-flex; max-width: 100%; margin-top: 44px; padding: 5px; overflow-x: auto; border-radius: 999px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; z-index: 1; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--night-text); font-size: 15px; font-weight: 540; white-space: nowrap; cursor: pointer; transition: color .35s var(--ease); }
.tab:hover { color: var(--white); }
.tab[aria-selected="true"] { color: var(--night); }
.tab:focus-visible { outline-offset: -2px; }
.tabs__ink { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; background: var(--white); transition: transform .55s var(--ease), width .55s var(--ease); }
.picker__body { margin-top: 32px; }
.ppanel { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "view receipt" "copy receipt"; gap: 32px 44px; align-items: start; }
.ppanel[hidden] { display: none; }
.ppanel__view { grid-area: view; }
.ppanel__receipt { grid-area: receipt; }
.ppanel__receipt .rcpt-wrap { --rw: 380px; }
.ppanel__copy { grid-area: copy; display: grid; gap: 14px; align-content: start; max-width: 640px; }
.ppanel__who { font-size: 14px; font-weight: 560; color: var(--sky); }
.ppanel__text { font-size: clamp(21px, 1.8vw, 27px); line-height: 1.3; letter-spacing: -.015em; color: var(--white); text-wrap: pretty; }
.ppanel__price { margin: 4px 0 10px; font-size: 16px; color: var(--night-text); }
.ppanel__copy .btn { justify-self: start; }
.ppanel.is-in .ppanel__copy { animation: up .7s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- standard: online measures and their LOOQ counterparts, four receipts with the same first block, the rules */
.standard { padding: 160px 0 160px; overflow-x: clip; }
.standard__head { max-width: 860px; }
.standard .lead { margin-top: 24px; color: var(--slate); }
.stdmap { max-width: 920px; margin-top: 60px; padding: 6px 28px 8px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.stdmap__h, .stdmap__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.4fr); align-items: center; }
.stdmap__h { padding: 16px 0 12px; font-size: 10.5px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); }
.stdmap__h span:last-child { grid-column: 3; color: var(--deep); }
.stdmap__row { padding: 15px 0; border-top: 1px solid var(--line); }
.stdmap__on { font-size: 17px; line-height: 1.35; color: var(--slate); }
.stdmap__arrow { position: relative; height: 1px; margin: 0 14px; background: var(--line-strong); }
.stdmap__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid var(--slate); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.stdmap__off { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.stdmap__off .dot { width: 12px; height: 12px; margin-top: 6px; }
.deck { margin-top: 80px; }
.deck__key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; font-size: 13.5px; font-weight: 560; color: var(--slate); }
.deck__key span { display: inline-flex; align-items: center; gap: 9px; }
.deck__key span::before { content: ""; width: 22px; height: 12px; border-radius: 4px; }
.deck__key-shared::before { background: var(--haze); box-shadow: inset 0 0 0 1px var(--sky); }
.deck__key-own::before { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.deck__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.deck__card .rcpt-wrap { --rw: 100%; }
/* the shared block, tinted the same on every receipt: it lines up across the row */
.deck .rcpt__block--attention { margin: 0 -10px; padding: 8px 10px 4px; border-radius: 10px; background: var(--haze); box-shadow: inset 0 0 0 1px rgba(138, 167, 255, .55); }
.deck .rcpt__block--attention .rcpt__bar { background: var(--white); box-shadow: none; }
.rcpt--mini { padding: 16px 16px 14px; font-size: 12.5px; }
.rcpt--mini .rcpt__title { height: 2.4em; display: flex; align-items: flex-end; font-size: 16px; line-height: 1.2; }
.rcpt--mini .rcpt__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcpt--mini .rcpt__block--attention .rcpt__row dd { font-size: 14px; }
.stdfacts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 96px; }
.seal {
  display: grid; justify-items: center; align-content: center; gap: 7px; width: 148px; height: 148px; border-radius: 50%; background: var(--white); text-align: center;
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--line-strong);
}
.seal__logo { height: 13px; width: auto; color: var(--deep); }
.seal__t { max-width: 96px; font-size: 9.5px; font-weight: 640; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; color: var(--slate); }
.seal__v { font-size: 30px; font-weight: 640; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-feature-settings: "tnum" 1; }
.stdfacts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.stdfact { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.stdfact__t { font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.stdfact__d { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }

.statement { position: relative; padding: 150px 0 190px; background: var(--night); }
.statement__t { max-width: 17em; font-size: clamp(34px, 4.5vw, 70px); font-weight: 540; line-height: 1.05; letter-spacing: -.04em; color: var(--white); text-wrap: balance; }
.statement__sub { display: flex; align-items: center; gap: 12px; margin-top: 36px; font-size: 18px; color: var(--night-text); }

/* ---------- proof: what LOOQ really did, printed as receipts, and what a client said (the .quote of looq.css, for screens) */
.proof { padding: 160px 0 70px; }
.pquote { max-width: 46rem; margin-top: 56px; padding-left: 24px; border-left: 6px solid var(--lime); }
.pquote__t p { font-size: clamp(22px, 2.5vw, 34px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.pquote__t p::before { content: "\201C"; } .pquote__t p::after { content: "\201D"; }
html:lang(ja) .pquote__t p::before { content: "\300C"; } html:lang(ja) .pquote__t p::after { content: "\300D"; }
html:lang(ru) .pquote__t p::before { content: "\00AB"; } html:lang(ru) .pquote__t p::after { content: "\00BB"; }
.pquote__who { margin-top: 14px; font-size: 15px; color: var(--slate); }
.pquote__note { display: block; margin-top: 2px; font-size: 13px; }
.proof__list { margin-top: 48px; }
.rcpt--track { padding: 18px 18px 16px; font-size: 13px; }
.rcpt--track .rcpt__title { margin-top: 16px; min-height: 2.3em; display: flex; align-items: flex-end; font-size: 18px; line-height: 1.15; }
.rcpt--track .rcpt__meta { min-height: 4.35em; }
.rcpt--track .rcpt__row dd { font-size: 14px; font-weight: 640; }
.rcpt__big b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--deep); font-variant-numeric: tabular-nums; }
.rcpt__big span { display: block; min-height: 2.8em; margin-top: 7px; font-size: 13px; line-height: 1.4; text-wrap: pretty; }
.rcpt--track .rcpt__ai { margin-top: 14px; }
.rcpt--track .rcpt__lines { grid-template-columns: minmax(0, 1fr); }
.rcpt__tag--real { background: var(--lime); box-shadow: none; color: var(--on-lime); }
.rtick { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; fill: none; stroke: var(--deep); stroke-width: 2.4; stroke-linecap: square; }

/* ---------- prices */
.prices { padding: 100px 0 90px; }
.prices__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 88px; align-items: start; }
.prices__copy .lead { margin-top: 24px; color: var(--slate); }
.prices__copy .btn { margin-top: 34px; }
.menu { display: grid; gap: 34px; }
.menu__name { margin-bottom: 4px; font-size: 14px; font-weight: 560; color: var(--slate); }
.menu__row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; }
.menu__row dt { font-size: 18px; line-height: 1.35; }
.menu__lead { flex: 1 1 auto; min-width: 18px; border-bottom: 1.5px dotted var(--line-strong); transform: translateY(-5px); }
.menu__row dd { font-size: 20px; font-weight: 620; white-space: nowrap; font-feature-settings: "tnum" 1; }

/* ---------- faq */
.faq { padding: 90px 0 160px; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 88px; }
.qa { border-top: 1px solid var(--line-strong); }
.qa:last-child { border-bottom: 1px solid var(--line-strong); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; list-style: none; font-size: 19px; font-weight: 540; letter-spacing: -.01em; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: 4px; }
.qa__icon { position: relative; flex: none; width: 16px; height: 16px; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .4s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0); }
.qa__a p { max-width: 40em; padding: 0 48px 26px 0; font-size: 17px; color: var(--slate); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .qa::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}

/* ---------- contact */
.contact { position: relative; padding: 170px 0 150px; background: var(--night); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 88px; align-items: start; }
.contact .lead { margin-top: 24px; }
.contact__alt { margin-top: 30px; color: var(--night-text); }
.contact__alt a { color: var(--white); }
.form { display: grid; gap: 18px; padding: 32px; border-radius: 20px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); }
.field label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--night-text); }
.field input, .field textarea { display: block; width: 100%; padding: 14px 16px; border: 0; border-radius: 10px; background: var(--night); color: var(--white); font: inherit; font-size: 17px; box-shadow: inset 0 0 0 1px var(--night-line); transition: box-shadow .2s; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sky); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--alert, #B8412C); }
.field__err { margin-top: 8px; font-size: 14px; color: #F0C9C0; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.form__privacy { font-size: 14px; color: var(--muted); }
.form__privacy:hover { color: var(--white); }
.form__done { padding: 14px 16px; border-radius: 10px; background: rgba(217, 255, 71, .08); color: var(--lime); font-size: 15px; outline: none; }
.form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; line-height: 1.45; color: var(--night-text); }
.form__consent label { cursor: pointer; }
.form__consent input { appearance: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border-radius: 6px; background: var(--night); box-shadow: inset 0 0 0 1px var(--night-line); cursor: pointer; transition: background .2s, box-shadow .2s; }
.form__consent input::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.form__consent input:checked { background: var(--lime); box-shadow: none; }
.form__consent input:checked::after { transform: rotate(-45deg) scale(1); }
.form__consent input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.form__consent input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--alert); }
.form__consent .field__err { grid-column: 2; margin-top: 0; }

/* ---------- footer */
.ftr { padding: 30px 0 48px; background: var(--night); border-top: 1px solid var(--night-line); }
.ftr__tag { padding: 70px 0 90px; font-size: clamp(44px, 8.2vw, 138px); font-weight: 560; line-height: .96; letter-spacing: -.05em; color: var(--white); }
.ftr__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; font-size: 14px; color: var(--muted); }
.ftr__logo { color: var(--white); }
.ftr__logo .logo { height: 16px; }
.ftr a { text-decoration: none; color: var(--night-text); }
.ftr a:hover { color: var(--white); }
.ftr .langs { margin-left: auto; }
.ftr__addr { font-style: normal; line-height: 1.5; color: var(--night-text); }
.ftr__addr b { font-weight: 600; color: var(--white); }

/* ---------- reveal */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .rv[style*="--k"] { transition-delay: calc(var(--k) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .09em 0 .13em; margin: -.09em 0 -.13em; }
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translateY(112%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.js .split.in .w > span { transform: none; }

/* back from the background (phones): one forced repaint of the page, see app.js */
.is-wake main { opacity: .999; }

/* ---------- tablet and phone */
/* the track-record receipts carry full sentences and long Russian values: four in a row only on wide screens */
@media (max-width: 1300px) { .proof__list { grid-template-columns: repeat(2, minmax(0, 420px)); } }
@media (max-width: 1100px) {
  .hero .slot { display: none; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
  .explain__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 48px; }
  .explain__receipt .rcpt-wrap { --rw: 360px; }
  .ppanel { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 32px; }
  .ppanel__receipt .rcpt-wrap { --rw: 340px; }
  .deck__cards { gap: 14px; }
  .rcpt--mini { padding: 14px 12px 12px; }
  .stdfacts { gap: 40px; }
  .stdfacts__list { gap: 0 24px; }
  .prices__grid, .faq__grid, .contact__grid { gap: 56px; }
}
@media (max-width: 860px) {
  .hero { align-items: flex-start; }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: calc(var(--hdr) + 40px); padding-bottom: 48px; }
  .explain { padding: 110px 0 120px; }
  .explain__grid { grid-template-columns: 1fr; grid-template-areas: "head" "receipt" "body"; row-gap: 48px; }
  .explain__receipt { position: static; justify-content: center; }
  .picker { padding: 120px 0 110px; }
  .ppanel { grid-template-columns: 1fr; grid-template-areas: "view" "copy" "receipt"; gap: 28px; }
  .ppanel__receipt { display: flex; justify-content: center; }
  .standard { padding: 120px 0 120px; }
  .deck__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stdfacts { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
  .stdfacts__list { grid-template-columns: 1fr; gap: 24px; }
  .seal { width: 128px; height: 128px; }
  .prices__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .proof { padding: 120px 0 60px; }
  .contact { padding: 120px 0 110px; }
  .form { padding: 22px; }
}
@media (max-width: 560px) {
  .form__pair { grid-template-columns: 1fr; }
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; border-radius: 26px; }
  .tab { padding: 0 8px; }
}
/* the story on phones and portrait tablets: the photo on top, the words under it, all of it on one screen */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1000px) {
  .story { height: 520vh; height: 520svh; }
  .story__frame, .smap { top: var(--hdr); --crop: 0px; }
  .story__scrim { display: none; }
  .story__steps { left: 20px; right: 20px; top: calc(var(--hdr) + 66.667cqw + 18px); bottom: 44px; width: auto; height: auto; }
  .sstep { top: 0; bottom: auto; }
  .sstep__n { margin-bottom: 8px; font-size: 13px; }
  .sstep__t { font-size: clamp(21px, min(6.6cqw, 4.4cqh), 34px); }
  .sstep__d { margin-top: 8px; font-size: clamp(14px, min(4.1cqw, 2.6cqh), 16px); line-height: 1.45; }
  .sstep__list { margin-top: 10px; gap: 6px; }
  .sstep__list li { font-size: clamp(13px, min(3.8cqw, 2.4cqh), 15px); line-height: 1.38; }
  /* the notes step shows the notes instead of its sentence; the last step sits low, under the receipt */
  .js .sstep--notes .sstep__d { display: none; }
  .js .sstep:last-child { top: auto; bottom: 0; }
  .js .sstep:last-child .sstep__d { display: none; }
  .story__rail { left: 20px; bottom: 18px; }
  .lv__chip--story { left: auto; right: 8px; bottom: 8px; padding: 6px 9px 7px; border-radius: 10px; }
  .lv__chip--story .lv__chip-t { display: none; }
  .lv__chip--story dl { gap: 9px; }
  .lv__chip--story .lv__count dt { font-size: 9.5px; gap: 4px; }
  .lv__chip--story .lv__count dd { font-size: 15px; }
  .story .lv__tl { font-size: 10px; padding: 2px 6px; }
  .lv__card--story { display: none; }
  /* --rs (app.js): as large as fits above the last step, never larger than life */
  .story__receipt { left: 50%; top: calc(var(--hdr) + 10px); width: 300px; transform: translateX(-50%) scale(min(1, var(--rs, .74))); transform-origin: 50% 0; }
  .story__receipt .rcpt__foot { display: none; }
  .smap__l { padding: 3px 7px; font-size: 10px; }
  .smap__data { left: 8px; top: 8px; gap: 4px; }
  .smap__data li { padding: 4px 8px; font-size: 10.5px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .menu__row dt { font-size: 16px; }
  .menu__row dd { font-size: 17px; }
  .qa summary { font-size: 17px; }
  .qa__a p { padding-right: 0; }
  .ppanel__receipt .rcpt-wrap, .explain__receipt .rcpt-wrap { --rw: 100%; }
  .def { padding: 14px 14px 14px 12px; }
  .def__t { font-size: 18px; }
  .def__d { font-size: 15px; }
  .stdmap { padding: 2px 16px 4px; }
  .stdmap__h, .stdmap__row { grid-template-columns: minmax(0, .85fr) 30px minmax(0, 1.2fr); }
  .stdmap__arrow { margin: 0 8px; }
  .stdmap__on { font-size: 14px; }
  .stdmap__off { grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; font-size: 15px; }
  .stdmap__off .dot { width: 10px; height: 10px; margin-top: 5px; }
  /* the four receipts become a row to swipe, each wide enough to read */
  .deck__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(76%, 290px); gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .deck__cards::-webkit-scrollbar { display: none; }
  .deck__card { scroll-snap-align: start; }
  .proof__list { margin-top: 36px; }
  .pquote { padding-left: 18px; border-left-width: 5px; }
  .rcpt--mini { padding: 16px 14px 14px; }
  .seal { width: 116px; height: 116px; }
  .seal__v { font-size: 26px; }
  .ftr .langs { margin-left: 0; }
}

/* ---------- motion preferences and no script */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .split .w > span { opacity: 1; transform: none; transition: none; }
  .live::after, .lv__card-h i::after, .slot.is-printing .slot__mouth i, .lv__rec i, .flow, .story__scan { animation: none !important; }
  /* 0s, not a tiny duration: a tiny one would make every property animate, and the script would read old positions */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}
html:not(.js) .story { height: auto; }
html:not(.js) .story__stage { position: relative; height: auto; overflow: visible; container-type: inline-size; padding-bottom: 60px; }
html:not(.js) .story__view { position: relative; inset: auto; aspect-ratio: 3 / 2; overflow: hidden; }
html:not(.js) .story__frame { top: 0; --crop: 0px; }
html:not(.js) .smap, html:not(.js) .story__scrim, html:not(.js) .story__rail, html:not(.js) .story__scan,
html:not(.js) .lv__card--story, html:not(.js) .lv__handle, html:not(.js) .lv__toggle { display: none; }
html:not(.js) .story__steps { position: static; width: auto; height: auto; padding: 48px var(--pad) 0; }
html:not(.js) .sstep { position: static; margin-bottom: 44px; }
html:not(.js) .story__receipt { position: static; width: auto; max-width: 320px; margin: 0 auto; transform: none; visibility: visible; }