/* ==========================================================================
   TAPP — marketing site
   Static build. No framework, no build step. Edit tokens below to re-theme.
   ========================================================================== */

/* Sofia Sans — SIL Open Font License 1.1, self-hosted */
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/sofia-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/sofia-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --mint: #73c4c9;
  --mint-bright: #8fd6da;
  --mint-deep: #3f9ea4;
  --mint-ink: #0e3b3e;
  --mint-wash: rgba(115, 196, 201, 0.12);
  --mint-line: rgba(115, 196, 201, 0.28);
  /* Accent text on light surfaces (WEB-009). --mint-deep stays for fills and decoration. */
  --mint-text-light: #26696e;   /* small text: 5.78:1 on --paper, 6.31:1 on white */
  --mint-accent-light: #2f8a90; /* large text only (>= 24px, or >= 18.7px bold): 3.73:1 on --paper */

  /* Neutrals (tinted toward the brand teal) */
  --ink-950: #070909;
  --ink-900: #0c0f0f;
  --ink-850: #111515;
  --ink-800: #161b1b;
  --ink-700: #222a2a;
  --ink-600: #3a4343;
  --ink-500: #5c6363;
  --ink-400: #8a9191;
  --ink-300: #a8aeae;
  --ink-200: #c8cece;
  --ink-100: #e6eaea;
  --paper: #f4f5f5;
  --paper-2: #eceff0;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--ink-900);
  --text: #eef1f1;
  --text-muted: var(--ink-300);
  --text-dim: var(--ink-400);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);

  /* Type */
  --font: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --header-h: 72px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--mint); color: var(--ink-900); }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--mint); color: var(--ink-900); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 11vw, 150px); position: relative; }
.section--light { background: var(--paper); color: var(--ink-900); --text-muted: var(--ink-500); --text-dim: var(--ink-500); --line: rgba(12,15,15,.08); --line-strong: rgba(12,15,15,.14); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mint);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section--light .eyebrow { color: var(--mint-text-light); }
.section--light .solution-banner .eyebrow { color: var(--mint); }

.h-display {
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: .95; letter-spacing: -0.035em; font-weight: 800;
}
.h-1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.h-2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 800; }
.h-3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }
.accent { color: var(--mint); }
.section--light .accent { color: var(--mint-accent-light); }
.section--light .solution-banner .accent { color: var(--mint); }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); max-width: 780px; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--mint); --btn-fg: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 16px; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s var(--ease), color .2s;
  position: relative; isolation: isolate;
}
.btn:hover { transform: translateY(-2px); background: var(--mint-bright); box-shadow: 0 14px 30px -12px rgba(115,196,201,.55); }
.btn:active { transform: translateY(0); }
.btn .arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.section--light .btn--ghost:hover { background: rgba(12,15,15,.05); box-shadow: inset 0 0 0 1px rgba(12,15,15,.3); }
.btn--dark { --btn-bg: var(--ink-900); --btn-fg: var(--white); }
.btn--dark:hover { background: var(--ink-700); box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mint); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translate(3px, -3px); }
.section--light .link-arrow { color: var(--mint-text-light); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.06); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line);
}
.section--light .chip { background: var(--white); }
.badge-soon {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint-line); background: var(--mint-wash);
  vertical-align: middle;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: var(--notice-offset, 0px) 0 auto; z-index: 100; height: var(--header-h);
  transition: background-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.site-header.is-scrolled {
  background: rgba(12, 15, 15, .78);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { height: 30px; width: auto; }
.nav { display: none; }
.nav ul { display: flex; gap: 4px; align-items: center; }
.nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--ink-200); transition: color .2s, background-color .2s;
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--white); background: rgba(255,255,255,.06); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .signin { display: none; font-size: 15px; font-weight: 600; color: var(--ink-200); padding: 8px 12px; }
.header-actions .signin:hover { color: var(--white); }
.menu-toggle {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s var(--ease), background-color .2s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease); }
.menu-toggle span::before { transform: translateY(-6px); }
.menu-toggle span::after { transform: translateY(6px); }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: rotate(45deg); }
.menu-open .menu-toggle span::after { transform: rotate(-45deg); }
.header-cta { display: none; }

@media (min-width: 1040px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header-actions .signin, .header-cta { display: inline-flex; }
}
@media (min-width: 560px) and (max-width: 1039px) { .header-cta { display: inline-flex; } }

.mobile-nav {
  position: fixed; inset: calc(var(--header-h) + var(--notice-offset, 0px)) 0 0; z-index: 99; background: var(--ink-900);
  padding: 24px var(--gutter) 40px; display: flex; flex-direction: column; gap: 32px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
.menu-open .site-header { background: var(--ink-900); }
.mobile-nav ul { display: grid; }
.mobile-nav a.mnav-link {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 0;
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; border-bottom: 1px solid var(--line);
}
.mobile-nav .mobile-nav-actions { display: grid; gap: 12px; margin-top: auto; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 48px); padding-bottom: 64px; overflow: hidden;
}
/* WEB-002: on desktop the hero fills the first screen but its copy is sized so both
   CTAs sit fully inside it (checked at 1478x741 and 1024x768, with the preview notice). */
