/* Reputra · static prototype
   Near-black and near-white, one accent (the amber of a review star), one grotesk. */

/* Geist, served from this site (the variable font, every weight in one file). The latin file is preloaded
   in index.html; latin-ext only downloads if a page needs one of its letters. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* neutral, slightly cool: near-black and near-white, never pure */
  --ink-950: oklch(14.5% 0.004 265);
  --ink-900: oklch(19% 0.005 265);
  --ink-800: oklch(32% 0.006 265);
  --paper-50: oklch(99.4% 0.001 265);
  --paper-100: oklch(97.4% 0.002 265);
  --paper-200: oklch(94.4% 0.003 265);
  --paper-300: oklch(88% 0.004 265);
  --stone-500: oklch(52% 0.008 265);
  --stone-400: oklch(66% 0.008 265);
  /* one accent: the colour of a Google review star */
  --amber: oklch(81% 0.165 76);
  --rule: oklch(14.5% 0.004 265 / 0.1);
  --rule-dark: oklch(99.4% 0.001 265 / 0.12);
  --on-dark: oklch(99.4% 0.001 265);
  --on-dark-2: oklch(99.4% 0.001 265 / 0.62);
  --on-dark-3: oklch(99.4% 0.001 265 / 0.58);
  --accent-ink: oklch(56% 0.14 62); /* amber deep enough to read as text on light grounds */

  /* the theme: what the dark sections are made of. Dark by default; html[data-theme="light"] swaps it */
  --fg: var(--on-dark);
  --fg-2: var(--on-dark-2);
  --fg-3: var(--on-dark-3);
  --hair: var(--rule-dark);
  --surface: var(--ink-950);
  --map-base: var(--ink-950);
  /* the streets: quiet, mixed into the ground (the map supports, it does not compete) */
  --m-mix: 72%;
  --m-park: #15171a; --m-water: #13161b; --m-bld: #1a1b1f; --m-bld-edge: #202126;
  --m-svc: #1f2024; --m-res: #26272c; --m-ter: #303238; --m-maj: #383a41;
  --m-w-res: 3.4; --m-w-ter: 6; --m-w-maj: 9;
  --panel-bg: oklch(16% 0.004 265 / 0.9);
  --chip-bg: oklch(20% 0.004 265 / 0.9);
  --avatar-bg: oklch(28% 0.006 265);
  --accent-text: var(--amber);

  --display: "Geist", "Inter", system-ui, sans-serif;
  --sans: "Geist", "Inter", system-ui, sans-serif;
  --urdu: "Noto Nastaliq Urdu", serif;

  --gutter: clamp(20px, 5.6vw, 88px);
  --max: 1320px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
  --fg: var(--ink-950);
  --fg-2: oklch(14.5% 0.004 265 / 0.7);
  --fg-3: oklch(14.5% 0.004 265 / 0.62);
  --hair: var(--rule);
  --surface: var(--paper-100);
  --map-base: oklch(94% 0.003 265);
  --m-mix: 80%;
  --m-park: #dfe5dc; --m-water: #d3dde6; --m-bld: #e2e2e5; --m-bld-edge: #d8d8dc;
  --m-svc: #ffffff; --m-res: #ffffff; --m-ter: #ffffff; --m-maj: #fbfbfc;
  --m-w-res: 3.6; --m-w-ter: 6.4; --m-w-maj: 10;
  --panel-bg: oklch(99.4% 0.001 265 / 0.9);
  --chip-bg: oklch(99.4% 0.001 265 / 0.94);
  --avatar-bg: var(--paper-200);
  --accent-text: var(--accent-ink);
}
/* islands that are dark by design keep their dark tokens in both themes */
.card--big, .plan--pro, .wa, .review__google {
  --fg: var(--on-dark); --fg-2: var(--on-dark-2); --fg-3: var(--on-dark-3); --hair: var(--rule-dark); --accent-text: var(--amber);
}
*, *::before, *::after { box-sizing: border-box; }
/* The page ground follows the theme: phone browsers tint their top and bottom bars from it (Safari
   from the page, Chrome from theme-color, which site.js keeps in step), so the bars change with the
   switch instead of keeping the old colour. No grey or blue box on tap either: buttons and links
   answer with their own press. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--surface); color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
:where(a, button, [role="button"], summary, label) { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  :where(a, button, [role="button"], summary) { transition: opacity 200ms ease; }
  :where(a, button, [role="button"], summary):active { opacity: 0.6; transition-duration: 0s; }
}
main { overflow-x: clip; } /* nothing that animates past the edge may widen the page on a phone (clip, not hidden: the pinned stage keeps working) */
body {
  margin: 0; /* no ground of its own: the html's paints the canvas, under the fixed map (a body ground would cover it) */
  color: var(--ink-950);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
::selection { background: var(--amber); color: var(--ink-950); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 14px; background: var(--paper-50); border-radius: 8px;
  font-family: var(--sans); font-size: 14px;
}
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.display {
  font-size: clamp(3.1rem, 1.5rem + 6.2vw, 7.6rem);
  line-height: 0.93;
  letter-spacing: -0.034em;
  font-weight: 500;
  text-wrap: balance;
}
/* growth, in the amber of a review star: one solid colour, no gradient */
.accent-phrase { color: var(--accent-text); }
.h2 {
  font-size: clamp(2.25rem, 1.35rem + 3.3vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.028em;
  font-weight: 500;
  text-wrap: balance;
}
.lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; letter-spacing: -0.035em; max-width: 36ch; }
.note { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink-950); --fg: var(--paper-50);
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.4s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* hover looks only where there is a real pointer: on a phone a tapped element would keep its hover look */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn span { transition: transform 0.4s var(--ease); }
@media (hover: hover) {
  .btn:hover span { transform: translateX(3px); }
}
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.9rem; }
.btn--light { --bg: var(--paper-50); --fg: var(--ink-950); }
.btn--gold { --bg: var(--amber); --fg: var(--ink-950); }
.btn--ghost { --bg: transparent; --fg: var(--ink-950); border-color: var(--rule); }
@media (hover: hover) {
  .btn--ghost:hover { border-color: var(--ink-950); }
}
.link {
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
}
@media (hover: hover) {
  .link:hover { text-decoration-color: currentColor; }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- nav: one floating bar; a highlight slides under the section you are reading ---------- */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; translate: -50% 0;
  width: min(1240px, calc(100% - 2 * var(--gutter))); height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 8px 0 22px; border-radius: 999px;
  color: var(--fg);
  background: oklch(17% 0.004 265 / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 9%, transparent), inset 0 1px 0 color-mix(in oklch, var(--fg) 7%, transparent), 0 24px 48px -28px oklch(0% 0 0 / 0.8);
  transition: width 0.6s var(--ease), background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
/* Phones: a firmer fill instead of the frosted blur. The bar is fixed, so its blur is redone on every
   frame of every scroll and of the map's fly-in, which mid-range Android phones felt as a slow page. */
@media (hover: none) {
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: oklch(17% 0.004 265 / 0.9); }
  .nav.on-light { background: oklch(99.4% 0.001 265 / 0.94); }
}
.nav.is-scrolled { width: min(1020px, calc(100% - 2 * var(--gutter))); }
.nav.on-light {
  color: var(--ink-950);
  background: oklch(99.4% 0.001 265 / 0.72);
  box-shadow: inset 0 0 0 1px var(--rule), 0 24px 48px -30px oklch(14.5% 0.004 265 / 0.35);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.05em; text-decoration: none;
}
/* the mark: a tap, and the ripple it sends; the ripple draws in as the page arrives */
.brand svg { width: 22px; height: 22px; overflow: visible; }
.brand svg circle { fill: var(--amber); }
.brand svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 18; }
.motion .brand svg path { animation: ripple-in 1.1s var(--ease) 0.3s both; }
@media (hover: hover) {
  .motion .brand:hover svg path { animation: ripple-in 0.8s var(--ease) both; }
}
@keyframes ripple-in { from { stroke-dashoffset: 18; opacity: 0; } }
.nav nav { position: relative; display: flex; gap: 2px; font-family: var(--sans); font-size: 0.9rem; }
.nav nav a { position: relative; z-index: 1; padding: 9px 15px; border-radius: 999px; text-decoration: none; opacity: 0.72; transition: opacity 0.25s; }
.nav nav a.is-current { opacity: 1; }
@media (hover: hover) {
  .nav nav a:hover { opacity: 1; }
}
.nav__pill {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--pw, 0); border-radius: 999px;
  background: color-mix(in oklch, var(--fg) 10%, transparent); transform: translateX(var(--px, 0)); opacity: var(--po, 0);
  transition: transform 0.55s var(--ease), width 0.55s var(--ease), opacity 0.3s;
}
.nav.on-light .nav__pill { background: oklch(14.5% 0.004 265 / 0.07); }
.nav .btn { min-height: 44px; }
.nav__end { display: flex; align-items: center; gap: 8px; }
.nav__login { padding: 9px 12px; border-radius: 999px; font-size: 0.9rem; text-decoration: none; color: inherit; opacity: 0.72; transition: opacity 0.25s; }
@media (hover: hover) {
  .nav__login:hover { opacity: 1; }
}
@media (max-width: 420px) { .nav__login { display: none; } }
/* the theme switch: sun and moon trade places with a turn; the page itself changes with a ripple from here */
.theme {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; transition: background-color 0.25s;
}
@media (hover: hover) {
  .theme:hover { background: color-mix(in oklch, currentColor 10%, transparent); }
}
.theme svg { position: absolute; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; }
.theme__sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
html[data-theme="light"] .theme__sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme__moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (max-width: 860px) { .nav nav { display: none; } .nav { top: 10px; height: 56px; padding-left: 18px; } }

