/* ShredderPOS concept site — one stylesheet for every page.
   Mobile-first. Breakpoints: 640px (tablet), 1024px (desktop). */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand (sampled from logo files and brochure) */
  --navy-950: #061024;
  --navy-900: #0b1a36;
  --navy-800: #12244a;
  --navy-700: #1b3462;
  --mint: #28e0d0;          /* buttons and active states only */
  --mint-hover: #6cf0e4;
  --on-mint: #04201d;
  --cream: #f4ecdc;         /* text on dark */
  --cream-muted: #b9b6ad;
  --sky: #48a0f8;           /* Blue only */
  --sky-tint: rgba(72, 160, 248, 0.16);

  /* Light sections */
  --paper: #ffffff;
  --paper-2: #fafafa;
  --zinc: #e4e4e7;
  --ink: #09090b;
  --ink-muted: #52525b;

  /* Status (mockups only) */
  --ok: #34d399;
  --ok-ink: #047857;
  --bad: #f87171;
  --bad-ink: #b91c1c;

  --line-dark: rgba(244, 236, 220, 0.14);
  --line-dark-strong: rgba(244, 236, 220, 0.26);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --gutter: 16px;
  --max: 1200px;
  --header-h: 64px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--mint); color: var(--on-mint); padding: 12px 16px; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
}

/* Section themes */
.dark { background: var(--navy-900); color: var(--cream); }
.light { background: var(--paper); color: var(--ink); }
.light-2 { background: var(--paper-2); color: var(--ink); }
.section { padding-block: 72px; }

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn-mint { background: var(--mint); color: var(--on-mint); }
.btn-mint:hover { background: var(--mint-hover); }
.btn-ghost { border-color: var(--line-dark-strong); color: var(--cream); background: transparent; }
.btn-ghost:hover { border-color: var(--cream); }
.light .btn-ghost, .light-2 .btn-ghost { border-color: var(--zinc); color: var(--ink); }
.light .btn-ghost:hover, .light-2 .btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
/* Text link: underline on the words only; the arrow sits just outside it */
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 600; text-decoration: none;
}
.text-link-label { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover .text-link-label { text-decoration-thickness: 2px; }

/* ---------- 4. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy-900); color: var(--cream);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line-dark); }
.header-inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: flex; align-items: center; min-height: 48px; margin-right: auto; }
.brand img { width: 120px; height: auto; }
.main-nav { display: none; }
.header-cta { flex: none; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -8px;
  background: none; border: 0; cursor: pointer; border-radius: var(--radius-sm);
}
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

.mobile-menu {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: 49;
  background: var(--navy-900); border-top: 1px solid var(--line-dark);
  padding: 24px var(--gutter) 40px; overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0 0 32px; }
.mobile-menu li a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 2rem;
  text-decoration: none; letter-spacing: .01em;
}
body.menu-open { overflow: hidden; }

@media (min-width: 1024px) {
  .brand img { width: 140px; }
  .main-nav { display: block; margin-right: 24px; }
  .main-nav ul { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
  .main-nav a {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
    text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--cream-muted); border-radius: var(--radius-sm);
  }
  .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--cream); }
  .main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mint); border-radius: 0; }
  .menu-btn, .mobile-menu { display: none !important; }
  .header-cta { min-height: 44px; padding: 0 20px; }
}

/* ---------- 5. Shared section pieces ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-muted);
}
.light .eyebrow, .light-2 .eyebrow { color: var(--ink-muted); }

.chapter { margin-bottom: 40px; }
.chapter-label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.mark { width: 10px; height: 10px; flex: none; background: var(--mint); }
.mark-dot { border-radius: 50%; }
.mark-diamond { transform: rotate(45deg); width: 9px; height: 9px; }
.light .mark, .light-2 .mark { background: var(--ink); }
.chapter-title { font-size: clamp(3.5rem, 13vw, 7rem); }
.chapter-line {
  display: block; margin-top: 10px;
  font-family: var(--font-sans); font-weight: 600; text-transform: none; letter-spacing: -0.01em;
  font-size: clamp(1.375rem, 4.5vw, 2rem); line-height: 1.2;
}
.dark .chapter-line { color: var(--cream-muted); }
.light .chapter-line, .light-2 .chapter-line { color: var(--ink-muted); }

.section-title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
.section-intro { max-width: 60ch; margin-top: 14px; font-size: 1.0625rem; }
.dark .section-intro { color: var(--cream-muted); }
.light .section-intro, .light-2 .section-intro { color: var(--ink-muted); }

.sample-note { margin-top: 20px; font-family: var(--font-mono); font-size: .75rem; color: var(--cream-muted); }

/* Mountain line art (hero + closing CTA) */
.mountains { width: 100%; height: clamp(96px, 14vw, 200px); color: var(--cream); opacity: .38; pointer-events: none; }
.mountains path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- 6. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: 48px; }
.hero-grid { display: grid; gap: 40px; position: relative; z-index: 1; }
.hero-title { font-size: clamp(2.5rem, 11vw, 4rem); line-height: .95; letter-spacing: .005em; text-wrap: balance; }
.hero-lead { margin-top: 20px; font-size: clamp(1.125rem, 3.6vw, 1.3125rem); line-height: 1.45; max-width: 38ch; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
/* Secondary hero action: cream text link, underline on the words only, arrow just outside it */
.hero-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 4px; margin: 0 -4px;      /* 48px tap height, no visual shift */
  color: var(--cream); font-weight: 600; text-decoration: none;
}
.hero-link-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero-link-arrow { font-size: .875em; transition: transform .15s; }
.hero-link:hover .hero-link-text { text-decoration-thickness: 2px; }
.hero-link:hover .hero-link-arrow { transform: translateX(3px); }
@media (max-width: 359px) { .hero-actions { column-gap: 16px; } .hero-actions .btn { padding: 0 18px; } }
.hero-specs {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: .75rem; color: var(--cream-muted);
}
.hero-specs li { display: inline-flex; align-items: center; gap: 8px; }
.hero-specs li::before { content: ""; width: 5px; height: 5px; background: var(--mint); border-radius: 50%; }

.hero-grid { padding-bottom: 32px; }
.hero-mountains { position: relative; margin-top: -8px; z-index: 0; height: max(72px, 6.95vw); flex: none; }  /* 6.95vw = full 1440x100 art, no cropping */

/* Device group: laptop with an overlapping phone. Sizes inside are in container units (cqw),
   so the pair keeps the same proportions at every screen width, phones included. */