@media (min-width: 1000px) { .hero { min-height: min(100svh, 860px); padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; } }
.hero::before { /* soft mint glow */
  content: ""; position: absolute; width: 1100px; height: 1100px; right: -380px; top: 50%; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(115,196,201,.18), rgba(115,196,201,.04) 55%, transparent 70%);
  pointer-events: none;
}
.hero::after { /* grid texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 50%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 50%, #000 10%, transparent 70%);
  opacity: .5;
}
.hero .container { position: relative; z-index: 1; display: grid; gap: 64px; align-items: center; }
@media (min-width: 1000px) { .hero .container { grid-template-columns: 1.25fr .75fr; gap: 40px; } }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-title { font-size: clamp(42px, 5vw, 76px); line-height: 1.02; }
.hero .lead { max-width: 56ch; }
.hero-title .line { display: block; }
.hero-title .accent { background: linear-gradient(100deg, var(--mint) 20%, var(--mint-bright) 50%, var(--mint) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shimmer 6s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-dim); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-wash); }

/* Phone demo */
.demo { position: relative; display: grid; place-items: center; min-height: 560px; }
.demo-tag {
  position: absolute; left: calc(50% + 165px); top: -16px; /* tag meets the phone's top-right corner */
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a6e3e6, var(--mint) 45%, #4fa7ad 100%);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 -6px 14px rgba(0,0,0,.18), inset 0 6px 12px rgba(255,255,255,.35);
  display: grid; place-items: center; z-index: 1;
}
.demo-tag img { width: 64%; height: auto; opacity: .92; filter: brightness(0) saturate(100%); mix-blend-mode: multiply; }
.ripple { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--mint); opacity: 0; animation: ripple 3.2s var(--ease) infinite; }
.ripple:nth-child(2) { animation-delay: 1.07s; }
.ripple:nth-child(3) { animation-delay: 2.14s; }
@keyframes ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

.phone {
  position: relative; z-index: 2; width: 290px; aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 10px;
  background: linear-gradient(145deg, #2a3232, #0b0e0e 40%, #1d2323);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(4deg) translateX(40px);
  animation: phone-tap 9s var(--ease) infinite;
}
@keyframes phone-tap {
  0%, 12% { transform: rotate(4deg) translate(40px, 0); }
  24%, 30% { transform: rotate(8deg) translate(78px, -22px); }
  44%, 100% { transform: rotate(4deg) translate(40px, 0); }
}
.phone-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: var(--paper); color: var(--ink-900); }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #050606; z-index: 3; }
.phone-idle, .phone-app { position: absolute; inset: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.phone-idle { background: radial-gradient(120% 80% at 50% 0%, #1f2a2a, #0b0f0f); color: var(--white); display: grid; place-items: center; text-align: center; padding: 30px; animation: idle 9s linear infinite; }
.phone-idle .time { font-size: 64px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.phone-idle .hint { margin-top: 12px; font-size: 13px; color: var(--ink-300); }
.phone-app { animation: app 9s linear infinite; }
@keyframes idle { 0%, 26% { opacity: 1; } 30%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes app { 0%, 26% { opacity: 0; transform: translateY(14px); } 32%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.demo-toast {
  position: absolute; z-index: 3; left: 0; top: 22%;
  padding: 12px 14px; border-radius: 14px; background: rgba(22,27,27,.85); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 13px; display: flex; gap: 10px; align-items: center;
  animation: toast 9s var(--ease) infinite;
}
.demo-toast b { display: block; font-size: 14px; }
/* WEB-035: the phone screen is an illustration, not a live product capture */
.demo-label { position: absolute; z-index: 3; left: 0; bottom: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.demo-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-wash); }
@keyframes toast { 0%, 34% { opacity: 0; transform: translateY(8px); } 40%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@media (max-width: 999px) { .demo { min-height: 520px; } .demo-toast { left: auto; right: 4%; top: auto; bottom: 7%; } }
/* WEB-012: compact product preview directly after the CTAs on phones (~360px tall). */
@media (max-width: 999px) { .hero .container { gap: 40px; } }
@media (max-width: 599px) {
  .hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 48px; }
  .hero-proof { display: none; } /* repeats the lead on phones; frees space for the preview */
  .demo { min-height: 0; padding-block: 8px 24px; }
  .phone { width: 172px; border-radius: 30px; padding: 7px; }
  .phone-screen { border-radius: 24px; }
  .phone-notch { width: 56px; height: 16px; top: 7px; }
  .phone-idle .time { font-size: 40px; }
  .demo-tag { width: 84px; height: 84px; left: calc(50% + 62px); top: 0; }
  .demo-toast { right: 0; bottom: 12%; font-size: 12px; padding: 9px 11px; }
  .demo-toast b { font-size: 13px; }
}

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 22px; background: var(--ink-950); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 56px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink-400); white-space: nowrap; }
.marquee-track span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Problem ---------- */
.problem-grid { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 700px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } }
.problem { background: var(--paper); padding: clamp(28px, 3vw, 40px); display: grid; gap: 18px; align-content: start; transition: background-color .3s; }
.problem:hover { background: var(--white); }
.problem .num { font-family: var(--mono); font-size: 13px; color: var(--mint-text-light); font-weight: 600; }
.problem p { font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.solution-banner {
  margin-top: clamp(40px, 5vw, 64px); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px);
  background: var(--ink-900); color: var(--text); display: grid; gap: 28px; position: relative; overflow: hidden;
}
.solution-banner::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid var(--mint-line); box-shadow: 0 0 0 60px rgba(115,196,201,.03), 0 0 0 120px rgba(115,196,201,.02); pointer-events: none; }
@media (min-width: 900px) { .solution-banner { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.solution-banner .h-2 { max-width: 16ch; }
.solution-banner p { color: var(--ink-300); }
.solution-banner p + p { margin-top: 16px; }

/* ---------- How it works ---------- */
.steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 1000px) {
  .how-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
  .how-layout .section-head { position: sticky; top: calc(var(--header-h) + 48px); margin-bottom: 0; }
}
.step {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 32px;
  border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .4s, background-color .4s;
}
.step.is-active { background: linear-gradient(135deg, rgba(115,196,201,.1), rgba(115,196,201,.02) 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--mint-line); }
.step-num {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--mint); background: var(--mint-wash); box-shadow: inset 0 0 0 1px var(--mint-line);
}
.step-label { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; }
.step h3 { margin: 6px 0 10px; }
.step p { color: var(--text-muted); }
.step:not(:last-child)::after { content: ""; position: absolute; left: 57px; bottom: -17px; width: 2px; height: 18px; background: var(--mint-line); }

/* ---------- Solutions (tabs) ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px -4px 32px; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .2s, background-color .2s, box-shadow .2s; scroll-snap-align: start;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--mint); color: var(--ink-900); box-shadow: none; }
@media (max-width: 899px) { .tabs { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; margin-bottom: 24px; } .tab { padding: 11px 16px; min-height: 44px; } } /* WEB-013: all six industries visible, no hidden scroller */
.panel { display: grid; gap: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.panel[hidden] { display: none; }
@media (min-width: 900px) { .panel { grid-template-columns: 1.05fr .95fr; min-height: 520px; } }
.panel-media { position: relative; min-height: 280px; overflow: hidden; }
.panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.panel.is-in .panel-media img { transform: none; }
.panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12,15,15,.5)); }
.panel-body { padding: clamp(28px, 4vw, 56px); display: grid; gap: 20px; align-content: center; }
.panel.is-in .panel-body > * { animation: rise .6s var(--ease) both; }
.panel.is-in .panel-body > *:nth-child(2) { animation-delay: .05s; }
.panel.is-in .panel-body > *:nth-child(3) { animation-delay: .1s; }
.panel.is-in .panel-body > *:nth-child(4) { animation-delay: .15s; }
.panel.is-in .panel-body > *:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.outcomes { display: grid; gap: 10px; }
.outcomes li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.outcomes li svg { width: 20px; height: 20px; color: var(--mint); flex: none; }

