/* ═══════════════════════════════════════════════════════════════════════════
   EngaigeNow — marketing site  ·  "Ink & Ember"

   Direction approved 1 Aug 2026 (design direction v1). The system is the one
   from that document, promoted to production:

   - Flat, edge-to-edge colour CHAPTERS. A section never sits on a background;
     it IS a colour. No gradients-as-atmosphere, no glows, no blurs.
   - Documentary photography with the product as ONE small frosted card
     floating on the picture. Never a phone bezel beside a paragraph.
   - Three type voices: display grotesque, body, and "the slip" — tabular
     mono, uppercase, letter-spaced — for every label, stat and caption.
   - Motion is three moments only (see site.js) and respects reduced-motion.

   Headlines are the neutral grotesque stack the direction was approved in.
   Swapping in a licensed display face later is: add @font-face, change
   --display. Nothing else moves.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: only light;

  --ink:       #0C0C0D;
  --ink-soft:  #1A1A1C;
  --paper:     #F5F2ED;
  --paper-2:   #EAE5DC;
  --ember:     #FF2D2D;
  --ember-2:   #E51F1F;   /* the lead tile on the ember field                */
  --brass:     #C8873C;
  --verdigris: #0E8D85;
  --verd-2:    #0B7269;   /* lead tile on the verdigris field                */
  --ash:       #6E6A66;
  --ash-on-ink:#8A8681;
  --line-ink:  rgba(245,242,237,.14);
  --line-paper:rgba(12,12,13,.13);

  --display: ui-sans-serif, -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    ui-sans-serif, -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --slip:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-hero: clamp(42px, 6.6vw, 92px);
  --t-h1:   clamp(30px, 4.4vw, 56px);
  --t-h2:   clamp(23px, 2.8vw, 34px);
  --t-h3:   19px;
  --t-body: 17px;
  --t-sm:   15px;
  --t-slip: 12px;

  --gut: clamp(20px, 5vw, 72px);
  --shell: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* site.js retints this to the active chapter's field so boundaries
     crossfade; chapters themselves are transparent over it. */
  transition: background-color .6s ease;
}
img{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:1.04;
  letter-spacing:-.035em; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ember); color:#fff; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--gut); }
.prose{ max-width:64ch; }

/* ── Chapters ──────────────────────────────────────────────────────────────
   Transparent over the body tint; each declares its field via data-field so
   the JS knows what colour to hand the body. Text colours ARE per-chapter. */