.device-stage {
  --pw: 42;                                  /* phone width, % of the stage */
  position: relative; width: 100%; margin: 0;
  container-type: inline-size;
  padding-bottom: 36%;                       /* room for the phone below the laptop (% = of the stage width) */
}
.laptop { width: 84%; margin-left: auto; }
.laptop-lid {
  background: #0a0a0a; border-radius: 2.2cqw 2.2cqw 0 0; padding: 2cqw 2cqw 1.4cqw;
  box-shadow: 0 0 0 1px rgba(244, 236, 220, .18);
}
.laptop-lid img { width: 100%; aspect-ratio: 1180 / 790; object-fit: cover; object-position: top; border-radius: .6cqw; background: #fff; }
.laptop-base {
  height: 2.2cqw; margin: 0 -5%; background: #2b2f38; border-radius: 0 0 2cqw 2cqw;
  box-shadow: inset 0 .4cqw 0 #3a3f4a;
}
/* Phone in the hero: every size is in em, and 1em scales with the phone's width */
.device-stage .phone {
  position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; max-width: none;
  width: calc(var(--pw) * 1%);
  font-size: calc(var(--pw) * 0.0466cqw);    /* = 11px when the phone is 236px wide */
  padding: .64em; border-radius: 2.9em;
}
.device-stage .phone-screen { font-size: 1em; border-radius: 2.3em; }
.device-stage .phone-status { padding: .73em 1.64em .18em; font-size: .91em; }
.device-stage .phone-notch { width: 5.8em; height: 1.64em; }
.device-stage .co { padding: .36em 1.09em 1.27em; }
.device-stage .co-head { margin: .55em 0 .73em; }
.device-stage .co-head strong { font-size: 1.36em; }
.device-stage .co-step { font-size: 1em; }
.device-stage .co-progress { gap: .36em; margin-bottom: 1.27em; }
.device-stage .co-progress span { height: .36em; border-radius: .18em; }
.device-stage .co-line { padding: .55em 0; gap: .73em; }
.device-stage .co-line small { font-size: .91em; }
.device-stage .co-total { padding: .73em 0 .91em; font-size: 1.27em; }
.device-stage .pay-btn { height: 3.1em; font-size: 1.18em; margin-bottom: .5em; border-radius: .8em; gap: .5em; }
.device-stage .pay-btn svg { width: .9em; height: auto; }
.device-stage .co-or { font-size: .91em; margin-top: .36em; }

/* Phone frame */
.phone {
  position: relative; width: 100%; max-width: 320px; margin-inline: auto;
  background: #000; border-radius: 40px; padding: 10px;
  box-shadow: 0 0 0 1px rgba(244, 236, 220, .18), 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.phone-screen {
  background: var(--paper); color: var(--ink); border-radius: 31px; overflow: hidden;
  font-size: .8125rem; line-height: 1.4;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 4px;
  font-size: .6875rem; font-weight: 600;
}
.phone-notch { width: 84px; height: 22px; background: #000; border-radius: 999px; }

/* Phone checkout (hero) */
.co { padding: 6px 16px 18px; }
.co-head { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 8px; }
.co-head strong { font-size: 1.0625rem; }
.co-step { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-muted); }
.co-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 14px; }
.co-progress span { height: 4px; border-radius: 2px; background: var(--ink); }
.co-line { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--zinc); }
.co-line small { display: block; color: var(--ink-muted); font-size: .75rem; }
.co-line b { font-weight: 600; white-space: nowrap; }
.co-total { display: flex; justify-content: space-between; padding: 12px 0 14px; font-weight: 700; font-size: 1rem; }
.pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 10px;
  font-weight: 600; font-size: .9375rem; margin-bottom: 8px;
}
.pay-apple { background: #000; color: #fff; }
.pay-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.pay-google .g { font-weight: 700; color: #4285f4; }
.co-or { text-align: center; font-size: .75rem; color: var(--ink-muted); margin-top: 4px; }

@media (min-width: 1024px) {
  /* The hero fills the screen below the sticky header; copy + devices are centered as one block,
     the mountain art sits along the bottom edge. */
  .hero {
    --h1: clamp(3.25rem, 4.5vw, 4.25rem);
    padding-top: 0; min-height: calc(100svh - var(--header-h));
    display: flex; flex-direction: column;
  }
  .hero-grid { flex: 1; align-content: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; padding-block: 48px; }
  .hero-title { font-size: var(--h1); }
  .hero-title-end { display: block; }          /* "built for ski areas" on its own line */
  /* Laptop lid lines up with the top of the headline's capitals
     (the space above the capitals inside the first line = about 0.16 x the H1 size). */
  .device-stage {
    --pw: 34;
    margin-top: calc(var(--h1) * 0.16);
    padding-bottom: 18%;
  }
  .laptop { width: 90%; }
  .hero-mountains { margin-top: 0; }
}

/* ---------- 7. ShredderPOS vs legacy: one table, thin dividers, tinted ShredderPOS column ---------- */
:root {
  --ours-tint: #e6f8f6;       /* mint, very lightly mixed into white */
  --ours-tint-head: #d3f3ef;
  --ours-ink: #0f5f58;        /* dark teal for the ShredderPOS header */
  --divider: #e4e4e7;
}
/* Intro: two lines on desktop, breaking after "same system"; natural wrapping below 1024px */
@media (min-width: 1024px) {
  .new-intro { max-width: none; font-size: 1.1875rem; line-height: 1.55; }
  .new-intro-end { display: block; }
}
/* Table title as a quiet caption; "Leave the old setup behind." carries the weight above it */
.compare-title { font-size: 1.0625rem; font-weight: 600; color: #3d4b69; margin-bottom: 12px; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { text-align: left; vertical-align: top; }
.compare thead th { padding: 14px 24px; font-size: 1rem; vertical-align: bottom; border-bottom: 1px solid #d4d4d8; }
.compare thead .c-ours { background: var(--ours-tint-head); color: var(--ours-ink); font-weight: 700; border-radius: 12px 12px 0 0; }
.compare thead .c-legacy { color: var(--ink-muted); font-weight: 600; }
.compare tbody th, .compare tbody td { padding: 18px 24px; border-bottom: 1px solid var(--divider); }
.compare tbody th { font-weight: 600; padding-left: 0; }
.compare tbody .c-ours { background: var(--ours-tint); font-weight: 600; color: var(--ink); }
.compare tbody .c-legacy { color: var(--ink-muted); }
.compare tbody tr:last-child .c-ours { border-radius: 0 0 12px 12px; }
.compare tbody tr:last-child > * { border-bottom: 0; }

@media (min-width: 640px) {
  .compare .c-topic { width: 24%; }
  .compare .c-ours { width: 38%; }
  .compare .c-legacy { width: 38%; }
  .compare tbody td, .compare tbody th { font-size: 1.0625rem; }
}

/* Phone: plain headers once at the top ("ShredderPOS" in bold dark teal), each topic on its own line,
   both answers side by side below it, one thin divider between groups. No fills on phones. */
@media (max-width: 639px) {
  .compare, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 20px; }   /* legacy column sits a little right of center */
  .compare thead .c-topic { display: none; }
  .compare thead tr { padding-bottom: 10px; border-bottom: 1px solid #d4d4d8; }
  .compare thead th { padding: 0; font-size: .9375rem; border-bottom: 0; background: none; border-radius: 0; }
  .compare thead .c-ours { color: var(--ours-ink); font-weight: 700; background: none; border-radius: 0; }
  .compare tbody tr { padding: 16px 0; border-bottom: 1px solid var(--divider); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th.c-topic {
    grid-column: 1 / -1; padding: 0 0 6px; border-bottom: 0;
    font-size: .8125rem; font-weight: 600; color: var(--ink-muted);
  }
  .compare tbody td {
    display: flex; align-items: center;
    padding: 0; border-bottom: 0; border-radius: 0; background: none;
    font-size: .9375rem; line-height: 1.4;
  }
  .compare tbody td.c-ours { background: none; border-radius: 0; font-weight: 600; }
  .compare tbody tr:last-child .c-ours { border-radius: 0; }
}
@media (max-width: 359px) {
  .compare tr { column-gap: 16px; }
  .compare tbody td, .compare thead th { font-size: .875rem; }
}

/* ---------- 8. Approach points + bento ---------- */
.approach { display: grid; gap: 0; margin-bottom: 40px; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.approach li { padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.approach strong { display: block; font-size: 1.0625rem; margin-bottom: 4px; }
.approach span { color: var(--cream-muted); font-size: .9375rem; }
@media (min-width: 640px) {
  .approach { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
@media (min-width: 1024px) {
  .approach { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-dark); }
  .approach li { border-bottom: 0; padding: 20px 24px 20px 0; }
  .approach li + li { border-left: 1px solid var(--line-dark); padding-left: 24px; }
}

.bento { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.tile {
  background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.tile-label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-muted); }
.tile-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-top: -6px; letter-spacing: -0.01em; }
.tile-ui { margin-block: auto; }   /* graphic sits centered in the space under the title */
.tile::after { content: ""; }      /* matches the title gap below the graphic, so the centering is even */
.panel { background: var(--navy-900); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); }

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-blue, .t-cal, .t-rent, .t-sales { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "blue blue cal  cal"
      "blue blue rfid sign"
      "rent rent fam  pay"
      "pwd  sales sales conn";
  }
  .t-blue { grid-area: blue; } .t-cal { grid-area: cal; } .t-rfid { grid-area: rfid; } .t-sign { grid-area: sign; }
  .t-rent { grid-area: rent; } .t-fam { grid-area: fam; } .t-pay { grid-area: pay; } .t-pwd { grid-area: pwd; }
  .t-sales { grid-area: sales; } .t-conn { grid-area: conn; }
}

/* 8a. Blue chat (bento + Meet Blue): styled after the real ShredderPOS chat screen */
.bchat {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; color: #1f2937; border-radius: 10px; overflow: hidden;
  font-size: .875rem; line-height: 1.45;
}
.bchat .chat-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; flex: 1; }
.bc-row { display: grid; gap: 8px; align-items: start; }
.bc-row.blue { grid-template-columns: 30px minmax(0, 1fr); justify-items: start; }
.bc-row.you { grid-template-columns: minmax(0, 1fr) 30px; justify-items: end; text-align: right; align-self: stretch; }
.bc-row.you > div { justify-self: end; }
.bc-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: #eaf1f6; border: 1px solid #e5e7eb; }
.bc-ava-you { display: grid; place-items: center; color: #9ca3af; background: #f3f4f6; }
.bc-ava-you svg { width: 18px; height: 18px; }
.bc-name { font-size: .6875rem; color: #6b7280; margin-bottom: 3px; }
.bc-bubble { display: inline-block; padding: 9px 13px; border-radius: 8px; text-align: left; }
.bc-row.blue .bc-bubble { background: #286181; color: #fff; }
.bc-row.you .bc-bubble { background: #44bbbb; color: #fff; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
  font-size: .75rem; color: #111827; white-space: nowrap;
}
.bc-cal { width: 12px; height: 12px; }
.bc-input { margin: 0 16px 16px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 999px; font-size: .8125rem; color: #9ca3af; }
/* Typing dots sit inside Blue's own row, exactly where the bubble will appear (just under the "Blue" name).
   While typing, the row shows avatar + name + dots; the bubble keeps its space hidden, so nothing resizes. */
.bc-row.blue > div { position: relative; }
.bc-typing {
  position: absolute; left: 0; top: calc(.6875rem * 1.45 + 3px);
  display: none; gap: 4px; padding: 11px 13px; background: #e8f0f5; border-radius: 8px;
}
.bc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #286181; animation: blink 1s infinite; }
.bc-typing i:nth-child(2) { animation-delay: .15s; } .bc-typing i:nth-child(3) { animation-delay: .3s; }
.bc-row.is-typing .bc-typing { display: flex; }
.bc-row.is-typing .bc-bubble, .bc-row.is-typing .bc-chips { visibility: hidden; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* Sequential reveal (only when JS is running and motion is OK) */
.js .chat[data-play] .msg { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.js .chat[data-play] .msg.shown { opacity: 1; transform: none; }
.js .chat[data-play] .msg.is-typing { opacity: 1; transform: none; }

/* 8b. Calendar */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }
.cal-legend { font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); display: flex; gap: 12px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--line-dark-strong); }
.cal-legend .lg-hol::before { background: var(--sky); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dow { text-align: center; font-family: var(--font-mono); font-size: .625rem; color: var(--cream-muted); padding-bottom: 2px; }
.cal-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px; padding: 3px 0; border-radius: 6px; border: 1px solid var(--line-dark);
  background: transparent; cursor: pointer; line-height: 1.15;
}
.cal-day:hover { border-color: var(--line-dark-strong); }
.cal-day .d { font-size: .75rem; font-weight: 600; }
.cal-day .p { font-family: var(--font-mono); font-size: .625rem; color: var(--cream-muted); }
.cal-day.wknd { background: rgba(244, 236, 220, .05); }
.cal-day.wknd .p { color: var(--cream); }
.cal-day.hol::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.cal-day[aria-pressed="true"] { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.cal-day[aria-pressed="true"] .p { color: var(--mint); }
.cal-blank { min-height: 44px; }
.cal-foot {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px;
  font-family: var(--font-mono); font-size: .75rem;
}
.cal-foot b { color: var(--mint); font-weight: 500; }

/* 8c. Status rows (RFID, uplink) */
.status-big {
  display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-sm);
  background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .5); color: #d1fae5;
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; text-transform: uppercase; line-height: 1;
}
.status-big svg { width: 26px; height: 26px; color: var(--ok); flex: none; }
.status-big.is-bad { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .5); color: #fee2e2; }
.status-big.is-bad svg { color: var(--bad); }
.rows { list-style: none; padding: 0; margin: 10px 0 0; font-family: var(--font-mono); font-size: .6875rem; }
.rows li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-dark); line-height: 1.4; }
.led { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 3px; background: var(--cream-muted); }
.led.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.led.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
.rows .bad-text { color: #fecaca; }
.rows .state { margin-left: auto; text-transform: uppercase; letter-spacing: .06em; }

/* 8d. Waiver */
.waiver { padding: 12px 14px; }
.waiver-doc { font-weight: 600; font-size: .875rem; }
.waiver-guest { font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); margin-top: 2px; }
.sig { margin: 10px 0 6px; border-bottom: 1px dashed var(--line-dark-strong); height: 58px; }
.sig svg { width: 100%; height: 58px; }
.sig path { fill: none; stroke: var(--cream); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .sig path { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.6s ease-out; }
.js .in-view .sig path { stroke-dashoffset: 0; }
.waiver-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .6875rem;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-dark-strong); color: var(--cream); white-space: nowrap;
}
.tag-ok { border-color: rgba(52, 211, 153, .55); color: #a7f3d0; }

/* 8e. Rental form */
.form-mock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.field { padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 6px; background: var(--navy-900); }
.field small { display: block; font-family: var(--font-mono); font-size: .625rem; color: var(--cream-muted); text-transform: uppercase; letter-spacing: .08em; }
.field b { font-size: .9375rem; font-weight: 600; }
.field-wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 640px) { .form-mock { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 8f. Party list */
.party { list-style: none; padding: 0; margin: 0; }
.party li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-dark); font-size: .8125rem; line-height: 1.3; }
.party li:first-child { border-top: 0; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--navy-700); font-size: .6875rem; font-weight: 700;
}
.party small { display: block; color: var(--cream-muted); font-size: .75rem; }
.party-foot { margin-top: 8px; font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); }

/* 8g. Split payment */
.split { padding: 12px 14px; font-size: .875rem; }
.split div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; }
.split .sum { border-top: 1px solid var(--line-dark); margin-top: 4px; padding-top: 10px; font-weight: 700; }
.split .paid { margin-top: 10px; justify-content: center; }
.split .mono { font-size: .75rem; color: var(--cream-muted); }

