/* ==========================================================================
   eSELs marketing site
   --------------------------------------------------------------------------
   The same build as www.order-point.com (static pages, one stylesheet, one
   script), dressed in the eSELs brochure's colours: Velocity's indigo running
   out to sky blue, deep navy ink, and the labels' own e-paper red. The
   pictures are the labels themselves, drawn here in CSS, so a price on the
   page can change the way it does on a counter.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────── */
/* Served from this site, not Google Fonts, so a visit sends nobody else the visitor's IP address
   (the privacy page says so). Latin subset as Google serves it; Inter is one variable file for
   every weight. Both are SIL Open Font Licence: assets/fonts/OFL-*.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-var.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600.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;
}

:root {
  --ink: #1b1846;
  --ink-2: #47466a;
  --ink-3: #626181;
  --line: #dfdfeb;
  --line-2: #ececf4;
  --ground: #ffffff;
  --ground-2: #f6f6fa;
  --ground-3: #ebebf3;

  /* Velocity indigo: white on it is 6.9:1, so the primary button carries white text. */
  --volt: #3b35ee;
  --volt-hover: #4b46f5;
  --volt-ink: #2e28cf;
  --volt-soft: #ecebfe;
  --volt-line: #c9c7fb;
  --on-volt: #ffffff;
  --sky: #48cfee;
  --signal: #e2332d;

  --night: #121036;
  --night-2: #1d1a55;
  --night-ink: #ecebfa;
  --night-ink-2: #b9b8d9;

  /* E-paper. Not pure white and black: the panels are paper-grey, and their red is a touch dull. */
  --paper: #f3f2ec;
  --epd-black: #17171b;
  --epd-red: #cf2a2b;
  --epd-yellow: #e6c31c;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(27, 24, 70, .06), 0 8px 24px rgba(27, 24, 70, .08);
  --shadow-lg: 0 2px 6px rgba(27, 24, 70, .08), 0 30px 60px -12px rgba(27, 24, 70, .28);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--volt-ink); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; border-radius: 6px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--volt-ink); margin-bottom: 14px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(226, 51, 45, .16); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2); }

