/* Marketing site styles — reads the shared tokens.
   Mobile first. The base styles are the phone.
   Wider screens add three breakpoints:
   - 761px: tablet and desktop.
   - 961px: split rows.
   - 1100px: hero orbs, convergence lines. */

/* -------- Base -------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Anchors land below the nav. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
[hidden] { display: none !important; }

body {
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-body); letter-spacing: var(--ls-body);
  color: var(--color-foreground); background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-display); }
h2 { font: var(--fw-heading) var(--fs-heading)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
h3 { font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-body); letter-spacing: var(--ls-title); }
h1, h2, h3 { color: var(--color-foreground); margin: 0; text-wrap: balance; }
p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-foreground); margin: 0; text-wrap: pretty; }

:where(a, summary, button, input):focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }

.page { min-height: 100vh; background: var(--color-background); overflow-x: clip; }

/* One wide column, left-aligned. Paragraphs keep their own measure. */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

/* -------- Primitives -------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-6);
}

.glass {
  background: var(--color-glass); border: 0; box-shadow: var(--shadow-drop); color: var(--color-foreground);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
/* Zero specificity. A sticky nav wins. */
:where(.glass) { position: relative; }
/* The edge is a masked 1px ring. Masks read alpha only. */
.glass::before {
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: var(--glass-edge); pointer-events: none;
  -webkit-mask: linear-gradient(var(--color-foreground) 0 0) content-box, linear-gradient(var(--color-foreground) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-foreground) 0 0) content-box, linear-gradient(var(--color-foreground) 0 0);
  mask-composite: exclude;
}
.glass--dark { background: var(--color-glass-dark); color: var(--color-on-cta); }
.glass--dark::before { background: var(--glass-edge-dark); }

/* Hosts need `position` and `isolation`. `.page` covers unisolated orbs. */
.orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute; width: var(--orb-size, 360px); aspect-ratio: 1; border-radius: 50%;
}
.orb--orange { background: var(--color-orb-orange); }
.orb--blue { background: var(--color-orb-blue); }
.orb--pink { background: var(--color-orb-pink); }
.orb--yellow { background: var(--color-orb-yellow); }
.orb--green { background: var(--color-orb-green); }
@keyframes orb-drift { to { transform: translate(40px, -30px) scale(1.08); } }
@keyframes orb-drift-alt { to { transform: translate(-36px, 28px) scale(0.94); } }

/* Drift re-blurs phone glass. Desktop keeps it. */
@media (min-width: 761px) {
  .orb { animation: orb-drift 30s ease-in-out infinite alternate; }
  .orb--alt { animation-name: orb-drift-alt; animation-duration: 34s; }
}

.tile {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-tile);
}
.tile svg { width: 20px; height: 20px; }
.tile--blue { background: var(--color-tint-blue); color: var(--color-tint-blue-ink); }
.tile--orange { background: var(--color-tint-orange); color: var(--color-tint-orange-ink); }
.tile--green { background: var(--color-tint-green); color: var(--color-tint-green-ink); }
.tile--pink { background: var(--color-tint-pink); color: var(--color-tint-pink-ink); }
.tile--yellow { background: var(--color-tint-yellow); color: var(--color-tint-yellow-ink); }
.tile--ink { background: var(--color-tint-ink); color: var(--color-foreground); }

.signal-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); }
.signal-dot--message { background: var(--color-signal-message); }
.signal-dot--reservation { background: var(--color-signal-reservation); }
.signal-dot--loyalty { background: var(--color-signal-loyalty); }
.signal-dot--campaign { background: var(--color-signal-campaign); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--fw-small) var(--fs-small)/var(--lh-small) var(--font-body); letter-spacing: var(--ls-small);
  height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 0;
  text-decoration: none; cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(0.5px); }
.btn--primary { background: var(--color-cta); color: var(--color-on-cta); }
.btn--primary:hover { background: var(--color-cta-hover); }

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .btn { transition: none; }
}

/* -------- Type roles -------- */
.eyebrow {
  font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-subtle); margin-bottom: 20px;
}
.display, .statement {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-foreground);
  margin: 0;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.statement { font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.display, .statement { text-wrap: balance; }
.headline-accent { color: var(--color-brand-text); }
.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-muted);
  max-width: 560px; margin: 24px 0 0;
}
/* Figures cap to their column. Their container sets cqi. */
.price-figure {
  font: var(--fw-figure) min(var(--fs-figure), 10cqi)/var(--lh-figure) var(--font-display); letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
}

/* -------- Nav -------- */
/* A floating glass pill. It holds the menu. */
.nav {
  position: sticky; top: var(--space-3); z-index: 40; height: 0;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 0 var(--space-4);
}
.nav-pill {
  display: flex; flex: 1; gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 66%, transparent);
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font: 700 18px/1 var(--font-body); letter-spacing: -0.03em; text-transform: lowercase;
  color: var(--color-foreground); text-decoration: none;
}
.nav-logo img { display: block; }
.nav .nav-logo {
  gap: var(--space-1);
  font: var(--fw-wordmark) var(--fs-wordmark)/var(--lh-wordmark) var(--font-display); letter-spacing: var(--ls-wordmark);
}

@media (min-width: 761px) {
  .nav { top: var(--space-4); }
  .nav-pill { flex: none; gap: var(--space-3); background: color-mix(in srgb, var(--color-surface) 62%, transparent); }
  .nav .nav-logo { gap: var(--space-2); }
  .nav .nav-logo img { width: 28px; height: 28px; }
}