.ch{ padding-block:clamp(64px,9vw,128px); position:relative; }
.ch--ink{ color:var(--paper); }
.ch--paper{ color:var(--ink); }
.ch--ember{ color:#fff; }
.ch--verdigris{ color:#fff; }

/* ── The slip voice ──────────────────────────────────────────────────────── */
.slip{
  font-family:var(--slip); font-size:var(--t-slip); letter-spacing:.10em;
  text-transform:uppercase; font-variant-numeric:tabular-nums;
}
/* The spec strip. A GRID, not free-flowing flex: wrapping used to orphan the
   last item onto a line of its own with no column rhythm.

   The strips do NOT all hold the same number of items — the three paper strips
   hold four, the ember one at index.html:246 holds three. A single
   repeat(auto-fit,minmax()) cannot serve both: at tablet it put 2+1 on the
   3-item strip (an orphan, the very defect being fixed) and at desktop it left
   the 3-item strip a dead fourth track.

   So the BASE ladder is count-agnostic and cannot orphan anything at any count:
   one column when narrow, one single row when wide. */
.slip-strip{
  border-block:1px solid var(--line-ink); padding-block:18px;
  display:grid; grid-template-columns:1fr; gap:18px 32px;
}
@media(min-width:1000px){
  .slip-strip{ grid-auto-flow:column; grid-auto-columns:1fr; grid-template-columns:none; }
}
/* The middle stage is an enhancement, and only a count that divides evenly gets
   one — so no strip can ever strand a lone item on a row of its own:
   exactly 4 items -> 2 columns, exactly 3 items -> 3 columns, anything else
   stays single-column. If :has() is unsupported these rules simply drop and the
   base ladder still holds, one column, which is correct if a little taller. */
@media(min-width:620px) and (max-width:999.98px){
  .slip-strip:has(> span:nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:700px) and (max-width:999.98px){
  .slip-strip:has(> span:nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); }
}
.ch--paper .slip-strip{ border-color:var(--line-paper); }

/* Each item STACKS its label above its value. This is the whole mobile fix:
   the label used to sit inline, so a wrapped value indented under the VALUE
   and orphaned words — "PAYMENTS YOUR OWN FACILITY. WE TAKE NO / CUT". A
   column gives every cell a single left edge and nothing can hang.
   Direct child only: hospitality's "From" cell nests a <span data-from-price>
   that region.js rewrites, and it must stay an inline value, not a column. */
.slip-strip > span{ display:flex; flex-direction:column; gap:7px; }

.slip-strip b{
  font-weight:700; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ash);
}
/* --ash on --paper measures 4.80:1, clearing WCAG AA (4.5:1). It replaces
   opacity:.5, which measured 3.58:1 and was an unmeasurable blend. --ash is
   already the family's dimmed-mono-label token (.cfg-l, .skin-cap, .kpi .l). */

/* CASING — mono uppercase label over a sentence-case value. RATIFIED by Andrew
   23 Aug 2026, having seen it live, when the alternative was put to him; it is
   a settled decision, not a default. Do NOT restore uppercase values.
   Uppercase mono at .10em tracking is punishing at sentence length, e.g.
   "ISOLATED PER BUSINESS, POPIA-ALIGNED". The label keeps the slip voice so the
   cell still reads as a spec sheet. No copy was retyped — the values are
   already sentence-case in the HTML and the casing is purely presentational. */
.slip-strip > span{ text-transform:none; }

/* On the ember chapter the label was white at 50% over #FF2D2D — 1.77:1. Full
   white lifts it to 3.71:1, matching the value, and it is then separated from
   the value by size, weight and tracking instead of by opacity. The ember
   GROUND is deliberately untouched: #FF2D2D caps small text at 3.71:1 whatever
   the label does, so this chapter stays below AA. That is pre-existing, and
   clearing it is a brand-level decision, not a layout fix.
   PUT TO ANDREW 23 Aug 2026 with the 3.71:1 measurement, and he chose to leave
   the ember chapter as it is. Known and accepted — do not "fix" it by darkening
   the ground, recolouring the chapter, or shrinking the strip out of it. */
.ch--ember .slip-strip b{ color:#fff; }

.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.eyebrow .rule{ width:44px; height:2px; background:var(--ember); flex:none; }
.ch--ember .eyebrow .rule, .ch--verdigris .eyebrow .rule{ background:rgba(255,255,255,.85); }
.eyebrow .txt{ font-family:var(--slip); font-size:var(--t-slip); letter-spacing:.14em;
  text-transform:uppercase; opacity:.72; }

.lede{ font-size:clamp(18px,2vw,21px); line-height:1.55; color:var(--ash-on-ink); margin-top:22px; }
.ch--paper .lede{ color:var(--ash); }
.ch--ember .lede, .ch--verdigris .lede{ color:rgba(255,255,255,.86); }
.note{ font-size:var(--t-sm); color:var(--ash-on-ink); }
.ch--paper .note{ color:var(--ash); }

.pill{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body);
  font-size:15px; font-weight:600; padding:15px 28px; border-radius:999px;
  background:var(--ember); color:#fff; border:0; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease; }
.pill:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -16px rgba(255,45,45,.8); }
.pill.ghost{ background:transparent; color:var(--paper); border:1px solid rgba(245,242,237,.4);
  box-shadow:none; }
.pill.ghost:hover{ border-color:rgba(245,242,237,.8); box-shadow:none; }
.pill.on-paper{ box-shadow:none; }
.pill.dark{ background:var(--ink); color:var(--paper); }
.pill.dark:hover{ box-shadow:0 14px 34px -16px rgba(12,12,13,.8); }
.pill.teal{ background:var(--verdigris); }
.pill.teal:hover{ box-shadow:0 14px 34px -16px rgba(14,141,133,.8); }

/* ═══ Nav ════════════════════════════════════════════════════════════════ */
header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line-ink);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:72px; }
/* logo.webp is 616×400 — a 1.54:1 lockup, NOT the 4.5:1 the width/height
   attributes used to claim. `width:auto` is what makes the intrinsic ratio
   win over the attribute, so it is load-bearing on every use of this file;
   the footer was missing it and stretched the mark ~2.9× wide. */