/* ---------- 1 · intro: one full-bleed moment. The world is the hero; the words sit on it like a poster. ---------- */
.intro {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: last baseline; gap: 40px clamp(40px, 6vw, 120px);
  padding: 140px var(--gutter) clamp(48px, 6vh, 80px);
  color: var(--fg);
}
.intro__title { font-size: clamp(3rem, 0.4rem + 6.2vw, 8.4rem); line-height: 0.9; letter-spacing: -0.04em; max-width: 12ch; }
/* the column beside the headline: its last line sits on the headline's last baseline, so the two read as one setting */
.intro__foot { display: grid; justify-items: start; width: clamp(22.5rem, 10rem + 16vw, 25rem); } /* a definite width: a percentage here would let the sentence size the column at full length */
@media (max-width: 1180px) and (min-width: 861px) { /* too narrow for both beside each other: the column steps under the headline */
  .intro { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.intro .lede { color: var(--fg-2); font-size: clamp(1.05rem, 0.75rem + 0.45vw, 1.2rem); line-height: 1.5; letter-spacing: -0.02em; max-width: none; text-wrap: balance; }
.intro .lede + .actions { margin-top: 30px; }
.intro .actions { flex-wrap: nowrap; }
.intro .note { margin-top: 26px; color: var(--fg-3); font-size: 0.82rem; text-wrap: balance; }
.intro .btn--gold { box-shadow: 0 14px 32px -16px oklch(0% 0 0 / 0.8); min-height: 54px; padding: 0 26px; }
.intro .actions { gap: 12px 26px; }

/* one world behind the hero and the stage: the real streets of Gulberg. The script places the camera:
   the neighbourhood behind the hero, then a slow move in to the café as you scroll to the stage. */
.world { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--map-base); transition: opacity 0.5s ease, background-color 0.6s; }
.world.is-away { opacity: 0; }
/* the overlays that keep the words legible: dark on the left for the headline, edges softened;
   --z (0 → 1) is the camera's move in, which lets the map come up evenly behind the stage */
.world__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(85% 75% at 0% 100%, color-mix(in oklch, var(--surface) calc(96% * (1 - var(--z, 0))), transparent) 30%, transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 65%, transparent) 0%, transparent 20%, transparent 70%, color-mix(in oklch, var(--surface) 80%, transparent) 100%),
    radial-gradient(70% 70% at 66% 40%, transparent 35%, color-mix(in oklch, var(--surface) calc(40% + 25% * var(--z, 0)), transparent) 100%);
}
/* the light that follows the stand and the card through the stage; it lives in the world, so it has no edge */
.world__light {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--z, 0);
  background: radial-gradient(560px 460px at var(--lx, 66%) var(--ly, 55%), oklch(40% 0.008 265 / 0.55), transparent 72%), radial-gradient(260px 200px at var(--lx, 66%) calc(var(--ly, 55%) + 180px), oklch(70% 0.16 62 / 0.12), transparent 72%);
}
.intro { background: transparent; }
.stage, .stage__pin { background: transparent; }
.map { position: absolute; left: 0; top: 0; width: 1800px; aspect-ratio: 2000 / 1760; transform-origin: 46.875% 52.08%; will-change: transform; }
/* the streets run a full layer past it on every side, so no screen and no point of the flythrough finds their end.
   Inline SVG, not an <img>: it is drawn tile by tile, only where it is seen, instead of as one 5000px bitmap */
