/* ═══════════════════════════════════════════════════════════════════════════
   CannyPos marketing site
   ───────────────────────────────────────────────────────────────────────────
   Plain CSS, no build step: these pages are served straight out of public/ so
   a crawler gets real markup and a phone gets one small stylesheet.

   The palette is the product's own (src/assets/theme.css) so the site and the
   console look like one company. Green carries meaning — it is the brand, the
   press-able thing, and the focus ring; everything else is neutral.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --green:        #14573a;
  --green-deep:   #0b3423;
  --green-hover:  #0e4029;
  --green-bright: #1f7a52;
  --mint:         #dcece4;
  --mint-ink:     #0c3b26;

  --ink:          #14171a;
  --ink-soft:     #454e57;
  --ink-muted:    #5b6570;
  --line:         #e4e7ea;
  --bg:           #ffffff;
  --bg-tint:      #f6f8f7;
  --bg-warm:      #fbfaf7;

  --amber:        #8a5a00;
  --amber-bg:     #fdf3dc;

  --radius:       18px;
  --radius-lg:    26px;
  --radius-pill:  999px;

  --shadow-sm:  0 1px 2px rgba(20, 23, 26, .05), 0 2px 8px rgba(20, 23, 26, .04);
  --shadow:     0 2px 4px rgba(20, 23, 26, .05), 0 12px 28px rgba(20, 23, 26, .07);
  --shadow-lg:  0 8px 16px rgba(20, 23, 26, .06), 0 32px 64px rgba(20, 23, 26, .12);

  --shell:      min(1180px, 100% - 40px);
  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters: with width set in CSS but height left alone, the HTML
   height attribute is used literally and a tall screenshot blows the layout. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

::selection { background: var(--mint); color: var(--mint-ink); }

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

.shell { width: var(--shell); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ── Type ──────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.028em; font-weight: 800; }

.display {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
}
.h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
.h3 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); letter-spacing: -0.022em; }

.lead {
  font-size: clamp(1.05rem, 1.7vw, 1.27rem);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 62ch;
}
.lead-center { margin-inline: auto; text-align: center; }

p { margin: 16px 0 0; }
.prose p { color: var(--ink-soft); max-width: 68ch; }
.prose strong { color: var(--ink); font-weight: 650; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .5;
}
.eyebrow-center { justify-content: center; }
.on-dark .eyebrow { color: #8fd3b0; }

.balance { text-wrap: balance; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 680; font-size: .97rem;
  padding: 14px 24px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background-color .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(20, 87, 58, .26); }
.btn-primary:hover { background: var(--green-hover); box-shadow: 0 10px 26px rgba(20, 87, 58, .32); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }

.on-dark .btn-light { background: #fff; color: var(--green-deep); }
.on-dark .btn-light:hover { background: #f2f7f4; }
.on-dark .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.on-dark .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-sm { padding: 10px 18px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-row-center { justify-content: center; }

.arrow { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arrow { transform: translateX(3px); }

.textlink {
  color: var(--green); font-weight: 650; text-decoration: none;
  border-bottom: 2px solid rgba(20,87,58,.22); padding-bottom: 1px;
  transition: border-color .18s;
}
.textlink:hover { border-color: var(--green); }

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 22px rgba(20,23,26,.05); }
.nav { display: flex; align-items: center; gap: 22px; height: 70px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.03em; font-size: 1.16rem; color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand-tile {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(140deg, var(--green-bright), var(--green) 55%, var(--green-deep));
  display: grid; place-items: center;
}
.brand-tile svg { width: 21px; height: 21px; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nav-links a {
  text-decoration: none; color: var(--ink-soft); font-weight: 580; font-size: .945rem;
  padding: 9px 13px; border-radius: 10px; transition: color .16s, background-color .16s;
}
.nav-links a:hover { color: var(--green); background: var(--bg-tint); }
.nav-links a[aria-current="page"] { color: var(--green); font-weight: 680; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--line); border-radius: 10px;
  width: 42px; height: 42px; cursor: pointer; color: var(--ink); padding: 0;
}
.nav-toggle svg { width: 20px; height: 20px; margin: auto; }

@media (max-width: 940px) {
  .nav-links {
    position: absolute; inset: 70px 0 auto; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 20px 20px;
    margin: 0; gap: 2px; box-shadow: var(--shadow); display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 13px 10px; font-size: 1.02rem; }
  .nav-toggle { display: block; }
  .nav-end .btn:not(.btn-primary) { display: none; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.section { padding: clamp(64px, 9vw, 116px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.section-tint { background: var(--bg-tint); }
.section-warm { background: var(--bg-warm); }
.section-head { max-width: 760px; }
.section-head-center { margin-inline: auto; text-align: center; }

.on-dark { color: #fff; }
.on-dark .lead, .on-dark .prose p { color: rgba(255,255,255,.76); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }

.band {
  background:
    radial-gradient(90% 120% at 12% 0%, #1f7a52 0%, transparent 60%),
    linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  position: relative; overflow: hidden;
}
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
}
.band > * { position: relative; z-index: 1; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 110px); }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none;
  transition: background-color .18s, border-color .18s;
}
.pill:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.pill .tag {
  background: #8fd3b0; color: var(--green-deep); font-weight: 780; font-size: .72rem;
  padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: .02em;
}

.hero-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.hero-points li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.88); font-size: 1.02rem; }
.hero-points svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #8fd3b0; }

/* ── Device frames ─────────────────────────────────────────────────────── */