/* 8h. Code entry */
.code-hint { font-size: .8125rem; color: var(--cream-muted); }
.code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.code span {
  display: grid; place-items: center; height: 44px; border: 1px solid var(--line-dark-strong); border-radius: 8px;
  font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; background: var(--navy-900);
}
.code span.filled { border-color: var(--mint); }
.verify-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.verify-opt {
  display: grid; place-items: center; height: 44px; border-radius: 8px; border: 1px solid var(--line-dark-strong);
  background: var(--navy-900); font-size: .875rem; font-weight: 600;
}
.verify-opt.is-on { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.signed { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: #a7f3d0; min-height: 22px; }

/* 8i. Sales bar */
.sales-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sales-total { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.sales-when { font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); }
.bar { height: 14px; border-radius: 4px; overflow: hidden; margin: 14px 0 18px; background: rgba(244, 236, 220, .08); }  /* the track; 18px down to the legend */
.bar-fill { display: flex; gap: 2px; height: 100%; clip-path: inset(0 var(--hide, 0%) 0 0); }  /* segments revealed left to right */
.bar span { display: block; }
.c-web { background: var(--mint); } .c-pos { background: var(--sky); }
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; width: 100%; list-style: none; padding: 0; margin: 0; text-align: left; }  /* three equal columns spanning the bar, same order as the bar */
.legend li { font-size: .75rem; min-width: 0; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.legend b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .875rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.legend small { color: var(--cream-muted); font-family: var(--font-mono); }

/* 8j. Uplink */
.uplink-line { margin-top: 10px; font-weight: 600; font-size: .9375rem; }
.uplink-count { font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); }
.uplink-btn {
  margin-top: 10px; min-height: 40px; width: 100%; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-dark-strong); color: var(--cream);
  font-family: var(--font-mono); font-size: .75rem;
}
.uplink-btn:hover { border-color: var(--cream); }

/* ---------- 9. By role tabs ---------- */
.tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
/* Role tabs: selected = solid navy pill, white text, small teal dot. Inactive = navy text, no fill.
   The dot's space is reserved on every tab, so nothing shifts when the selection changes. */
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 0; background: transparent; box-shadow: none;
  cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--navy-900);
  transition: background-color .15s, color .15s;
}
.tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; opacity: 0; transition: opacity .15s, background-color .15s; }
.tab:hover { background: #ececef; }
.tab:hover::before { opacity: 1; background: #a1a1aa; }   /* faint gray dot fills the slot and previews the selected state */
.tab[aria-selected="true"] { background: var(--navy-900); color: #fff; }
.tab[aria-selected="true"]::before { opacity: 1; background: var(--mint); }
.tab:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 999px; }
@media (min-width: 640px) { .tablist { display: flex; flex-wrap: wrap; } }
/* Role tabs on a navy section: cream text, faint cream hover, cream pill + teal dot when selected */
.dark .tab { color: var(--cream-muted); }
.dark .tab:hover { background: rgba(244, 236, 220, 0.08); color: var(--cream); }
.dark .tab:hover::before { background: var(--cream-muted); }
.dark .tab[aria-selected="true"] { background: var(--cream); color: var(--navy-900); }
.dark .tab[aria-selected="true"]::before { background: var(--mint); box-shadow: 0 0 0 1px rgba(11, 26, 54, 0.35); }

.role-panel { display: grid; gap: 28px; }
.role-panel[hidden] { display: none; }
.role-screen {
  border: 1px solid var(--zinc); border-radius: var(--radius); background: var(--paper-2);
  padding: 20px; display: grid; place-items: center; min-height: 340px;
}
.facts { list-style: none; padding: 0; margin: 0; counter-reset: fact; }
.facts li { padding: 16px 0 16px 44px; border-top: 1px solid var(--zinc); position: relative; }
.facts li:last-child { border-bottom: 1px solid var(--zinc); }
.facts li::before {
  counter-increment: fact; content: "0" counter(fact); position: absolute; left: 0; top: 18px;
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-muted);
}
.facts strong { display: block; font-size: 1.0625rem; margin-bottom: 2px; }
.facts span { color: var(--ink-muted); }
/* Same panel on navy: darker screen box, light dividers and text */
.dark .role-screen { background: var(--navy-800); border-color: var(--line-dark); }
.dark .facts li { border-top-color: var(--line-dark); }
.dark .facts li:last-child { border-bottom-color: var(--line-dark); }
.dark .facts li::before, .dark .facts span { color: var(--cream-muted); }
@media (min-width: 1024px) {
  .role-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 48px; }
  .role-screen { min-height: 440px; padding: 32px; }
}