.map__streets { position: absolute; left: -100%; top: -100%; width: 300%; height: 300%; }
.map__streets svg { display: block; width: 100%; height: 100%; }
.map__streets g { stroke-linecap: round; stroke-linejoin: round; }
.s-park { fill: color-mix(in srgb, var(--m-park) var(--m-mix), var(--map-base)); }
.s-water { fill: color-mix(in srgb, var(--m-water) var(--m-mix), var(--map-base)); }
.s-canal { fill: none; stroke: color-mix(in srgb, var(--m-water) var(--m-mix), var(--map-base)); stroke-width: 16; }
.s-bld { fill: color-mix(in srgb, var(--m-bld) var(--m-mix), var(--map-base)); stroke: color-mix(in srgb, var(--m-bld-edge) var(--m-mix), var(--map-base)); stroke-width: 0.8; }
.s-svc { fill: none; stroke: color-mix(in srgb, var(--m-svc) var(--m-mix), var(--map-base)); stroke-width: 2; }
.s-res { fill: none; stroke: color-mix(in srgb, var(--m-res) var(--m-mix), var(--map-base)); stroke-width: var(--m-w-res); }
.s-ter { fill: none; stroke: color-mix(in srgb, var(--m-ter) var(--m-mix), var(--map-base)); stroke-width: var(--m-w-ter); }
.s-maj { fill: none; stroke: color-mix(in srgb, var(--m-maj) var(--m-mix), var(--map-base)); stroke-width: var(--m-w-maj); }
/* the camera on scroll: the café rides up with the hero, then the view settles on it at the counter.
   Driven by the scroll itself, so the browser moves the map in the same frame as the page (on a phone, no lag behind the finger);
   site.js drives the same path where scroll timelines are missing */
@property --zoom { syntax: "<number>"; inherits: true; initial-value: 1; }
.rig { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; --hx: 64vw; --hy: 38vh; --sx: 66vw; --sy: 60vh; }
.rig--pins { z-index: 1; } /* above the shade, so the pins stay bright */
@media (max-width: 860px) { .rig { --hx: 14vw; --hy: 19vh; } } /* phones: up and left, clear of the words */
@media (max-width: 760px) { .rig { --sx: 50vw; --sy: 62vh; } }
@supports (animation-timeline: scroll()) {
  .rig { animation: camera linear both; animation-timeline: scroll(root block); animation-range: 0px 120vh; }
  /* the pins' counter-zoom is a custom property, which only the main thread can animate: its range is just the stretch where the
     zoom changes, so at rest in the hero it sits idle instead of restyling every frame */
  .rig--pins { animation: camera linear both, zoom linear both; animation-timeline: scroll(root block), scroll(root block); animation-range: 0px 120vh, 10vh 120vh; }
}
@keyframes camera {
  0% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0000), calc(var(--hy) - 0.00vh + (var(--sy) - var(--hy) + 0.00vh) * 0.0000), 0) scale(1.0000); }
  4.167% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0000), calc(var(--hy) - 5.00vh + (var(--sy) - var(--hy) + 5.00vh) * 0.0000), 0) scale(1.0000); }
  8.333% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0000), calc(var(--hy) - 10.00vh + (var(--sy) - var(--hy) + 10.00vh) * 0.0000), 0) scale(1.0000); }
  12.5% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0004), calc(var(--hy) - 15.00vh + (var(--sy) - var(--hy) + 15.00vh) * 0.0004), 0) scale(1.0009); }
  16.667% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0030), calc(var(--hy) - 20.00vh + (var(--sy) - var(--hy) + 20.00vh) * 0.0030), 0) scale(1.0072); }
  20.833% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0101), calc(var(--hy) - 25.00vh + (var(--sy) - var(--hy) + 25.00vh) * 0.0101), 0) scale(1.0243); }
  25% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0240), calc(var(--hy) - 30.00vh + (var(--sy) - var(--hy) + 30.00vh) * 0.0240), 0) scale(1.0577); }
  29.167% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0470), calc(var(--hy) - 35.00vh + (var(--sy) - var(--hy) + 35.00vh) * 0.0470), 0) scale(1.1127); }
  33.333% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.0811), calc(var(--hy) - 40.00vh + (var(--sy) - var(--hy) + 40.00vh) * 0.0811), 0) scale(1.1947); }
  37.5% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.1289), calc(var(--hy) - 45.00vh + (var(--sy) - var(--hy) + 45.00vh) * 0.1289), 0) scale(1.3092); }
  41.667% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.1923), calc(var(--hy) - 50.00vh + (var(--sy) - var(--hy) + 50.00vh) * 0.1923), 0) scale(1.4616); }
  45.833% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.2739), calc(var(--hy) - 55.00vh + (var(--sy) - var(--hy) + 55.00vh) * 0.2739), 0) scale(1.6573); }
  50% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.3757), calc(var(--hy) - 60.00vh + (var(--sy) - var(--hy) + 60.00vh) * 0.3757), 0) scale(1.9016); }
  54.167% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.5000), calc(var(--hy) - 65.00vh + (var(--sy) - var(--hy) + 65.00vh) * 0.5000), 0) scale(2.2000); }
  58.333% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.6243), calc(var(--hy) - 70.00vh + (var(--sy) - var(--hy) + 70.00vh) * 0.6243), 0) scale(2.4984); }
  62.5% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.7261), calc(var(--hy) - 75.00vh + (var(--sy) - var(--hy) + 75.00vh) * 0.7261), 0) scale(2.7427); }
  66.667% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.8077), calc(var(--hy) - 80.00vh + (var(--sy) - var(--hy) + 80.00vh) * 0.8077), 0) scale(2.9384); }
  70.833% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.8711), calc(var(--hy) - 85.00vh + (var(--sy) - var(--hy) + 85.00vh) * 0.8711), 0) scale(3.0908); }
  75% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.9189), calc(var(--hy) - 90.00vh + (var(--sy) - var(--hy) + 90.00vh) * 0.9189), 0) scale(3.2053); }
  79.167% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.9530), calc(var(--hy) - 95.00vh + (var(--sy) - var(--hy) + 95.00vh) * 0.9530), 0) scale(3.2873); }
  83.333% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.9760), calc(var(--hy) - 100.00vh + (var(--sy) - var(--hy) + 100.00vh) * 0.9760), 0) scale(3.3423); }
  87.5% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.9899), calc(var(--hy) - 105.00vh + (var(--sy) - var(--hy) + 105.00vh) * 0.9899), 0) scale(3.3757); }
  91.667% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.9970), calc(var(--hy) - 110.00vh + (var(--sy) - var(--hy) + 110.00vh) * 0.9970), 0) scale(3.3928); }
  95.833% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 0.9996), calc(var(--hy) - 115.00vh + (var(--sy) - var(--hy) + 115.00vh) * 0.9996), 0) scale(3.3991); }
  100% { transform: translate3d(calc(var(--hx) + (var(--sx) - var(--hx)) * 1.0000), calc(var(--hy) - 120.00vh + (var(--sy) - var(--hy) + 120.00vh) * 1.0000), 0) scale(3.4000); }
}
@keyframes zoom {
  0% { --zoom: 1.0000; }
  5% { --zoom: 1.0012; }
  10% { --zoom: 1.0096; }
  15% { --zoom: 1.0324; }
  20% { --zoom: 1.0768; }
  25% { --zoom: 1.1500; }
  30% { --zoom: 1.2592; }
  35% { --zoom: 1.4116; }
  40% { --zoom: 1.6144; }
  45% { --zoom: 1.8748; }
  50% { --zoom: 2.2000; }
  55% { --zoom: 2.5252; }
  60% { --zoom: 2.7856; }
  65% { --zoom: 2.9884; }
  70% { --zoom: 3.1408; }
  75% { --zoom: 3.2500; }
  80% { --zoom: 3.3232; }
  85% { --zoom: 3.3676; }
  90% { --zoom: 3.3904; }
  95% { --zoom: 3.3988; }
  100% { --zoom: 3.4000; }
}