/* -------- Audience switch -------- */
.nav-switch {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline-start: auto; padding: var(--space-1);
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
}
.nav-switch-thumb {
  position: absolute; top: var(--space-1); left: var(--space-1); bottom: var(--space-1); width: calc(50% - var(--space-1));
  border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-thumb);
  view-transition-name: switch-thumb;
}
.nav-switch--customer .nav-switch-thumb { transform: translateX(100%); }
/* Named links paint above the thumb. */
.nav-switch a {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--space-3);
  font: var(--fw-switch) var(--fs-switch)/var(--lh-switch) var(--font-body); letter-spacing: var(--ls-switch);
  color: var(--color-muted); text-decoration: none;
}
.nav-switch a:first-of-type { view-transition-name: switch-business; }
.nav-switch a:last-of-type { view-transition-name: switch-customer; }
.nav-switch a[aria-current] { color: var(--color-foreground); }
.nav-switch .long { display: none; }

/* The smallest phones show the mark alone. That leaves room for the menu. */
@media (max-width: 360px) {
  .nav { padding-inline: var(--space-3); }
  .nav .nav-logo span { display: none; }
  /* The target grows. The mark stays put. */
  .nav .nav-logo { padding-inline: var(--space-3); margin-inline: calc(-1 * var(--space-3)); }
  .nav-switch a { padding-inline: var(--space-2); }
}

@media (min-width: 761px) {
  .nav-switch .long { display: inline; }
  .nav-switch .short { display: none; }
  .nav-switch a { padding-inline: var(--space-4); }
}

/* The page swaps at once. The thumb slides. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(switch-thumb) { animation-duration: 450ms; animation-timing-function: cubic-bezier(0.3, 1.2, 0.4, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* -------- Language menu -------- */
/* Native details. The current code opens the others. */
.nav-lang { position: relative; }
.nav-lang summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 var(--space-3);
  font: 500 var(--fs-small)/1 var(--font-body); text-transform: uppercase; color: var(--color-foreground);
  border-radius: var(--radius-pill);
}
.nav-lang summary::-webkit-details-marker { display: none; }
/* A drawn chevron. It turns up when open. */
.nav-lang summary::after {
  content: ''; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-standard);
}
.nav-lang[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.nav-lang ul {
  position: absolute; right: 0; top: calc(100% + 12px); margin: 0; padding: 8px 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-drop);
}
.nav-lang a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); white-space: nowrap;
  font: 500 var(--fs-small)/1 var(--font-body); color: var(--color-muted); text-decoration: none;
}
.nav-lang a:hover { color: var(--color-foreground); }

/* -------- Sections -------- */
/* Lively bands hold orbs. Calm bands stay white. */
.section { padding: var(--section-y) 0; }
.section--lively { padding-bottom: 0; }
.section--calm { background: var(--color-surface); border-block: 1px solid var(--color-hairline); }
.section--lively .head { text-align: center; }
.section--lively .head .lead { margin-inline: auto; }
/* A full-bleed stage clips its orbs. Heads sit above it. */
.stage { position: relative; isolation: isolate; padding: var(--space-9) 0 var(--section-y); }

/* -------- Hero -------- */
/* A lively band. Its orbs lean toward the pointer. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: 100px 0 var(--space-9);
}
.hero .orb {
  translate: calc(var(--mx, 0) * 44px) calc(var(--my, 0) * 32px);
  transition: translate 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Two orbs back the map. One backs the nav. */
.hero .orbs .orb:nth-child(1) { --orb-size: 300px; left: -150px; bottom: 260px; }
.hero .orbs .orb:nth-child(2) { --orb-size: 200px; left: calc(50% - 240px); top: -120px; }
.hero .orbs .orb:nth-child(3) { --orb-size: 260px; left: -40px; bottom: 150px; }
/* This orb follows the buttons. It backs the glass button. */
.hero-actions .orb { --orb-size: 240px; left: calc(50% - 60px); top: calc(100% - 50px); z-index: -1; animation-direction: alternate-reverse; }
.hero h1 { margin: var(--space-4) auto 0; max-width: 1000px; }
.hero .lead { margin-inline: auto; }
.hero-actions {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2); margin-top: var(--space-6);
}
/* Phones show the arrow alone. The clipped label names it. */
.hero-see { width: 52px; padding: 0; }
.hero-see-label, .dial-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 761px) {
  .hero { padding: 140px 0 72px; }
  .hero-actions { gap: var(--space-3); margin-top: 36px; }
  .hero-see { width: auto; padding: 0 var(--space-6); }
  .hero-see-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .hero-see svg { display: none; }
}

/* Wide screens free a corner. One orb rises there. */
@media (min-width: 1100px) {
  .hero .orbs .orb:nth-child(1) { --orb-size: 480px; left: -240px; top: 20px; bottom: auto; }
  .hero .orbs .orb:nth-child(3) { --orb-size: 430px; left: 17%; bottom: 270px; }
}