/* ---------- Hardware ---------- */
.hw-groups { display: grid; gap: clamp(56px, 7vw, 96px); }
.hw-group { display: grid; gap: 32px; align-content: start; }
.hw-group-head { display: grid; gap: 12px; max-width: 46ch; }
/* WEB-033: equal product cards; freestanding and personal groups share a row so no group leaves an empty half */
@media (min-width: 1000px) {
  .hw-groups { grid-template-columns: repeat(3, 1fr); column-gap: 16px; }
  .hw-group:first-child { grid-column: 1 / -1; }
  .hw-group:nth-child(2) .hw-items { grid-template-columns: 1fr; }
  .hw-group:nth-child(3) { grid-column: span 2; }
  .hw-group:nth-child(3) .hw-items { grid-template-columns: repeat(2, 1fr); }
  .hw-items .hw-card .hw-img { aspect-ratio: 4 / 3; }
  .hw-items .hw-card img { object-fit: contain; } /* never crop the product */
}
.hw-group-head .kicker { font-family: var(--mono); font-size: 13px; color: var(--mint-text-light); font-weight: 600; }
.hw-items { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .hw-items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .hw-items { gap: 10px; } .hw-card .hw-meta { padding: 12px 14px 14px; flex-direction: column; gap: 2px; } }
.hw-card {
  border-radius: var(--radius); background: var(--white); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(12,15,15,.25);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hw-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(12,15,15,.35); }