/* the pins keep their size whatever the camera does */
.map--pins { --s: calc(1 / (var(--fly, 1) * var(--zoom, 1))); }
/* a soft pool of light where the café is */
.map:not(.map--pins)::after {
  content: ""; position: absolute; left: 46.875%; top: 52.08%; width: 900px; height: 700px; translate: -50% -50%;
  background: radial-gradient(closest-side, oklch(70% 0.16 62 / 0.12), transparent);
}
.pin {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); z-index: 1;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; transition: opacity 0.4s;
  background: oklch(60% 0.006 265); box-shadow: 0 0 0 4px oklch(60% 0.006 265 / 0.18);
  font-style: normal; font-family: var(--sans);
}
.pin { scale: var(--s, 1); }
.pin b {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%; white-space: nowrap;
  font-size: 0.72rem; font-weight: 500; color: var(--fg-3);
}
.pin--you {
  z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--amber); box-shadow: 0 0 0 6px oklch(81% 0.165 76 / 0.22), 0 0 0 1px oklch(14.5% 0.004 265);
}
.pin--you.is-hit { animation: hit 0.6s var(--ease); }
@keyframes hit { 0%, 100% { transform: none; } 30% { transform: scale(1.35); } } /* every frame stated: the compositor runs it */
.map__street {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); rotate: 87deg; transform-origin: left center;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklch, var(--fg) 30%, transparent); white-space: nowrap;
}
/* the focal moment: the city comes up out of the dark as the camera flies in, the pins land, the café's callout appears.
   Opacity only: it runs on the compositor, so the streets are drawn once, not on every frame of the reveal. */
.motion .map:not(.map--pins) { opacity: 0; } /* until the streets are in */
.motion .map.is-in:not(.map--pins) { opacity: 1; animation: map-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes map-in { from { opacity: 0; } }
/* the pins wait until site.js has put the map in place (.is-live), so they never land somewhere and then jump */
.motion .world:not(.is-live) .map--pins { visibility: hidden; }
.motion .is-live .pin { animation: pin-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.6s) both; }
.motion .is-live .pin--you { animation: pin-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
@keyframes pin-in { from { opacity: 0; transform: scale(0.4); } }
.motion .is-live .pin--you.is-hit { animation: hit 0.6s var(--ease); }
.motion .is-live .map__street { animation: fade 1s ease 1.4s both; }
@keyframes fade { from { opacity: 0; } }
.panel__stars { display: flex; gap: 3px; }
.panel__stars i, .burst i { display: block; width: 18px; height: 18px; background: var(--amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.panel__stars i.is-off { background: color-mix(in oklch, var(--fg) 20%, transparent); }
/* the café's callout, on the map beside its pin; notifications rise from it */
.callout-pin {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); z-index: 3;
  scale: var(--s, 1); transform-origin: 0 0; pointer-events: none; font-family: var(--sans);
}
.callout-pin__card {
  position: absolute; left: 22px; top: -22px; margin: 0; display: grid; gap: 2px; white-space: nowrap;
  padding: 10px 16px 11px; border-radius: 14px;
  background: var(--chip-bg); color: var(--fg); font-size: 0.84rem; /* 90% opaque: a backdrop blur showed nothing and re-blurred the moving map every frame */
  box-shadow: inset 0 0 0 1px var(--hair), 0 18px 40px -20px oklch(0% 0 0 / 0.7);
}
.callout-pin__card b { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.callout-pin__card span { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.callout-pin__card em { font-style: normal; color: var(--accent-text); font-weight: 600; }
.callout-pin__card strong { color: var(--fg); font-weight: 600; }
.toasts { position: absolute; left: 22px; bottom: 34px; width: max-content; }
.toast {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 0.8rem; color: var(--fg-2);
  background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--hair);
  animation: toast 3.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast i.toast__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--ink-950); font-style: normal; font-size: 0.64rem; font-weight: 700; }
.toast b { color: var(--fg); font-weight: 500; }
.toast .panel__stars i { width: 10px; height: 10px; }
/* a notification rises out of the café, holds, then lifts away */
@keyframes toast {
  0% { opacity: 0; transform: translateY(14px) scale(0.96); }
  14% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-22px); }
}
.motion .is-live .callout-pin__card { animation: fade 0.8s ease 1.1s both; }