.nav-logo{ height:48px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:15px; font-weight:600; color:var(--ash-on-ink); transition:color .15s; }
.nav-links a:hover{ color:var(--paper); }
.nav-end{ display:flex; align-items:center; gap:14px; }
.nav-end .login{ font-size:15px; font-weight:600; color:var(--ash-on-ink); }
.nav-end .login:hover{ color:var(--paper); }
.nav-end .pill{ padding:11px 20px; font-size:14px; }
@media(max-width:900px){ .nav-links{ display:none; } }
@media(max-width:480px){ .nav-end .login{ display:none; } .nav{ height:64px; } .nav-logo{ height:38px; } }

/* ═══ Photo comp — the core device ═══════════════════════════════════════ */
.comp{ position:relative; overflow:hidden; background:var(--ink-soft); }
.comp-img{ position:absolute; inset:0; }
.comp-img img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.045); transition:transform 1100ms cubic-bezier(.2,.6,.2,1); }
.comp.in .comp-img img{ transform:scale(1); }
/* Two scrims: left-to-right for the headline, bottom-up so the lede holds
   contrast whatever the photograph is doing in its lower-left. */
.comp-img::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(0deg,  rgba(12,12,13,.78) 0%, rgba(12,12,13,.26) 42%, transparent 68%),
    linear-gradient(97deg, rgba(12,12,13,.96) 0%, rgba(12,12,13,.80) 46%, rgba(12,12,13,.14) 80%); }
.comp-in{ position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,5vw,64px); }
.comp-in h1, .comp-in h2{ font-weight:800; letter-spacing:-.045em; color:var(--paper); }
.comp-in .lede{ max-width:42ch; color:rgba(245,242,237,.90); }
.comp-cta{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }

/* Full-height hero variant */
.hero .comp-in{ min-height:min(92vh, 860px); }
.hero h1{ font-size:var(--t-hero); max-width:14ch; }
.hero h1 em{ font-style:normal; color:var(--ember); }
.hero-meta{ margin-top:30px; display:flex; gap:10px 26px; flex-wrap:wrap;
  color:rgba(245,242,237,.62); }