/* Light-surface mini screens */
.scr { width: 100%; background: var(--paper); border: 1px solid var(--zinc); border-radius: 10px; overflow: hidden; font-size: .8125rem; color: var(--ink); }
.scr-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--zinc); background: var(--paper-2); }
.scr-bar b { font-size: .875rem; }
.scr-bar .mono { margin-left: auto; font-size: .6875rem; color: var(--ink-muted); }
.scr table { width: 100%; border-collapse: collapse; }
.scr th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 10px; border-bottom: 1px solid var(--zinc); }
.scr td { padding: 9px 10px; border-bottom: 1px solid var(--zinc); white-space: nowrap; }
.scr tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 600; font-family: var(--font-mono); }
.pill-ok { background: #dcfce7; color: var(--ok-ink); }
.pill-wait { background: #f4f4f5; color: var(--ink-muted); }
.pill-sched { background: #e0f2fe; color: #075985; }
.hide-sm { display: none; }
@media (max-width: 639px) {
  .role-screen { padding: 14px; }
  .scr th, .scr td { padding: 8px 8px; white-space: normal; }
  .scr th:first-child, .scr td:first-child { padding-left: 12px; }
  .scr th:last-child, .scr td:last-child { padding-right: 12px; }
  .scr .pill, .scr .nowrap { white-space: nowrap; }
  .scr-bar { padding: 10px 12px; }
}
@media (max-width: 359px) {
  .role-screen { padding: 10px; }
  .scr { font-size: .75rem; }
  .scr th, .scr td { padding: 7px 6px; }
  .scr th:first-child, .scr td:first-child { padding-left: 10px; }
  .scr th:last-child, .scr td:last-child { padding-right: 10px; }
  .scr .pill { padding: 2px 6px; font-size: .625rem; }
}
@media (min-width: 640px) { .hide-sm { display: table-cell; } }

/* Guest phone (role tab) */
.role-screen .phone { max-width: 270px; }
.store { padding: 6px 14px 16px; }
.store h4 { font-size: 1rem; margin: 6px 0 2px; }
.store .muted { color: var(--ink-muted); font-size: .75rem; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.days span { border: 1px solid var(--zinc); border-radius: 8px; text-align: center; padding: 6px 0; font-size: .6875rem; line-height: 1.25; }
.days span b { display: block; font-size: .8125rem; }
.days .sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.qty { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--zinc); border-bottom: 1px solid var(--zinc); }
.add { display: block; text-align: center; margin-top: 12px; background: var(--navy-900); color: var(--cream); border-radius: 10px; padding: 12px; font-weight: 600; }

/* ---------- 10. Meet Blue ---------- */
.blue-grid { display: grid; gap: 40px; }
.blue-intro { display: grid; gap: 20px; }
.blue-intro > .text-link { justify-self: start; }
.mascot { display: flex; align-items: flex-end; gap: 4px; }
.mascot img { width: 150px; height: auto; }
.speech {
  position: relative; align-self: flex-start; margin-top: 18px;
  background: var(--cream); color: var(--navy-900); font-weight: 700; padding: 10px 16px; border-radius: 16px;
  font-size: 1.0625rem; white-space: nowrap;
}
.speech::before { content: ""; position: absolute; left: -7px; bottom: 12px; border: 8px solid transparent; border-right-color: var(--cream); border-left: 0; }
.blue-intro h3 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; }
.blue-intro p { color: var(--cream-muted); max-width: 52ch; }
.blue-chat { border: 1px solid var(--line-dark); }
/* Meet Blue on white: navy speech bubble, dark text, zinc border round the chat */
.light .speech { background: var(--navy-900); color: var(--cream); }
.light .speech::before { border-right-color: var(--navy-900); }
.light .blue-intro p { color: var(--ink-muted); }
.light .blue-chat { border-color: var(--zinc); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 12px 32px -12px rgba(11, 26, 54, 0.18); }
.light + .flow-section { border-top: 1px solid var(--zinc); }
.flow-section:has(+ .dark) { border-bottom: 0; }


@media (min-width: 1024px) {
  .blue-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
  .mascot img { width: 190px; }
}

/* ---------- 10b. How guests buy a lift ticket (checkout timeline) ---------- */
.flow-section { padding-block: 56px; border-bottom: 1px solid var(--zinc); }
.flow-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1;
  font-size: clamp(1.75rem, 5vw, 2.5rem); text-align: center; color: var(--ink);
}
.flow { list-style: none; padding: 0; margin: 28px auto 0; max-width: 320px; }
.flow li { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; font-weight: 600; font-size: 1rem; }
@media (max-width: 767px) { .flow { width: max-content; max-width: 100%; } }

/* Step marker. Without JS: a plain numbered circle. With JS it animates (based on Tim's segmented stepper):
   pending = small grey, active = navy ring + mint halo, done = mint fill + drawn check. Site colors only. */
.flow-node {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); color: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--navy-900);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, box-shadow .2s, color .2s;
}
.flow-num { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; transition: opacity .15s; }
.flow-check { position: absolute; width: 20px; height: 20px; overflow: visible; }   /* whole pixels = crisp edges */
/* the check path is ~22.1 units long; dash 30 keeps it fully hidden (a dash of 22 left a dot at the corner) */
.flow-check path { fill: none; stroke: var(--navy-900); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.flow-check { opacity: 0; }
.flow li.is-done .flow-check { opacity: 1; }
.flow-label { color: var(--ink); transition: color .2s; }

.js .flow-node { transform: scale(.88); background: #eceef2; color: #8a8f9c; box-shadow: inset 0 0 0 1.5px #c9ccd4; }
.js .flow-label { color: #8a8f9c; }
.js .flow li.is-reached .flow-label { color: var(--ink); }
.js .flow li.is-active .flow-node {
  transform: scale(1.06); background: var(--paper); color: var(--navy-900);
  box-shadow: inset 0 0 0 2px var(--navy-900), 0 0 0 6px rgba(40, 224, 208, .22);
}
.js .flow li.is-done .flow-node {
  transform: none;   /* no lingering scale, so the check isn't resampled */ background: var(--mint); color: var(--navy-900);
  box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(40, 224, 208, .16);
}
.js .flow li.is-done .flow-num { opacity: 0; }
.js .flow li.is-done .flow-check path { animation: flow-draw .28s .04s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes flow-draw { to { stroke-dashoffset: 0; } }

/* Connector: grey track, mint fill driven by --p (0..1). Vertical on phones. */
.flow-seg { position: absolute; left: 18px; top: 43px; width: 2px; height: 10px; border-radius: 2px; background: #d9dce3; overflow: hidden; }
.flow-seg-fill { position: absolute; inset: 0; background: var(--mint); transform-origin: top center; transform: scaleY(var(--p, 0)); }

@media (min-width: 768px) {
  .flow-section { padding-block: 72px; }
  /* desktop: six equal columns, each label centered under its marker */
  .flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 960px; margin-top: 36px; }
  .flow li { flex-direction: column; justify-content: flex-start; gap: 12px; text-align: center; min-height: 0; font-size: .9375rem; }
  .flow-seg { left: calc(50% + 25px); right: calc(-50% + 25px); top: 18px; width: auto; height: 2px; }
  .flow-seg-fill { transform-origin: left center; transform: scaleX(var(--p, 0)); }
}

/* ---------- 11. Hardware in context ----------
   Narrow phones: shallow photo above the caption. 480px+: photo beside the caption (about a third).
   1024px+: two-by-two grid. Each photo's crop is set inline: --pos (480px+, keeps the equipment in view) and
   --pos-phone (narrow phones, a 3:2 frame that keeps everyone's head in). */
.hw-grid { display: grid; gap: 16px; }
.hw {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--zinc); border-radius: var(--radius); overflow: hidden; background: var(--paper);
}
.hw img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--pos-phone, var(--pos, center)); display: block; }
.hw figcaption { padding: 16px 18px 18px; }
.hw h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.hw p { font-size: 1rem; line-height: 1.5; color: var(--ink-muted); }
@media (min-width: 480px) {
  .hw { grid-template-columns: min(33%, 220px) minmax(0, 1fr); align-items: center; }
  .hw img { aspect-ratio: 1 / 1; height: 100%; object-position: var(--pos, center); }
  .hw figcaption { padding: 18px 22px; }
}
@media (min-width: 1024px) {
  .hw-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ---------- 12. Payments ---------- */
.payments { border-top: 1px solid var(--zinc); border-bottom: 1px solid var(--zinc); padding-block: 48px; }
.payments-inner { display: grid; gap: 24px; }
.payments h2 { font-size: 1.375rem; letter-spacing: -0.01em; }
.payments p { color: var(--ink-muted); margin-top: 6px; }
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.logos li { border: 1px solid var(--zinc); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.logos img { width: 100%; aspect-ratio: 800 / 650; object-fit: contain; }
@media (min-width: 1024px) {
  .payments-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 13. FAQ accordion (shared with faq.html) ---------- */
.faq-list { border-top: 1px solid var(--zinc); }
.faq-item { border-bottom: 1px solid var(--zinc); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.0625rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 12px; height: 12px; flex: none; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-answer { padding: 0 0 20px; color: var(--ink-muted); max-width: 70ch; }
/* Homepage FAQ: heading, questions and link share one centered 820px column (site gutters on phones) */
.faq-wrap { max-width: 820px; margin-inline: auto; }
.faq-section .chapter { margin-bottom: 28px; }
/* link sits right under the last question; the negative bottom margin cancels the invisible part of its
   48px tap area, so the gap to the next section matches the standard section spacing */
.faq-more { margin-top: 8px; margin-bottom: -12px; }

/* ---------- 14. Closing CTA: centered navy card ----------
   About 1,100px wide with rounded corners and white space around it. Headline left (about two lines on
   desktop), one mint button right; stacked on phones. The mountain lines run along the bottom, clipped by
   the card's corners. The FAQ section above already supplies the space on top. */
.cta-section { padding-bottom: 64px; }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1100px; margin-inline: auto; border-radius: 20px;
  padding: 80px 24px;                 /* equal top and bottom, so the content sits exactly in the middle */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-title { font-size: clamp(2.5rem, 9vw, 4.5rem); line-height: .95; max-width: 20ch; text-wrap: balance; }
.cta-btn { position: relative; z-index: 1; flex: none; margin-top: 22px; width: 180px; min-height: 56px; padding: 0; font-size: 1rem; font-weight: 600; }
/* mountain strip lives inside the bottom padding (shorter than it), so it never pushes the content off center */
.cta-mountains {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  width: 100%; height: 60px; opacity: .22;
}
@media (min-width: 768px) {
  .cta-section { padding-bottom: 96px; }
  /* desktop: headline and button side by side as one group, centered both ways in the card */
  .cta-card { flex-direction: row; justify-content: center; gap: 64px; padding: 88px 56px; text-align: left; }
  .cta-btn { margin-top: 0; }
  .cta-mountains { height: 72px; }
}

/* ---------- 15. Footer ----------
   Content sits in a centered container as wide as the CTA card (1,100px). Logo + description on the left,
   Explore menu on the right edge, faint contour lines behind. */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-950);
  color: var(--cream); padding-block: 56px 28px; border-top: 1px solid var(--line-dark);
}
.footer-inner { max-width: 1100px; margin-inline: auto; }
.footer-grid { display: grid; gap: 32px; align-items: start; }
.footer-brand img { display: block; width: 150px; height: auto; }
.footer-brand p { margin-top: 14px; color: var(--cream-muted); font-size: .9375rem; max-width: 36ch; }
.footer-col h2 {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-muted); line-height: 1; margin: 0 0 6px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: .75rem; color: var(--cream-muted);
}
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* Faint contour lines behind the footer content */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/topo-lines.png") center / cover no-repeat;   /* reaches both screen edges at any width */
  opacity: .018;
}
@media (min-width: 768px) {
  /* Brand block on the left, Explore menu on the right edge. Top padding = the gap above the divider (40px),
     so centering the brand block in the row puts it exactly midway between the footer top and the divider. */
  .site-footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .footer-brand { align-self: center; }
  .footer-col { justify-self: end; min-width: 160px; }
}

/* ---------- 19. Meet Blue page (meet-blue.html) ----------
   Hero: mascot + H1 left, the whole nine-message chat right. Halves: copy + one visual, side by side on
   desktop (.half-flip puts the visual first, .half-even splits 50/50 for the staff chat). Everything inside
   reuses the homepage pieces (.mascot/.speech, .bchat, .role-screen, .phone, .co-*, .facts). */
.blue-hero { position: relative; overflow: hidden; padding-top: 48px; }
.bh-grid { display: grid; gap: 40px; position: relative; z-index: 1; padding-bottom: 32px; }
.bh-title { font-size: clamp(2.5rem, 11vw, 4rem); line-height: .95; letter-spacing: .005em; text-wrap: balance; }
.blue-hero .bh-actions { margin-top: 4px; }       /* the intro grid's own 20px gap already separates it */
.bh-demo { min-width: 0; }

.half { display: grid; gap: 28px; }
.half-copy { display: grid; gap: 20px; align-content: start; }
.half-copy > p { color: var(--ink-muted); max-width: 56ch; font-size: 1.0625rem; }
.dark .half-copy > p { color: var(--cream-muted); }
.half-copy .eyebrow { margin-bottom: -8px; }
.half-copy .section-title { max-width: 14ch; }
.half-copy .text-link { justify-self: start; }
.half-visual { min-width: 0; }
/* Benefits list without the 01/02/03 numbers (Tim: no numbers in lists on this page) */
.facts-plain li { padding-left: 0; }
.facts-plain li::before { content: none; }

/* Cart phone (for guests): the hero checkout's lines, a navy Checkout button like the storefront's Add to cart */
.cart { padding-bottom: 20px; }
.cart .co-head { margin-bottom: 4px; }
.cart .co-line:last-of-type { border-bottom: 0; }
.cart .co-total { border-top: 1px solid var(--zinc); }
.cart .add { margin-top: 2px; }

/* Sign-in phone (step 4): only what the homepage tile shows, on a white screen */
.si { padding: 12px 16px 24px; }
.si h4 { font-size: 1.0625rem; margin: 6px 0 2px; }
.si-hint { color: var(--ink-muted); font-size: .8125rem; }
.si-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 18px; }
.si-opt { display: grid; place-items: center; height: 44px; border-radius: 10px; border: 1px solid var(--zinc); font-size: .875rem; font-weight: 600; }
.si-opt.is-on { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.si-ok { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--ok-ink); }
.si-ok .led { margin-top: 0; }