.hw-card .hw-img { aspect-ratio: 1; background: #fff; overflow: hidden; }
.hw-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hw-card:hover img { transform: scale(1.05); }
.hw-card .hw-meta { padding: 16px 20px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); }
.hw-card .hw-meta b { font-size: 17px; }
.hw-card .hw-meta span { font-size: 14px; color: var(--ink-500); font-family: var(--mono); }
/* Coming soon: banner across products not yet available */
.hw-card .hw-img--soon { position: relative; }
.hw-card .hw-img--soon img { opacity: .55; }
.hw-soon {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
  padding: 10px 12px; text-align: center; background: var(--ink-900); color: var(--mint-bright);
  font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
/* WEB-048: scale cue for the two tag sizes */
.hw-scale { display: flex; align-items: center; gap: 20px; margin: 0; color: var(--ink-500); font-size: 14px; }
.hw-scale svg { flex: none; }
.hw-scale-l, .hw-scale-m { fill: none; stroke: var(--mint-text-light); stroke-width: 2; }
.hw-scale-m { stroke-dasharray: 4 3; }
.hw-note { margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; max-width: 34ch; }

/* ---------- Case studies ---------- */
.cases { display: grid; gap: 20px; }
/* WEB-031/032: image above a solid text panel; one column, then image-beside-text, then two equal columns (two cards, WEB-015/016) */
@media (min-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }
.case {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.case img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: cover; }
@media (min-width: 900px) { .case img { aspect-ratio: 16 / 10; } }
.case img.case-img--top, .panel-media img.case-img--top { object-position: center top; } /* keep the venue sign in frame */
.panel-media img.panel-img--service { object-position: 50% 64%; } /* keep the chairs and ring lights in frame on wide, short panels */
@media (min-width: 700px) and (max-width: 899px) {
  .case { flex-direction: row; }
  .case img { width: 40%; aspect-ratio: auto; align-self: stretch; }
  .case-body { flex: 1; }
}
.case-body { padding: clamp(24px, 2.6vw, 32px); display: grid; gap: 16px; align-content: start; flex: 1; grid-template-rows: auto auto 1fr auto auto; }
.case-body .h-3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; max-width: 26ch; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Benefits ---------- */
.benefits { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
.benefit { background: var(--bg); padding: 32px 28px 36px; display: grid; gap: 14px; align-content: start; transition: background-color .3s; }
.benefit:hover { background: var(--surface); }
.benefit .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-wash); color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint-line); }
.benefit .ico svg { width: 22px; height: 22px; }
.benefit h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.benefit p { font-size: 15px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Proof stats ---------- */
.stats { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 520px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px); display: grid; gap: 10px; align-content: start; }
.stat strong { display: block; color: var(--text); font-size: clamp(40px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 15px; color: var(--text-muted); line-height: 1.45; }
.stats-link { margin-top: 28px; display: flex; justify-content: center; }
.cases-note { margin-top: 20px; font-size: 13px; color: var(--text-dim); }

/* ---------- Roadmap ---------- */
.roadmap { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.road {
  padding: 26px; border-radius: var(--radius); background: var(--white);
  box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.road:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--mint-line), 0 24px 40px -28px rgba(12,15,15,.35); }
.road .badge-soon { justify-self: start; color: var(--mint-text-light); }
.road h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.road p { font-size: 15px; color: var(--ink-500); }

/* ---------- Pricing ---------- */
.pricing { display: grid; gap: 20px; }
@media (min-width: 960px) { .pricing { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.price-card {
  position: relative; border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 48px); display: grid; gap: 28px; align-content: start;
  background: linear-gradient(160deg, rgba(115,196,201,.14), rgba(115,196,201,.02) 55%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--mint-line); overflow: hidden;
}
.price { display: flex; align-items: flex-start; gap: 6px; line-height: 1; }
.price .cur { font-size: 32px; font-weight: 700; margin-top: 10px; color: var(--mint); }
.price .amt { font-size: clamp(88px, 10vw, 128px); font-weight: 800; letter-spacing: -.05em; }
.price-from { color: var(--text-muted); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.price .per { align-self: flex-end; margin-bottom: 14px; margin-left: 4px; font-size: 20px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.checklist { display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--mint); margin-top: 1px; }


/* ---------- FAQ ---------- */
.faq { display: grid; max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .3s var(--ease), background-color .2s; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: currentColor; transform: translate(-50%, -50%); border-radius: 2px; }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.faq details[open] .pm { background: var(--mint); color: var(--ink-900); box-shadow: none; }
.faq details[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .answer { padding: 0 48px 28px 0; color: var(--text-muted); }

/* ---------- CTA ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: clamp(48px, 8vw, 110px) clamp(24px, 6vw, 80px);
  background: var(--mint); color: var(--ink-900); text-align: center; display: grid; gap: 24px; justify-items: center;
}
.cta-band .rings { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); pointer-events: none; }
.cta-band .rings span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(14, 59, 62, .22); animation: ripple-big 6s linear infinite; }
.cta-band .rings span:nth-child(2) { animation-delay: 1.5s; }
.cta-band .rings span:nth-child(3) { animation-delay: 3s; }
.cta-band .rings span:nth-child(4) { animation-delay: 4.5s; }
@keyframes ripple-big { 0% { transform: scale(1); opacity: 0; } 10% { opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.cta-band > *:not(.rings) { position: relative; }
.cta-band p { font-size: clamp(18px, 1.8vw, 21px); color: var(--mint-ink); max-width: 44ch; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 80px 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-brand img { height: 32px; width: auto; }
.footer-brand p { color: var(--text-muted); max-width: 32ch; }
.footer-col .footer-h { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--ink-200); transition: color .2s; }
.footer-col a:hover { color: var(--mint); }
.footer-bottom { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--text-dim); }
/* WEB-047: compact mobile footer: Product and Legal side by side, Contact full width */
@media (max-width: 799px) {
  .site-footer { padding-block: 56px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col .footer-h { margin-bottom: 8px; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: inline-block; padding-block: 8px; }
  .footer-bottom { margin-top: 32px; padding-top: 20px; }
}

/* ---------- Contact page ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 110px)); padding-bottom: clamp(40px, 5vw, 64px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: -500px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(115,196,201,.16), transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; display: grid; gap: 20px; }

.contact-layout { display: grid; gap: 40px; padding-bottom: clamp(80px, 10vw, 140px); }
@media (min-width: 1000px) { .contact-layout { grid-template-columns: 1fr 340px; gap: 56px; align-items: start; } }

.context-note { max-width: 60ch; padding: 14px 16px; border-radius: 12px; background: var(--mint-wash); box-shadow: inset 0 0 0 1px var(--mint-line); font-size: 15px; color: var(--text); }
.context-note b { color: var(--mint); }
.context-note small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 14px; }
#type-chooser[hidden] { display: none; }
#type-chooser[hidden] + .form-card { margin-top: 0; }
.type-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.type-card {
  text-align: left; padding: 22px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; gap: 8px; transition: box-shadow .2s, background-color .2s, transform .25s var(--ease);
}
.type-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.type-card[aria-pressed="true"] { background: linear-gradient(150deg, rgba(115,196,201,.16), rgba(115,196,201,.03)), var(--surface); box-shadow: inset 0 0 0 1.5px var(--mint); }
.type-card .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--mint-wash); color: var(--mint); }
.type-card .ico svg { width: 20px; height: 20px; }
.type-card b { font-size: 17px; }
.type-card span { font-size: 14px; color: var(--text-muted); line-height: 1.45; }

.form-card { margin-top: 24px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(24px, 4vw, 44px); }
.form-card[hidden] { display: none; }
.form-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.fields { display: grid; gap: 22px; }
@media (min-width: 700px) { .fields { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; }
.field[hidden] { display: none; }
.field > label, .field > .label { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.field .opt { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field .req { font-size: 12px; font-weight: 700; color: var(--mint); } /* WEB-029: required cue visible before submitting */
.field .sub { font-size: 13px; color: var(--text-dim); margin-top: -4px; }
.input, .textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--ink-900); border: 1px solid var(--line-strong);
  transition: border-color .2s, box-shadow .2s; font-size: 16px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); opacity: 1; } /* 8.55:1 on --ink-900 (WEB-010) */
.input:focus, .textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-wash); }
.input[aria-invalid="true"] { border-color: #e07a7a; }
.textarea { min-height: 140px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-200); transition: all .2s; }
.chip-btn:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.chip-btn[aria-pressed="true"], .chip-btn[aria-checked="true"] { background: var(--mint); color: var(--ink-900); box-shadow: none; }
.chip-btn[role="checkbox"][aria-checked="true"]::before { content: "\2713\00a0" / ""; } /* multi-select state is not colour-only */
.form-foot { margin-top: 32px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.form-foot p { font-size: 14px; color: var(--text-dim); max-width: 40ch; }
.error-msg { color: #f0a0a0; font-size: 13px; }
.form-status { margin-top: 20px; padding: 14px 16px; border-radius: 12px; font-size: 14px; background: rgba(224,122,122,.1); box-shadow: inset 0 0 0 1px rgba(224,122,122,.35); color: #f0c0c0; }
.form-status a { color: var(--mint); text-decoration: underline; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button[type="submit"][aria-busy="true"] { opacity: .7; pointer-events: none; }

.success { text-align: center; display: grid; gap: 16px; justify-items: center; padding-block: 24px; }
.success .check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--ink-900); animation: pop .5s var(--ease); }
.success .check svg { width: 32px; height: 32px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.aside-card { border-radius: var(--radius-lg); padding: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 20px; }
@media (min-width: 1000px) { .aside-card { position: sticky; top: calc(var(--header-h) + 24px); } }
.aside-card ol { display: grid; gap: 18px; counter-reset: a; }
.aside-card ol li { counter-increment: a; display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: 15px; color: var(--text-muted); }
.aside-card ol li::before { content: counter(a); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--mint); background: var(--mint-wash); }
.aside-card ol b { color: var(--text); display: block; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.nf .inner { display: grid; gap: 24px; justify-items: center; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0s); } /* WEB-038: short, subtle; hero content never hidden */
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.reveal.reveal-now { transition: none; } /* WEB-038: anchor and keyboard arrivals show content at once */
/* WEB-038: without JavaScript the tabs and enquiry chooser cannot work, so show every industry panel and point to email */
.no-js .tabs { display: none; }
.no-js .panel[hidden] { display: grid; }
.no-js .panel + .panel { margin-top: 24px; }
.no-js .type-grid { display: none; }

/* WEB-037: reduced motion shows a static, finished product screen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .phone, .phone-idle, .phone-app, .demo-toast, .ripple, .hero-title .accent, .marquee-track, .cta-band .rings span, .panel.is-in .panel-body > * { animation: none !important; }
  .phone-idle { opacity: 0; } .phone-app { opacity: 1; transform: none; } .demo-toast { opacity: 1; transform: none; }
  .ripple { opacity: .35; transform: scale(1.6); }
  .ripple:nth-child(n+2), .cta-band .rings { display: none; }
  .motion-toggle { display: none; }
}

/* WEB-037: visible pause control for continuous motion */
.motion-toggle {
  position: absolute; z-index: 4; right: 0; bottom: 0; min-height: 44px; padding: 10px 16px 10px 36px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--text-muted); background: var(--ink-950); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.motion-toggle::before, .motion-toggle::after { content: ""; position: absolute; top: 50%; width: 4px; height: 12px; margin-top: -6px; border-radius: 1px; background: currentColor; }
.motion-toggle::before { left: 16px; } .motion-toggle::after { left: 23px; }
.motion-paused .motion-toggle::before { left: 17px; width: 0; height: 0; margin-top: -6px; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.motion-paused .motion-toggle::after { display: none; }
.motion-toggle:hover { color: var(--text); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (max-width: 999px) { .motion-toggle { position: relative; right: auto; bottom: auto; justify-self: end; margin-top: 16px; } .demo-toast { left: 0; right: auto; top: 12%; bottom: auto; } } /* toast sits high so the phone's social icons stay visible */

/* ---------- Website V1 hybrid additions ---------- */

/* Proof: anonymised deployments instead of figures */
@media (min-width: 1040px) { .stats--deploy { grid-template-columns: repeat(2, 1fr); } }
.stats--deploy .stat small { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.stats--deploy .stat strong { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.15; }

/* Pricing */
.price-vat { color: var(--text-muted); font-size: 15px; margin-top: 6px; }
.pricing-note { margin-top: 24px; text-align: center; color: var(--text-muted); font-size: 15px; }
.pricing-note a, .calc-fine a, .faq .answer a, .context-note a { text-decoration: underline; text-underline-offset: 3px; } /* links inside text are not colour-only */

/* Restored from Dermott's version A: cost calculator (now per Location) */
.calc { border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 48px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 28px; align-content: start; }
.calc-qty { display: grid; gap: 14px; }
.calc-qty-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc-qty-row label { font-weight: 700; }
.calc-num { width: 96px; padding: 10px 12px; text-align: right; font-family: var(--mono); color: var(--mint); font-size: 16px; }
.calc-num[aria-invalid="true"] { border-color: #e07a7a; }
.calc-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: -6px; }
.calc-hint { font-size: 14px; color: var(--text); background: var(--mint-wash); box-shadow: inset 0 0 0 1px var(--mint-line); border-radius: 10px; padding: 10px 12px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--mint) var(--p, 0%), var(--ink-700) var(--p, 0%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--white); border: 6px solid var(--mint); box-shadow: 0 4px 12px rgba(0,0,0,.4); cursor: grab; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 6px solid var(--mint); cursor: grab; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--mint-line); }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.calc-out div { background: var(--ink-900); padding: 20px; }
.calc-out small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.calc-out strong { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.calc-fine { font-size: 13px; color: var(--text-dim); }
.calc-unit { display: block; margin-top: 4px; font-size: 13px; color: var(--text-dim); }
.price-eg { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.price-eg-title { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.price-eg-list { display: grid; gap: 6px; }
.price-eg-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--text-muted); }
.price-eg-list strong { color: var(--text); font-variant-numeric: tabular-nums; }
.price-eg-fine { font-size: 13px; color: var(--text-dim); }

/* Preview-only notice (added by main.js off the production domain).
   In normal flow above the header, so it never covers content (WEB-011). */
.preview-bar { position: relative; z-index: 101; display: flex; gap: 12px; align-items: center; justify-content: center; background: var(--mint); color: var(--ink-900); font-size: 14px; line-height: 1.4; padding: 6px var(--gutter); min-height: 44px; }
.preview-bar p { max-width: 760px; }
.preview-bar strong { font-weight: 800; }
.preview-build { margin-left: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.preview-bar button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-block: -6px; border: 0; background: transparent; color: inherit; border-radius: 999px; font-size: 22px; line-height: 1; cursor: pointer; }
.preview-bar button:hover { background: rgba(0,0,0,.1); }
.preview-bar button:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -4px; }
@media (max-width: 599px) { .preview-bar .preview-more { display: none; } }

/* RC-B: homepage */
/* Light-section variants for blocks that were designed on dark (section order alternation) */
.section--light .benefit { background: var(--white); }
.section--light .benefit:hover { background: var(--paper-2); }
.section--light .benefit .ico { color: var(--mint-text-light); }
.section--light .case { background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(12,15,15,.25); }
.section--light .case .chip { background: var(--paper); }
@media (min-width: 1040px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
/* Hardware now sits on the dark background */
.hw-card { color: var(--ink-900); }
.hw-group-head .kicker { color: var(--mint); }
.hw-scale { color: var(--text-muted); }
.hw-scale-l, .hw-scale-m { stroke: var(--mint); }
.section--light .badge-soon { color: var(--mint-text-light); }

/* Example experiences: static demonstration phones (no animation, real text) */
.demo-grid { display: grid; gap: 40px 24px; grid-template-columns: 1fr; justify-items: center; }
@media (min-width: 760px) { .demo-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.demo-card { display: grid; gap: 16px; justify-items: center; width: 100%; max-width: 330px; }
.demo-badge { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 6px 10px; border-radius: 999px; text-align: center; }
.demo-cap { font-size: 14px; color: var(--ink-500); text-align: center; max-width: 30ch; }
.dphone { width: min(100%, 300px); border-radius: 42px; padding: 9px; background: linear-gradient(145deg, #2a3232, #0b0e0e 40%, #1d2323); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06); }
.dphone-screen { border-radius: 34px; overflow: hidden; background: var(--paper); color: var(--ink-900); min-height: 440px; }
.dp-hero { padding: 34px 18px 16px; background: linear-gradient(160deg, var(--ink-800), var(--ink-900)); color: var(--white); }
.dp-hero small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); font-weight: 800; }
.dp-hero h3 { font-size: 20px; line-height: 1.15; margin-top: 6px; letter-spacing: -.02em; font-weight: 800; }
.dp-body { padding: 12px; display: grid; gap: 10px; }
.dp-block { background: var(--white); border-radius: 14px; padding: 8px 12px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px -10px rgba(0,0,0,.2); }
.dp-block h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-text-light); font-weight: 800; padding-top: 4px; }
.dp-list { list-style: none; margin: 0; padding: 0; }
.dp-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 13.5px; border-top: 1px solid rgba(12,15,15,.07); }
.dp-list li:first-child { border-top: 0; }
.dp-list b { font-weight: 700; }
.dp-list span { color: var(--ink-500); font-size: 12.5px; text-align: right; }
.dp-btn { display: block; text-align: center; padding: 11px; border-radius: 12px; background: var(--ink-900); color: var(--white); font-weight: 700; font-size: 13.5px; }
.dp-btn--ghost { background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-600); }

/* Case-study photo caption */
.case-photo { position: relative; margin: 0; }
.case-photo figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 1; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--white); background: rgba(7,9,9,.78); padding: 4px 10px; border-radius: 999px; }
@media (min-width: 700px) and (max-width: 899px) { .case-photo { width: 40%; flex: none; } .case-photo img { width: 100%; height: 100%; } }