/* In-flow comps (retail, close) */
.comp.band .comp-in{ min-height:clamp(430px,56vw,620px); }
.comp.band h2{ font-size:clamp(32px,5vw,64px); max-width:15ch; }
.comp.v h2 em{ font-style:normal; color:#5FE0D4; }

/* ── The floating product card ──────────────────────────────────────────── */
.float{
  position:absolute; right:clamp(16px,3vw,44px); bottom:clamp(16px,3vw,44px);
  width:min(300px,74vw); background:rgba(18,18,20,.72);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(245,242,237,.16); border-radius:18px; padding:16px 17px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9); color:var(--paper);
}
.float-top{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.float-dot{ width:20px; height:20px; border-radius:999px; background:#15A34A; flex:none;
  display:flex; align-items:center; justify-content:center; }
.float-dot svg{ width:11px; height:11px; stroke:#fff; stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.float-ttl{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; }
.float-row{ display:flex; justify-content:space-between; gap:12px; padding-block:7px;
  font-size:12.5px; border-top:1px solid rgba(245,242,237,.10); font-variant-numeric:tabular-nums; }
.float-row:first-of-type{ border-top:0; }
.float-row .who{ color:rgba(245,242,237,.66); }
.float-row.done .who{ color:var(--paper); }
.float-foot{ margin-top:12px; padding-top:11px; border-top:1px solid rgba(245,242,237,.16);
  display:flex; justify-content:space-between; align-items:baseline; }
.float-foot .l{ font-family:var(--slip); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(245,242,237,.6); }
.float-foot .v{ font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.float.teal .float-dot{ background:var(--verdigris); }
.float-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:7px; }
.chip.ok{ background:rgba(21,163,74,.20); color:#77E39B; }
.chip.loc{ background:rgba(14,141,133,.24); color:#5FE0D4; }

/* hero card rows tick in one at a time (site.js adds .live) */
.float.tick .float-row, .float.tick .float-foot{ opacity:0; transform:translateY(6px); }
.float.tick.live .float-row, .float.tick.live .float-foot{
  opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease; }
.float.tick.live .float-row:nth-child(2){ transition-delay:.25s; }
.float.tick.live .float-row:nth-child(3){ transition-delay:.55s; }
.float.tick.live .float-row:nth-child(4){ transition-delay:.85s; }
.float.tick.live .float-row:nth-child(5){ transition-delay:1.15s; }
.float.tick.live .float-foot{ transition-delay:1.5s; }

@media(max-width:760px){
  /* On a phone the card joins the flow — overlaid, it lands on the copy. */
  .comp-in{ min-height:0; padding-bottom:20px; }
  .hero .comp-in{ min-height:0; padding-top:clamp(56px,16vw,96px); }
  .float{ position:static; width:auto; margin:0 clamp(20px,5vw,64px) clamp(24px,5vw,64px); }
  /* stacked, not squeezed: side-by-side at 375px wraps "See it working"
     inside its own pill */
  .comp-cta{ flex-direction:column; align-items:stretch; }
  .comp-cta .pill{ justify-content:center; }
}

/* ═══ Two floors fork ════════════════════════════════════════════════════ */
.fork{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:52px; }
.fork-card{ position:relative; overflow:hidden; min-height:420px; display:flex;
  flex-direction:column; justify-content:flex-end; padding:30px;
  transition:transform .2s ease; }
.fork-card:hover{ transform:translateY(-4px); }
.fork-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.fork-card::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,12,13,.20) 0%, rgba(12,12,13,.82) 62%, rgba(12,12,13,.95) 100%); }
.fork-card .k{ font-family:var(--slip); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:12px; }
.fork-card.h .k{ color:#FF8A8A; }
.fork-card.r .k{ color:#5FE0D4; }
.fork-card h3{ font-size:clamp(24px,2.6vw,31px); color:var(--paper); letter-spacing:-.03em; }
.fork-card p{ margin-top:10px; font-size:var(--t-sm); color:rgba(245,242,237,.78); max-width:44ch; }
.fork-card .go{ margin-top:18px; font-weight:700; font-size:14.5px; }
.fork-card.h .go{ color:#FF8A8A; }
.fork-card.r .go{ color:#5FE0D4; }
@media(max-width:820px){ .fork{ grid-template-columns:1fr; } .fork-card{ min-height:340px; } }

/* ═══ Feature grids (ember + verdigris chapters) ═════════════════════════ */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.28); margin-top:44px; }
.feats .feat{ background:var(--ember); padding:24px 22px 26px; }
.feats.on-verd .feat{ background:var(--verdigris); }
.feats .feat.lead{ background:var(--ember-2); }
.feats.on-verd .feat.lead{ background:var(--verd-2); }
.feat h3{ font-size:17px; letter-spacing:-.02em; }
.feat p{ font-size:13.5px; margin-top:8px; color:rgba(255,255,255,.84); }
.feat .tag{ font-family:var(--slip); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:11px; }
/* Two-up variant, for a chapter with two points rather than three or six —
   without it the 3-col grid leaves a visibly empty cell. */
.feats.two{ grid-template-columns:repeat(2,1fr); }
@media(max-width:840px){ .feats{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .feats, .feats.two{ grid-template-columns:1fr; } }

/* ═══ Settle spotlight: three cards over one photograph ══════════════════ */
.spot{ position:relative; overflow:hidden; margin-top:48px; background:var(--ink-soft); }
.spot .comp-img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,12,13,.30) 0%, rgba(12,12,13,.74) 100%); }
.spot-in{ position:relative; padding:clamp(28px,5vw,64px); }
.spot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(80px,14vw,180px); }
.spot-card{ background:rgba(18,18,20,.74);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(245,242,237,.16); border-radius:16px; padding:22px; color:var(--paper); }
.spot-card .n{ font-family:var(--slip); font-size:11px; letter-spacing:.12em; color:#FF8A8A; }
.spot-card h3{ font-size:18px; margin-top:10px; letter-spacing:-.02em; }
.spot-card p{ font-size:14px; margin-top:8px; color:rgba(245,242,237,.76); }
@media(max-width:820px){ .spot-grid{ grid-template-columns:1fr; margin-top:clamp(40px,8vw,80px); } }

/* ═══ Operator panel ═════════════════════════════════════════════════════ */
.op{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:center; margin-top:8px; }
.op-points{ display:grid; gap:22px; margin-top:30px; }
.op-points li{ padding-left:20px; border-left:3px solid var(--ember); }
.op-points h3{ font-size:var(--t-h3); letter-spacing:-.02em; }
.op-points p{ font-size:var(--t-sm); color:var(--ash); margin-top:6px; }
.dash{ background:#fff; border:1px solid var(--line-paper); border-radius:14px; overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(12,12,13,.45); }
.dash-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line-paper); }
.dash-bar i{ width:9px; height:9px; border-radius:50%; background:var(--paper-2); display:block; }
.dash-bar .ttl{ margin-left:8px; font-family:var(--slip); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ash); }
.dash-body{ padding:18px; }
.dash-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.kpi{ border:1px solid var(--line-paper); border-radius:10px; padding:12px 13px; }
.kpi .l{ font-family:var(--slip); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); }
.kpi .v{ font-size:20px; font-weight:800; letter-spacing:-.03em; margin-top:5px; font-variant-numeric:tabular-nums; }
.tbl .tr{ display:grid; grid-template-columns:1fr auto auto; gap:14px; padding:11px 4px;
  border-top:1px solid var(--line-paper); font-size:13.5px; align-items:center;
  font-variant-numeric:tabular-nums; }