.browser {
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.browser-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: #f4f6f7; border-bottom: 1px solid var(--line);
}
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8dde1; display: block; }
.browser-bar span {
  margin-left: 10px; font-size: .74rem; color: var(--ink-muted);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 3px 12px; font-weight: 550;
}
.browser img { width: 100%; height: auto; }

.phone {
  width: min(280px, 72vw); border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #2a2f35, #14171a);
  box-shadow: var(--shadow-lg); position: relative;
}
.phone img { width: 100%; border-radius: 26px; display: block; }
.phone::before {
  content: ''; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); z-index: 2;
}

/* Browser card with a phone tucked into its bottom-right corner. The phone is
   sized from its own height so a 9:19.75 screenshot cannot grow taller than
   the card it is meant to sit against. */
.shot-stack { position: relative; padding-bottom: 34px; padding-right: 26px; }
.shot-stack .browser { width: 100%; }
.shot-stack .phone {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: clamp(112px, 27%, 164px); padding: 6px; border-radius: 22px;
}
.shot-stack .phone img { border-radius: 17px; }
.shot-stack .phone::before { top: 12px; width: 44px; height: 3px; }
@media (max-width: 620px) { .shot-stack { padding: 0; } .shot-stack .phone { display: none; } }

/* ── Cards ─────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Cards carry no decorative icon. A generic glyph on every card says nothing
   and makes six different ideas look like one; the heading does the work, and
   a hairline that grows on hover gives the card its only flourish. */
.card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s;
}
.card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--green); transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #d5dce1; }
.card-hover:hover::before { width: 100%; }
.card h3 { margin-bottom: 9px; font-size: 1.14rem; letter-spacing: -.024em; }
.card p { color: var(--ink-soft); font-size: .965rem; margin-top: 0; }

.card-link { text-decoration: none; display: block; color: inherit; }
.card-link .more { color: var(--green); font-weight: 680; font-size: .93rem; margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; }
.card-link:hover .arrow { transform: translateX(4px); }

/* An index numeral, where a set of cards really is a sequence. */
.card-num {
  font-size: .76rem; font-weight: 750; letter-spacing: .14em;
  color: var(--green); opacity: .55; margin-bottom: 14px; display: block;
}