/* Hardware CTA */
.hw-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hw-quote { font-weight: 600; color: var(--text-muted); }
/* RC-A: legal pages, enquiry */
.legal-wrap { padding-bottom: clamp(64px, 9vw, 120px); }
.legal-placeholder { max-width: 62ch; padding: 24px 26px; border-radius: 16px; background: rgba(115,196,201,.08); box-shadow: inset 0 0 0 1px rgba(115,196,201,.4); display: grid; gap: 12px; }
.legal-placeholder p { margin: 0; }
.legal-placeholder-text { font-size: 18px; line-height: 1.5; }
.legal-placeholder-contact { font-size: 15px; color: var(--text-dim); }
.nf-legal { font-size: 14px; color: var(--text-dim); }
.nf-legal a { text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }
.form-privacy { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-dim); }
.form-privacy a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.form-status--info { background: rgba(115,196,201,.08); box-shadow: inset 0 0 0 1px rgba(115,196,201,.35); color: var(--text); }
.success .success-email { font-weight: 600; }
.success-copy { max-width: 46ch; display: grid; gap: 12px; }
.success-copy[hidden] { display: none; }
.legal-placeholder a { text-decoration: underline; text-underline-offset: 3px; }
/* Legal drop-in (launch): styles for approved text inserted by scripts/publish-legal.py.
   Only descendants are styled, so the placeholder notice renders exactly as before. */