/* ---------- 2 · the stage: three ways in ---------- */
.stage { position: relative; color: var(--fg); } /* transparent: the world shows through */
.stage__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
/* the stage has no lighting layers of its own: the world behind it carries the light, so there is no edge */
.stage__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.stage__canvas.is-ready { opacity: 1; }
.stage__title {
  position: absolute; z-index: 2; left: var(--gutter); top: 112px;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500;
}
.beats { position: absolute; z-index: 2; left: var(--gutter); top: 50%; width: min(34vw, 460px); translate: 0 -10%; }
.beat { position: absolute; inset: 0 auto auto 0; display: grid; gap: 14px; opacity: 0; visibility: hidden; }
.beat h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.05; letter-spacing: -0.028em; font-weight: 500; color: var(--accent-text); }
.beat p { font-size: 1.1rem; line-height: 1.55; color: color-mix(in oklch, var(--fg) 78%, transparent); max-width: 34ch; }
.stage__closing {
  position: absolute; z-index: 2; left: var(--gutter); top: 50%; translate: 0 -50%;
  width: min(40vw, 580px); text-wrap: balance;
  font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500;
  opacity: 0;
}
/* the WhatsApp message, as the real interface: one bubble from the business's own number */
.wa {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: min(400px, 86vw); translate: -10% -50%;
  border-radius: 22px; overflow: hidden; font-family: var(--sans);
  background: #0b141a; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 10%, transparent), 0 40px 80px -30px oklch(0% 0 0 / 0.8);
  opacity: 0; visibility: hidden;
}
.wa__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #1f2c34; }
.wa__head span:last-child { display: grid; font-size: 0.78rem; color: #8696a0; }
.wa__head b { font-size: 0.98rem; font-weight: 600; color: #e9edef; }
.wa__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-950); color: var(--fg); font-size: 0.8rem; font-weight: 600; }
.wa__body { padding: 22px 16px 26px; background: #0b141a; }
.wa__msg {
  margin-left: auto; max-width: 92%; padding: 10px 12px 22px; border-radius: 12px 4px 12px 12px; position: relative;
  background: #005c4b; color: #e9edef; font-size: 0.95rem; line-height: 1.45;
}
.wa__msg u { color: #a8e6ff; text-decoration-color: #a8e6ff80; }
.wa__msg time { position: absolute; right: 10px; bottom: 5px; font-size: 0.7rem; color: #9fd8ce; }
.burst { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; width: 50px; height: 50px; margin: -25px 0 0 -25px; opacity: 0; filter: drop-shadow(0 0 18px oklch(81% 0.165 76 / 0.7)); }
.wipe {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 0 var(--gutter);
  background: var(--paper-100); color: var(--ink-950); clip-path: circle(0 at 50% 50%); pointer-events: none;
}
.wipe p {
  font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.035em; text-align: center; text-wrap: balance;
  opacity: var(--k, 0); transform: translateY(calc((1 - var(--k, 0)) * 28px)) scale(calc(0.96 + var(--k, 0) * 0.04));
}

/* phones: copy on top, the objects below */
@media (max-width: 860px) {
  .pin b { display: none; }
  .world__shade { background: linear-gradient(180deg, color-mix(in oklch, var(--surface) 55%, transparent) 0%, transparent 16%, transparent 36%, color-mix(in oklch, var(--surface) 88%, transparent) 50%, var(--surface) 62%); }
  .callout-pin__card { font-size: 0.78rem; padding: 8px 12px 9px; }
  .toasts { bottom: auto; top: 40px; } /* phones: the notifications drop below the callout, away from the header */
  .toast { bottom: auto; top: 0; }
  @keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 14% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
  .intro { grid-template-columns: 1fr; gap: 28px; padding-top: calc(72px + 36svh); } /* phones: the map holds the top third, the words sit below */
  .intro__title { font-size: clamp(2.8rem, 1rem + 9vw, 4.4rem); }
  .intro__foot { width: 100%; }
  .intro .actions { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .stage__title { top: 92px; }
  .beats { top: auto; bottom: 48px; translate: none; width: auto; right: var(--gutter); height: 9em; }
  .beat h3 { font-size: 1.5rem; }
  .beat p { font-size: 1rem; }
  .wa { top: 40%; translate: -50% -50%; }
  .stage__closing { top: 100px; translate: none; right: var(--gutter); width: auto; }
  .burst i { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
}

/* without WebGL or script: no canvas, the three ways as a plain list */
html:not(.has-card) .stage__canvas,
html:not(.has-card) .stage__closing,
html:not(.has-card) .burst, html:not(.has-card) .wipe { display: none; }
html:not(.has-card) .stage__pin { height: auto; padding: 120px var(--gutter) 96px; display: grid; gap: 48px; }
html:not(.has-card) .stage__title,
html:not(.has-card) .beats,
html:not(.has-card) .beat,
html:not(.has-card) .wa { position: static; translate: none; width: auto; max-width: 720px; opacity: 1; visibility: visible; height: auto; }
html:not(.has-card) .beats { display: grid; gap: 32px; }

/* ---------- shared section frame ---------- */
main > :where(section:not(.stage):not(.intro)) { background: var(--paper-100); } /* zero specificity: a section's own ground still wins */
main > section:not(.stage):not(.intro) {
  padding: clamp(96px, 12vw, 176px) var(--gutter);
}
main > section:not(.stage):not(.intro) > * { max-width: var(--max); margin-inline: auto; }

/* ---------- 2 · try it ---------- */
.try {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(48px, 7vw, 120px); align-items: center;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)) !important; /* full-width ground, centred content */
}
.try > * { margin: 0; max-width: none; }
.try__copy { display: grid; gap: 28px; align-content: start; }
.try__copy > p { max-width: 38ch; }
.facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 48px; }
.facts li { display: grid; gap: 4px; border-top: 1px solid var(--rule); padding-top: 16px; }
.facts b {
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.035em;
}
.facts span { font-family: var(--sans); font-size: 0.86rem; color: var(--stone-500); line-height: 1.35; max-width: 16ch; }

/* the patient's page, as interface (no device frame) */
.review {
  background: var(--paper-50);
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -30px oklch(14.5% 0.004 265 / 0.35), 0 12px 24px -16px oklch(14.5% 0.004 265 / 0.2);
  font-family: var(--sans);
  overflow: hidden;
}
.review__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--rule);
}
.review__url { font-size: 0.8rem; color: var(--stone-500); letter-spacing: 0.005em; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper-200); }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: var(--stone-500);
  transition: background-color 0.25s, color 0.25s;
}
.seg button[aria-pressed="true"] { background: var(--paper-50); color: var(--ink-950); box-shadow: 0 1px 2px oklch(14.5% 0.004 265 / 0.12); }
.seg .ur { font-family: var(--urdu); font-size: 0.78rem; line-height: 1; }