.tbl .tr .t{ font-weight:700; }
.tag{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.tag.paid{ background:#E7F7EC; color:#146C2E; }
.tag.part{ background:#FFF6E8; color:#92400E; }
.tag.open{ background:var(--paper); color:var(--ash); }
@media(max-width:900px){ .op{ grid-template-columns:1fr; } }

/* ═══ Pricing ════════════════════════════════════════════════════════════ */
/* Four cards became three (pricing restructure, Andrew's ruling 4 Sep 2026:
   Demo / Pro / Custom, replacing Bronze/Silver/Gold/Platinum). Applying the
   same orphan-avoidance convention .slip-strip already documents above
   (L89-99 in this file): the old 1000px "2-up" middle step is exactly the
   defect that comment fixes for spec strips — 3 cards into 2 columns strands
   one card alone on its own row. So .prices drops straight from 3-across to
   1-column, with no 2-column middle step for a count that doesn't divide
   evenly into it. */
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:52px; align-items:stretch; }
.price{ position:relative; background:#fff; border:1px solid var(--line-paper); border-radius:16px;
  padding:26px 24px; display:flex; flex-direction:column; }
/* ⚠ RULED 4 SEP 2026 — DO NOT "SYNC" THIS RULE TO THE MOCKUP.
   Andrew ruled: KEEP THIS TREATMENT AS SHIPPED — a 1px ember border (the
   width inherited from .price) plus the shadow below. The pricing mockup at
   customer-success-staging/05-pricing-design/pricing-marketing.html:190 has a
   LARGER variant — border:2px solid var(--ember); transform:scale(1.035);
   z-index:1 — and it is NOT adopted. Anyone diffing the two files will find
   that difference; it is deliberate, not drift.

   And the reason it went unnoticed: that mockup's own gate comment claims
   every shared class is "the real one, same name, same values", naming
   .price.feat-tier explicitly. The claim is FALSE — the mockup silently
   thickened and enlarged this card relative to the live class it said it was
   reproducing, which is how design-package §8 came to cite "scale" as one of
   the paid tier's reinforcing signals when the shipping site has never had
   one. A gate comment's claim of verbatim reuse is a CLAIM, not a
   measurement: diff the class against this stylesheet before reusing it. */
.price.feat-tier{ border-color:var(--ember); box-shadow:0 30px 60px -38px rgba(255,45,45,.55); }
.price .badge{ position:absolute; top:-11px; right:20px; font-family:var(--slip); font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; background:var(--ember); color:#fff;
  padding:5px 11px; border-radius:999px; }
.price h3{ font-size:18px; letter-spacing:-.02em; }
.price .amt{ font-size:36px; font-weight:800; letter-spacing:-.045em; margin:10px 0 18px;
  font-variant-numeric:tabular-nums; }
.price .amt span{ font-size:14px; font-weight:600; color:var(--ash); letter-spacing:0; }
/* The figure is its own span so region.js can rewrite it without touching the
   unit — but the rule above was written for "/month" and would shrink it to
   unit size. Keep that rule for the unit; exempt the figure. */
.price .amt span[data-amt]{ font:inherit; color:inherit; letter-spacing:inherit; }
/* New for the three-package restructure (4 Sep 2026) — Demo's free price and
   a short sub-line under the amount (trial length / location cap / segment)
   didn't exist in the four-tier layout, so these two rules are additions,
   not replacements. Everything else in this block — .prices, .price,
   .feat-tier, .badge, .amt itself — is reused unchanged. */
.price .amt.free{ color:var(--verdigris); }
.price .sub{ font-size:13px; color:var(--ash); margin:-8px 0 18px; }
.price ul{ display:grid; gap:9px; align-content:start; flex:1; margin-bottom:22px; }
.price li{ display:flex; gap:10px; font-size:14px; color:#3A3733; }
.price li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ember);
  flex:none; margin-top:9px; }
.price .pill{ justify-content:center; }
.price .pill.ghost{ color:var(--ink); border-color:var(--line-paper); }
.price .pill.ghost:hover{ border-color:var(--ink); }
.price-note{ margin-top:28px; text-align:center; }
/* The commercial-surface disclosure line (PRODUCT-CONTRACT.md) — new on this
   section, 4 Sep 2026; matches the small centred note treatment .cur-tax
   already uses just above it. */
.legal-line{ margin-top:8px; text-align:center; font-size:12.5px; color:var(--ash); }
@media(max-width:900px){ .prices{ grid-template-columns:1fr; } }

/* ── Currency switch ──────────────────────────────────────────────────────
   In the slip voice, because it IS a receipt control — the same tabular mono
   the stats and captions use. Deliberately still: direction v1 allows three
   motion moments and this is not one of them, so nothing here moves. It is
   built by region.js and stays hidden without JS, since a switch that cannot
   switch is worse than the static rand price the HTML already carries. */
.cur{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; margin-top:32px; }
.cur-lbl{ color:var(--ash); }
.cur-opts{ display:flex; gap:1px; background:var(--line-paper);
  border:1px solid var(--line-paper); border-radius:999px; overflow:hidden; }
.cur-opts button{
  font-family:inherit; font-size:inherit; letter-spacing:inherit;
  text-transform:inherit; font-variant-numeric:inherit;
  background:#fff; color:var(--ash); border:0; padding:10px 17px; cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.cur-opts button:hover{ color:var(--ink); }
.cur-opts button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.cur-tax{ margin-top:14px; text-align:center; }

/* The [hidden] guard. `hidden` is a user-agent rule and ANY author `display:`
   beats it — .cur is display:flex, so without this the switch paints on a
   no-JS page in spite of the attribute. This has shipped as a bug five times
   across the family; the guard belongs in every surface stylesheet. */
[hidden]{ display:none !important; }

/* ═══ Close + footer ═════════════════════════════════════════════════════ */
.close-comp h2{ font-size:clamp(32px,5vw,64px); }
footer{ border-top:1px solid var(--line-ink); padding-block:52px 44px; color:var(--paper); }
.foot{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.foot-logo{ height:36px; width:auto; margin-bottom:14px; }
.foot-brand p{ font-size:var(--t-sm); color:var(--ash-on-ink); max-width:30ch; }
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h4{ font-family:var(--slip); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-on-ink); margin:0 0 14px; font-weight:600; }
.foot-col a{ display:block; font-size:14.5px; color:var(--paper); margin-bottom:10px; opacity:.85; }
.foot-col a:hover{ opacity:1; color:var(--ember); }
.foot-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line-ink);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* chapter reveal (site.js) — headline blocks rise 12px as they enter */
.rise{ opacity:0; transform:translateY(12px); }
.rise.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  body{ transition:none; }
  .comp-img img{ transform:none !important; transition:none; }
  .float.tick .float-row, .float.tick .float-foot{ opacity:1; transform:none; }
  .rise{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important; animation:none !important; }
}