/* -------- Hero map -------- */
/* A diagram, never a mockup. Each dimmed node sets --map-dim. */
.hero-map { max-width: 1000px; margin: var(--space-7) auto 0; }
.map-panel { border-radius: var(--radius-panel); padding: 12px; }
.map {
  position: relative; overflow: hidden; aspect-ratio: 340 / 410; border-radius: var(--radius-card); container-type: inline-size;
  background-color: color-mix(in srgb, var(--color-surface) 42%, transparent);
  background-image: radial-gradient(color-mix(in srgb, var(--color-foreground) 13%, transparent) 1.1px, transparent 1.4px);
  background-size: 22px 22px;
}
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines--wide { display: none; }
.map-edge {
  --map-dim: 0.12;
  fill: none; stroke: var(--color-edge); stroke-width: 1.4; stroke-linecap: round;
  transition: opacity 350ms, stroke 350ms, stroke-width 350ms;
}
.map-dot-halo { opacity: 0.14; }
.map-dot-core { stroke: var(--color-surface); stroke-width: 2; }
.map-pulses { --map-dim: 0.07; }
.map-pulses [data-signal="message"] { fill: var(--color-signal-message); }
.map-pulses [data-signal="reservation"] { fill: var(--color-signal-reservation); }
.map-pulses [data-signal="loyalty"] { fill: var(--color-signal-loyalty); }
.map-pulses [data-signal="campaign"] { fill: var(--color-signal-campaign); }
.map [data-signal] { transition: opacity 350ms; }

/* Nodes centre on their point. */
.map-ring {
  --map-dim: 0.18;
  position: absolute; width: 24px; aspect-ratio: 1; translate: -50% -50%;
  border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: 0 0 0 1.25px var(--color-foreground);
  transition: opacity 350ms;
}
.map-ring--you {
  display: grid; place-items: center; width: 36px; left: 50%; top: 50%;
  background: var(--color-tint-orange); box-shadow: 0 0 0 2px var(--color-brand);
}
.map-ring--1 { left: 10%; top: 7.8%; }
.map-ring--2 { left: 90%; top: 7.8%; }
.map-ring--3 { left: 8.82%; top: 63.9%; }
.map-ring--4 { left: 91.18%; top: 63.9%; }
.map-ring--5 { left: 18.82%; top: 91.71%; }
.map-ring--6 { left: 50%; top: 93.66%; }
.map-ring--7 { left: 81.18%; top: 91.71%; }

.map-member {
  position: absolute; display: grid; place-items: center; width: 28px; aspect-ratio: 1; translate: -50% -50%;
  border-radius: var(--radius-tile); background: var(--color-tint-green); color: var(--color-tint-green-ink);
}
.map-ring--you svg, .map-member svg { width: 56%; }
.map-member--1 { left: 25.29%; top: 42.44%; }
.map-member--2 { left: 50%; top: 30.24%; }
.map-member--3 { left: 74.71%; top: 42.44%; }

.map-shop {
  position: absolute; display: grid; place-items: center; width: 44px; aspect-ratio: 1; translate: -50% -50%;
  padding: 0; border: 0; border-radius: var(--radius-tile); cursor: pointer;
  background: var(--color-cta); color: var(--color-on-cta);
}
.map-shop svg { width: 44%; }
.map-shop[aria-pressed="true"] { background: var(--color-brand); color: var(--color-foreground); }
.map-shop--business { left: 50%; top: 50%; }
.map-shop--cafe { left: 20.59%; top: 48.78%; }
.map-shop--florist { left: 77.06%; top: 25.61%; }
.map-shop--salon { left: 50%; top: 76.1%; }
.map-shop-label {
  position: absolute; top: 100%; left: 50%; translate: -50%; margin-top: var(--space-2);
  padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-foreground);
  font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; white-space: normal; width: max-content; max-width: 48cqw; text-align: center;
}

/* Tags anchor at bottom centre. */
.map-tag {
  --map-dim: 0;
  position: absolute; display: flex; align-items: center; gap: 6px; translate: -50% -100%;
  padding: 6px 10px; border-radius: var(--radius-tile); background: var(--color-surface); box-shadow: var(--shadow-drop);
  font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; white-space: nowrap;
}
/* Its text clears the message tag. */
.map-tag--loyalty { left: 25%; top: calc(48.78% - 30px); }
/* Long labels clamp inside the map. cqw is the map's width. */
.map-tag--message { left: 77.06%; top: calc(25.61% - 26px); translate: min(-50%, 22.94cqw - 100% - var(--space-2)) -100%; }
.map-tag--reservation, .map-tag--campaign { display: none; }
/* The business map moves its tags. */
.map--business .map-tag--loyalty { left: 29.41%; top: 80.49%; }
.map--business .map-tag--message { display: none; }
.map-tag--team { left: 50%; top: calc(30.24% - 22px); }

.map-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2); margin-top: var(--space-5);
}
.map-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-surface); color: var(--color-foreground);
  font: var(--fw-small) var(--fs-small)/var(--lh-small) var(--font-body); letter-spacing: var(--ls-small);
}
.map-chip[aria-pressed="true"] { background: var(--color-cta); color: var(--color-on-cta); }
.map-chip .signal-dot { box-shadow: 0 0 0 2px var(--color-surface); }
.map-hint { margin-top: var(--space-3); color: var(--color-muted); }
.map-hint-hover { display: none; }

/* A pressed chip isolates its signal. */
.hero-map:has([data-signal="message"][aria-pressed="true"]) .map [data-signal]:not([data-signal="message"]),
.hero-map:has([data-signal="reservation"][aria-pressed="true"]) .map [data-signal]:not([data-signal="reservation"]),
.hero-map:has([data-signal="loyalty"][aria-pressed="true"]) .map [data-signal]:not([data-signal="loyalty"]),
.hero-map:has([data-signal="campaign"][aria-pressed="true"]) .map [data-signal]:not([data-signal="campaign"]) { opacity: var(--map-dim); }