.review__body { display: grid; justify-items: center; text-align: center; padding: 40px 32px 28px; }
.review__body[dir="rtl"] .review__q,
.review__body[dir="rtl"] .review__google,
.review__body[dir="rtl"] .review__private,
.review__body[dir="rtl"] .review__toast { font-family: var(--urdu); line-height: 2; }
.review__logo {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  background: var(--ink-950); color: var(--paper-50);
  font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.035em;
}
.review__name { margin-top: 16px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.035em; }
.review__area { margin-top: 2px; font-size: 0.86rem; color: var(--stone-500); }
.review__q {
  margin-top: 32px; font-family: var(--display); font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.035em;
  font-weight: 500;
}
.review__body[dir="rtl"] .review__q { font-size: 1.4rem; }
.review__stars { display: flex; gap: 6px; margin-top: 20px; direction: ltr; }
.review__stars button {
  width: 48px; height: 48px; border: 0; padding: 6px; background: transparent; cursor: pointer;
  border-radius: 12px;
}
.review__stars button::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--paper-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 0.2s, transform 0.35s var(--ease);
}
.review__stars button.is-lit::before { background: var(--amber); }
@media (hover: hover) {
  .review__stars button:hover::before { transform: scale(1.08); }
}
.review__stars button.is-pop::before { animation: pop 0.45s var(--ease); }
@keyframes pop { 40% { transform: scale(1.22); } }

.review__google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; margin-top: 28px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--ink-950); color: var(--paper-50); font-size: 1rem; font-weight: 600;
  transition: transform 0.3s var(--ease), background-color 0.2s;
}
.review__google::before {
  content: "G"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-50); color: var(--ink-950); font-family: var(--sans); font-size: 0.8rem; font-weight: 700; line-height: 1;
}
.review__google:active { transform: scale(0.98); }
.review__private {
  margin-top: 10px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  font-size: 0.9rem; color: var(--stone-500); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule);
}
.review__toast {
  min-height: 3em; margin-top: 6px; font-size: 0.86rem; line-height: 1.45; color: var(--ink-800);
  max-width: 34ch; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.4s var(--ease);
}
.review__toast.is-on { opacity: 1; transform: none; }

.kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.kinds button {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper-50); cursor: pointer;
  font-size: 0.92rem; font-weight: 500; transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
@media (hover: hover) {
  .kinds button:hover { border-color: var(--ink-950); }
}
.kinds button[aria-pressed="true"] { background: var(--ink-950); color: var(--paper-50); border-color: var(--ink-950); }
.review__body > * { transition: opacity 0.25s; }
.review.is-swapping .review__body > :not(.review__stars):not(.review__toast) { opacity: 0; }

/* ---------- 3 · grow ---------- */
.grow {
  background: var(--surface); color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: center;
}
.grow > * { margin: 0; max-width: none; }
.grow__copy { display: grid; gap: 28px; justify-self: end; width: min(100%, 600px); }
.grow__copy > p { color: var(--fg-2); max-width: 46ch; }
.grow .h2 .w:nth-last-child(-n + 2) > span { color: var(--accent-text); }
.grow__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; counter-reset: s; }
.grow__steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding: 18px 0; border-top: 1px solid var(--hair); }
.grow__steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair); font-size: 0.82rem; color: var(--fg-2); }
.grow__steps b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.grow__steps span { font-size: 0.92rem; color: var(--fg-2); }

.maps {
  width: min(100%, 520px); padding: 20px; border-radius: 26px; background: var(--paper-50); color: var(--ink-950);
  box-shadow: 0 40px 80px -30px oklch(0% 0 0 / 0.7);
}
.maps__search { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 999px; background: var(--paper-200); font-size: 1rem; }
.maps__search span { font-size: 1.3rem; color: var(--stone-500); }
.maps__list { list-style: none; position: relative; margin: 14px 0 0; padding: 0; height: calc(3 * 84px); }
.maps__list li {
  position: absolute; inset: 0 0 auto; height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-radius: 16px;
  transform: translateY(calc(var(--pos) * 84px)); transition: transform 1.1s var(--ease), background-color 0.6s, box-shadow 0.6s;
}
.maps__list li b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.maps__list li b i { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--amber); font-style: normal; font-size: 0.72rem; vertical-align: 2px; }
.maps__list small { font-size: 0.86rem; color: var(--stone-500); }
.maps__list em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-950); font-weight: 600; }
.maps__pin { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--paper-300); font-size: 0.8rem; font-weight: 600; }
.maps__pin { color: transparent; }
.maps__list .is-you { background: oklch(81% 0.165 76 / 0.12); box-shadow: inset 0 0 0 1.5px var(--amber); }
.maps__list .is-you .maps__pin { background: var(--amber); }
.maps__note { margin-top: 10px; font-size: 0.8rem; color: var(--stone-500); }

/* ---------- 4 · rules ---------- */
.rules { border-top: 1px solid var(--rule); }
.rules__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 80px; align-items: end; }
.rules__head p { max-width: 42ch; color: var(--ink-800); }
.rules__list { list-style: none; padding: 0; margin-top: clamp(48px, 6vw, 88px); counter-reset: rule; }
.rules__list li {
  counter-increment: rule;
  display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px 32px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--rule);
}
.rules__list li:last-child { border-bottom: 1px solid var(--rule); }
.rules__list li::before {
  content: "0" counter(rule); font-family: var(--sans); font-size: 0.86rem; color: var(--stone-500);
  font-variant-numeric: tabular-nums;
}
.rules__list span {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.12; letter-spacing: -0.04em; font-weight: 500;
}
/* the strike is drawn through each line of the rule as it scrolls in */
.rules__list s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 56% / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.4s var(--ease) 0.25s;
}
.rules__list li.reveal s { background-size: 0% 2px; }
.rules__list li.is-in s { background-size: 100% 2px; }
.rules__list small { font-family: var(--sans); font-size: 0.95rem; color: var(--stone-500); }