.on-dark .card { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); box-shadow: none; }
.on-dark .card p { color: rgba(255,255,255,.72); }
.on-dark .card::before { background: #8fd3b0; }
.on-dark .card-num { color: #8fd3b0; }

/* ── Feature rows ──────────────────────────────────────────────────────── */

.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.row + .row { margin-top: clamp(56px, 8vw, 104px); }
.row-flip > *:first-child { order: 2; }
@media (max-width: 900px) {
  .row, .row-flip { grid-template-columns: 1fr; }
  .row-flip > *:first-child { order: 0; }
}

.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.ticks svg { width: 21px; height: 21px; flex: none; color: var(--green); margin-top: 2px; }
.ticks b { color: var(--ink); font-weight: 650; }
.on-dark .ticks li { color: rgba(255,255,255,.78); }
.on-dark .ticks svg { color: #8fd3b0; }
.on-dark .ticks b { color: #fff; }

/* ── Stats ─────────────────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat .n { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 820; letter-spacing: -.04em; line-height: 1; }
.stat .l { margin-top: 9px; font-size: .92rem; color: var(--ink-muted); }
.on-dark .stat .l { color: rgba(255,255,255,.66); }

/* ── Marquee ───────────────────────────────────────────────────────────── */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-pill);
  padding: 10px 18px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.chip b { color: var(--green); font-weight: 750; }

/* ── Callout / quote ───────────────────────────────────────────────────── */

.callout {
  border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px);
  background: var(--mint); color: var(--mint-ink);
}
.callout.amber { background: var(--amber-bg); color: var(--amber); }
.callout h3 { color: inherit; }
.callout p { color: inherit; opacity: .88; }

/* ── FAQ (no JS: <details>) ────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 46px 22px 0; position: relative;
  font-weight: 650; font-size: 1.06rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2.4px solid var(--ink-muted); border-bottom: 2.4px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--green); }
.faq .answer { padding: 0 8px 24px 0; color: var(--ink-soft); max-width: 72ch; }
.faq .answer p:first-child { margin-top: 0; }

/* ── Steps ─────────────────────────────────────────────────────────────── */

.steps { counter-reset: s; display: grid; gap: 20px; }
.step { position: relative; padding-left: 62px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-weight: 780; font-size: 1rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: 5px; }
.step p { color: var(--ink-soft); margin-top: 0; font-size: .97rem; }
.on-dark .step::before { background: #fff; color: var(--green-deep); }

/* ── Pricing ───────────────────────────────────────────────────────────── */

.price-card { display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow); }
.price-tag { font-size: 2.5rem; font-weight: 830; letter-spacing: -.04em; margin: 14px 0 2px; }
.price-tag small { font-size: .92rem; font-weight: 550; color: var(--ink-muted); letter-spacing: 0; }
.price-card ul { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 11px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); }
.price-card li svg { width: 19px; height: 19px; flex: none; color: var(--green); margin-top: 2px; }
.price-card .btn { margin-top: auto; }
.badge {
  display: inline-block; background: var(--green); color: #fff; font-size: .72rem;
  font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer { background: var(--green-deep); color: rgba(255,255,255,.72); padding: clamp(50px, 7vw, 78px) 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 720; margin-bottom: 15px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .945rem; }
.site-footer a:hover { color: #fff; }
.footer-note {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .87rem; color: rgba(255,255,255,.55);
}

/* ── Reveal on scroll (driven by site.js / anime.js) ───────────────────── */

/* Hidden until played. Every page carries a <noscript> override so the copy
   is visible with scripting off, and reduced motion opts out entirely. */
.reveal { opacity: 0; }
.reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ── Contact form ──────────────────────────────────────────────────────── */
/* Posted by fetch() to an edge function, so the address it reaches is never
   written into the page for a scraper to collect. */

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .86rem; font-weight: 650; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--ink-muted); }
.input, .textarea, .select {
  font: inherit; font-size: .97rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(20, 87, 58, .12);
}
.input::placeholder, .textarea::placeholder { color: #9aa4ad; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot: a real person never sees it, a bot fills it in and is dropped. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: .92rem; border-radius: 12px; padding: 12px 14px; display: none; }
.form-status.is-shown { display: block; }
.form-status.ok { background: var(--mint); color: var(--mint-ink); }
.form-status.bad { background: #fadee1; color: #7a1220; }
.form-note { font-size: .84rem; color: var(--ink-muted); }

button.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ── Spec list, for hardware ───────────────────────────────────────────── */

.spec { list-style: none; margin: 0; padding: 0; }
.spec li {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.spec li:first-child { border-top: 1px solid var(--line); }
.spec b { font-weight: 650; color: var(--ink); }
.spec span { color: var(--ink-muted); font-size: .92rem; text-align: right; }
.on-dark .spec li { border-color: rgba(255,255,255,.16); }
.on-dark .spec b { color: #fff; }
.on-dark .spec span { color: rgba(255,255,255,.66); }

/* ── A rule that draws itself as the section scrolls ───────────────────── */

.draw { display: block; width: 100%; height: 2px; overflow: visible; }
.draw path { stroke: var(--green); stroke-width: 2; fill: none; opacity: .35; }
.on-dark .draw path { stroke: #8fd3b0; opacity: .5; }

/* ── Quiet polish ──────────────────────────────────────────────────────── */

/* A single hairline of light along the top of pale sections stops a stack of
   white blocks reading as one flat sheet. */
.section-tint, .section-warm { box-shadow: inset 0 1px 0 rgba(20,23,26,.05); }

/* Split headings are clipped word by word by site.js; without this the
   descenders of the first line get shaved. */
[data-split] .word { padding-bottom: .08em; }

/* ═══════════════════════════════════════════════════════════════════════════
   The playable till
   ───────────────────────────────────────────────────────────────────────────
   A working miniature of the real thing: tap products, watch the cart and the
   total move, take a payment. It is the clearest way to show what "a sale in
   three taps" means, and it is the one part of the page you can actually use.
   ═══════════════════════════════════════════════════════════════════════════ */

.demo {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: start;
}
@media (max-width: 880px) { .demo { grid-template-columns: 1fr; } }

.demo-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 20px; position: relative;
}
.demo-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.demo-head h3 { font-size: 1.05rem; }
.demo-hint { font-size: .84rem; color: var(--ink-muted); }

/* ── Product tiles ─────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

.tile {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--bg-tint); border: 1.5px solid transparent; border-radius: 14px;
  padding: 14px 14px 12px; color: var(--ink);
  display: grid; gap: 2px; position: relative;
  transition: border-color .18s, background-color .18s;
}
.tile:hover { border-color: var(--green); background: #fff; }
.tile:active { border-color: var(--green-hover); }
.tile .n { font-weight: 640; font-size: .95rem; line-height: 1.25; }
.tile .p { font-size: .9rem; color: var(--green); font-weight: 700; }
.tile .q {
  position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px;
  border-radius: 11px; background: var(--green); color: #fff;
  font-size: .76rem; font-weight: 750; display: grid; place-items: center;
  padding: 0 6px; opacity: 0; transform: scale(.6);
}
.tile .q.is-on { opacity: 1; transform: scale(1); }

/* The chip that flies from a tile to the cart. */
.fly {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--green); color: #fff; font-weight: 750; font-size: .82rem;
  padding: 5px 11px; border-radius: var(--radius-pill); box-shadow: var(--shadow);
}

/* ── The till ──────────────────────────────────────────────────────────── */

.till {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
  min-height: 430px; display: flex; flex-direction: column;
}
.till-bar {
  background: var(--green); color: #fff; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.till-bar .t { font-weight: 720; font-size: .95rem; }
.till-bar .c {
  background: rgba(255,255,255,.18); border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: .8rem; font-weight: 700;
}
.till-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.till-empty { color: var(--ink-muted); font-size: .92rem; margin: auto 0; text-align: center; }
.till-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.till-lines li {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.till-lines .nm { font-size: .93rem; font-weight: 600; }
.till-lines .sub { font-size: .8rem; color: var(--ink-muted); }
.till-lines .amt { font-size: .93rem; font-weight: 700; white-space: nowrap; }

.till-foot { border-top: 1px solid var(--line); padding: 14px 18px 16px; }
.till-sum { display: flex; justify-content: space-between; font-size: .86rem; color: var(--ink-muted); }
.till-sum + .till-sum { margin-top: 4px; }
.till-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.till-total .l { font-weight: 700; }
.till-total .v { font-size: 1.5rem; font-weight: 820; letter-spacing: -.03em; color: var(--green); }
.till-foot .btn { width: 100%; margin-top: 12px; }

/* ── Payment sheet and the finish ──────────────────────────────────────── */

.sheet {
  position: absolute; inset: auto 0 0 0; background: #fff;
  border-top: 1px solid var(--line); border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 34px rgba(20,23,26,.12);
  padding: 18px; transform: translateY(101%); z-index: 3;
}
.sheet h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 720; }
.pay-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.pay {
  font: inherit; font-weight: 650; font-size: .92rem; cursor: pointer;
  background: var(--bg-tint); border: 1.5px solid transparent; border-radius: 12px;
  padding: 13px 8px; color: var(--ink);
  transition: border-color .16s, background-color .16s;
}
.pay:hover { border-color: var(--green); background: #fff; }

.done {
  position: absolute; inset: 0; background: #fff; z-index: 4;
  display: grid; place-items: center; text-align: center; padding: 26px;
  opacity: 0; pointer-events: none;
}
.done.is-on { opacity: 1; pointer-events: auto; }
.done .v { font-size: 1.9rem; font-weight: 830; letter-spacing: -.04em; color: var(--green); margin-top: 10px; }
.done .m { color: var(--ink-muted); font-size: .92rem; margin-top: 4px; }
.done .pts {
  margin-top: 14px; background: var(--mint); color: var(--mint-ink);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: .86rem; font-weight: 680;
  display: inline-block;
}
.done svg { width: 58px; height: 58px; margin-inline: auto; }
.done svg path, .done svg circle { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Drag a membership card onto the reader ────────────────────────────── */

.cardplay {
  position: relative; background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px; overflow: hidden;
  display: grid; gap: 18px; justify-items: center; min-height: 290px;
  align-content: center;
}
.reader {
  width: 100%; max-width: 280px; border: 2px dashed var(--outline-soft, #c6ced5);
  border-radius: 16px; padding: 22px 18px; text-align: center;
  color: var(--ink-muted); font-size: .9rem; background: #fff;
  transition: border-color .2s, background-color .2s, color .2s;
}
.reader.is-near { border-color: var(--green); color: var(--green); background: var(--mint); }
.reader.is-done { border-style: solid; border-color: var(--green); background: var(--mint); color: var(--mint-ink); }
.reader .who { display: block; font-weight: 720; color: var(--mint-ink); font-size: 1rem; }
.reader .sub { display: block; font-size: .84rem; margin-top: 3px; line-height: 1.45; }

.memcard {
  width: 220px; border-radius: 14px; padding: 15px 16px; cursor: grab;
  background: linear-gradient(140deg, var(--green-bright), var(--green) 55%, var(--green-deep));
  color: #fff; box-shadow: var(--shadow); user-select: none; touch-action: none;
  position: relative; z-index: 2;
}
.memcard:active { cursor: grabbing; }
.memcard .brand { display: flex; align-items: center; gap: 7px; font-weight: 750; font-size: .82rem; letter-spacing: .02em; }
.memcard .brand svg { width: 15px; height: 15px; }
.memcard .no { margin-top: 16px; font-size: .96rem; letter-spacing: .12em; font-weight: 620; }
.memcard .nm { font-size: .8rem; opacity: .8; margin-top: 3px; }
.cardplay .tip { font-size: .84rem; color: var(--ink-muted); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   Interactive sections
   ───────────────────────────────────────────────────────────────────────────
   Each one demonstrates a single claim by letting you do it. They share a
   panel shell so the page reads as one tour rather than a pile of widgets.
   ═══════════════════════════════════════════════════════════════════════════ */

.play {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 24px; position: relative; overflow: hidden;
}
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.play-head h3 { font-size: 1.02rem; }
.play-note { font-size: .84rem; color: var(--ink-muted); }
.on-dark .play { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.15); box-shadow: none; }
.on-dark .play-note { color: rgba(255,255,255,.62); }

/* ── Status pill, shared ───────────────────────────────────────────────── */
.pillstat {
  display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 680;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--mint); color: var(--mint-ink);
  transition: background-color .3s, color .3s;
}
.pillstat i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: block; }
.pillstat.warn { background: var(--amber-bg); color: var(--amber); }
.pillstat.bad  { background: #fadee1; color: #7a1220; }

/* ── A. Pull the plug ──────────────────────────────────────────────────── */

.switch {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-weight: 650; font-size: .95rem; user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 54px; height: 31px; border-radius: 16px; background: var(--green);
  position: relative; transition: background-color .3s; flex: none;
}
.switch input:not(:checked) + .track { background: #c3ccd3; }
.switch input:focus-visible + .track { outline: 3px solid var(--green-bright); outline-offset: 3px; }
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 25px; height: 25px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.queue { display: grid; gap: 8px; margin-top: 18px; min-height: 118px; align-content: start; }
.qcard {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 13px; font-size: .9rem;
}
.qcard .t { font-weight: 640; }
.qcard .s { font-size: .8rem; color: var(--ink-muted); }
.qcard .a { font-weight: 720; white-space: nowrap; }
.queue-empty { color: var(--ink-muted); font-size: .88rem; }

/* ── B. Split the payment ──────────────────────────────────────────────── */

.splitbars { display: grid; gap: 12px; margin: 20px 0 6px; }
.splitbar .top { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px; }
.splitbar .top b { font-weight: 700; }
.splitbar .rail { height: 12px; border-radius: 6px; background: var(--bg-tint); overflow: hidden; }
.splitbar .fill { height: 100%; border-radius: 6px; background: var(--green); width: 0; }
.splitbar.machine .fill { background: var(--green-bright); }

.slider { width: 100%; margin: 4px 0 0; accent-color: var(--green); height: 28px; }

/* ── C. Age gate ───────────────────────────────────────────────────────── */

.ages { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.age {
  font: inherit; font-weight: 660; font-size: .93rem; cursor: pointer;
  background: var(--bg-tint); border: 1.5px solid transparent; border-radius: var(--radius-pill);
  padding: 9px 17px; color: var(--ink); transition: border-color .16s, background-color .16s, color .16s;
}
.age:hover { border-color: var(--green); background: #fff; }
.age[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }

.verdict {
  border-radius: 16px; padding: 22px; text-align: center;
  background: var(--bg-tint); border: 1.5px solid var(--line);
  transition: background-color .3s, border-color .3s;
}
.verdict.ok  { background: var(--mint); border-color: var(--green); }
.verdict.no  { background: #fadee1; border-color: #e2a6ae; }
.verdict .big { font-size: 1.22rem; font-weight: 780; letter-spacing: -.02em; }
.verdict .sm { font-size: .9rem; color: var(--ink-soft); margin-top: 5px; }
.verdict.no .big { color: #7a1220; }
.verdict.no .sm { color: #8d4450; }
.verdict.ok .big { color: var(--mint-ink); }
.verdict svg { width: 42px; height: 42px; margin: 0 auto 10px; }
.verdict svg path, .verdict svg circle { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke: currentColor; }
.verdict.ok svg { color: var(--green); }
.verdict.no svg { color: #b31e2e; }

/* ── D. Branch switcher ────────────────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  font: inherit; font-weight: 650; font-size: .92rem; cursor: pointer;
  background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  padding: 9px 16px; color: var(--ink-soft); transition: all .18s;
}
.tab:hover { border-color: var(--green); color: var(--green); }
.tab[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 20px; }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi .v { font-size: 1.5rem; font-weight: 820; letter-spacing: -.035em; }
.kpi .l { font-size: .82rem; color: var(--ink-muted); margin-top: 3px; }

.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; align-items: end; height: 130px; }
.chart .col { background: var(--mint); border-radius: 6px 6px 3px 3px; height: 8%; position: relative; }
.chart .col::after {
  content: attr(data-d); position: absolute; bottom: -20px; left: 0; right: 0;
  text-align: center; font-size: .72rem; color: var(--ink-muted);
}
.chart .col.best { background: var(--green); }
.chart-wrap { padding-bottom: 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Movement in the rest of the page
   ───────────────────────────────────────────────────────────────────────────
   The interactive panels above are the set pieces. These rules give the
   quieter sections something to do as you scroll past them, so the page keeps
   a pulse the whole way down instead of going flat after the demos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── How far down the page you are ─────────────────────────────────────────
   A 2px line along the bottom of the sticky header, scrubbed against scroll
   position. Injected by site.js, so it never appears without motion. */
.read-line {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--green-bright));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ── Cards that notice the cursor ──────────────────────────────────────────
   A soft highlight follows the pointer across a card. --sx/--sy are written
   by site.js on pointermove; when nothing is hovering, --sa is 0 and the
   whole layer is invisible, so a card at rest looks exactly as it did. */
.card-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  opacity: var(--sa, 0); transition: opacity .3s;
  background: radial-gradient(
    240px circle at var(--sx, 50%) var(--sy, 0%),
    rgba(31, 122, 82, .10), rgba(31, 122, 82, 0) 68%);
}
.card-glow { transform-style: preserve-3d; }

/* ── One catalogue, two shopfronts ─────────────────────────────────────────
   Drag the handle and the storefront wipes across to reveal the same products
   on the till. Both halves are real screenshots at the same aspect ratio. */
.compare {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  background: var(--bg-tint); touch-action: pan-y; cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
}
.compare img { display: block; width: 100%; height: auto; }
.compare .back { display: block; }
.compare .front {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.compare .front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.compare-tag {
  position: absolute; top: 14px; z-index: 3;
  font-size: .76rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.92); color: var(--green-deep);
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.compare-tag.l { left: 14px; }
.compare-tag.r { right: 14px; }
.compare-handle {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--split, 50%); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(20,23,26,.10), 0 0 22px rgba(20,23,26,.22);
}
.compare-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
}
.compare-grip {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  transform: translate(-50%, -50%); display: flex; gap: 3px;
  color: var(--green); pointer-events: none;
}
.compare-grip svg { width: 15px; height: 15px; }
.compare-note { margin-top: 14px; font-size: .9rem; color: var(--ink-muted); text-align: center; }

/* ── The rail beside the setup steps ───────────────────────────────────────
   Fills from the top as the section passes, and the number of the step you
   have reached fills in behind it. */
.steps-rail { position: relative; }
.steps-rail::before {
  content: ''; position: absolute; left: 20px; top: 8px; bottom: 34px; width: 2px;
  background: var(--line);
}
.steps-rail .fill {
  position: absolute; left: 20px; top: 8px; width: 2px; height: calc(100% - 42px);
  background: var(--green); transform: scaleY(0); transform-origin: 50% 0;
}
.steps-rail .step::before {
  z-index: 2; background: #fff; color: var(--ink-muted);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: background .3s, color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.steps-rail .step.is-live::before {
  background: var(--green); color: #fff; box-shadow: inset 0 0 0 2px var(--green), 0 6px 16px rgba(20,87,58,.24);
  transform: scale(1.06);
}

/* ── FAQ answers that open rather than appear ──────────────────────────── */
.faq .answer { overflow: hidden; }

/* ── Buttons that lean toward the cursor ──────────────────────────────── */
.magnetic { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .read-line, .card-glow::after { display: none; }
  .steps-rail .fill { transform: scaleY(1); }
  .compare { cursor: default; }
}

/* Reachable by a screen reader and by the keyboard, invisible on screen. Used
   for the range input that gives the comparison slider a keyboard control. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr-only:focus-visible {
  position: absolute; width: auto; height: auto; clip-path: none; margin: 0;
  left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
  padding: 6px 10px; border-radius: var(--radius-pill); background: #fff;
  box-shadow: var(--shadow), 0 0 0 3px rgba(31,122,82,.35);
}

/* ── The offline panel sits on the dark band ───────────────────────────────
   Everything inside it needs its own colours: the queued-sale cards, the
   empty state and the switch track all disappear at the light-theme values. */
.on-dark .qcard {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff;
}
.on-dark .qcard .s { color: rgba(255,255,255,.62); }
.on-dark .queue-empty { color: rgba(255,255,255,.58); }
.on-dark .switch .track { background: var(--green-bright); }
.on-dark .switch input:not(:checked) + .track { background: rgba(255,255,255,.24); }

/* A little more room for the branch chart, so the bars read as bars. */
.chart { height: 172px; }

/* The branch panel reads as a dashboard when the figures sit beside the week
   rather than on top of it, which also stops seven bars stretching the full
   width of the page and looking like blocks. */
.branchgrid { display: grid; grid-template-columns: minmax(190px, 240px) 1fr; gap: 34px; align-items: end; }
.branchgrid .kpis { grid-template-columns: 1fr; gap: 20px; margin: 22px 0 6px; }
@media (max-width: 820px) {
  .branchgrid { grid-template-columns: 1fr; gap: 6px; }
  .branchgrid .kpis { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 520px) { .branchgrid .kpis { grid-template-columns: 1fr 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════════
   The SVG panels
   ───────────────────────────────────────────────────────────────────────────
   Five panels built on anime's SVG utilities — a line that draws itself, a
   token that follows a motion path, and shapes that morph from one into
   another. They live on the pages whose subject they illustrate, one each, so
   no page is only words.

   Everything animated here is a stroke offset, a transform or a path's `d`.
   The geometry is generated in site.js rather than typed out, so the shapes
   stay in step with the numbers beside them.
   ═══════════════════════════════════════════════════════════════════════════ */

.svgwrap { position: relative; margin: 6px 0 4px; }
.svgart { display: block; width: 100%; height: auto; overflow: visible; }

/* ── A sale travelling the counter (point of sale) ─────────────────────── */

.salepath .track { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; }
.salepath .live  { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; }
.salepath .stop circle {
  fill: #fff; stroke: #cfd6db; stroke-width: 2.5;
  transition: fill .3s, stroke .3s;
}
.salepath .stop text {
  font: 700 13px var(--font); fill: var(--ink-muted);
  text-anchor: middle; transition: fill .3s;
}
.salepath .stop.is-live circle { fill: var(--green); stroke: var(--green); }
.salepath .stop.is-live text { fill: var(--ink); }
.salepath .token circle { fill: var(--green); }
.salepath .token path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.stoplist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4px; }
.stoplist li { list-style: none; font-size: .87rem; color: var(--ink-muted); opacity: .55; transition: opacity .3s, color .3s; }
.stoplist li b { display: block; color: var(--ink); font-weight: 700; font-size: .93rem; margin-bottom: 2px; }
.stoplist li.is-live { opacity: 1; }
@media (max-width: 720px) {
  .stoplist { grid-template-columns: repeat(2, 1fr); }
  .salepath .stop text { display: none; }
}

/* ── The line that redraws itself (reporting) ──────────────────────────── */

.chartart .grid { stroke: var(--line); stroke-width: 1; }
.chartart .axis { stroke: #cfd6db; stroke-width: 1.5; stroke-linecap: round; }
.chartart .series { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chartart .area { fill: var(--mint); opacity: .5; stroke: none; }
.chartart .marker { fill: var(--green); stroke: #fff; stroke-width: 3; }
.chartart .months text { font: 600 11px var(--font); fill: var(--ink-muted); text-anchor: middle; }

.readout { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.readout .v { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 820; letter-spacing: -.04em; line-height: 1; }
.readout .l { font-size: .9rem; color: var(--ink-muted); }

/* ── The tier that changes shape (memberships) ─────────────────────────── */

.tierart { margin-inline: auto; }
.tierart .badge { stroke-width: 0; transition: fill .5s; }
.tierart { max-width: 280px; }
.tierart .ring { fill: none; stroke-width: 2; opacity: .3; }
.tierart .label { font: 800 21px var(--font); text-anchor: middle; fill: #fff; letter-spacing: -.02em; }
.tierart .pts { font: 600 12px var(--font); text-anchor: middle; fill: rgba(255,255,255,.8); }

.tierrow { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.tierrow span { font-size: .84rem; font-weight: 700; color: var(--ink-muted); transition: color .3s; }
.tierrow span.is-live { color: var(--green); }

/* ── One shelf, every till (stock control) ─────────────────────────────── */

.hubart .track { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; }
.hubart .link { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; }
.hubart .node rect { fill: #fff; stroke: var(--line); stroke-width: 2; transition: stroke .3s; }
.hubart .node.hub rect { fill: var(--green); stroke: var(--green); }
.hubart .node text { font: 700 13px var(--font); text-anchor: middle; fill: var(--ink); }
.hubart .node .n { font: 800 19px var(--font); fill: var(--ink); letter-spacing: -.03em; }
.hubart .node.hub text, .hubart .node.hub .n { fill: #fff; }
.hubart .node.flash rect { stroke: var(--green); }

/* ── Who can see what (multi-store) ────────────────────────────────────── */

.orgart .wire { fill: none; stroke: #cfd6db; stroke-width: 2; stroke-linecap: round; }
.orgart .wire.lit { stroke: var(--green); stroke-width: 2.5; }
.orgart .box rect { fill: #fff; stroke: var(--line); stroke-width: 2; transition: fill .35s, stroke .35s, opacity .35s; }
.orgart .box text { font: 700 13px var(--font); text-anchor: middle; fill: var(--ink); transition: fill .35s; }
.orgart .box .sub { font: 600 11px var(--font); fill: var(--ink-muted); }
.orgart .box.lit rect { fill: var(--green); stroke: var(--green); }
.orgart .box.lit text, .orgart .box.lit .sub { fill: #fff; }
.orgart .box.dim { opacity: .34; }

.rolenote {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-tint); font-size: .92rem; color: var(--ink-soft);
}
.rolenote b { color: var(--ink); }

/* ── Ticks that draw themselves (pricing) ──────────────────────────────── */

.ledger { display: grid; gap: 2px; }
.ledger li { list-style: none; display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ledger li:last-child { border-bottom: 0; }
.ledger svg { width: 24px; height: 24px; }
.ledger svg circle { fill: none; stroke: var(--mint); stroke-width: 2.5; }
.ledger svg path { fill: none; stroke: var(--green); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ledger .what { font-weight: 640; }
.ledger .verdict-tag { font-size: .82rem; font-weight: 750; color: var(--green); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .salepath .token { display: none; }
}