@media (min-width: 1024px) {
  .blue-hero { --h1: clamp(3.25rem, 4.5vw, 4.25rem); padding-top: 0; }
  .bh-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; padding-block: 56px 32px; }
  .bh-title { font-size: var(--h1); }
  .half { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: center; }
  .half-flip > .half-visual { order: -1; }
  .half-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}
@media (min-width: 1600px) {
  .blue-hero { --h1: clamp(4.25rem, 4.25vw, 5rem); }
}

/* ---------- 22. Legal pages (privacy.html, terms.html) and 404 page (404.html) ----------
   Legal: one white page, a centered reading column (736px, about 85 characters a line), numbered section headings
   with ids, and "On this page" built from the FAQ accordion row (.faq-item). The text is theirs, word for word.
   404: one navy screen below the header, everything centered on one axis, the hero's mountain art along
   the bottom. */
.legal-page { padding-block: 48px 72px; }
.legal { max-width: 46rem; margin-inline: auto; font-size: 1.0625rem; overflow-wrap: break-word; }
.legal-head { margin-bottom: 28px; }
.legal-title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
.legal-date { margin-top: 14px; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-muted); }

/* "On this page": collapsed accordion row; open, the numbered section links (two columns from 640px) */
.legal-toc { border-top: 1px solid var(--zinc); margin-bottom: 44px; }
.legal-toc ol { padding: 8px 0 24px 1.6em; font-size: .9375rem; color: var(--ink-muted); }
.legal-toc li { break-inside: avoid; }
.legal-toc li::marker { font-variant-numeric: tabular-nums; }
.legal-toc a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; line-height: 1.4;
  color: var(--ink); text-decoration: none;
}
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The text */
.legal-body h2 {
  margin: 44px 0 12px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-num { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.legal-body p, .legal-body li { color: var(--ink-muted); line-height: 1.7; }
.legal-body p + p, .legal-body p + ul, .legal-body ul + p { margin-top: 12px; }
.legal-body ul { padding-left: 1.25em; }
.legal-body li + li { margin-top: 8px; }
.legal-body li::marker { color: #a1a1aa; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--ink); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-thickness: 2px; }
/* Contact lines: one per line, no bullets */
.legal-body .legal-contact { list-style: none; padding-left: 0; }
.legal-body .legal-contact li + li { margin-top: 2px; }

@media (min-width: 640px) {
  .legal-page { padding-block: 64px 96px; }
  .legal-toc ol { columns: 2; column-gap: 64px; }
}
@media (min-width: 1024px) {
  .legal-page { padding-block: 72px 120px; }
}

/* 404: fills the screen below the header; content centered both ways, mountain art along the bottom */
.nf { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); }
.nf-inner {
  --blue-h: 140px;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-block: 40px;
}
/* the mascot image has empty space above the bird (31 of its 350px); pull it up by that much so the group
   looks centered between the header and the mountain art */
.nf-blue { width: auto; height: var(--blue-h); margin: calc(var(--blue-h) * -0.0886) 0 12px; }
.nf-label { margin-bottom: 14px; }
.nf-title { font-size: clamp(3.5rem, 13vw, 7rem); text-wrap: balance; }
.nf-line { margin-top: 18px; font-size: clamp(1.125rem, 3.6vw, 1.3125rem); line-height: 1.45; font-weight: 500; max-width: 32ch; }
.nf-btn { margin-top: 28px; }
.nf-links { margin-top: 28px; margin-bottom: -10px; }   /* cancels the invisible part of the 44px tap rows */
.nf-or {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-muted);
}
.nf-links ul {
  list-style: none; padding: 0; margin: 4px auto 0; max-width: 21rem;      /* phones: 3 + 2 links, no lone last link */
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px;
}
@media (min-width: 640px) { .nf-links ul { max-width: none; } }
.nf-links a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.nf-links a:hover { text-decoration-thickness: 2px; }
.nf-mountains { position: relative; z-index: 0; height: max(72px, 6.95vw); flex: none; }   /* same art and size as the hero */
@media (min-width: 1024px) {
  .nf-inner { --blue-h: 180px; padding-block: 48px; }
}

/* ---------- 23. How It Works page (how-it-works.html) ----------
   Navy intro with their five quick points (.approach, five across on desktop); three topic cards with light
   mini-screens; Cloud-powered flexibility with a dashboard tile (the homepage sales bar + .rows); the numbered
   setup story (their Onboarding & Support and FAQ words); pricing with no prices. Reuses .page-hero, .approach,
   .scr, .pill, .bc-row, .tile, .panel, .rows, .facts-plain and the sales count-up (data-sales). */

/* 23a. Intro: the five points under the intro line */
.hiw-hero .page-title-end { display: block; }   /* "Easy workflow." on its own line at every width */
.hiw-points { margin: 40px 0 0; }
.hiw-points strong span { color: inherit; font-size: inherit; }   /* .approach greys every span; not the no-wrap one inside a title */
@media (min-width: 640px) and (max-width: 1023px) { .hiw-points li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .hiw-points { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 48px; } }

/* 23b. Topic cards: mini-screen on top, title, their text, "View details" */
.hiw-cards { display: grid; gap: 56px; }
.hiw-card { display: flex; flex-direction: column; min-width: 0; }
.hiw-screen {
  display: grid; place-items: center; min-height: 300px; padding: 20px;
  background: var(--paper-2); border: 1px solid var(--zinc); border-radius: var(--radius);
}
.hiw-screen .scr { max-width: 340px; box-shadow: 0 1px 2px rgba(9, 9, 11, .04), 0 12px 32px -12px rgba(11, 26, 54, .18); }
.js .hiw-screen .scr { opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out, transform .5s ease-out; }
.js .hiw-screen.in-view .scr { opacity: 1; transform: none; }
.hiw-card-title { margin-top: 24px; font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.hiw-card > p { margin-top: 10px; color: var(--ink-muted); flex: 1; }
.hiw-card .text-link { align-self: flex-start; margin-top: 4px; }

.hiw-items, .hiw-arrive, .hiw-party { list-style: none; padding: 0; margin: 0; }
.hiw-items li, .hiw-arrive li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--zinc); }
.hiw-items li > span:first-child, .hiw-arrive li > span:nth-child(2) { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.hiw-items small, .hiw-arrive small, .hiw-party small { display: block; font-weight: 400; font-size: .75rem; color: var(--ink-muted); }
.hiw-items b { font-weight: 600; white-space: nowrap; }
.hiw-items .pill, .hiw-arrive .pill { white-space: nowrap; }
.hiw-ask { padding: 12px 14px 14px; }
.hiw-ask .bc-bubble { font-size: .8125rem; }
.hiw-arrive li:last-child { border-bottom: 0; }
.hiw-ico {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--paper-2); border: 1px solid var(--zinc);
}
.hiw-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--navy-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hiw-lock { display: inline-flex; align-items: center; gap: 5px; }
.hiw-lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hiw-acc-head {
  padding: 12px 14px 4px; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.hiw-party li { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--zinc); font-weight: 600; line-height: 1.3; }