.legal-body { max-width: 72ch; }
.legal-body > * + * { margin-top: 1em; }
.legal-body h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 800; margin-top: 2em; }
.legal-body h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin-top: 1.6em; }
.legal-body h4 { font-size: 17px; font-weight: 700; margin-top: 1.4em; }
.legal-body h2 + *, .legal-body h3 + *, .legal-body h4 + * { margin-top: .6em; }
.legal-body > p, .legal-body li, .legal-body dd { color: var(--text-muted); }
.legal-body > :not(.legal-placeholder) :is(strong, b) { color: var(--text); }
.legal-body ul, .legal-body ol { padding-left: 1.4em; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li + li { margin-top: .4em; }
.legal-body li::marker { color: var(--mint); }
.legal-body > :not(.legal-placeholder) a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body address { font-style: normal; color: var(--text-muted); }
.legal-body hr { border: 0; border-top: 1px solid var(--line-strong); margin-block: 2em; }
.legal-body blockquote { margin-inline: 0; padding-left: 16px; border-left: 2px solid var(--mint-line); }
.legal-body .legal-updated { font-size: 15px; color: var(--text-dim); }
.legal-body .legal-table { overflow-x: auto; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); color: var(--text-muted); }
.legal-body th { color: var(--text); font-weight: 700; }