/* One shop lights at a time. Hover and focus suspend a press. */
.map:has([data-shop="business"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="business"]):is(:hover, :focus-visible))) .map-edge[data-shops~="business"],
.map:has([data-shop="cafe"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="cafe"]):is(:hover, :focus-visible))) .map-edge[data-shops~="cafe"],
.map:has([data-shop="florist"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="florist"]):is(:hover, :focus-visible))) .map-edge[data-shops~="florist"],
.map:has([data-shop="salon"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="salon"]):is(:hover, :focus-visible))) .map-edge[data-shops~="salon"] { stroke: var(--color-foreground); stroke-width: 2.2; }
.map:has([data-shop="business"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="business"]):is(:hover, :focus-visible))) :is(.map-edge, .map-ring):not([data-shops~="business"]),
.map:has([data-shop="cafe"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="cafe"]):is(:hover, :focus-visible))) :is(.map-edge, .map-ring):not([data-shops~="cafe"]),
.map:has([data-shop="florist"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="florist"]):is(:hover, :focus-visible))) :is(.map-edge, .map-ring):not([data-shops~="florist"]),
.map:has([data-shop="salon"]:is(:focus-visible, [aria-pressed="true"])):not(:has(.map-shop:not([data-shop="salon"]):is(:hover, :focus-visible))) :is(.map-edge, .map-ring):not([data-shops~="salon"]) { opacity: var(--map-dim); }

/* Touch hover sticks. Only real hover lights. */
@media (hover: hover) {
  .map:has([data-shop="business"]:hover) .map-edge[data-shops~="business"],
  .map:has([data-shop="cafe"]:hover) .map-edge[data-shops~="cafe"],
  .map:has([data-shop="florist"]:hover) .map-edge[data-shops~="florist"],
  .map:has([data-shop="salon"]:hover) .map-edge[data-shops~="salon"] { stroke: var(--color-foreground); stroke-width: 2.2; }
  .map:has([data-shop="business"]:hover) :is(.map-edge, .map-ring):not([data-shops~="business"]),
  .map:has([data-shop="cafe"]:hover) :is(.map-edge, .map-ring):not([data-shops~="cafe"]),
  .map:has([data-shop="florist"]:hover) :is(.map-edge, .map-ring):not([data-shops~="florist"]),
  .map:has([data-shop="salon"]:hover) :is(.map-edge, .map-ring):not([data-shops~="salon"]) { opacity: var(--map-dim); }
}

@media (hover: hover) and (pointer: fine) {
  .map-hint-hover { display: inline; }
  .map-hint-tap { display: none; }
}

@media (min-width: 761px) {
  .hero-map { margin-top: 64px; }
  .map { aspect-ratio: 960 / 540; }
  .map-lines--phone { display: none; }
  .map-lines--wide { display: block; }
  .map-ring:not(.map-ring--you) { width: clamp(24px, 3.8%, 36px); }
  .map-ring--1 { left: 13.54%; top: 15.93%; }
  .map-ring--2 { left: 86.46%; top: 15.93%; }
  .map-ring--3 { left: 10%; top: 61.11%; }
  .map-ring--4 { left: 90%; top: 61.11%; }
  .map-ring--5 { left: 26.04%; top: 87.78%; }
  .map-ring--6 { left: 50%; top: 90.74%; }
  .map-ring--7 { left: 73.96%; top: 87.78%; }
  .map-member { width: clamp(28px, 4.2%, 40px); }
  .map-member--1 { left: 37.19%; top: 45.93%; }
  .map-member--2 { left: 50%; top: 27.78%; }
  .map-member--3 { left: 62.81%; top: 45.93%; }
  .map-shop { width: clamp(44px, 6%, 58px); }
  .map-shop--cafe { left: 26.04%; top: 27.78%; }
  .map-shop--florist { left: 73.96%; top: 27.78%; }
  .map-shop--salon { left: 50%; top: 81.48%; }
  .map-tag--loyalty { left: 26.04%; top: calc(27.78% - 44px); }
  .map-tag--message { left: 73.96%; top: calc(27.78% - 44px); translate: -50% -100%; }
  .map-tag--reservation { display: flex; left: 67.71%; top: 73.15%; }
  .map-tag--campaign { display: flex; left: 32.29%; top: 73.15%; }
  .map--business .map-tag--loyalty { left: 28.12%; top: 31.48%; }
  .map--business .map-tag--message { display: flex; left: 71.88%; top: 31.48%; }
  .map--business .map-tag--reservation { left: 71.88%; top: 75.93%; }
  .map--business .map-tag--campaign { left: 28.12%; top: 75.93%; }
  .map-tag--team { left: 50%; top: calc(27.78% - 28px); }
}

/* Lines and nodes stay. Dots stop. */
@media (prefers-reduced-motion: reduce) {
  .map-pulses { display: none; }
  .map-edge, .map-ring, .map [data-signal] { transition: none; }
}