/* The brochure's one flourish: a short red rule under a heading. */
.rule { display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--signal); margin: 18px 0 0; }
.center .rule, .section-head.center .rule { margin-inline: auto; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 13px 20px; border-radius: 11px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--volt); color: var(--on-volt); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 18px -8px rgba(59, 53, 238, .6); }
.btn-primary:hover { background: var(--volt-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
/* On the indigo grounds the primary action turns white, and the ghost takes a light edge. */
.btn-light { background: #ffffff; color: var(--volt-ink); box-shadow: 0 10px 24px -10px rgba(10, 8, 40, .55); }
.btn-light:hover { background: #f1f0ff; transform: translateY(-1px); }
.btn-outline-light { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { border-color: #ffffff; }
.btn-sm { padding: 10px 14px; font-size: .9rem; }
.btn-lg { padding: 16px 24px; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line-2); }
.header-row { display: flex; align-items: center; gap: 24px; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand img { border-radius: 8px; }
.brand small { font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); padding-left: 10px; border-left: 1px solid var(--line); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.site-nav a:not(.btn):hover { color: var(--ink); }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-toggle .bar { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] .bar:first-of-type { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:last-of-type { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 18px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 13px 2px; border-bottom: 1px solid var(--line-2); font-size: 1rem; }
  .site-nav .btn { margin-top: 14px; }
}
@media (max-width: 460px) { .brand small { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
/* The brochure cover: an indigo field that runs to sky blue in the top corner and ends in one
   long curve, with the labels sitting across the edge. The sky stays in the corner, away from
   the words, so white text keeps its contrast. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: #ffffff;
  padding-block: clamp(36px, 5vw, 64px) clamp(48px, 7vw, 88px);
  background: var(--ground-2);
}
.hero::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 0 0 clamp(120px, 17vw, 210px) 0;
  background:
    radial-gradient(48% 62% at 100% 0%, rgba(72, 207, 238, .95), rgba(72, 207, 238, 0) 72%),
    radial-gradient(60% 80% at 0% 100%, rgba(18, 16, 80, .7), rgba(18, 16, 80, 0) 70%),
    linear-gradient(120deg, #231fa8 0%, #2f29dc 42%, #3b3fef 78%, #3f63f1 100%);
  border-radius: 0 0 50% 50% / 0 0 clamp(90px, 14vw, 190px) clamp(90px, 14vw, 190px);
}
.hero .eyebrow { color: #ffffff; }
.hero .eyebrow .dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.hero h1 { color: #ffffff; margin-bottom: 0; }
.hero h1 .hl { display: block; color: #bfeefb; }
.hero .rule { margin-top: 22px; }
.hero .lede { color: #e4e3fb; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 20px; }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: #e4e3fb; font-size: .98rem; }
.hero-points li { position: relative; padding-left: 28px; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

.hero-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 920px) { .hero-copy { grid-template-columns: 1fr; } .hero-side { margin-top: 18px; } }

/* Four labels in a row across the curve, at their true relative sizes (a counter label is 105.6 mm
   wide, a shelf-edge label 85), each sitting at its own height as if clipped to a different rail. */
.hero-visual {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 2.4vw, 30px);
  margin-top: clamp(40px, 6vw, 72px);
}
.hero-visual .esl-counter { flex: 0 1 290px; }
.hero-visual .esl-edge { flex: 0 1 234px; }
.hero-visual > :nth-child(1) { margin-top: 46px; }
.hero-visual > :nth-child(2) { margin-top: 0; }
.hero-visual > :nth-child(3) { margin-top: 64px; }
.hero-visual > :nth-child(4) { margin-top: 18px; }
.hero-note {
  display: flex; justify-content: center; margin: clamp(26px, 4vw, 40px) 0 0;
  font-size: .9rem; color: var(--ink-2);
}
.hero-note > span { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 10px; box-shadow: var(--shadow); max-width: 100%; }
.hero-note b { font-weight: 700; color: var(--ink); }
.hero-note i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .18); }

@media (max-width: 900px) {
  .hero-visual { flex-wrap: wrap; }
  .hero-visual .esl-counter, .hero-visual .esl-edge { flex: 0 1 calc(50% - 10px); }
  .hero-visual > :nth-child(n) { margin-top: 0; }
}

/* ── The labels ──────────────────────────────────────────────────────── */
/* A label is a housing (white or black plastic, a barcode strip down its left edge and an LED at
   the bottom right) round an e-paper screen. Everything inside is sized in cqi, so a label is the
   same picture at any width. The data-f spans are what the script rewrites on a change. */
.esl {
  container-type: inline-size;
  position: relative;
  margin: 0;
  aspect-ratio: 105.6 / 58.5;
  /* cqi on the housing itself would measure the page, not the label: the corners are percentages,
     and the screen is placed inside the housing rather than padded into it. */
  border-radius: 6.5% / 11.73%;
  background: linear-gradient(165deg, #ffffff 0%, #f1f2f5 55%, #e4e6eb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    inset 0 -3px 0 rgba(0, 0, 0, .06),
    inset 0 2px 0 rgba(255, 255, 255, .9),
    0 22px 34px -18px rgba(18, 16, 54, .55),
    0 6px 10px -6px rgba(18, 16, 54, .3);
  max-width: 100%;
}
.esl-edge { aspect-ratio: 85 / 42; border-radius: 7% / 14.17%; }
.esl-edge .esl-screen { inset: 6.4cqi 5.2cqi 6.4cqi 13cqi; }
.esl.is-black {
  background: linear-gradient(165deg, #34353b 0%, #1d1e22 55%, #121316 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 2px 0 rgba(255, 255, 255, .08),
    0 22px 34px -18px rgba(8, 8, 30, .7),
    0 6px 10px -6px rgba(8, 8, 30, .4);
}
/* The printed barcode strip the label is registered by. */
.esl::before {
  content: "";
  position: absolute; left: 4.4cqi; top: 22%; bottom: 22%; width: 4.6cqi;
  background: repeating-linear-gradient(180deg,
    #2b2b30 0 .5cqi, transparent .5cqi .9cqi,
    #2b2b30 .9cqi 1.6cqi, transparent 1.6cqi 1.9cqi,
    #2b2b30 1.9cqi 2.2cqi, transparent 2.2cqi 2.9cqi);
  border-radius: .4cqi;
  opacity: .85;
}
.esl.is-black::before { background: repeating-linear-gradient(180deg,
    #f2f2f2 0 .5cqi, transparent .5cqi .9cqi,
    #f2f2f2 .9cqi 1.6cqi, transparent 1.6cqi 1.9cqi,
    #f2f2f2 1.9cqi 2.2cqi, transparent 2.2cqi 2.9cqi); opacity: .7; }
/* The RGB LED. It blinks green when the label takes a change. */
.esl::after {
  content: "";
  position: absolute; right: 2.3cqi; bottom: 6cqi; width: 2.6cqi; height: 1.7cqi;
  border-radius: 1cqi;
  background: #cfd2da;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.esl.is-black::after { background: #d9dbe2; }
.esl.is-lit::after { background: #36d97d; box-shadow: 0 0 1.4cqi 0.4cqi rgba(54, 217, 125, .75); }

.esl-screen {
  position: absolute;
  inset: 6.2cqi 6cqi 6.2cqi 14cqi;
  overflow: hidden;
  border-radius: 1cqi;
  background: var(--paper);
  color: var(--epd-black);
  font-family: var(--font);
  line-height: 1.1;
  box-shadow: inset 0 0 0 .35cqi rgba(0, 0, 0, .1);
}
/* An e-paper refresh: the panel flashes dark and light before the new image settles. */
.esl-screen::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--epd-black);
}
.esl-screen.is-refreshing::after { animation: epd-flash 760ms steps(1, end) both; }
@keyframes epd-flash {
  0%   { opacity: 1; background: var(--epd-black); }
  22%  { opacity: 1; background: var(--paper); }
  44%  { opacity: 1; background: var(--epd-black); }
  66%  { opacity: 1; background: var(--paper); }
  100% { opacity: 0; }
}

/* Counter label: a red panel, the product in white, the price per kg large, and a QR code. */
.scr-counter {
  background: var(--epd-red);
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: 3cqi;
  padding: 3.6cqi 4.4cqi 3.4cqi;
}
.is-paper.scr-counter { background: var(--paper); color: var(--epd-black); }
.scr-counter .n { grid-column: 1 / -1; font-weight: 700; font-size: 8.6cqi; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.scr-counter .d { grid-column: 1 / -1; font-size: 3.7cqi; font-weight: 500; margin-top: .9cqi; opacity: .95; white-space: nowrap; overflow: hidden; }
.scr-counter .pr { align-self: end; }
.scr-counter .qr { align-self: end; width: 16.5cqi; aspect-ratio: 1; padding: 1.1cqi; background: var(--paper); border-radius: .6cqi; }
.scr-counter .qr svg { display: block; width: 100%; height: 100%; fill: var(--epd-black); }
.is-paper.scr-counter .pr { color: var(--epd-red); }
.is-paper.scr-counter .qr { padding: 0; }

/* A price as tickets set it: small pound sign, big pounds, raised pence, the unit under the pence. */
.pr { display: inline-flex; align-items: stretch; font-weight: 800; line-height: .8; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.pr .c { font-size: .4em; padding-top: .08em; margin-right: .04em; }
.pr .w { font-size: 1em; }
.pr .f { display: flex; flex-direction: column; justify-content: space-between; padding: .05em 0 .02em .05em; }
.pr .p { font-size: .46em; }
.pr .u { font-size: .19em; font-weight: 700; letter-spacing: 0; line-height: 1; }
.scr-counter .pr { font-size: 19cqi; }

/* Shelf-edge label: black on paper, a rule under the name, the price in red, the barcode. */
.scr-edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 3cqi;
  padding: 2.6cqi 3.8cqi 2.8cqi;
}
.scr-edge .n { grid-column: 1 / -1; font-weight: 700; font-size: 5.8cqi; line-height: 1.2; padding-bottom: 1.4cqi; border-bottom: .5cqi solid var(--epd-black); white-space: nowrap; overflow: hidden; }
.scr-edge .pr { grid-column: 1 / -1; align-self: center; color: var(--epd-red); font-size: 14.5cqi; }
.scr-edge .d { align-self: end; font-size: 3.6cqi; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.scr-edge .bc { align-self: end; width: 24cqi; }
.scr-edge .bc i { height: 4.6cqi; }

/* Freezer label: black and white only, the price reversed out of a black panel. */
.scr-freezer {
  display: grid;
  grid-template-columns: 55% minmax(0, 1fr);
  gap: 3.4cqi;
  padding: 3.2cqi;
}
.scr-freezer .blk { background: var(--epd-black); color: var(--paper); border-radius: .8cqi; padding: 2.6cqi 3cqi 2.8cqi; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.scr-freezer .n { font-weight: 600; font-size: 4.7cqi; line-height: 1.12; }
.scr-freezer .pr { font-size: 12.5cqi; }
.scr-freezer .side { display: flex; flex-direction: column; justify-content: space-between; gap: 1cqi; min-width: 0; padding: .6cqi 0 0; }
.scr-freezer .d { font-size: 3.5cqi; font-weight: 600; line-height: 1.2; }
.scr-freezer .d small { display: block; font-weight: 500; font-size: 1em; }
.scr-freezer .bc { width: 100%; }
.scr-freezer .bc i { height: 4.2cqi; }
.freeze-mark { display: inline-flex; align-items: center; gap: 1cqi; font-size: 3.2cqi; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.freeze-mark svg { width: 3.8cqi; height: 3.8cqi; }

/* A barcode as printed under the price: bars of mixed width, the number beneath. */
.bc { display: grid; gap: .6cqi; justify-items: stretch; width: 26cqi; }
.bc i {
  display: block; height: 7cqi;
  background: repeating-linear-gradient(90deg,
    var(--epd-black) 0 .45cqi, transparent .45cqi .8cqi,
    var(--epd-black) .8cqi 1.6cqi, transparent 1.6cqi 1.95cqi,
    var(--epd-black) 1.95cqi 2.2cqi, transparent 2.2cqi 2.9cqi,
    var(--epd-black) 2.9cqi 3.5cqi, transparent 3.5cqi 3.8cqi);
}
.bc b { font-family: var(--mono); font-weight: 500; font-size: 2.5cqi; letter-spacing: .12em; text-align: center; }

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-inline: auto; }
.section-tint { background: var(--ground-2); }

/* ── Money left on the table ─────────────────────────────────────────── */
.problem-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 920px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-copy h2 { max-width: 15em; }
.problem-copy p { color: var(--ink-2); }
.problem-copy p.lede { color: var(--ink-2); }
.chores { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.chores li { position: relative; padding-left: 32px; color: var(--ink-2); }
.chores li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 6px;
  background: #fde9e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23b8231f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

.calc {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.5vw, 34px);
  box-shadow: var(--shadow-lg);
}
.calc h3 { font-size: 1.25rem; margin-bottom: 4px; }
.calc-intro { color: var(--ink-3); font-size: .95rem; margin-bottom: 22px; }
.calc-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; margin-bottom: 18px; }
.calc-field label { font-weight: 600; font-size: .95rem; }
.calc-field output { font-weight: 700; font-size: 1rem; color: var(--volt-ink); font-variant-numeric: tabular-nums; }
.calc-field input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 6px 0 0; accent-color: var(--volt); height: 22px; cursor: pointer; }
.calc-result {
  margin-top: 8px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff1f0, #fff 70%);
  border: 1px solid #f6cdca;
}
.calc-figure { margin: 0; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: #b8231f; font-variant-numeric: tabular-nums; }
.calc-result p:last-child { margin: 8px 0 0; color: var(--ink-2); }
.calc-note { margin: 14px 0 0; font-size: .82rem; color: var(--ink-3); }

/* ── How it works ────────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px 24px; position: relative; }
.step-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--volt); color: var(--on-volt); font-weight: 800; margin-bottom: 16px; }
.step p { color: var(--ink-2); margin: 0; font-size: .98rem; }
/* The hand-off between steps, pointing on to the next card. */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 44px; right: -15px; z-index: 1;
  width: 10px; height: 10px; border-top: 2px solid var(--volt-line); border-right: 2px solid var(--volt-line);
  transform: rotate(45deg);
}
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { top: auto; bottom: -15px; right: 50%; transform: rotate(135deg); }
}

/* ── Tour: a change in Velocity, and the labels taking it ────────────── */
.tour-section { background: linear-gradient(180deg, var(--ground-2), #fff); }
.tour-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.tour-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.tour-steps li { padding: 16px 18px 16px 20px; border-radius: var(--radius); border: 1px solid transparent; color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; transition: background-color .3s ease, border-color .3s ease, color .3s ease; cursor: pointer; }
.tour-steps li strong { color: var(--ink-2); font-size: 1.02rem; }
.tour-steps li.is-active { background: #fff; border-color: var(--line); box-shadow: var(--shadow); color: var(--ink-2); }
.tour-steps li.is-active strong { color: var(--ink); }
.tour-note { margin: 18px 0 0; font-size: .92rem; color: var(--ink-3); }

.tour-stage { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; }
.tour-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tour-progress { width: min(240px, 50vw); height: 4px; border-radius: 4px; background: var(--ground-3); overflow: hidden; }
.tour-progress span { display: block; height: 100%; width: 0; background: var(--volt); }
.tour-pause { font: inherit; font-size: .85rem; color: var(--ink-3); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 920px) { .tour-grid { grid-template-columns: 1fr; } .tour-stage { order: -1; } }

/* An illustration of a price list in Velocity: not a screenshot, and drawn so it can change. */
.vel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.vel-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(120deg, #231fa8, #3b3fef); color: #fff; font-size: .85rem; font-weight: 700; }
.vel-bar img { width: 20px; height: 20px; border-radius: 5px; }
.vel-bar em { font-style: normal; font-weight: 500; color: #cfcdfa; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vel table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.vel th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 8px; border-bottom: 1px solid var(--line); background: var(--ground-2); }
.vel td { padding: 9px 14px; border-bottom: 1px solid var(--line-2); transition: background-color .4s ease, color .4s ease; }
.vel tr:last-child td { border-bottom: 0; }
.vel .num { text-align: right; font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.vel td.is-changed { background: #fff6d6; color: var(--ink); box-shadow: inset 3px 0 0 var(--epd-yellow); }
.vel td span { display: block; font-size: .78rem; color: var(--ink-3); }

.tour-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); padding: 4px clamp(0px, 2vw, 18px) 0; }
.tour-link { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.tour-link::before, .tour-link::after { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--volt-line); }
.tour-link b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--volt-soft); color: var(--volt-ink); white-space: nowrap; }
.tour-link b i { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.tour-link.is-sending b i { animation: pulse 700ms ease-in-out 2; }
@keyframes pulse { 50% { transform: scale(1.8); opacity: .4; } }

/* ── Features ────────────────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.feature h3 { display: flex; align-items: flex-start; gap: 10px; }
.feature h3::before { content: ""; width: 10px; height: 10px; margin-top: .38em; border-radius: 3px; background: var(--volt); flex: none; }
.feature p { color: var(--ink-2); margin: 0; font-size: .96rem; }
/* The two that sell it lead the grid, larger. */
.feature.is-lead { grid-column: span 1; background: linear-gradient(160deg, var(--volt-soft), #fff 70%); border-color: var(--volt-line); }
.feature.is-lead h3 { font-size: 1.25rem; }
.feature.is-lead h3::before { background: var(--signal); }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }

/* ── The range ───────────────────────────────────────────────────────── */
.range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .range-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.model { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.model-stage {
  display: grid; place-items: center;
  padding: 34px 28px 30px;
  min-height: 210px;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(72, 207, 238, .35), transparent 70%),
    linear-gradient(135deg, #2a25c4, #3b3fef);
}
.model-stage.is-cold {
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(160, 232, 250, .55), transparent 70%),
    linear-gradient(135deg, #1a3f86, #2d74c9);
}
.model-stage .esl-counter { width: min(260px, 100%); }
.model-stage .esl-edge { width: min(220px, 100%); }
.model-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.model-code { font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 6px; }
.model-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.model-body > p { color: var(--ink-2); font-size: .96rem; }
.specs { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; font-size: .9rem; }
.specs dt { color: var(--ink-3); }
.specs dd { margin: 0; font-family: var(--mono); font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.swatches { display: inline-flex; gap: 4px; vertical-align: -1px; margin-right: 6px; }
.swatches i { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.all-specs { margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; }
.all-specs li { font-size: .85rem; font-weight: 600; color: var(--ink-2); background: var(--ground-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }

/* ── The hire (dark) ─────────────────────────────────────────────────── */
.section-dark {
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(72, 207, 238, .18), transparent 60%),
    radial-gradient(1000px 520px at 0% 100%, #2a2690, transparent 70%),
    var(--night);
  color: var(--night-ink);
}
.section-dark .eyebrow { color: #a9d9ff; }
.section-dark h2, .section-dark h3 { color: #ffffff; }
.section-dark p { color: var(--night-ink-2); }
.hire-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 960px) { .hire-grid { grid-template-columns: 1fr; } }
.price-tag { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 26px 0 8px; }
.price-tag .big { font-size: clamp(4.4rem, 11vw, 7.4rem); font-weight: 800; letter-spacing: -0.06em; line-height: .8; color: #ffffff; }
.price-tag .per { flex: 1 1 160px; min-width: 0; font-size: 1.1rem; font-weight: 600; color: #ffffff; line-height: 1.3; padding-bottom: 4px; }
.price-tag .per span { display: block; font-weight: 500; color: var(--night-ink-2); }
.hire-price .btn { margin-top: 12px; }
.hire-terms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hire-terms > li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 20px 20px 18px; }
.hire-terms > li:first-child { grid-column: 1 / -1; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); }
.hire-terms h3 { margin-bottom: 6px; }
.hire-terms p { margin: 0; font-size: .95rem; }
.hire-terms ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hire-terms ul li { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 11px; font-size: .85rem; color: #ffffff; }
@media (max-width: 560px) { .hire-terms { grid-template-columns: 1fr; } }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 22px; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 32px 20px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--ink-2); padding-bottom: 20px; margin: 0; }

/* ── Demo ────────────────────────────────────────────────────────────── */
.section-accent { background: linear-gradient(135deg, var(--volt-soft), #fff 60%); border-top: 1px solid var(--volt-line); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.demo-copy p { color: var(--ink-2); }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }

.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 32px; color: var(--ink-2); }
.ticks li strong { color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 6px; background: var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.2' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

.demo-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3.5vw, 32px); box-shadow: var(--shadow-lg); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-weight: 600; font-size: .92rem; }
.optional { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 13px; background: #fff; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 4px var(--volt-soft); }
.field.has-error input, .field.has-error textarea { border-color: #a8271e; }
.field .error { color: #a8271e; font-size: .85rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--ink-3); margin: 12px 0 0; text-align: center; }
.form-status { margin: 12px 0 0; font-weight: 600; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-error { color: #a8271e; }
.form-done { text-align: center; padding: 28px 8px; }
.form-done h3 { font-size: 1.5rem; }
.form-done p { color: var(--ink-2); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--night); color: var(--night-ink-2); padding-block: 36px; font-size: .92rem; }
.site-footer .brand { color: #fff; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.footer-brand p { margin: 6px 0 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-nav a { color: var(--night-ink); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-copy { margin: 0; width: 100%; color: #8b89ad; }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.notfound { max-width: 620px; margin: 0 auto; padding: 72px var(--gutter); }
.notfound h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 28px; }
.notfound p { color: var(--ink-2); }

/* ── Privacy page ────────────────────────────────────────────────────── */
.legal { padding-block: clamp(40px, 7vw, 80px) clamp(56px, 8vw, 96px); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); margin-bottom: .3em; }
.legal-updated { color: var(--ink-3); font-size: .95rem; margin-bottom: 2em; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; margin: 2em 0 .6em; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; display: grid; gap: 8px; }
.legal strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .esl-screen.is-refreshing::after { animation: none; }
  .tour-link.is-sending b i { animation: none; }
  .btn:hover { transform: none; }
}

/* ── Special offers ──────────────────────────────────────────────────── */
/* The one place the labels earn their keep twice: an offer goes on every label at once and comes
   off just as easily. A warm ground, because red is already the price colour on the labels. */
.section-offer { background: linear-gradient(180deg, #ffffff, #fdf2f1); border-top: 1px solid #f6dedc; }
.offer-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
  margin-bottom: clamp(32px, 5vw, 52px);
}
@media (max-width: 900px) { .offer-row { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
/* A counter label is taller than a shelf-edge one at the same width, so the labels sit on a common
   bottom line and every caption starts on the same line under them. */
.offer-figure { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.offer-figure > .esl { align-self: end; }
.offer-figure figcaption { font-size: .92rem; color: var(--ink-2); }
.offer-figure figcaption strong { color: var(--ink); display: block; }
.offer-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
@media (max-width: 760px) { .offer-points { grid-template-columns: 1fr; } }

/* An offer on a label: the flag, the old price struck through, and a deal in place of a price. */
.offer-flag { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.was { font-weight: 700; text-decoration: line-through; text-decoration-thickness: .4cqi; }
.scr-counter.is-offer { grid-template-rows: auto auto auto 1fr; }
.scr-counter .offer-flag { grid-column: 1 / -1; font-size: 3.6cqi; color: var(--epd-yellow); }
.is-paper.scr-counter .offer-flag { color: var(--epd-red); }
.scr-counter .prices { grid-column: 1; align-self: end; display: flex; align-items: flex-end; gap: 2.6cqi; min-width: 0; }
.scr-counter .was { font-size: 4.6cqi; padding-bottom: 1.4cqi; }
.scr-edge .deal { grid-column: 1 / -1; align-self: center; font-weight: 800; font-size: 11.5cqi; line-height: .9; letter-spacing: -0.03em; color: var(--epd-red); }
.scr-edge .was { font-weight: 600; }
.scr-freezer .pct { font-weight: 800; font-size: 7.4cqi; line-height: 1; letter-spacing: -0.02em; }
.scr-freezer .prices { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4cqi 2cqi; }
.scr-freezer .prices .pr { font-size: 11.5cqi; }
.scr-freezer .was { font-size: 3.6cqi; }

/* The calculator's breakdown: what makes up the year's figure, so none of it is taken on trust. */
.calc-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #f2cdca;
  font-size: .93rem;
}
.calc-rows dt { color: var(--ink-2); }
.calc-rows dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* What each label is fitted with: a stand, or a rail for the small shelf-edge labels. */
.fitting { max-width: 680px; margin: 22px auto 0; text-align: center; color: var(--ink-2); }
.fitting strong { color: var(--ink); }