/* ---------- 4 · promise ---------- */
.promise {
  background: var(--paper-200);
  padding-block: clamp(88px, 9vw, 136px) !important;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 80px; align-items: start;
}
.promise > * { margin: 0; max-width: none; }
.promise .h2 { grid-row: span 2; }
.founder { margin: 0; display: grid; gap: 36px; }
.founder p {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.1rem); line-height: 1.12; letter-spacing: -0.045em;
  font-weight: 400; max-width: 26ch; text-wrap: pretty;
}
.founder footer { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: 0.92rem; color: var(--stone-500); line-height: 1.4; }
.founder footer b { color: var(--ink-950); font-weight: 600; }
/* the founder, on the brand's amber (alt is empty: his name is right beside it) */
.founder__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--amber); box-shadow: 0 0 0 1px var(--rule); }
.promise__offer { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-800); padding-top: 24px; border-top: 1px solid var(--rule); }

/* ---------- 5 · month ---------- */
.month__head { display: flex; justify-content: space-between; align-items: end; gap: 24px 64px; flex-wrap: wrap; }
.month__head p { max-width: 40ch; color: var(--ink-800); }
.tag {
  display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.78rem; color: var(--stone-500); white-space: nowrap; vertical-align: 2px;
}
.month__grid {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
  font-family: var(--sans);
}
.card {
  grid-column: span 4; display: grid; align-content: start; gap: 14px;
  padding: 28px; border-radius: 20px; background: var(--paper-50); box-shadow: 0 0 0 1px var(--rule);
}
.card--big { grid-column: span 8; grid-row: span 3; align-content: space-between; background: var(--ink-950); color: var(--paper-50); box-shadow: none; }
.card__label { font-size: 0.86rem; font-weight: 500; color: var(--stone-500); }
.card--big .card__label, .card--big .card__sub { color: color-mix(in oklch, var(--fg) 60%, transparent); }
.card__sub { font-size: 0.86rem; color: var(--stone-500); line-height: 1.45; }
.bigfig {
  display: flex; align-items: center; gap: 0.25em;
  font-family: var(--display); font-size: clamp(4rem, 2rem + 7vw, 8.5rem); line-height: 0.9; letter-spacing: -0.06em;
  font-weight: 400; font-variant-numeric: lining-nums;
}
.bigfig span:first-child { color: color-mix(in oklch, var(--fg) 38%, transparent); }
.bigfig svg { width: 0.42em; height: 0.42em; fill: none; stroke: color-mix(in oklch, var(--fg) 50%, transparent); stroke-width: 1.4; }
.spark { display: flex; align-items: end; gap: 6px; height: 120px; }
.spark i { flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; background: color-mix(in oklch, var(--fg) 16%, transparent); }
.spark i:last-child { background: var(--paper-50); }
.board { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.board li { display: grid; grid-template-columns: 76px 1fr 28px; align-items: center; gap: 12px; font-size: 0.95rem; }
.board i { height: 8px; border-radius: 4px; background: linear-gradient(var(--ink-950), var(--ink-950)) 0 0 / var(--w) 100% no-repeat, var(--paper-200); }
.board b { text-align: right; font-variant-numeric: tabular-nums; }
.bubble {
  position: relative; padding: 14px 16px; border-radius: 4px 16px 16px 16px; background: var(--paper-200);
  font-size: 0.92rem; line-height: 1.5;
}
.bubble b { display: block; margin-bottom: 4px; font-size: 0.8rem; color: var(--stone-500); font-weight: 500; }
.quote { font-family: var(--display); font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.03em; }

/* ---------- 6 · estimate ---------- */
.estimate {
  background: var(--surface); color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center;
}
.estimate > * { margin: 0; max-width: none; }
.estimate__copy { display: grid; gap: 28px; justify-self: end; width: min(100%, 520px); }
.estimate__copy > p { color: color-mix(in oklch, var(--fg) 70%, transparent); }
.slider { display: grid; gap: 14px; font-family: var(--sans); font-size: 0.95rem; }
.slider > span { display: flex; justify-content: space-between; color: color-mix(in oklch, var(--fg) 70%, transparent); }
.slider output { color: var(--paper-50); font-weight: 600; font-variant-numeric: tabular-nums; }
.slider input {
  --fill: 30%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0;
}
.slider input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--fg), var(--fg)) 0 0 / var(--fill) 100% no-repeat, var(--hair); }
.slider input::-moz-range-track { height: 2px; background: linear-gradient(var(--fg), var(--fg)) 0 0 / var(--fill) 100% no-repeat, var(--hair); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 6px color-mix(in oklch, var(--fg) 10%, transparent); }
.slider input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--fg); }
.estimate__result { display: grid; gap: 20px; }
.estimate__fig {
  font-size: clamp(7rem, 3rem + 14vw, 15rem); line-height: 0.82; letter-spacing: -0.07em; font-weight: 400; font-variant-numeric: lining-nums tabular-nums;
}
.estimate__label { font-size: 1.2rem; line-height: 1.45; max-width: 30ch; }
.estimate__fine { font-family: var(--sans); font-size: 0.86rem; color: color-mix(in oklch, var(--fg) 50%, transparent); max-width: 46ch; }

