/* talkportal.online. Hand-written, no framework. Tokens first; DESIGN.md explains them. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F6F6F7;
  --surface: #FFFFFF;
  --sunk: #EDEDEF;
  --line: #E1E1E5;
  --ink: #0B0B0D;
  --ink-70: #45454D;
  --ink-55: #63636B;
  --accent: #E5704A;
  --accent-soft: #FBE7DF;
  --on-accent: #111113;
  --btn-bg: #0B0B0D;
  --btn-fg: #FFFFFF;
  --btn-hover: #26262B;
  --tile: linear-gradient(180deg, #1D1D21, #08080A);
  --tile-fg: #F4F4F5;
  --tile-muted: #B9B9C1;
  --shadow: 0 30px 60px -30px rgb(11 11 13 / .35), 0 10px 24px -12px rgb(11 11 13 / .18);
  --focus: #0B0B0D;

  --r-pill: 999px;
  --r-panel: 24px;
  --r-tile: 14px;
  --container: 1280px;
  --gutter: 24px;
  --section: clamp(4.5rem, 8vw, 7rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-h: 68px;
}

/* Dark: the system's choice unless the visitor picked light, or the visitor's own pick (the header switch). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0B0D;
    --surface: #141417;
    --sunk: #1B1B1F;
    --line: #2A2A30;
    --ink: #F4F4F5;
    --ink-70: #BDBDC5;
    --ink-55: #9A9AA3;
    --accent-soft: #2A1911;
    --btn-bg: #E5704A;
    --btn-fg: #111113;
    --btn-hover: #E5704A;
    --tile: linear-gradient(180deg, #202026, #141417);
    --shadow: 0 30px 60px -30px rgb(0 0 0 / .7), 0 10px 24px -12px rgb(0 0 0 / .5);
    --focus: #E5704A;
  }
  :root:not([data-theme="light"]) :is(.frame-phone, .tv-screen) { box-shadow: 0 0 0 1px rgb(255 255 255 / .16), var(--shadow); }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0B0B0D;
    --surface: #141417;
    --sunk: #1B1B1F;
    --line: #2A2A30;
    --ink: #F4F4F5;
    --ink-70: #BDBDC5;
    --ink-55: #9A9AA3;
    --accent-soft: #2A1911;
    --btn-bg: #E5704A;
    --btn-fg: #111113;
    --btn-hover: #E5704A;
    --tile: linear-gradient(180deg, #202026, #141417);
    --shadow: 0 30px 60px -30px rgb(0 0 0 / .7), 0 10px 24px -12px rgb(0 0 0 / .5);
    --focus: #E5704A;
}
:root[data-theme="dark"] :is(.frame-phone, .tv-screen) { box-shadow: 0 0 0 1px rgb(255 255 255 / .16), var(--shadow); }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.field-error, .form-error) { color: #FF8A80; } }
:root[data-theme="dark"] :is(.field-error, .form-error) { color: #FF8A80; }

*, *::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;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 "Geist", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; }
p { margin: 0; }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--ink-70); max-width: 58ch; text-wrap: pretty; }
.fine { margin: 1.25rem auto 0; max-width: 72ch; font-size: .875rem; color: var(--ink-55); text-align: center; text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Buttons: pill, one primary per view. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  font: 560 .9375rem/1 "Geist", system-ui, sans-serif; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), border-color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary { border-width: 2px; }
/* Ember buttons keep their colour on hover and only gain a solid white border: no lift, no shadow (Shaun, 29 Sep: no second orange) */
.btn { transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary:hover { border-color: #FFFFFF; } }
:root[data-theme="dark"] .btn-primary:hover, .band-ink .btn-primary:hover { border-color: #FFFFFF; }
.btn-secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-secondary:hover { background: var(--ink); color: var(--bg); }
.link-quiet { display: inline-flex; align-items: center; gap: .4rem; font-weight: 520; text-decoration: none; color: var(--ink-70); }
.link-quiet:hover { color: var(--ink); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* Header: sticky, blurred, one line on desktop. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
/* at the top of the page the header lets the hero glow run up behind it; it frosts once you scroll */
.site-header:not(.is-stuck) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header:has(.mobile-nav:not([hidden])) { background: var(--bg); }
.header-row { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 9px; }
.brand-word { font-size: 1.1875rem; letter-spacing: -0.03em; font-weight: 400; }
.brand-word b { font-weight: 700; }
.primary-nav { display: flex; gap: 4px; margin-left: auto; }
.primary-nav a { padding: 8px 12px; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; color: var(--ink-70); text-decoration: none; }
.primary-nav a { transition: background-color .2s var(--ease), color .2s var(--ease); }
.primary-nav a:hover { color: #FFFFFF; background: #161619; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.theme-btn { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--ink-70); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); }
.theme-btn:hover { color: var(--ink); background: var(--sunk); }
.theme-btn .icon { width: 20px; height: 20px; }
.theme-btn .icon-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .icon-moon { display: none; } }
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: none; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.mobile-nav { padding: 8px var(--gutter) 24px; display: grid; gap: 4px; border-top: 1px solid var(--line); background: var(--bg); }
.mobile-nav a:not(.btn) { padding: 14px 4px; font-size: 1.125rem; font-weight: 520; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 16px; height: 52px; }
.mobile-nav[hidden] { display: none; }

/* Hero: split, left copy, right real screenshots. */
.hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(1rem, 3vw, 2.5rem); }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-copy { display: grid; gap: 24px; }
.hero-copy .lead { max-width: 40ch; }
.hero-copy .actions { margin-top: 8px; }
.hero-visual { position: relative; padding: 0 112px 92px 0; }
.frame { margin: 0; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.frame-desktop { position: relative; container-type: inline-size; border-radius: var(--r-panel); border: 1px solid var(--line); aspect-ratio: 16 / 10; }
/* Swaelkloof's own "Book a Tasting" buttons, redrawn as "Book Now" when the bubble asks for it. Both sit on the
   photo, so the new pill covers the old one at its full size in the site's own cream and green.
   Boxes measured on site-swael-1440.webp without its delivery bar (hero 541.6,600.9 169x51.6; nav 1073.9,12 154.1x44). */
.mock-cta {
  position: absolute; left: 37.611%; top: 66.764%; width: 11.736%; height: 5.729%;
  opacity: 0; transition: opacity .35s ease;
}
.mock-cta > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #F6F3EA; color: #1F3A2C; font-size: 1.111cqw; font-weight: 600; white-space: nowrap;
}
.mock-cta-nav { left: 74.579%; top: 1.333%; width: 10.699%; height: 4.889%; }
.mock-cta-nav > span { font-size: 1.042cqw; }
.mock-cta.is-on { opacity: 1; }
.mock-cta.is-on > span { animation: cta-pop .5s ease; }
@keyframes cta-pop { 40% { transform: scale(1.08); box-shadow: 0 0 0 .5cqw rgb(246 243 234 / .35); } }
.frame-desktop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame-phone { border-radius: 36px; border: 7px solid #0B0B0D; background: #0B0B0D; aspect-ratio: 390 / 844; }
.frame-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 29px; }
.hero-visual .frame-phone { position: absolute; right: 0; bottom: 0; width: clamp(150px, 14vw, 196px); }
.say {
  position: absolute; left: 0; bottom: 10px; max-width: min(380px, 66%);
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 22px 22px 6px 22px; box-shadow: var(--shadow);
  font-weight: 520; font-size: .9375rem; line-height: 1.35;
}
.say-mic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; }
.say-mic .icon { width: 20px; height: 20px; }
.say-text { min-height: 1.35em; }
.say.is-typing .say-text::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mock-cta, .mock-cta.is-on > span { transition: none; animation: none; } }

/* Sections */
.section { padding: var(--section) 0; }
.section-head { display: grid; gap: 14px; margin: 0 auto clamp(2rem, 4vw, 3.25rem); max-width: 760px; justify-items: center; text-align: center; }
.section-head .lead { max-width: 52ch; }
.pitch .section-head { max-width: 1000px; }
.pitch .section-head .lead { max-width: 78ch; text-wrap: balance; }

/* Demo showcase: the flagship across the top with its phone over the edge, the other two side by side under it. Each is a link to the
   live demo site (Shaun, 29 Sep). */
.demo-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.demo { margin: 0; display: grid; grid-template-rows: auto auto; gap: 14px; color: inherit; text-decoration: none; }
.demo.is-large { grid-column: 1 / -1; }
.demo-img { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.demo-bar { flex: none; border-radius: 17px 17px 0 0; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.demo-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.demo-bar span { margin-inline: auto; padding: 2px 14px; border-radius: 999px; background: var(--surface); font-size: .6875rem; color: var(--ink-55); letter-spacing: 0; }
.demo-img picture { flex: 1; min-height: 0; display: block; overflow: hidden; }
.demo-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: 16 / 10; transition: transform .8s var(--ease); }
.demo.is-large .demo-img { overflow: visible; }
.demo.is-large picture { border-radius: 0; }
.demo.is-large .demo-img img { aspect-ratio: 1440 / 720; }
.demo-phone { position: absolute; right: 28px; bottom: 28px; width: clamp(130px, 13vw, 180px); aspect-ratio: 390 / 844; border-radius: 24px; border: 5px solid #0B0B0D; background: #0B0B0D; overflow: hidden; box-shadow: var(--shadow); }
.demo-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: auto; border-radius: 19px; }
.demo:hover picture img { transform: scale(1.03); }
.demo:focus-visible { outline: none; }
.demo:focus-visible .demo-img { outline: 2px solid var(--focus); outline-offset: 4px; }
.demo-dots { display: none; }
.pitch .fine { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* The pitch: three points over the example builds. */
.points { list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.points li { border-radius: var(--r-panel); padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; }
.points p { color: var(--ink-70); font-size: 1rem; max-width: 34ch; }

/* How a sale works: a rail with four stops. */

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.flow::before { content: ""; position: absolute; top: 32px; left: calc((100% - 84px) / 8); right: calc((100% - 84px) / 8); height: 1.5px; background: var(--line); }
.flow li { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; }
.flow-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #E5704A; border: 0; color: #111113; margin-bottom: 10px; position: relative; box-shadow: 0 0 0 8px var(--surface); }
.flow li:last-child .flow-icon { background: #111113; color: #E5704A; }
.flow-icon .icon { width: 28px; height: 28px; }
.flow p { color: var(--ink-70); font-size: 1rem; max-width: 30ch; }

/* Phone and big screen: two unequal panels. */
.screens-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; }
.panel { border-radius: var(--r-panel); padding: clamp(24px, 3.5vw, 40px); display: grid; gap: 28px; align-content: start; overflow: hidden; text-align: center; }
.panel-copy { display: grid; gap: 10px; }
.panel-copy h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -0.03em; }
.panel-copy p { color: var(--ink-70); max-width: 46ch; margin-inline: auto; }
.panel-phone { background: #E5704A; border: 1px solid #E5704A; color: #111113; }
.panel-phone .panel-copy p { color: #2B1A13; }
.panel-phone .frame-phone-static { width: min(240px, 70%); justify-self: center; margin-bottom: calc(-1 * clamp(24px, 3.5vw, 40px) - 80px); }
.panel-tv { background: var(--surface); border: 1px solid var(--line); }
.tv { margin: 0; display: grid; justify-items: center; }
.tv-screen { width: 100%; border: 10px solid #111114; border-radius: 18px; overflow: hidden; background: #111114; box-shadow: var(--shadow); }
.tv-screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; }
.tv-stand { width: 28%; height: 10px; margin-top: 10px; border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ticks li { display: grid; gap: 8px; justify-items: center; text-align: center; font-size: .9375rem; color: var(--ink-70); line-height: 1.45; }
.ticks .icon { width: 24px; height: 24px; color: var(--ink); }

/* Built in: bento, five cells, three grounds. */
.built { background: var(--surface); border-block: 1px solid var(--line); }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell { grid-column: span 2; border-radius: var(--r-panel); padding: 28px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.cell p { color: var(--ink-70); font-size: 1rem; }
.cell-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); margin-bottom: 6px; }
.cell-icon .icon { width: 22px; height: 22px; }
.cell-stat { grid-column: span 3; grid-row: span 2; background: var(--accent); border-color: var(--accent); color: var(--on-accent); align-content: space-between; gap: 32px; }
.cell-stat p { color: #26262B; font-size: 1.0625rem; max-width: 42ch; }
.stat { display: grid; gap: 6px; }
.cell-stat .stat { color: #0B0B0D; }
.stat-num { font-size: clamp(5rem, 11vw, 9rem); font-weight: 700; line-height: .85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 1.125rem; font-weight: 560; color: var(--on-accent); letter-spacing: -0.01em; }
.cell-stat ~ .cell { grid-column: span 3; }
.cell-ink { background: var(--tile); border-color: #26262B; color: var(--tile-fg); }
.cell-ink p { color: var(--tile-muted); }
.cell-ink .cell-icon { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); color: var(--accent); }

/* Partners */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.role { border-radius: var(--r-panel); padding: clamp(24px, 3.5vw, 40px); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.role > p { color: var(--ink-70); max-width: 44ch; }
.role-strong { background: var(--tile); border-color: #26262B; color: var(--tile-fg); }
.role-strong > p { color: var(--tile-muted); }
.role-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sunk); margin-bottom: 4px; }
.role-strong .role-icon { background: var(--accent); color: var(--on-accent); }
.role-icon .icon { width: 24px; height: 24px; }
.shares { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shares div { border-radius: var(--r-tile); padding: 16px 18px; background: var(--bg); display: grid; gap: 2px; }
.role-strong .shares div { background: rgb(255 255 255 / .06); }
.shares dt { font-size: .875rem; color: var(--ink-55); order: 2; }
.role-strong .shares dt { color: var(--tile-muted); }
.shares dd { margin: 0; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 680; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; order: 1; }
.role-strong .shares dd { color: var(--accent); }
.role-note { font-size: .9375rem; }
.role-facts { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.role-facts li { display: flex; align-items: center; gap: 10px; color: var(--ink-70); font-size: 1rem; }
.role-facts .icon { color: var(--ink); }

/* Pricing */
.switch { display: flex; width: fit-content; margin-inline: auto; padding: 4px; border-radius: var(--r-pill); background: var(--sunk); border: 1px solid var(--line); margin-bottom: 24px; }
.switch button { height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-70); font: 560 .9375rem/1 "Geist", system-ui, sans-serif; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.switch button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(11 11 13 / .12); }
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.price { border-radius: var(--r-tile); padding: 24px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.price h3 { font-size: 1rem; font-weight: 560; color: var(--ink-70); letter-spacing: -0.01em; }
.price .amount { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 680; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price .amount small { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--ink-55); margin-left: 2px; }
.price p:last-child { color: var(--ink-70); font-size: .9375rem; }
.price-pick { border: 1.5px solid var(--ink); }
.includes { margin: 20px auto 0; display: flex; gap: 12px; align-items: flex-start; color: var(--ink-70); max-width: 80ch; font-size: 1rem; }
.includes .icon { margin-top: 3px; color: var(--ink); }
.price-panel[hidden] { display: none; }
.price-panel.is-in .price { animation: rise .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 50ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* FAQ */
.faq { background: var(--surface); border-block: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-copy { display: grid; gap: 18px; align-content: start; justify-items: start; position: sticky; top: calc(var(--header-h) + 32px); }
.faq-copy .lead { max-width: 36ch; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-of-type { border-top: 1px solid var(--line); }
/* Open All / Close All, top right above the first divider (as on Swaelkloof's FAQ). Shown only with the script. */
.faq-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.faq-all { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 560 .875rem/1 "Geist", system-ui, sans-serif; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.faq-all:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.faq-all .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.faq-all[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq-all[hidden] { display: none; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 1.125rem; font-weight: 560; letter-spacing: -0.015em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .2s var(--ease); }
.faq-list details[open] .faq-icon { transform: rotate(45deg); }
.faq-list details p { padding: 0 48px 22px 0; color: var(--ink-70); max-width: 64ch; }

/* Join: the partner application, copy on the left, the form card on the right. */
.join { padding: var(--section) 0; }
.join-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.join-copy { display: grid; gap: 18px; align-content: start; position: sticky; top: calc(var(--header-h) + 32px); }
.join-copy .lead { max-width: 44ch; }
.join-mark { border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 4px; }
.next-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 14px; }
.next-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--ink-70); font-size: 1rem; line-height: 1.5; }
.next-steps span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; }
.apply-card { position: relative; border-radius: var(--r-panel); padding: clamp(24px, 3.5vw, 40px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.apply { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: .9375rem; font-weight: 560; letter-spacing: -0.01em; }
.field label small { font-weight: 450; color: var(--ink-55); font-size: .8125rem; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: 400 1rem/1.4 "Geist", system-ui, sans-serif; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-55) 50%), linear-gradient(135deg, var(--ink-55) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input::placeholder { color: var(--ink-55); }
.field :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.field [aria-invalid="true"] { border-color: #D93025; }
.field-error, .form-error { font-size: .875rem; color: #C5221F; min-height: 0; }
.field-error:empty, .form-error:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.apply-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.apply-foot .btn .icon { width: 18px; height: 18px; }
.apply [data-submit][aria-busy="true"] { opacity: .7; pointer-events: none; }
.consent { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-55); }
.consent .icon { width: 18px; height: 18px; }
.apply-done { display: none; gap: 12px; justify-items: start; padding: 12px 0; }
.apply-done:focus { outline: none; }
.apply-done h3 { font-size: 1.5rem; }
.apply-done p { color: var(--ink-70); max-width: 44ch; }
.done-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.done-icon .icon { width: 26px; height: 26px; }
.apply-card.is-sent .apply, .apply-card:has(.apply-done:target) .apply { display: none; }
.apply-card.is-sent .apply-done, .apply-done:target { display: grid; animation: rise .45s var(--ease) both; }

/* Google reviews: shown only when real ones exist (site.js hides the section otherwise). Three up, the text clamped
   to six lines, Google named as the source. Stars are graphics on Ember, never Ember text. */
.reviews[hidden], .partners[hidden] { display: none; }
.reviews-score { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; color: var(--ink-70); }
.reviews-score strong { font-size: 1.5rem; font-weight: 680; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stars { position: relative; display: inline-flex; flex: none; width: fit-content; justify-self: start; }
.stars > span { display: inline-flex; gap: 2px; }
.stars-base { color: color-mix(in srgb, var(--ink) 16%, transparent); }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--accent); }
.stars svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.reviews-score .stars svg { width: 22px; height: 22px; }
.review-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { border-radius: var(--r-panel); padding: 24px; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.review-text { color: var(--ink-70); font-size: 1rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.review-by { display: flex; align-items: center; gap: 12px; min-width: 0; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--sunk); border: 1px solid var(--line); font-weight: 600; }
.review-by strong { display: block; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.review-by time { display: block; font-size: .875rem; color: var(--ink-55); }
.reviews-foot { margin-top: clamp(1.5rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.reviews-foot .btn[hidden] { display: none; }
.reviews-foot .btn .icon { width: 18px; height: 18px; }
.reviews-source { font-size: .875rem; color: var(--ink-55); }

/* Cookie choice: a calm card over the bottom of the page (fixed, so nothing shifts). Accept and Decline weigh the same.
   Back to top steps aside while it shows. */
.link-btn { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.link-btn[hidden], [data-cookie-slot][hidden] { display: none; }
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
  width: min(760px, calc(100% - 2 * var(--gutter))); margin-inline: auto;
  display: flex; align-items: center; gap: 14px 24px; padding: 16px 16px 16px 24px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow);
  animation: rise .45s var(--ease) both;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { font-size: .9375rem; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
.cookie-bar a { color: var(--ink); }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.cookie-actions .btn { min-width: 108px; }
.cookie-open .to-top { opacity: 0; visibility: hidden; }

/* Plain pages: 404 and privacy. */
.center-band { min-height: 100dvh; display: grid; align-items: center; padding: var(--section) 0; }
.center-band .container { display: grid; justify-items: center; text-align: center; gap: 18px; }
.center-band .lead { max-width: 52ch; }
.page-header .header-row { justify-content: space-between; }
.page-header .header-actions { margin-left: auto; }
.prose { max-width: 72ch; padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); }
.prose h1 { margin-bottom: 20px; }
.prose h2 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); margin: 44px 0 12px; }
.prose p, .prose li { color: var(--ink-70); }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 1.25rem; display: grid; gap: 8px; margin: 0; }
.prose a { color: var(--ink); }
.prose .updated { font-size: .9375rem; color: var(--ink-55); }
.prose h3 { font-size: 1.0625rem; margin: 24px 0 8px; }

/* Legal pages (terms, refunds, privacy) and the pricing page: a centred band under the header, the three pages one
   tap apart, then a sticky contents list beside a reading column. Phones and tablets drop the contents list. */
.legal-hero { margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2.25rem, 4.5vw, 3.75rem); text-align: center; }
.legal-hero .container { display: grid; gap: 18px; justify-items: center; }
.legal-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
.legal-hero .lead { max-width: 56ch; }
.legal-hero .updated { font-size: .9375rem; color: var(--ink-55); }
.legal-tabs { display: flex; padding: 4px; margin-top: 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.legal-tabs a { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: var(--r-pill); color: var(--ink-70); font-weight: 560; font-size: .9375rem; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.legal-tabs a:hover { color: var(--ink); }
.legal-tabs a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); }
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); }
.legal-toc { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 2px; }
.legal-toc h2 { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--ink-55); margin-bottom: 10px; }
.legal-toc a { padding: 7px 12px; margin-left: -12px; border-radius: 10px; color: var(--ink-70); font-size: .9375rem; line-height: 1.35; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.legal-toc a:hover { color: var(--ink); background: var(--sunk); }
.legal-body { max-width: 72ch; }
.legal-brief { border-radius: var(--r-panel); padding: clamp(24px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.legal-brief h2 { font-size: 1.125rem; letter-spacing: -0.015em; margin-bottom: 18px; }
.legal-brief ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.legal-brief li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.legal-brief .icon { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 3px; border-radius: 50%; background: #E5704A; color: #111113; }
.legal-body section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal-body .legal-brief + section { border-top: 0; padding-top: 8px; }
.legal-body section > h2 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); margin-bottom: 14px; }
.legal-body h3 { font-size: 1.0625rem; letter-spacing: -0.01em; margin: 26px 0 8px; }
.legal-body section :is(p, li) { color: var(--ink-70); }
.legal-body section :is(p, ul) + :is(p, ul) { margin-top: 12px; }
.legal-body section ul { padding-left: 1.25rem; display: grid; gap: 8px; margin: 0; }
.legal-body section a { color: var(--ink); }
.legal-contact { margin-top: 56px; border-radius: var(--r-panel); padding: clamp(24px, 3vw, 32px); background: var(--sunk); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.legal-contact h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.legal-contact p { color: var(--ink-70); font-size: .9375rem; }
@media (max-width: 1023px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
  .legal-tabs a { padding: 0 16px; height: 44px; }
  .legal-contact { flex-direction: column; text-align: center; }
}
.prose ul + p, .prose ul + ul, .prose .prices + ul { margin-top: 16px; }
/* Pricing page: the price cards run the full container, the words keep the reading width */
.pricing { max-width: var(--container); }
.pricing > :not(.prices) { max-width: 72ch; }
.pricing .prices { margin-top: 20px; }
.price-rows { margin: 16px 0 0; border-top: 1px solid var(--line); }
.price-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.price-rows dt { color: var(--ink-70); }
.price-rows dd { margin: 0; font-weight: 620; font-variant-numeric: tabular-nums; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 28px; background: var(--sunk); }
.footer-grid { display: grid; grid-template-columns: 5fr 2fr 2fr 3fr; gap: 32px; }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand p { color: var(--ink-70); max-width: 36ch; font-size: .9375rem; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h2 { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--ink-55); margin-bottom: 4px; }
.footer-col :is(a, .link-btn) { text-decoration: none; color: var(--ink-70); font-size: .9375rem; justify-self: start; }
.footer-col :is(a, .link-btn):hover { color: var(--ink); text-decoration: underline; }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-55); }

/* ==========================================================================
   Depth (Shaun, 29 Sep: "it lacks depth"). An Ember glow and a fading grid behind the hero, a numbers strip under
   it, the voice band, a drawn flow rail, and cards that lift. All decoration, all behind content, all theme-aware.
   ========================================================================== */
.hero { position: relative; isolation: isolate; }
.hero-bg { position: absolute; inset: -68px 0 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 62% 38%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 62% 38%, #000 10%, transparent 72%);
}
.hero-bg::after {
  content: ""; position: absolute; width: min(1700px, 125vw); height: 1250px; right: -22vw; top: -150px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 48%, transparent), color-mix(in srgb, var(--accent) 22%, transparent) 45%, color-mix(in srgb, var(--accent) 6%, transparent) 75%, transparent);
  filter: blur(24px);
}
.hero-visual .frame-desktop { transform: perspective(1800px) rotateY(-4deg) rotateX(2deg); transform-origin: left center; }
.hero-visual .frame-phone { box-shadow: 0 40px 70px -30px rgb(11 11 13 / .55), 0 12px 24px -10px rgb(11 11 13 / .3); }

/* the strip lines: near-white in dark mode so they read over the glow (Shaun, 29 Sep); a clear light grey in light mode */
.proof { --proof-line: #D9D9DE; list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--proof-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .proof { --proof-line: rgb(255 255 255 / .2); } }
:root[data-theme="dark"] .proof { --proof-line: rgb(255 255 255 / .2); }
.proof li { display: grid; gap: 4px; align-content: start; padding: 28px 24px; text-align: center; justify-items: center; }
.proof li + li { border-left: 1px solid var(--proof-line); }
.proof strong { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 680; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.proof li > span { color: var(--ink-55); font-size: .9375rem; line-height: 1.45; max-width: 24ch; }

/* the portal login's voice wave, in Ember, over the drifting requests (Shaun, 29 Sep) */
.wave { display: flex; justify-content: center; align-items: center; gap: 5px; height: 48px; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); }
.wave i { display: block; width: 4px; height: 30%; border-radius: 3px; background: #E5704A; animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: -.3s; } .wave i:nth-child(3n) { animation-delay: -.6s; } .wave i:nth-child(5n) { animation-delay: -.9s; }
@keyframes wave { 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; } .wave i:nth-child(2n) { height: 70%; } .wave i:nth-child(3n) { height: 100%; } .wave i:nth-child(5n) { height: 50%; } }
.say-rows { display: grid; gap: 12px; }
.say-row { display: flex; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.say-row ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex: none; animation: drift 60s linear infinite; }
.say-row.is-rev ul { animation-direction: reverse; animation-duration: 70s; }
.say-row li { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 8px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); white-space: nowrap; font-weight: 500; font-size: 1rem; color: var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.say-row li .icon { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.say-rows:hover .say-row ul { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-100% - 12px)); } }
@media (prefers-reduced-motion: reduce) {
  .say-row { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .say-row ul { flex-wrap: wrap; justify-content: center; }
  .say-row ul[aria-hidden] { display: none; }
}

/* The flow rail draws itself in Ember when the steps come in. */
.flow::after { content: ""; position: absolute; top: 32px; left: calc((100% - 84px) / 8); right: calc((100% - 84px) / 8); height: 1.5px; background: linear-gradient(90deg, var(--ink), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.js .flow:has(li.is-in)::after, html:not(.js) .flow::after { transform: scaleX(1); }

/* Cards lift a little under the pointer. */
@media (hover: hover) {
  :is(.points li, .cell, .role, .price) { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
  :is(.points li, .cell:not(.cell-stat), .role, .price):hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}
.points .cell-icon { background: #E5704A; border-color: #E5704A; color: #111113; }
.cell-stat { position: relative; overflow: hidden; }
.role-strong { position: relative; overflow: hidden; }
.role-strong > * { position: relative; }
.join { position: relative; isolation: isolate; overflow: hidden; }
/* the application wears the hero's ground: its fine line grid and its Ember glow, here behind the form (Shaun, 29 Sep) */
.join::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 62% 45%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 62% 45%, #000 10%, transparent 72%);
}
.join::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(1700px, 125vw); height: 1250px; right: -22vw; top: -150px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 48%, transparent), color-mix(in srgb, var(--accent) 22%, transparent) 45%, color-mix(in srgb, var(--accent) 6%, transparent) 75%, transparent);
  filter: blur(24px);
}
@media (max-width: 1023px) { .join::after { width: 150vw; height: 900px; right: -60vw; top: -20px; } }

/* Section rhythm (Shaun, 29 Sep: "too flat", two near-identical greys). Four grounds, never the same twice in a row:
   hero canvas, warm wash (pitch, partners), ink band (voice, built in), white (steps, FAQ), cool grey (phone and TV).
   An ink band re-scopes the colour tokens, so every card, icon and line inside it turns dark by itself. */
.band-ember {
  --bg: #E5704A; --surface: #FFFFFF; --sunk: #F1F1F3; --line: rgb(17 17 19 / .14); --ink: #111113; --ink-70: #2B1A13; --ink-55: #3D261B;
  --accent-soft: #111113; --btn-bg: #111113; --btn-fg: #FFFFFF; --btn-hover: #26262B; --focus: #111113;
  --shadow: 0 30px 60px -30px rgb(60 20 5 / .55), 0 10px 24px -12px rgb(60 20 5 / .3);
  position: relative; isolation: isolate; color-scheme: light; color: var(--ink); background: #E5704A; border-block: 0;
}
.band-ember .lead, .band-ember .fine { color: var(--ink-70); }
.band-ember .role:not(.role-strong) { color: #111113; border-color: transparent; }
.band-ember .role:not(.role-strong) { --ink-70: #45454D; --ink-55: #63636B; }
/* pitch: the hook in two tones, black cards with big Ember icons (Shaun, 29 Sep) */
.pitch h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
.h-pop { display: block; color: #FFFFFF; }
.pitch .section-head .lead { max-width: 52ch; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: #1E120D; }
.band-ember .points li { background: #161619; border-color: #161619; color: #F4F4F5; --ink-70: #BDBDC5; padding: 36px 28px 32px; gap: 10px; box-shadow: 0 30px 60px -30px rgb(60 20 5 / .6); }
.band-ember .points .cell-icon { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 10px; }
.band-ember .points .cell-icon .icon { width: 28px; height: 28px; }
.band-ember .points h3 { font-size: 1.3125rem; }
.band-ember .points p { max-width: 28ch; }
.band-ember .role:not(.role-strong) .shares div { background: #F6F6F7; }
/* Hands-on on Ember: flat black-grey like the pitch cards, no glow, dark share boxes (Shaun, 29 Sep) */
.band-ember .role-strong { background: #161619; border-color: #161619; }
.band-ember .role-strong .shares div { background: rgb(255 255 255 / .07); }
.band-ember .role-strong .shares dt { color: #B9B9C1; }
.band-ember .role-facts li, .band-ember .role-facts .icon { color: #111113; }
.band-ember .demo-img { border-color: rgb(17 17 19 / .18); }
/* the four steps on Ember: black-grey stops with Ember icons, the last one white, a dark rail (Shaun, 29 Sep) */
.band-ember .flow::before { background: rgb(17 17 19 / .22); }
.band-ember .flow::after { background: #161619; }
.band-ember .flow-icon { background: #161619; color: #E5704A; box-shadow: 0 0 0 8px #E5704A; }
.band-ember .flow li:last-child .flow-icon { background: #FFFFFF; color: #111113; }
.band-ember .flow p { color: #2B1A13; }
.band-sunk { position: relative; isolation: isolate; background: #ECECEF; border-block: 1px solid var(--line); }
.band-sunk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%); }
.band-ink {
  --bg: #0B0B0D; --surface: #16161A; --sunk: #1D1D22; --line: #2C2C33; --ink: #F4F4F5; --ink-70: #BDBDC5; --ink-55: #9A9AA3;
  --accent-soft: #2A1911; --btn-bg: #E5704A; --btn-fg: #111113; --btn-hover: #E5704A; --focus: #E5704A;
  --tile: linear-gradient(180deg, #24242B, #16161A); --shadow: 0 30px 60px -30px rgb(0 0 0 / .8), 0 10px 24px -12px rgb(0 0 0 / .6);
  position: relative; isolation: isolate; overflow: hidden; color-scheme: dark; color: var(--ink);
  background: radial-gradient(ellipse 55% 60% at 50% 0%, rgb(229 112 74 / .26), transparent 70%), #0B0B0D;
  border-block: 1px solid #1F1F24;
}
.band-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%); }
.band-ink .lead { color: var(--ink-70); }
/* Built In on ink: four matching black-grey cards with Ember icons beside the Ember 90+ tile (Shaun, 29 Sep) */
.band-ink .cell:not(.cell-stat) { background: #161619; border-color: #26262C; color: var(--ink); }
.band-ink .cell:not(.cell-stat) p { color: var(--ink-70); }
.band-ink .cell-stat { box-shadow: none; }
.band-ink .cell-icon { background: #232328; border-color: #2E2E35; color: #E5704A; }
.built.band-ink, .faq { border-block-color: transparent; }
.faq { background: #FFFFFF; }
.join { background: var(--bg); }
/* dark theme: the page is already ink, so the bands step apart by lightness and warmth instead */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-sunk { background: radial-gradient(ellipse 60% 55% at 50% 0%, rgb(229 112 74 / .14), transparent 70%), #0B0B0D; }
  :root:not([data-theme="light"]) .band-ink { background: radial-gradient(ellipse 55% 60% at 50% 0%, rgb(229 112 74 / .26), transparent 70%), #0B0B0D; border-color: #26262C; }
  :root:not([data-theme="light"]) .faq { background: #0B0B0D; }
}
:root[data-theme="dark"] .band-sunk { background: radial-gradient(ellipse 60% 55% at 50% 0%, rgb(229 112 74 / .14), transparent 70%), #0B0B0D; }
:root[data-theme="dark"] .band-ink { background: radial-gradient(ellipse 55% 60% at 50% 0%, rgb(229 112 74 / .26), transparent 70%), #0B0B0D; border-color: #26262C; }
:root[data-theme="dark"] .faq { background: #0B0B0D; }

/* Example build cards (Shaun, 29 Sep; one light outline round picture and footer on desktop): the screenshot and a black-grey footer read as one card. The footer carries the
   business's own logo, its kind, three chips for what the build includes (true of each demo), and an Ember button. */
.demo { gap: 0; border-radius: 18px; box-shadow: 0 34px 70px -34px rgb(60 20 5 / .55), 0 12px 26px -14px rgb(60 20 5 / .3); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.band-ember .demo .demo-img { border-radius: 18px 18px 0 0; border-color: rgb(255 255 255 / .55); border-bottom: 0; box-shadow: none; }
.demo-cap {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "id tags open"; align-items: center; gap: 14px 20px;
  padding: 18px 20px; border: 1px solid rgb(255 255 255 / .55); border-top: 0; background: #161619; color: #F4F4F5; border-radius: 0 0 18px 18px;
}
.demo:not(.is-large) .demo-cap { grid-template-columns: 1fr auto; grid-template-areas: "id open" "tags tags"; }
.demo-id { grid-area: id; display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-logo { width: 44px; height: 44px; border-radius: 12px; flex: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.demo-name { display: grid; gap: 0; min-width: 0; line-height: 1.2; }
.demo-name strong { font-weight: 620; font-size: 1.0625rem; letter-spacing: -0.015em; white-space: nowrap; }
.demo-kind { color: #9A9AA3; font-size: .875rem; }
.demo-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 8px; }
.demo.is-large .demo-tags { justify-content: center; }
.demo-tags span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); color: #D6D6DC; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.demo-tags .icon { width: 15px; height: 15px; color: #E5704A; }
.demo-open { grid-area: open; border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px; background: #E5704A; color: #111113; font-size: .875rem; font-weight: 600; white-space: nowrap; transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.demo-open .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .demo:hover { transform: translateY(-6px); box-shadow: 0 48px 80px -36px rgb(60 20 5 / .65), 0 14px 30px -14px rgb(60 20 5 / .35); }
  .demo:hover .demo-open { background: #E5704A; border-color: #FFFFFF; }
  .demo:hover .demo-open .icon { transform: translate(2px, -2px); }
}
.demo:focus-visible .demo-open { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 1023px) {
  /* phones and tablets: the phone screenshot keeps its frame; the footer becomes a card under it, and the buttons
     sit at the foot of each card so the row lines up whatever the chips wrap to */
  .demo, .demo.is-large { display: flex; flex-direction: column; gap: 12px; box-shadow: none; border-radius: 0; }
  .band-ember .demo .demo-img { border-radius: 32px; border: 6px solid #0B0B0D; box-shadow: var(--shadow); }
  .demo-cap, .demo:not(.is-large) .demo-cap { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; border-radius: 20px; padding: 18px 14px; }
  .demo-id { flex-direction: column; gap: 8px; }
  .demo-tags, .demo.is-large .demo-tags { justify-content: center; }
  .demo-open { margin-top: auto; width: 100%; min-height: 44px; }
  .faq-tools { justify-content: center; }
  /* the card rises over the bottom of the phone like a sheet, so one slide fits a phone screen (Shaun, 29 Sep) */
  .demo, .demo.is-large { gap: 0; }
  .demo-cap, .demo:not(.is-large) .demo-cap { position: relative; z-index: 1; margin: -162px 0 0; gap: 10px; padding: 14px 12px 12px; border-radius: 24px; box-shadow: 0 -18px 36px -18px rgb(0 0 0 / .55), 0 20px 40px -24px rgb(60 20 5 / .6); border: 2px solid #FFFFFF; }
  /* identical cards (Shaun, 29 Sep): the logo row fills the width like Swaelkloof's, every chip the same width */
  .demo-id { flex-direction: row; gap: 10px; align-self: stretch; justify-content: flex-start; text-align: left; padding-left: 2px; }
  .demo-logo { width: 36px; height: 36px; border-radius: 10px; }
  .demo-name strong { font-size: .875rem; }
  .demo, .demo.is-large { min-width: 0; }
  .demo-kind { font-size: .8125rem; }
  .demo-tags, .demo.is-large .demo-tags { gap: 6px; flex-direction: column; align-items: stretch; align-self: stretch; }
  .demo-tags span { width: auto; justify-content: flex-start; height: 28px; padding: 0 12px; font-size: .75rem; gap: 7px; }
  .demo-tags .icon { width: 13px; height: 13px; }
  .demo .demo-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, transparent, rgb(11 11 13 / .55) 45%, rgb(11 11 13 / .92)); pointer-events: none; }
}

/* Reveal: once, transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Phone and tablet standard (Sage docs/WEBSITE_PLAYBOOK.md section 2, the Thblet values; the standard for every
   site since 22 Sep 2026). Tablet follows phone: one band up to 1023px, desktop from 1024. Headings and short
   intros centre, everything you read stays left, the hero stacks by importance, 44px taps, 24px / 32px gutters.
   ========================================================================== */
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
@media (max-width: 1023px) {
  :root { --gutter: 32px; --section: clamp(2.75rem, 7vw, 3.5rem); }

  /* header: the menu button takes over from the nav */
  .primary-nav, .header-actions > .link-quiet, .header-actions > .btn { display: none; }
  .header-actions { gap: 10px; margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .theme-btn { width: 44px; height: 44px; }

  /* type steps down: H1 three lines not five */
  h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.06; letter-spacing: -0.035em; }
  /* section heads read as heads on phones (Shaun, 29 Sep: they were getting lost): about 28px at 390, 36px on tablets */
  h2, .pitch h2 { font-size: clamp(1.75rem, 7.2vw, 2.25rem); line-height: 1.1; }

  /* one column for every split; card grids two up until 767 */
  .hero-grid, .screens-grid, .roles, .faq-grid, .join-grid, .demo-grid, .points { grid-template-columns: 1fr; }
  .demo.is-large { grid-row: auto; }
  .demo.is-large .demo-img { height: auto; }
  .join-copy, .faq-copy { position: static; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .flow::before, .flow::after { display: none; }
  .prices, .bento { grid-template-columns: 1fr 1fr; }
  .cell, .cell-stat ~ .cell { grid-column: span 1; }
  .cell-stat { grid-column: 1 / -1; grid-row: auto; }
  .ticks { grid-template-columns: 1fr; }
  .ticks li { gap: 6px; }
  .panel-phone .frame-phone-static { width: min(220px, 64%); }

  /* hero stacks by importance: heading, visual, line, buttons. Top padding equals bottom. */
  .hero { padding-block: 1.5rem var(--section); }
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; text-align: center; }
  .hero-visual { order: 2; width: 100%; max-width: 560px; margin-inline: auto; padding: 40px 64px 88px 0; }
  .hero-copy .lead { order: 3; max-width: 46ch; margin: 1.25rem auto 0; text-align: center; }
  .hero-copy .actions { order: 4; margin-top: 1.5rem; justify-content: center; }
  .say { max-width: 74%; font-size: .875rem; }

  /* alignment: centre headings and short intros... */
  .section-head, .faq-copy, .join-copy > h2, .join-copy > .lead { text-align: center; }
  .section-head { max-width: none; justify-items: center; }
  .section-head .lead, .join-copy .lead { max-width: none; margin-inline: auto; }
  .faq-copy .lead { max-width: 46ch; }
  .join-copy, .faq-copy { justify-items: center; }
  .switch { display: flex; width: fit-content; margin-inline: auto; }
  .switch button { height: 44px; }
  /* ...and keep everything you read left, whatever its parent */
  .points, .bento, .prices, .includes, .faq-list, .next-steps, .apply-card, .review-grid { text-align: left; }
  .next-steps { justify-self: stretch; }
  /* short icon blocks (the four steps) centre on phones and tablets: icon, heading, two or three lines (Shaun, 23 Sep) */
  .flow { text-align: center; }
  .flow li { justify-items: center; }
  .flow p { max-width: 34ch; }
  /* partner role cards centred on phones and tablets, share boxes included (Shaun, 23 Sep) */
  .role-icon { justify-self: center; }
  .role { text-align: center; }
  .role > p { margin-inline: auto; }
  /* numbers level across both boxes: content from the top, labels tighter (Shaun, 29 Sep) */
  .shares div { align-content: start; justify-items: center; }
  .shares dt { font-size: .8125rem; line-height: 1.35; }
  /* 'Two ways for an owner to fall for it' panels: heading and copy centred on phones and tablets (Shaun, 23 Sep) */
  .panel { text-align: center; }
  .panel-copy p { margin-inline: auto; }
  /* the same for the other short icon cards: the three pitch points and the Built In tiles (Shaun, 23 Sep) */
  .points li, .bento .cell { justify-items: center; text-align: center; }
  .points { grid-template-columns: repeat(3, 1fr); }
  .points p, .bento .cell:not(.cell-stat) p { max-width: 34ch; }
  /* Google reviews: score and link centred with the heading, the cards two up with their text left (it runs long) */
  .reviews-score { justify-content: center; }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .reviews-foot { flex-direction: column; text-align: center; }
  /* the cookie bar centres its line over two equal buttons */
  .cookie-bar { flex-direction: column; text-align: center; padding: 20px; }
  .cookie-actions { justify-content: center; width: 100%; }
  .footer-base .link-btn, .fine .link-btn { min-height: 44px; }
  /* small print under a centred block centres with it */
  .fine { text-align: center; max-width: 60ch; margin-inline: auto; text-wrap: pretty; }

  /* example builds: each one is its own phone screenshot in a phone frame, one row, captions centred and alike */
  .demo-grid { display: flex; justify-content: center; gap: 20px; }
  .demo, .demo.is-large { flex: 0 0 min(220px, calc((100% - 40px) / 3)); grid-template-rows: auto auto; align-content: start; }
  .demo .demo-img, .demo.is-large .demo-img { height: auto; aspect-ratio: 390 / 844; border-radius: 32px; border: 6px solid #0B0B0D; background: #0B0B0D; }
  .demo .demo-img img, .demo.is-large .demo-img img { height: 100%; aspect-ratio: auto; object-position: top; border-radius: 26px; }
  .demo:hover .demo-img img { transform: none; }
  /* in dark the black bezel needs the same hairline as the other phone frames */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo .demo-img { box-shadow: 0 0 0 1px rgb(255 255 255 / .16), var(--shadow); } }
  :root[data-theme="dark"] .demo .demo-img { box-shadow: 0 0 0 1px rgb(255 255 255 / .16), var(--shadow); }

  /* touch: every link and control at least 44px tall */
  .link-quiet, .footer-col :is(a, .link-btn), .consent a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col { gap: 0; }
  .brand { min-height: 44px; }

  /* footer: brand block centred, link columns two up */
  .site-footer { padding-bottom: 20px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
  .footer-col :is(a, .link-btn) { font-size: .875rem; text-align: left; }
  .footer-brand { grid-column: 1 / -1; justify-items: center; text-align: center; margin-bottom: 16px; }
  .footer-brand { justify-self: stretch; }
  .footer-brand p { max-width: none; width: 100%; text-wrap: pretty; }
  .footer-base { text-align: center; margin-top: 28px; }
  .footer-col :is(a, .link-btn) { min-height: 34px; }
}
@media (max-width: 1023px) {
  .hero-visual .frame-desktop { transform: none; }
  .hero-bg::after { width: 150vw; height: 900px; right: -60vw; top: -20px; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof li:nth-child(3) { border-left: 0; }
  .proof li:nth-child(n+3) { border-top: 1px solid var(--proof-line); }
  .demo-bar, .demo-phone { display: none; }
  .demo-img { border-radius: 32px; }
  .demo:hover .demo-img { transform: none; }
  .say-row li { height: 44px; font-size: .875rem; }
}
@media (max-width: 767px) {
  .flow, .prices, .bento, .field-row, .points, .review-grid { grid-template-columns: 1fr; }
  /* phones swipe the example builds: one centred, the next peeking, dots under them */
  .demo-grid {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px calc((100vw - min(62vw, 240px)) / 2) 44px; scrollbar-width: none;
  }
  .demo-grid::-webkit-scrollbar { display: none; }
  .demo, .demo.is-large { flex-basis: min(62vw, 240px); scroll-snap-align: center; }
  .demo-dots:not([hidden]) { display: flex; justify-content: center; margin-top: -20px; }
  .demo-dots button { width: 28px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .demo-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width .25s var(--ease), background-color .25s var(--ease); }
  .demo-dots button[aria-current="true"]::before { width: 22px; background: var(--ink); }
  .faq-list details p { padding-right: 0; }
  .consent { align-items: flex-start; }
  .consent .icon { margin-top: 1px; }
}
@media (max-width: 639px) {
  :root { --gutter: 24px; }
  .hero-visual { padding-right: 56px; }
  .hero-visual .frame-phone { width: 128px; }
}
@media (max-width: 479px) {
  .actions .btn, .apply-foot .btn { flex: 1 1 100%; width: 100%; }
  .cookie-actions .btn { flex: 1 1 0; min-width: 0; }
}
/* short phones: heading, visual, line and both buttons stay on the first screen */
@media (max-width: 1023px) and (max-height: 780px) {
  .hero-copy h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .hero { padding-top: .75rem; }
  .hero-visual { max-width: 340px; padding-top: calc(237px - (min(340px, 100vw - 48px) - 56px) * .625); padding-bottom: 68px; }
  .hero-copy .lead { margin-top: .75rem; font-size: .9375rem; line-height: 1.45; }
  .hero-copy .actions { margin-top: 1rem; gap: 8px; }
  .hero-copy .actions .btn-lg { height: 46px; }
}

/* back to top: a quiet round button bottom right, shown once you are a screen down; it lifts clear of the copyright line at the very end */
.to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s, bottom .25s ease;
}
.to-top .icon { width: 20px; height: 20px; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767px) { .to-top.is-lifted { bottom: calc(80px + env(safe-area-inset-bottom)); } }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Motion package (docs/MOTION.md): one showcase card, then the price from the catalogue and three ticks. */
.demo-grid--one { grid-template-columns: 1fr; }
.motion .h-pop { display: block; color: color-mix(in srgb, var(--accent) 78%, #000); }
.motion-offer { display: grid; justify-items: center; gap: 28px; margin-top: 48px; text-align: center; }
.motion-price { margin: 0; max-width: 46ch; font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.45; text-wrap: balance; }
.motion-offer .ticks { max-width: 960px; }
@media (max-width: 767px) { .motion-offer .ticks { grid-template-columns: 1fr; } }