/* P1 polish: visible slider focus, 24px minimum link targets */
.range:focus-visible { outline: 2px solid var(--mint); outline-offset: 10px; }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--mint); }
.answer a.accent, a[href="#top"] { display: inline-block; padding-block: 4px; }

/* ---------- Founder front-facing pass (19 Oct 2026) ---------- */
/* Proof: Events sits alongside Accommodation and Hospitality as a launch vertical */
@media (min-width: 760px) { .stats--deploy { grid-template-columns: repeat(3, 1fr); } }

/* Hardware: product photos (Drive, 19 Oct) sit on a near-white studio background */
.hw-card .hw-img { background: #f8f8f8; }

/* Why TAPP: restrained coming-soon note */
.benefits-soon { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; color: var(--text-muted); }

/* Case studies: horizontal scroller for four or more cases (scroll-snap, no library) */
.cases-scroller { display: grid; gap: 20px; }
.cases {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 12px; scrollbar-width: thin; border-radius: var(--radius-lg);
}
.cases:focus-visible { outline: 2px solid var(--mint-text-light); outline-offset: 4px; }
.cases > .case { scroll-snap-align: start; }
@media (min-width: 900px) { .cases { grid-template-columns: none; grid-auto-columns: calc((100% - 20px) / 2); } }
.cases-nav { display: flex; justify-content: flex-end; gap: 10px; }
.cases-nav[hidden] { display: none; }
.cases-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--white); color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(12,15,15,.16); transition: background-color .2s; }
.cases-btn:hover { background: var(--mint); }
.cases-btn:focus-visible { outline: 2px solid var(--mint-text-light); outline-offset: 3px; }
.cases-btn:disabled { opacity: .4; cursor: default; }
.cases-btn svg { width: 20px; height: 20px; transform: rotate(45deg); }
.cases-btn[data-dir="-1"] svg { transform: rotate(-135deg); }