/* -------- Trades marquee -------- */
/* Two pill rows drift apart. Each list repeats once. */
.trades-label { margin: 0; text-align: center; }
.trades .stage { display: grid; gap: var(--space-3); }
/* A mask would stop the blur. Rows clip instead. */
.trades-row { min-width: 0; overflow-x: clip; }
.trades-track { display: flex; width: max-content; animation: trades 60s linear infinite; }
.trades-row + .trades-row .trades-track { animation-direction: reverse; animation-delay: -30s; }
.trades ul { display: flex; gap: var(--space-3); margin: 0; padding: 0 var(--space-3) 0 0; list-style: none; }
.trades li {
  display: flex; align-items: center; gap: var(--space-2); height: 50px; padding: 0 var(--space-5);
  border-radius: var(--radius-pill); white-space: nowrap;
  font: var(--fw-small) var(--fs-title)/1 var(--font-body);
}
/* Moving blur stutters phones. */
.trades li { background: color-mix(in srgb, var(--color-surface) 85%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Each trade ends in a dot. */
.trades li::after { content: ''; flex: none; width: 10px; height: 10px; border-radius: var(--radius-pill); }
.trades li:nth-child(5n+1)::after { background: var(--color-orb-orange); }
.trades li:nth-child(5n+2)::after { background: var(--color-orb-blue); }
.trades li:nth-child(5n+3)::after { background: var(--color-orb-pink); }
.trades li:nth-child(5n+4)::after { background: var(--color-orb-green); }
.trades li:nth-child(5n+5)::after { background: var(--color-orb-yellow); }
@keyframes trades { to { transform: translateX(-50%); } }

/* Orbs centre on their point. Phones without motion stack them. */
.trades .orb { --orb-size: 240px; translate: -50% -50%; }
.trades .orb:nth-child(1) { left: 30%; top: 15%; }
.trades .orb:nth-child(2) { left: 70%; top: 38%; }
.trades .orb:nth-child(3) { left: 30%; top: 62%; }
.trades .orb:nth-child(4) { left: 70%; top: 85%; }

/* Moving rows need a band. Wide screens keep it. */
@media (prefers-reduced-motion: no-preference), (min-width: 761px) {
  .trades .orb:nth-child(1) { left: 15%; top: 88px; }
  .trades .orb:nth-child(2) { left: 38%; top: 120px; }
  .trades .orb:nth-child(3) { left: 62%; top: 88px; }
  .trades .orb:nth-child(4) { left: 85%; top: 120px; }
  /* Outer orbs reach both edges. */
  .trades .orb:nth-child(1), .trades .orb:nth-child(4) { --orb-size: max(240px, 36vw); }
}

@media (min-width: 761px) {
  .trades .orb { --orb-size: max(300px, 24vw); }
  .trades li {
    background: var(--color-glass);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
}

/* Less motion wraps row one. */
@media (prefers-reduced-motion: reduce) {
  .trades [aria-hidden="true"] { display: none; }
  .trades-row { padding: 0 var(--gutter); }
  .trades-track { width: auto; animation: none; }
  .trades ul { flex-wrap: wrap; justify-content: center; padding: 0; }
}

/* -------- Everything connected -------- */
/* Four glass cards. Their lines converge below. */
.connected .stage { padding-bottom: var(--space-9); }
.features { display: grid; gap: var(--space-4); }
.feature { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-card); }
.feature-top { display: flex; align-items: center; justify-content: space-between; }
.feature p { color: var(--color-muted); }
.connect { display: none; }
.connect-lines { display: block; width: 100%; height: auto; }
.connect-lines path { fill: none; stroke: var(--color-edge); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.connect-pulses [data-signal="message"] { fill: var(--color-signal-message); }
.connect-pulses [data-signal="reservation"] { fill: var(--color-signal-reservation); }
.connect-pulses [data-signal="loyalty"] { fill: var(--color-signal-loyalty); }
.connect-pulses [data-signal="campaign"] { fill: var(--color-signal-campaign); }
.connect-node {
  display: grid; place-items: center; width: 60px; aspect-ratio: 1; margin: 0 auto;
  border-radius: var(--radius-pill); background: var(--color-cta); color: var(--color-on-cta);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.connected .orb:nth-child(1) { --orb-size: 220px; left: -90px; top: 120px; }
.connected .orb:nth-child(2) { --orb-size: 220px; right: -90px; top: 420px; }
.connected .orb:nth-child(3) { --orb-size: 220px; left: -90px; top: calc(100% - 250px); }

@media (min-width: 761px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connected .orb:nth-child(1) { --orb-size: 300px; left: -130px; top: 60px; }
  .connected .orb:nth-child(2) { --orb-size: 300px; right: -110px; top: 100px; }
  .connected .orb:nth-child(3) { --orb-size: 160px; left: 45%; top: 200px; }
}

/* Wide screens draw the convergence. */
@media (min-width: 1100px) {
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .connect { display: block; }
  /* Outer orbs track the column. */
  .connected .orb:nth-child(1) { --orb-size: 340px; left: max(-130px, 50% - (var(--content-max) + var(--orb-size)) / 2); }
  .connected .orb:nth-child(2) { --orb-size: 340px; right: max(-110px, 50% - (var(--content-max) + var(--orb-size)) / 2); top: 80px; }
  .connected .orb:nth-child(3) { --orb-size: 240px; left: calc(50% - 120px); top: 180px; }
}

/* Lines stay. Dots stop. */
@media (prefers-reduced-motion: reduce) {
  .connect-pulses { display: none; }
}

/* -------- Toolkit -------- */
/* Three white cards. Phones fold them. */
.toolkit-block { padding-bottom: var(--section-y); }
.toolkit { display: grid; gap: var(--space-4); margin-top: var(--space-9); }
.toolkit-name {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px; list-style: none; cursor: pointer;
  font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-body);
}
.toolkit-name::-webkit-details-marker { display: none; }
.toolkit-name::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); }
.toolkit-group:nth-child(1) .toolkit-name::before { background: var(--color-tint-blue-ink); }
.toolkit-group:nth-child(2) .toolkit-name::before { background: var(--color-tint-orange-ink); }
.toolkit-group:nth-child(3) .toolkit-name::before { background: var(--color-tint-green-ink); }
/* A plus turns into a cross. */
.toolkit-icon { display: grid; margin-left: auto; }
.toolkit-group[open] .toolkit-icon { rotate: 45deg; }
.toolkit dl { margin: 0; }
.toolkit-item { padding: var(--space-4) 0; border-top: 1px solid var(--color-hairline); }
.toolkit dt { font-weight: var(--fw-title); }
.toolkit dd { margin: var(--space-1) 0 0; font-size: var(--fs-small); color: var(--color-muted); }

/* Wider screens open every group. */
@media (min-width: 761px) {
  .toolkit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .toolkit-name { pointer-events: none; }
  .toolkit-icon { display: none; }
}

/* -------- Perks -------- */
/* Two lists on a calm band. */
.perk-lists { display: grid; gap: var(--space-8); margin-top: var(--space-9); }
.perk-name {
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-foreground);
  font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.perk-list { margin: 0; padding: 0; list-style: none; }
.perk {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-1) var(--space-4);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--color-hairline);
}
.perk .tile { grid-row: span 2; }
.perk-title { font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-body); }
.perk-body { color: var(--color-muted); }