.hiw-party .avatar { background: var(--navy-900); color: var(--cream); }
.hiw-add {
  margin: 12px 14px 14px; padding: 8px; border: 1px dashed #c4c4c8; border-radius: 8px;
  text-align: center; font-weight: 600; font-size: .8125rem; color: var(--ink-muted);
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* tablet: screen left, text right, text block centered beside it */
  .hiw-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 32px; }
  .hiw-screen { grid-column: 1; grid-row: 1 / -1; }
  .hiw-card-title { grid-column: 2; grid-row: 2; margin-top: 0; }
  .hiw-card > p { grid-column: 2; grid-row: 3; }
  .hiw-card .text-link { grid-column: 2; grid-row: 4; justify-self: start; }
}
@media (min-width: 1024px) {
  /* three cards share one grid (subgrid): screens the same height, titles, text and links on shared rows */
  .hiw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 32px; }
  .hiw-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .hiw-card .text-link { justify-self: start; }
  .hiw-screen { min-height: 340px; }
}

/* 23c. Cloud-powered flexibility: copy left, dashboard tile right */
.hiw-split { display: grid; gap: 40px; }
.hiw-copy .section-intro { margin-top: 16px; }
.hiw-facts { margin-top: 28px; }
.hiw-note { margin-top: 20px; font-family: var(--font-mono); font-size: .75rem; color: var(--cream-muted); }
.tile.hiw-dash { gap: 18px; padding: 20px; }
.hiw-dash::after, .hiw-included::after { content: none; }   /* no spacer item: equal padding top and bottom */
.hiw-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hiw-panel { padding: 12px 14px 4px; }
.hiw-panel .rows { margin-top: 8px; }
@media (max-width: 379px) { .hiw-dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .hiw-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .tile.hiw-dash { padding: 28px; }
}

/* 23d. Onboarding & support: numbered setup story. Phones and tablets: a vertical list with a connector line;
   desktop: five columns, connector running node to node. On scroll the nodes turn mint one by one and the
   connectors fill (shown finished with reduced motion or without JS). */
.hiw-head { max-width: 760px; }
.hiw-steps { list-style: none; padding: 0; margin: 0; display: grid; }
.hiw-steps li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: start; column-gap: 16px; padding-bottom: 28px; }
.hiw-steps li:last-child { padding-bottom: 0; }
.hiw-node {
  position: relative; z-index: 1; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
  color: var(--navy-900); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy-900);
}
.hiw-steps strong { grid-column: 2; font-size: 1.0625rem; line-height: 1.3; padding-top: 8px; }
.hiw-steps li > span:last-child { grid-column: 2; margin-top: 4px; color: var(--ink-muted); }
.hiw-seg { position: absolute; left: 18px; top: 44px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--zinc); overflow: hidden; }
.hiw-seg::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform-origin: top center; }
.js .hiw-node { transition: background-color .25s, box-shadow .25s; }
.js .hiw-seg::after { transform: scaleY(0); transition: transform .35s ease-out; }
.hiw-steps.in-view .hiw-node, html:not(.js) .hiw-node {
  background: var(--mint); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(40, 224, 208, .16);
}
.js .hiw-steps.in-view .hiw-seg::after { transform: none; }
.hiw-steps li:nth-child(2) .hiw-node { transition-delay: .5s; }
.hiw-steps li:nth-child(3) .hiw-node { transition-delay: 1s; }
.hiw-steps li:nth-child(4) .hiw-node { transition-delay: 1.5s; }
.hiw-steps li:nth-child(5) .hiw-node { transition-delay: 2s; }
.hiw-steps li:nth-child(1) .hiw-seg::after { transition-delay: .15s; }
.hiw-steps li:nth-child(2) .hiw-seg::after { transition-delay: .65s; }
.hiw-steps li:nth-child(3) .hiw-seg::after { transition-delay: 1.15s; }
.hiw-steps li:nth-child(4) .hiw-seg::after { transition-delay: 1.65s; }

.hiw-notes { list-style: none; padding: 0; margin: 48px 0 0; display: grid; border-top: 1px solid var(--zinc); }
.hiw-notes li { padding: 18px 0; border-bottom: 1px solid var(--zinc); }
.hiw-notes strong { display: block; font-size: 1.0625rem; margin-bottom: 4px; }
.hiw-notes span { color: var(--ink-muted); font-size: .9375rem; }
@media (min-width: 640px) {
  .hiw-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-bottom: 1px solid var(--zinc); }
  .hiw-notes li { border-bottom: 0; padding: 20px 24px 20px 0; }
  .hiw-notes li + li { border-left: 1px solid var(--zinc); padding-left: 24px; }
}
@media (min-width: 1024px) {
  /* shared rows (subgrid): every title and every line starts at the same height, even when a title wraps */
  .hiw-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 32px; }
  .hiw-steps li { grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; padding-bottom: 0; }
  .hiw-node { grid-row: auto; }
  .hiw-steps strong { grid-column: 1; padding-top: 18px; }
  .hiw-steps li > span:last-child { grid-column: 1; }
  /* connector: from 8px right of this node to 8px before the next one (the column gap is 32px) */
  .hiw-seg { left: 46px; right: -24px; top: 18px; bottom: auto; width: auto; height: 2px; }
  .hiw-seg::after { transform-origin: left center; }
  .js .hiw-seg::after { transform: scaleX(0); }
  .hiw-notes { margin-top: 64px; }
}

/* 23e. Pricing: their words, a core-features card, no prices */
.hiw-pricing .eyebrow { margin-bottom: 14px; }
.hiw-faq-link { margin-top: 12px; }
.tile.hiw-included { gap: 16px; padding: 24px; }
.hiw-checks { list-style: none; padding: 0; margin: 0; }
.hiw-checks li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line-dark); font-weight: 600; font-size: 1.0625rem;
}
.hiw-checks li:last-child { border-bottom: 1px solid var(--line-dark); }
.hiw-checks svg {
  width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 50%; background: var(--navy-700);
  fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.hiw-small { font-family: var(--font-mono); font-size: .75rem; color: var(--cream-muted); }
.hiw-one { font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1; margin-top: 4px; }
.hiw-br { display: block; }   /* second sentence of a two-sentence display line starts its own line */
@media (min-width: 1024px) {
  .tile.hiw-included { padding: 32px; }
}
/* the closing card follows a navy section here, so it needs white space above it (same as below it) */
.hiw-price-sec + .cta-section { padding-top: 64px; }
@media (min-width: 768px) { .hiw-price-sec + .cta-section { padding-top: 96px; } }

/* ---------- 16. Wider screens ---------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .section { padding-block: 96px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .section { padding-block: 120px; }
  .tile { padding: 22px; }
}

/* Wide screens (1600px+): the page width grows from 1200px to 1440px (75% of the screen),
   and the hero headline, copy and devices grow with it. Matches 1440 exactly at 1600px, so there's no jump. */
@media (min-width: 1600px) {
  :root { --max: clamp(1200px, 75vw, 1440px); }
  .hero { --h1: clamp(4.25rem, 4.25vw, 5rem); }          /* 68px at 1600 → about 80px at 1880 */
  .hero-lead { font-size: clamp(1.3125rem, 1.22vw, 1.5rem); max-width: 40ch; }
  .hero-actions .btn { min-height: 52px; padding: 0 26px; font-size: 1.0625rem; }
  .hero-link { font-size: 1.0625rem; }
  .hero-specs { font-size: .8125rem; }
}

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .chat[data-play] .msg { opacity: 1; transform: none; }
  .js .sig path { stroke-dashoffset: 0; }
  .js .flow li.is-done .flow-check path { stroke-dashoffset: 0; }   /* show the check without drawing it */
}

/* ---------- 18. Features page ----------
   Page intro (compact navy band), sticky jump links, the alternating feature sections and their mockups,
   the check-in bento and the hardware photo. Shared pieces (.role-screen, .facts, .scr, .phone, .kiosk-*,
   .party, .rows, .tile) come from the sections above. */