/* FAQ: longer answers */
.faq .answer > * + * { margin-top: 12px; }
.faq .answer ul { padding-left: 20px; display: grid; gap: 8px; }
.faq .answer b { color: var(--text); }

/* Hero phone: a TAPP Location page in the app's own layout (colour band, logo tile,
   back button, title, full-width item buttons, review links, "Powered by tapp").
   Colours and logo are the Glen Hollow demo business from the app's demo library.
   The canvas is drawn at 270x599 and scaled on small screens so text never shrinks below 12px computed. */
.tp { background: #2F4F3A; overflow: hidden; }
.tp-canvas { width: 270px; height: 599px; display: flex; flex-direction: column; transform-origin: 0 0; font-family: var(--font); }
.tp-band { height: 112px; flex: none; background: linear-gradient(180deg, #5E8C61, #4A7350); }
.tp-sheet { position: relative; flex: 1; margin-top: -20px; background: #EEF1E8; border-radius: 16px; padding: 0 16px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tp-back { position: absolute; left: 8px; top: 6px; width: 30px; height: 30px; border-radius: 50%; background: #2F4F3A; color: #fff; display: grid; place-items: center; }
.tp-back svg { width: 15px; height: 15px; transform: rotate(-135deg); }
.tp-logo { display: block; width: 100px; height: 100px; margin-top: -54px; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); }
.tp-title { margin-top: 12px; font-size: 16px; font-weight: 600; color: #1F3326; letter-spacing: -.01em; }
.tp-desc { width: 100%; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #4a524b; }
.tp-items { list-style: none; margin: 14px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.tp-items li { background: #2F4F3A; color: #fff; border-radius: 9px; padding: 10px 6px; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.tp-tap { animation: tp-tap 9s var(--ease) infinite; }
@keyframes tp-tap { 0%, 62% { box-shadow: 0 0 0 0 rgba(115,196,201,0); } 68% { box-shadow: 0 0 0 4px rgba(115,196,201,.85); } 80%, 100% { box-shadow: 0 0 0 0 rgba(115,196,201,0); } }
.tp-reviews { margin-top: 12px; display: flex; justify-content: center; gap: 14px; color: #2F4F3A; } /* one row, just under the buttons */
.tp-reviews img { width: 26px; height: 26px; display: block; } /* the TAPP app's own review and social icons */
.tp-reviews svg { width: 18px; height: 18px; display: block; }
.tp-foot { flex: none; padding: 10px 0 14px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: #EEF1E8; }
.tp-foot img { height: 14px; width: auto; }
@media (max-width: 599px) { .tp-canvas { transform: scale(.5852); } }
/* Hero rotates through three example experiences; JS advances .is-active once per cycle */
.tp-canvas:not(.is-active), .tp-swap:not(.is-active) { display: none; }
.tp-canvas { background: #2F4F3A; }
.tp--duck { background: #14284F; }
.tp--duck .tp-band { background: linear-gradient(180deg, #2B4F94, #1D3B78); }
.tp--duck .tp-sheet { background: #F0F2F7; }
.tp--duck .tp-back, .tp--duck .tp-items li { background: #1B3366; }
.tp--duck .tp-title { color: #13213F; }
.tp--duck .tp-reviews { color: #1B3366; }
.tp--duck .tp-foot { color: #F0F2F7; }
.tp--tedx { background: #141414; }
.tp--tedx .tp-band { background: linear-gradient(180deg, #E62B1E, #B92117); }
.tp--tedx .tp-sheet { background: #F4F2F1; }
.tp--tedx .tp-back, .tp--tedx .tp-items li { background: #1C1C1C; }
.tp--tedx .tp-title { color: #111; }
.tp--tedx .tp-reviews { color: #1C1C1C; }
.tp--tedx .tp-foot { color: #F4F2F1; }
.tp-logo { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .tp-tap { animation: none !important; } }

/* Example experiences: equal phones holding real TAPP app screens */
.dphone-screen--shot { min-height: 0; aspect-ratio: 390 / 930; } /* full page incl. the Powered by footer */
.dphone-screen--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo-note { margin-top: 28px; text-align: center; font-size: 13px; color: var(--ink-500); }

/* App sign-in and sign-up links are switched off while tapp-account-url is empty */
[data-account-link]:not([href]) { cursor: default; }

/* ---------- Analytics consent (assets/js/consent.js). Only appears when an analytics ID is configured. ---------- */
.consent {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; margin-inline: auto; padding: 18px 20px;
  display: grid; gap: 14px;
  background: var(--ink-850); color: var(--text);
  border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 48px -16px rgba(0,0,0,.6);
  font-size: 15px; line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent__text a { color: var(--mint); text-decoration: underline; }
.consent__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.consent__actions .btn { min-width: 112px; }
.consent-settings { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-200); cursor: pointer; text-align: left; transition: color .2s; }
.consent-settings:hover { color: var(--mint); }
@media (max-width: 799px) { .consent-settings { padding-block: 8px; min-height: 24px; } }