/* ---------- 7 · pricing ---------- */
.pricing__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 80px; align-items: end; }
.pricing__head p { max-width: 42ch; color: var(--ink-800); }
.plans { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px;
  padding: 32px; border-radius: 24px; background: var(--paper-50); box-shadow: 0 0 0 1px var(--rule);
}
.plan__name { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--sans); font-size: 1rem; font-weight: 600; }
.plan__name span { font-size: 0.78rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; border: 1px solid oklch(81% 0.165 76 / 0.55); color: var(--accent-text); }
.plan__price {
  display: grid; font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem); line-height: 1; letter-spacing: -0.035em; font-weight: 500; font-variant-numeric: lining-nums;
}
.plan__price small { margin-top: 8px; font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0; color: var(--stone-500); }
.plan__for { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-800); padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.plan ul { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 10px; align-content: start; font-family: var(--sans); font-size: 0.95rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan li::before { content: ""; width: 12px; height: 7px; margin-top: 0.42em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.6; }
.plan .btn { justify-content: center; }
.plan--pro { background: var(--ink-950); color: var(--paper-50); box-shadow: none; }
.plan--pro .plan__price small, .plan--pro .plan__for { color: color-mix(in oklch, var(--fg) 62%, transparent); }
.plan--pro .plan__for { border-color: var(--hair); }
.pricing__fine { margin-top: 28px; font-family: var(--sans); font-size: 0.9rem; color: var(--stone-500); max-width: 72ch; }

/* ---------- 8 · questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px 80px; align-items: start; border-top: 1px solid var(--rule); }
.faq > * { margin: 0; max-width: none; }
.faq .h2 { position: sticky; top: 112px; }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list details:first-child { border-top: 1px solid var(--rule); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.2; letter-spacing: -0.035em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-4px);
  transition: transform 0.35s var(--ease);
}
.faq__list details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__list details p { padding: 0 48px 28px 0; max-width: 60ch; color: var(--ink-800); }

/* ---------- 9 · close and footer ---------- */
.close {
  background: var(--surface); color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px clamp(32px, 5vw, 80px);
  /* the last screen fits whole: under the header, above the footer */
  min-height: calc(100vh - 106px); min-height: calc(100svh - 106px);
  padding: 104px var(--gutter) 40px !important;
  max-width: none;
}
main > section.close:not(.stage):not(.intro) > * { margin: 0; max-width: none; } /* beats the shared section frame, which centres children with auto margins */
.close__copy { display: grid; gap: 28px; justify-items: start; justify-self: end; width: min(100%, 620px); }
.display--close { font-size: clamp(3rem, 1.4rem + 4.6vw, 6.4rem); letter-spacing: -0.032em; }
.close__copy > p:not(.note) { max-width: 40ch; color: color-mix(in oklch, var(--fg) 78%, transparent); font-size: 1.15rem; }
.close .btn--gold { min-height: 60px; padding: 0 34px; font-size: 1.08rem; box-shadow: 0 18px 40px -18px oklch(0% 0 0 / 0.8); }
.close .note { color: color-mix(in oklch, var(--fg) 50%, transparent); }
.close .note a { color: color-mix(in oklch, var(--fg) 80%, transparent); }
.close__stage { position: relative; height: min(66vh, 620px); }
.close__stage::before {
  /* the same light the card had at the top of the page */
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background: radial-gradient(45% 45% at 50% 56%, oklch(70% 0.16 62 / 0.16), transparent 72%), radial-gradient(60% 55% at 50% 40%, oklch(26% 0.005 265 / 0.9), transparent 75%);
}
html:not(.has-card) .close__stage { display: none; }
html:not(.has-card) .close { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .close { grid-template-columns: 1fr; padding-top: 88px !important; }
  .close__copy { justify-self: start; gap: 20px; }
  .close__stage { order: -1; height: 32vh; height: 32svh; }
  .close__copy > p:not(.note) { font-size: 1.02rem; }
}
.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: 32px var(--gutter) 40px; background: var(--surface); color: var(--fg); border-top: 1px solid var(--hair);
  font-family: var(--sans); font-size: 0.86rem;
}
.footer .brand { font-size: 1.3rem; }
.footer nav { display: flex; gap: 24px; }
.footer nav a { text-decoration: none; opacity: 0.7; }
@media (hover: hover) {
  .footer nav a:hover { opacity: 1; }
}
.credits { opacity: 0.5; }

/* ---------- reveals ---------- */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.words .w > span { display: inline-block; }
/* hidden below the mask only when the motion class is on (set in the head): with no script, or reduced
   motion, the words simply stand */
.motion .words .w > span { transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.motion .words.is-in .w > span { transform: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* the hero arrives: the headline rises word by word, the rest follows */
.motion .intro__foot > * { animation: rise 1s var(--ease) both; }
.motion .intro__foot > .lede { animation-delay: 0.9s; }
.motion .intro__foot > .actions { animation-delay: 1s; }
.motion .intro__foot > .note { animation-delay: 1.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* the month grows once it is on screen */
.spark i { transform-origin: 50% 100%; transition: transform 1s var(--ease); }
.spark i:nth-child(n) { transition-delay: calc(var(--n, 0) * 55ms + 200ms); }
.month__grid.is-waiting .spark i { transform: scaleY(0); }
.board i { transition: background-size 1.3s var(--ease) 0.4s; }
.month__grid.is-waiting .board i { background-size: 0 100%, auto; }
.month__grid.is-live .spark i, .month__grid.is-live .board i { transform: none; }
.month__grid.is-live .board i { background-size: var(--w) 100%, auto; }

/* ---------- smaller screens ---------- */
@media (max-width: 1024px) {
  .try, .estimate, .faq, .promise, .grow { grid-template-columns: 1fr; }
  .grow__copy { justify-self: start; }
  .promise .h2 { grid-row: auto; }
  .try__copy { max-width: 620px; }
  .review { width: 100%; max-width: 480px; }
  .estimate__copy { justify-self: start; }
  .faq .h2 { position: static; }
  .month__grid .card { grid-column: span 6; }
  .month__grid .card--big { grid-column: 1 / -1; grid-row: auto; gap: 32px; }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: 0; }
}
@media (max-width: 760px) {
  .rules__head, .pricing__head { grid-template-columns: 1fr; }
  .rules__list li { grid-template-columns: 40px 1fr; }
  .rules__list small { grid-column: 2; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .facts b { font-size: 1.2rem; letter-spacing: -0.03em; white-space: nowrap; }
  .month__grid .card { grid-column: 1 / -1; }
  .card { padding: 24px; }
  .review__body { padding: 32px 20px 24px; }
  .review__bar { justify-content: center; }
  .review__url { display: none; }
  .faq__list details p { padding-right: 0; }
  .spark { height: 88px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- ⚑ sample content markers: add ?dummy to the URL ---------- */
.show-dummy [data-dummy] { outline: 1.5px dashed oklch(62% 0.2 30); outline-offset: 4px; position: relative; }
.show-dummy [data-dummy]::after {
  content: "⚑ " attr(data-dummy); position: absolute; top: -12px; right: -6px; z-index: 5;
  padding: 2px 6px; border-radius: 4px; background: oklch(62% 0.2 30); color: white;
  font: 600 11px/1.3 var(--sans); letter-spacing: 0.02em; pointer-events: none;
}