/* 18a. Page intro */
.page-hero { padding-block: 48px 56px; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-title { font-size: clamp(2.75rem, 11vw, 4.5rem); line-height: .95; }
.page-intro { max-width: 56ch; margin-top: 18px; }
.page-specs { margin-top: 24px; max-width: 920px; }   /* two balanced lines on desktop instead of one orphan */
@media (min-width: 1024px) {
  .page-hero { padding-block: 72px 80px; }
  .page-title-end { display: block; }
}

/* 18b. Sticky jump links: Launchpad-style text links with a mint underline for the current section.
   Phones: one row that scrolls sideways inside the bar only. */
:root { --jump-h: 61px; }                                  /* 60px links + 1px border */
html.has-jumpnav { scroll-padding-top: calc(var(--header-h) + var(--jump-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html.has-jumpnav { scroll-behavior: smooth; } }
.jumpnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(18px); border-bottom: 1px solid var(--zinc); }
.jumpnav .wrap { padding-inline: 0; }
.jumpnav-list {
  display: flex; gap: 24px; list-style: none; margin: 0; padding: 0 var(--gutter);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.jumpnav-list::-webkit-scrollbar { display: none; }
.jumpnav-list li { flex: none; }
.jumpnav a {
  position: relative; display: inline-flex; align-items: center; min-height: 60px;
  font-weight: 600; font-size: .9375rem; color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.jumpnav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--mint);
  transform: scaleX(0); transition: transform .2s;
}
.jumpnav a:hover, .jumpnav a[aria-current="true"] { color: var(--navy-900); }
.jumpnav a[aria-current="true"]::after { transform: scaleX(1); }
.jumpnav a:focus-visible { outline-offset: 2px; }
@media (min-width: 1024px) { .jumpnav-list { justify-content: center; gap: 40px; } }

/* 18c. Feature sections: heading + lead, the screen, the facts. Desktop: copy column 5, screen column 6,
   the screen centered on the copy's height; .flip puts the screen on the left. */
.feature { padding-block: 64px; }
.feature + .feature { border-top: 1px solid var(--zinc); }
.feat-grid { display: grid; gap: 28px; }
.feat-title { font-size: clamp(2.25rem, 8vw, 3.25rem); }
.feat-lead { margin-top: 14px; font-size: 1.125rem; line-height: 1.5; color: var(--ink-muted); max-width: 48ch; }
.feat-screen { align-content: center; gap: 18px; }
.feat-screen .phone { max-width: 300px; }
/* Facts on this page are plain lists: no 01/02 counters (Tim, 2026-11-06) */
.feat-facts li { padding-left: 0; }
.feat-facts li::before { content: none; }
.text-link-inline { min-height: 0; gap: 6px; vertical-align: baseline; }
@media (min-width: 640px) { .feature { padding-block: 80px; } }
@media (min-width: 1024px) {
  .feature { padding-block: 96px; }
  .feat-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head screen" "facts screen";
    column-gap: 64px; row-gap: 28px; align-items: start;
  }
  .feat-head { grid-area: head; }
  .feat-facts { grid-area: facts; }
  .feat-screen { grid-area: screen; align-self: center; }
  .feature.flip .feat-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "screen head" "screen facts"; }
}

/* Mono callouts under a screen (navy dots on light) */
.callouts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; list-style: none; padding: 0; margin: 0;
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-muted);
}
.callouts li { display: inline-flex; align-items: center; gap: 8px; }
.callouts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--navy-900); flex: none; }

/* E-Commerce: the hero laptop on its own (container units need the wrapper to be the container) */
.feat-laptop { width: 100%; max-width: 560px; margin: 0; padding-inline: 5%; container-type: inline-size; }
.feat-laptop .laptop { width: 100%; margin: 0; }

/* Point of Sale screen */
.pos { max-width: 600px; }
.pos-body { display: grid; gap: 14px; padding: 14px; }
.pos-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pos-tiles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--zinc); border-radius: 8px; background: var(--paper); min-width: 0; }
.pos-tiles b { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.pos-tiles small { font-size: .6875rem; color: var(--ink-muted); }
.pos-tiles span { margin-top: 4px; font-family: var(--font-mono); font-size: .8125rem; }
.pos-order { border: 1px solid var(--zinc); border-radius: 8px; padding: 10px 14px 14px; background: var(--paper-2); }
.pos-order-title { font-weight: 600; font-size: .875rem; }
.pos-order .co-line small { font-size: .6875rem; }
.pos-pay { display: block; text-align: center; background: var(--navy-900); color: var(--cream); border-radius: 8px; padding: 11px; font-weight: 600; }
.pos-note { margin-top: 8px; text-align: center; font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-muted); }
@media (min-width: 640px) { .pos-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* Lift Tickets: light calendar inside the phone (the storefront's View Calendar step) */
.lcal { margin: 12px 0 10px; }
.lcal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; font-size: .8125rem; }
.lcal-legend { display: flex; gap: 10px; font-family: var(--font-mono); font-size: .625rem; font-weight: 400; color: var(--ink-muted); }
.lcal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.lcal-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--zinc); }
.lcal-legend .lg-hol::before { background: var(--sky); }
.lcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.lcal-dow { text-align: center; font-family: var(--font-mono); font-size: .5625rem; color: var(--ink-muted); padding-bottom: 2px; }
.lcal-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 36px; border: 1px solid var(--zinc); border-radius: 6px;
  font-family: var(--font-mono); font-size: .5625rem; color: var(--ink-muted); line-height: 1.15;
}
.lcal-day b { font-family: var(--font-sans); font-size: .6875rem; font-weight: 600; color: var(--ink); }
.lcal-day.wknd { background: var(--paper-2); }
.lcal-day.hol::after { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--sky); }
.lcal-day.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.lcal-blank { min-height: 36px; }
.feat-screen .qty { font-size: .75rem; gap: 8px; }

/* Season Passes: passholder record */
.pass { max-width: 520px; }
.pass-body { padding: 14px; display: grid; gap: 12px; }
.pass-holder { display: flex; align-items: center; gap: 12px; }
.pass-holder b { display: block; font-size: 1rem; }
.pass-holder small { display: block; color: var(--ink-muted); font-size: .75rem; }
.scr .avatar { color: var(--cream); background: var(--navy-900); }
.pass-rows { display: grid; border-top: 1px solid var(--zinc); }
.pass-rows > div { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--zinc); }
.pass-rows dt { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pass-rows dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8125rem; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--zinc); border-radius: 999px; background: var(--paper); font-size: .75rem; white-space: nowrap; }
.avatars { display: inline-flex; margin-right: 6px; }
.avatars .avatar { width: 24px; height: 24px; font-size: .5625rem; margin-right: -6px; border: 2px solid var(--paper); box-sizing: content-box; }
@media (min-width: 480px) { .pass-rows > div { grid-template-columns: 140px minmax(0, 1fr); align-items: center; } }

/* Waivers: the release with its signing options and the self-drawing signature */
.wv { max-width: 520px; }
.wv-body { padding: 14px; }
.wv-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wv-guest { display: flex; flex-direction: column; gap: 1px; }
.wv-guest small { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.wv-guest b { font-size: .9375rem; }
.wv-text { margin-top: 8px; font-size: .75rem; color: var(--ink-muted); line-height: 1.5; }
.wv .sig { border-bottom-color: #c4c4c8; }
.wv .sig path { stroke: var(--ink); }
.wv-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-muted); }

/* 18d. Check-in & access bento: two columns from 640px up */
@media (min-width: 640px) { .bento-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; } .bento-2 .tile { grid-column: auto; grid-area: auto; } }
@media (min-width: 1024px) { .bento-2 { gap: 16px; } }
.portal-head { font-weight: 600; font-size: .9375rem; margin-bottom: 4px; }
.notifs { display: grid; gap: 10px; }
.notif { background: var(--navy-900); border: 1px solid var(--line-dark); border-radius: 12px; padding: 10px 12px; font-size: .8125rem; line-height: 1.4; }
.notif-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-family: var(--font-mono); font-size: .6875rem; color: var(--cream-muted); }
.notif-app { display: inline-flex; align-items: center; gap: 6px; }
.notif-ic { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.notif-sms { background: var(--ok); }
.notif-mail { background: var(--sky); }
.notif p b { display: block; font-weight: 600; }
.band { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line-dark-strong); border-radius: 10px; background: var(--navy-900); }
.band-id { font-family: var(--font-mono); font-size: .75rem; color: var(--cream-muted); }
.band-name { font-weight: 600; font-size: .9375rem; }
.rows-plain li { justify-content: space-between; }
.rows-k { color: var(--cream-muted); }

/* 18e. Closing card right after the payments strip (on the homepage the FAQ section supplies this space) */
.payments + .cta-section { padding-top: 64px; }
@media (min-width: 768px) { .payments + .cta-section { padding-top: 96px; } }

/* 18f. Hardware photo */
.hw-photo { width: 100%; max-width: 520px; margin: 0; border: 1px solid var(--zinc); border-radius: 10px; overflow: hidden; background: var(--paper); }
.hw-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 20. Contact / Book a demo page (contact.html) ----------
   Compact navy intro (same measurements as the Features intro, own class names so the page stands alone),
   then one off-white section: a "What you'll see in the demo" heading and three points on the left (plus the hidden contact-details
   slot), the demo form in a bordered white card with its own heading on the right. Fields are 52px tall with 16px text (no
   zoom on iPhones). The thank-you panel takes the
   form's place at the form's height, so nothing jumps. */

/* 20a. Intro */
.book-hero { padding-block: 48px 56px; }
.book-hero .eyebrow { margin-bottom: 14px; }
.book-title { font-size: clamp(2.75rem, 11vw, 4.5rem); line-height: .95; }
.book-intro { max-width: 46ch; margin-top: 18px; }