@media (min-width: 961px) {
  .perk-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-11); }
}

/* -------- Text link -------- */
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 40px;
  font: 600 var(--fs-small)/1 var(--font-body); color: var(--color-foreground);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--color-edge);
}
.text-link:hover { text-decoration-color: var(--color-foreground); }

/* -------- Journey -------- */
/* A light crosses five stops. Each dot lights in turn. */
.journey-panel { max-width: 1000px; margin: 0 auto; padding: var(--space-6); border-radius: var(--radius-panel); }
.journey-track { position: relative; }
/* The line joins the dot centres. */
.journey-track::before {
  content: ''; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 1px;
  background: color-mix(in srgb, var(--color-foreground) 16%, transparent);
}
/* The box spans the travel. Its dot marks the start. */
.journey-light {
  position: absolute; left: 24px; top: 24px; bottom: 24px;
  animation: journey-light-down 8s linear infinite;
}
.journey-light::before {
  content: ''; position: absolute; left: 0; top: 0; width: 14px; aspect-ratio: 1; translate: -50% -50%;
  border-radius: var(--radius-pill); background: var(--color-brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-brand) 16%, transparent);
}
.journey-line { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.journey-stop {
  display: flex; align-items: center; gap: var(--space-4);
  font: var(--fw-small) var(--fs-small)/var(--lh-small) var(--font-body);
}
.journey-dot {
  position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: 48px; aspect-ratio: 1;
  border-radius: var(--radius-pill);
}
/* The face hides the ring's core. */
.journey-dot::before, .journey-dot::after { content: ''; position: absolute; z-index: -1; border-radius: inherit; }
.journey-dot::before { inset: -7px; opacity: 0; background: color-mix(in srgb, currentColor 16%, transparent); }
.journey-dot::after { inset: 0; border: 1px solid var(--color-edge); background: var(--color-surface); }
/* The dot lights, never its label. */
.journey-stop .journey-dot { animation: journey-stop 8s ease-out infinite; }
.journey-stop .journey-dot::before { animation: journey-ring 8s ease-out infinite; animation-delay: inherit; }
.journey-stop--message .journey-dot { color: var(--color-signal-message); }
.journey-stop--reservation .journey-dot { color: var(--color-signal-reservation); animation-delay: 1.6s; }
.journey-stop--loyalty .journey-dot { color: var(--color-brand-text); animation-delay: 3.2s; }
.journey-stop--campaign .journey-dot { color: var(--color-tint-green-ink); animation-delay: 4.8s; }
.journey-stop--visit .journey-dot { color: var(--color-tint-pink-ink); animation-delay: 6.4s; }
.journey-body { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.journey-body p { color: var(--color-muted); }
@keyframes journey-stop {
  0% { scale: 1.12; }
  26%, 100% { scale: 1; }
}
@keyframes journey-ring {
  0% { opacity: 1; }
  26%, 100% { opacity: 0; scale: 0.8; }
}
@keyframes journey-light-down {
  0% { translate: 0 0; opacity: 0; }
  5% { opacity: 1; }
  80% { translate: 0 100%; opacity: 1; }
  88%, 100% { translate: 0 100%; opacity: 0; }
}
@keyframes journey-light {
  0% { translate: 0 0; opacity: 0; }
  5% { opacity: 1; }
  80% { translate: 100% 0; opacity: 1; }
  88%, 100% { translate: 100% 0; opacity: 0; }
}

.journey .orb:nth-child(1) { --orb-size: 300px; left: calc(50% - 150px); top: 80px; }
.journey .orb:nth-child(2) { --orb-size: 150px; left: -50px; top: 360px; }
.journey .orb:nth-child(3) { --orb-size: 130px; right: -40px; top: 200px; }

/* Wider screens lay the line flat. */
@media (min-width: 761px) {
  .journey-panel { padding: var(--space-8); }
  .journey-track::before { left: 10%; right: 10%; top: 28px; bottom: auto; width: auto; height: 1px; }
  .journey-light { left: 10%; right: 10%; top: 28px; bottom: auto; animation-name: journey-light; }
  .journey-line { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .journey-stop { flex-direction: column; gap: var(--space-3); text-align: center; }
  .journey-dot { width: 56px; }
  .journey-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey .orb:nth-child(1) { --orb-size: 520px; left: calc(50% - 260px); top: 64px; }
  .journey .orb:nth-child(2) { --orb-size: 200px; left: 7%; top: 200px; }
  .journey .orb:nth-child(3) { --orb-size: 180px; right: 8%; top: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-light { display: none; }
  .journey-stop .journey-dot, .journey-stop .journey-dot::before { animation: none; }
}

/* -------- Pricing -------- */
/* One glass card. The dial sets the reach. */
.price-card {
  display: grid; gap: var(--space-5); max-width: 1040px; margin: 0 auto;
  padding: 28px var(--space-6) var(--space-6); border-radius: var(--radius-card);
}
.dial-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* dial.js sets --turn. Every part reads it. */
.dial {
  --turn: 0.25;
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 1;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
}
.dial-slice {
  position: absolute; inset: 6%; border-radius: var(--radius-pill);
  background: conic-gradient(color-mix(in srgb, var(--color-signal-campaign) 14%, transparent) calc(var(--turn) * 1turn), transparent 0);
}
/* Parts ride the ring. --a is their turn. */
.dial-dot, .dial-person {
  position: absolute; translate: -50% -50%; border-radius: var(--radius-pill);
  left: calc(50% + 44% * sin(var(--a) * 1turn));
  top: calc(50% - 44% * cos(var(--a) * 1turn));
}
.dial-dot {
  width: 10px; aspect-ratio: 1; scale: 0.8;
  background: var(--color-surface); box-shadow: inset 0 0 0 1.25px var(--color-edge);
  transition: background var(--dur-base), box-shadow var(--dur-base), scale var(--dur-base);
}
.dial-dot.lit { scale: 1; background: var(--color-signal-campaign); box-shadow: none; }
.dial-hand {
  position: absolute; left: 50%; top: 50%; width: 44%; height: 1.5px; translate: 0 -50%;
  transform-origin: 0 50%; rotate: calc(var(--turn) * 1turn - 90deg);
  background: color-mix(in srgb, var(--color-foreground) 35%, transparent);
  container-type: inline-size;
}
/* Message dots cross both ways. */
.dial-pulse {
  position: absolute; left: 0; top: 50%; width: 9px; aspect-ratio: 1; translate: -50% -50%;
  border-radius: var(--radius-pill); background: var(--color-signal-message);
  animation: dial-pulse 2.6s linear infinite both;
}
.dial-pulse--back { animation-direction: reverse; animation-delay: 1.3s; }
.dial-shop, .dial-person { display: grid; place-items: center; aspect-ratio: 1; }
.dial-shop {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 48px;
  border-radius: var(--radius-tile); background: var(--color-cta); color: var(--color-on-cta); box-shadow: var(--shadow-drop);
}
.dial-shop svg, .dial-person svg { width: 40%; }
.dial-person {
  --a: var(--turn);
  width: 46px; background: var(--color-surface); color: var(--color-foreground);
  box-shadow: 0 0 0 1.5px var(--color-foreground), var(--shadow-thumb);
  cursor: grab; transition: box-shadow var(--dur-base), scale var(--dur-base);
}
/* A halo pulses outward. Dragging stops it. */
.dial-person::after {
  content: ''; position: absolute; inset: -7px; border: 1.5px solid var(--color-brand); border-radius: inherit;
  pointer-events: none; animation: dial-halo 2.4s ease-out infinite;
}
.dial.dragging .dial-person { cursor: grabbing; scale: 1.1; box-shadow: 0 0 0 2.5px var(--color-brand), var(--shadow-thumb); }
.dial.dragging .dial-person::after { display: none; }
/* The input's focus rings the person. */
.dial-box:has(.dial-input:focus-visible) .dial-person {
  box-shadow: 0 0 0 1.5px var(--color-foreground), 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-foreground);
}
@keyframes dial-pulse { 0% { translate: -50% -50%; opacity: 0; } 15%, 80% { opacity: 1; } 100% { translate: calc(100cqi - 50%) -50%; opacity: 0; } }
@keyframes dial-halo { from { scale: 0.9; } to { scale: 1.4; opacity: 0; } }

/* One container. Three figures match. */
.price-rows { container-type: inline-size; }
.price-row, .price-block { border-top: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent); }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 18px 0; }
.price-block { padding-top: 18px; }
.price-head { display: flex; align-items: center; gap: var(--space-3); }
.price-label, .dial-hint {
  font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-subtle);
}
.price-head .price-label { margin-top: var(--space-1); }
.price-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.price-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.price-stat + .price-stat { padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }

/* Blue and green avoid labels. */
.pricing .orb:nth-child(1) { --orb-size: 220px; left: -70px; top: 20px; }
.pricing .orb:nth-child(2) { --orb-size: 200px; right: -70px; top: 60px; }
.pricing .orb:nth-child(3) { --orb-size: 180px; left: 30%; top: calc(100% - 300px); }

/* Wide screens split the card. */
@media (min-width: 961px) {
  .price-card { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: min(5vw, 72px); padding: min(4vw, 56px); }
  .dial-box { gap: var(--space-3); }
  .dial-dot { width: 13px; }
  .dial-pulse { width: 11px; }
  .dial-shop { width: 60px; }
  .dial-person { width: 52px; }
  .price-row { padding: 0 0 28px; border-top: 0; }
  .price-block { padding-top: 28px; }
  .price-head { gap: 14px; }
  .price-stats { margin-top: var(--space-5); }
  .price-stat + .price-stat { padding-left: 28px; }
  .pricing .orb:nth-child(1) { --orb-size: 380px; left: 8%; top: 0; }
  .pricing .orb:nth-child(2) { --orb-size: 220px; right: auto; left: 85%; top: 90px; }
  .pricing .orb:nth-child(3) { --orb-size: 200px; left: 46%; top: calc(100% - 280px); }
}

/* The ring stays. Its motion stops. */
@media (prefers-reduced-motion: reduce) {
  .dial-pulse, .dial-person::after { display: none; }
  .dial-dot, .dial-person { transition: none; }
}