/* ── Product screens: the real patron app, in a phone frame ───────────────
   Hospitality's value proposition is engagement AT THE TABLE and it starts
   with the menu, so the product itself has to be on the page. The pre-existing
   site used these recordings and two rebuilds replaced them with stock
   photography that argued for a different product. They are back, and they
   lead. Video is muted/loop/playsinline so it behaves as motion, not media —
   no controls, nothing to press, and `preload:none` off the hero so five
   clips do not cost the first paint. */
.phone-frame{ width:min(300px,80vw); margin-inline:auto; background:#0A0C0F; border-radius:38px;
  padding:10px; box-shadow:0 40px 80px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.10); }
.phone-frame.sm{ width:min(248px,72vw); border-radius:32px; padding:8px; }
.phone-frame video, .phone-frame img{ display:block; width:100%; border-radius:29px; background:#F8FAFC; }
.phone-frame.sm video, .phone-frame.sm img{ border-radius:25px; }
.ch--paper .phone-frame{ box-shadow:0 40px 80px -40px rgba(12,12,13,.55), 0 0 0 1px rgba(12,12,13,.10); }

.screens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(26px,3.4vw,40px); margin-top:clamp(36px,5vw,56px); }
.screens figure{ margin:0; }
/* The caption is pinned to the PHONE's width and ruled off from it, rather
   than floating centred underneath at a different measure — five aligned
   hairlines read as one system, where five ragged centred blocks read as
   loose text. The label takes the slip voice, which the direction already
   reserves for every label and caption; the body stays left-aligned so five
   columns can be scanned across instead of re-centred each time. */
.screens figcaption{
  width:min(248px,72vw); margin:20px auto 0; padding-top:15px;
  border-top:1px solid var(--line-ink);
  font-size:14px; line-height:1.55; color:var(--ash-on-ink); text-align:left;
}
.ch--paper .screens figcaption{ color:var(--ash); border-top-color:var(--line-paper); }
.screens figcaption b{
  display:block; margin-bottom:7px; color:var(--paper);
  font-family:var(--slip); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.ch--paper .screens figcaption b{ color:var(--ink); }
@media(max-width:900px){ .split{ grid-template-columns:1fr !important; } }