/* 20b. Two columns: selling points left, card right */
.book-grid { display: grid; gap: 40px; align-items: start; }
.book-copy { min-width: 0; }
.book-points-title { font-size: clamp(2.25rem, 7vw, 2.75rem); line-height: .95; margin-bottom: 28px; }   /* display caps, like the homepage section titles */
.book-points { display: grid; gap: 24px; }
.book-points strong { display: block; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 4px; }
.book-points p { color: var(--ink-muted); max-width: 42ch; }
.book-contact { display: grid; justify-items: start; gap: 2px; margin-top: 32px; }
.book-contact[hidden] { display: none; }   /* stays hidden until the details are confirmed */
.book-contact .eyebrow { margin-bottom: 6px; }
.book-contact .text-link { min-height: 44px; }

/* 20c. Form card */
.book-form { min-width: 0; padding: 24px 20px 28px; border: 1px solid var(--zinc); border-radius: var(--radius); background: var(--paper); }
.book-form-head { margin-bottom: 24px; }
.book-form-head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.book-form-head p { margin-top: 6px; color: var(--ink-muted); }

.demo-form { display: grid; gap: 20px; }
.fld { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld label { font-weight: 600; font-size: .9375rem; line-height: 1.3; padding: 0; }
.req { color: var(--ink-muted); font-weight: 500; margin-left: 2px; }
.fld input:not([type="radio"]), .fld textarea {
  display: block; width: 100%; min-height: 52px; padding: 13px 14px;
  border: 1px solid #c9ccd4; border-radius: var(--radius-sm); background: var(--paper);
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.fld textarea { resize: vertical; min-height: 128px; }
.fld input:not([type="radio"]):focus, .fld textarea:focus {
  outline: 3px solid var(--sky); outline-offset: 2px; border-color: var(--navy-900);
}
.fld.is-invalid input, .fld.is-invalid textarea { border-color: var(--bad-ink); box-shadow: inset 0 0 0 1px var(--bad-ink); }
.fld-err { font-size: .875rem; font-weight: 500; color: var(--bad-ink); line-height: 1.4; }
.fld-err:empty { display: none; }
.fld-hint { font-size: .875rem; color: var(--ink-muted); line-height: 1.4; }

/* Spam trap: off screen, never in the tab order */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  padding: 12px 14px; border: 1px solid var(--bad-ink); border-radius: var(--radius-sm);
  color: var(--bad-ink); font-size: .9375rem; font-weight: 500; line-height: 1.4;
}
.form-alert[hidden] { display: none; }
.demo-submit { width: 100%; min-height: 52px; font-size: 1rem; }
.demo-submit[disabled] { opacity: .7; cursor: progress; }

/* Thank-you panel: hidden until JS shows it (.is-shown) or, without JS, Formspree returns to #thanks */
.form-done { display: none; padding: 24px 0; align-content: center; }
.form-done.is-shown { display: grid; }
html:not(.js) .form-done:target { display: grid; }
html:not(.js) .form-done:target + .demo-form { display: none; }
.form-done-icon { width: 44px; height: 44px; margin-bottom: 18px; fill: none; stroke: var(--navy-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.form-done-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.form-done-text { margin-top: 10px; color: var(--ink-muted); max-width: 44ch; font-size: 1.0625rem; }
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

@media (min-width: 640px) {
  .demo-submit { width: auto; justify-self: start; padding: 0 32px; }
  .book-form { padding: 32px 32px 36px; }
}
@media (min-width: 1024px) {
  .book-hero { padding-block: 72px 80px; }
  .book-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .book-copy { padding-top: 28px; }   /* the capitals' top sits level with the card heading's top (card padding 32px) */
  .book-points { gap: 28px; }
  .book-form { width: 100%; max-width: 640px; justify-self: end; }
}

/* ---------- 30. Heading font: Montserrat (Alex, 2026-11-06) ----------
   Alex asked for the header font of the current shredderpos.com: Montserrat bold, normal capitals.
   Montserrat is much wider than the condensed caps it replaced, so every display size steps down here.
   Kept as one block at the end so the old sizes above stay readable as a record. */
.display { text-transform: none; letter-spacing: -0.02em; line-height: 1.08; }
.chapter-title { font-size: clamp(2.375rem, 8.5vw, 4.75rem); }
.section-title { font-size: clamp(1.625rem, 5.5vw, 2.5rem); }
.hero-title, .bh-title { font-size: clamp(2rem, 8.5vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.page-title, .book-title { font-size: clamp(2rem, 8.5vw, 3.25rem); line-height: 1.08; }
.feat-title { font-size: clamp(1.625rem, 5.5vw, 2.375rem); }
.cta-title { font-size: clamp(1.875rem, 6.5vw, 3.25rem); line-height: 1.08; }
.legal-title { font-size: clamp(2rem, 6.5vw, 2.625rem); }
.nf-title { font-size: clamp(2.375rem, 9vw, 4.75rem); }
.hiw-one { font-size: clamp(1.375rem, 4.5vw, 1.75rem); line-height: 1.1; }
.book-points-title { font-size: clamp(1.625rem, 5vw, 2rem); line-height: 1.1; }
.faq-group-title { font-size: clamp(1.375rem, 4.5vw, 1.75rem); }
.flow-title { font-size: clamp(1.375rem, 4vw, 1.875rem); text-transform: none; letter-spacing: -0.02em; line-height: 1.1; }
.mobile-menu li a { font-size: 1.5rem; text-transform: none; letter-spacing: -0.01em; }
.status-big { font-size: 1.25rem; text-transform: none; }
.sales-total { font-size: 1.875rem; }
@media (min-width: 1024px) {
  .hero, .blue-hero { --h1: clamp(2.5rem, 3.3vw, 3.25rem); }
  .hero-title, .bh-title { font-size: var(--h1); }
}
@media (min-width: 1600px) {
  .hero, .blue-hero { --h1: clamp(3.25rem, 3.1vw, 3.75rem); }
}

/* ---------- 31. Alex's edits, round 1 (2026-11-06) ---------- */
/* Rental tile: DIN removed, so four fields (two per row on phones, one row from 640px) */
.form-mock-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .form-mock-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Sales tile: kiosk removed, so two legend columns */
.legend-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Guest Ticketing tab: a full-size phone with phone proportions, not a short card */
.role-screen .phone-tall { max-width: 300px; }
.phone-tall .phone-screen { aspect-ratio: 9 / 18.5; display: flex; flex-direction: column; font-size: .875rem; }
.phone-tall .store { flex: 1; padding: 8px 16px 12px; }
.phone-tall .store h4 { font-size: 1.125rem; }
.store-more { margin-top: 18px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.store-list { list-style: none; padding: 0; margin: 6px 0 0; }
.store-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--zinc); }
.store-list small { display: block; color: var(--ink-muted); font-size: .75rem; }
.store-list b { font-weight: 600; }
.phone-home { display: block; width: 36%; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--ink); opacity: .85; }

/* E-Commerce tab: the storefront laptop centered in the screen box */
.role-laptop { margin-inline: auto; }

/* Hardware cards: simple drawings in place of photos, same frame the photos used */
.hw-art { aspect-ratio: 2 / 1; background: var(--paper-2); border-bottom: 1px solid var(--zinc); display: grid; place-items: center; }
.hw-art svg { width: 62%; max-width: 260px; height: auto; display: block; overflow: visible; }
@media (min-width: 480px) {
  .hw-art { aspect-ratio: 1 / 1; height: 100%; border-bottom: 0; border-right: 1px solid var(--zinc); }
  .hw-art svg { width: 88%; }
}
.hw-art .a-fill { fill: var(--navy-900); }
.hw-art .a-screen { fill: var(--paper); }
.hw-art .a-paper { fill: var(--paper); stroke: var(--navy-900); stroke-width: 2.5; stroke-linejoin: round; }
.hw-art .a-card { fill: var(--paper); stroke: var(--navy-900); stroke-width: 3; }
.hw-art .a-line { fill: none; stroke: var(--zinc); stroke-width: 4; stroke-linecap: round; }
.hw-art .a-paper + .a-line, .hw-art .a-screen ~ .a-line { stroke: #c7c7cc; }
.hw-art .a-stroke { fill: none; stroke: var(--navy-900); stroke-width: 6; stroke-linecap: round; }
.hw-art .a-base { fill: none; stroke: var(--zinc); stroke-width: 3; stroke-linecap: round; }
.hw-art .a-mint, .hw-art .a-mintdot { fill: var(--mint); }
.hw-art .a-wave { fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; }
/* Features hardware: the ticket-window drawing in the 4:3 frame the photo used */
.hw-photo .hw-art-wide { aspect-ratio: 4 / 3; height: auto; border: 0; }
/* Homepage tabs: every screen box as tall as the Guest Ticketing phone, so switching tabs doesn't move the page */
@media (min-width: 1024px) { [aria-labelledby="roles-title"] .role-screen { min-height: 660px; } }
/* Features check-in: kiosk tile removed, so the last tile spans the full row instead of leaving a hole */
.bento-2 > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- 32. Footer contact column (Alex, 2026-11-09) ---- */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* ---- 33. Contact form: Cloudflare Turnstile check (Alex, 2026-11-09) ---- */
/* Space reserved for the check (65px, or 140px when compact) so the button doesn't jump when it appears */
.ts-wrap { min-height: 65px; }
.ts-wrap iframe { max-width: 100%; }
.ts-err { margin-top: -12px; }