/* -------- FAQ -------- */
/* One white card. Native rows. */
.faq-list { max-width: 880px; margin-top: var(--space-7); padding: 0; }
.faq-item + .faq-item { border-top: 1px solid var(--color-hairline); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: 44px; padding: 22px var(--space-6); list-style: none; cursor: pointer;
  font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-body);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  display: grid; place-items: center; flex: none; width: 40px; aspect-ratio: 1;
  border-radius: var(--radius-pill); background: var(--color-tint-ink);
  transition: rotate var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.faq-item[open] .faq-icon { rotate: 45deg; background: var(--color-cta); color: var(--color-on-cta); }
.faq-item p { padding: 0 var(--space-6) var(--space-6); color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

/* -------- Closing panel -------- */
/* Dark glass over orbs. Phones put the map first. */
.final .stage { padding-top: 0; }
.final-panel {
  padding: var(--space-5); border-radius: var(--radius-panel);
  background-image: radial-gradient(color-mix(in srgb, var(--color-on-cta) 11%, transparent) 1.1px, transparent 1.4px);
  background-size: 22px 22px;
}
.final-map { display: block; width: 100%; max-width: 560px; height: auto; }
.final-map--wide { display: none; }
.final-lines { fill: none; stroke: color-mix(in srgb, var(--color-on-cta) 24%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.final-pulses [data-signal="message"] { fill: var(--color-orb-blue); }
.final-pulses [data-signal="reservation"] { fill: var(--color-on-cta); }
.final-pulses [data-signal="loyalty"] { fill: var(--color-brand-on-dark); }
.final-pulses [data-signal="campaign"] { fill: var(--color-orb-green); }
.final-ring { fill: var(--color-foreground); stroke: color-mix(in srgb, var(--color-on-cta) 85%, transparent); stroke-width: 1.4; }
.final-shop { fill: var(--color-surface); }
.final-glyph { fill: none; stroke: var(--color-foreground); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.final-text { margin-top: var(--space-6); }
.final-panel :is(.statement, .lead) { color: var(--color-on-cta); }
.final-panel .statement { max-width: 600px; }
.final-panel .headline-accent { color: var(--color-brand-on-dark); }

.final .orb:nth-child(1) { --orb-size: 220px; left: -70px; top: 48px; }
.final .orb:nth-child(2) { --orb-size: 200px; right: -60px; top: 280px; }
.final .orb:nth-child(3) { --orb-size: 160px; left: 26%; top: 520px; }

@media (min-width: 761px) {
  .final-map--phone { display: none; }
  .final-map--wide { display: block; }
  .final .orb:nth-child(1) { --orb-size: 360px; left: 3%; }
  .final .orb:nth-child(2) { --orb-size: 320px; right: 5%; top: 250px; }
  .final .orb:nth-child(3) { --orb-size: 220px; left: 44%; top: 430px; }
}

/* Wide screens move the map right. The widest word never overflows. */
@media (min-width: 961px) {
  .final-panel {
    display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, 560px); column-gap: var(--space-8);
    align-items: center; padding: var(--space-11);
  }
  .final-map { grid-column: 2; grid-row: 1; }
  .final-text { margin-top: 0; }
}

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

/* -------- Footer -------- */
.footer { border-top: 1px solid var(--color-hairline); padding: var(--space-7) 0 var(--space-9); }
.footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.footer a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.footer-link, .footer-langs a { color: var(--color-muted); text-decoration: none; }
.footer-link:hover, .footer-langs a:hover { color: var(--color-foreground); }
.footer-langs { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }

@media (min-width: 761px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* -------- Phone app bar -------- */
/* It waits past the hero. It leaves at the closing panel. */
.sticky-cta {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 6px 6px 6px 18px; border-radius: var(--radius-pill);
  transform: translateY(calc(100% + 24px)); visibility: hidden;
  transition: transform var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.sticky-cta.shown { transform: none; visibility: visible; }
.sticky-cta-name {
  display: flex; align-items: center; gap: 8px;
  font: 700 18px/1 var(--font-body); letter-spacing: -0.03em; text-transform: lowercase;
}
.sticky-cta .btn { height: 44px; padding: 0 18px; }

/* Tiny phones drop the name. The mark stays. */
@media (max-width: 360px) {
  .sticky-cta-name span { display: none; }
}
@media (min-width: 761px) {
  .sticky-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* -------- Link page -------- */
.handoff { display: grid; gap: var(--space-5); justify-items: start; margin-top: var(--space-5); }
.handoff .lead { margin-top: 0; }

/* -------- Motion -------- */
/* Scroll timelines drive each effect. Reading progress hides without them. */
.progress {
  display: none; position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 3px;
  transform-origin: 0 50%; background: var(--color-brand);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Children read their parent's timeline. */
    .perk { view-timeline: --perk; }
    /* Rise by default. Later rules swap it. */
    .head > *, .feature, .toolkit-group, .price-card, .faq-item, .final-panel, .perk svg > * {
      animation: rise both var(--ease-standard); animation-timeline: view(); animation-range: entry 0% entry 200px;
    }
    .perk svg > * { animation-name: draw; animation-timeline: --perk; stroke-dasharray: 100; }
    .progress { display: block; animation: fill linear both; animation-timeline: scroll(root); }
  }
}

@keyframes rise { from { opacity: 0; translate: 0 22px; } }
/* Icon paths run under 63. Offset 101 hides round caps. */
@keyframes draw { from { stroke-dashoffset: 101; } to { stroke-dashoffset: 0; } }
@keyframes fill { from { scale: 0 1; } }