/* zsmart.app, the AI-answer edition (2026-11-04): when customers ask Google, ChatGPT or Gemini, the business is the
   answer. The top is a photographed phone with the page's own chat on its screen; dark emerald chapters (the top, the
   method, the numbers, the close) between white and #f5f5f7 bands; matte green porcelain objects for the services.
   Earlier editions: lab/archive. One sans family (Noto Sans Hebrew), solid ink, ledgers on hairlines instead of card
   grids. Phone first; logical properties throughout (the page is RTL); no scroll-linked script motion on phones. */

/* ---------- type ---------- */
@font-face { font-family: "Noto Sans Hebrew"; src: url("/assets/fonts/v2/noto-sans-hebrew-300-900-w62.5100-hebrew.woff2") format("woff2"); font-weight: 300 900; font-stretch: 62.5% 100%; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Noto Sans Hebrew"; src: url("/assets/fonts/v2/noto-sans-hebrew-300-900-w62.5100-basic.woff2") format("woff2"); font-weight: 300 900; font-stretch: 62.5% 100%; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00B7, U+2013-2014, U+2018-201E, U+2022, U+2026; }

/* ---------- tokens ---------- */
:root {
  /* layout concept: centred product page; bands alternate white / #f5f5f7, the numbers and the close are night */
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --hero: #f1f0f5;           /* the old studio sweep (inner pages' fallbacks) */
  --hero-bg: #03130b;        /* the emerald studio's own floor at the hero's foot */
  --ink: #1d1d1f;
  --ink-2: #66666b;          /* Apple's #6e6e73, a touch darker: 4.5:1 on every grey band here */
  --ink-3: #86868b;
  --line: #d2d2d7;
  --green: #127a45;          /* ZSMART green: actions */
  --green-press: #0e6a3b;
  --green-ink: #0b2a1d;      /* ZSMART ink green */
  --mint: #3ee09a;           /* light only: caustics, focus on night, small marks */
  --night: #020a07;          /* the dark studio's own black */
  --night-2: #0b1511;
  --night-3: #13201a;
  --on-night: #f5f5f7;
  --on-night-2: #a1a1a6;
  --night-line: #26332d;
  /* legacy names the legal pages use */
  --white: #fff;
  --ink-soft: var(--ink-2);
  --line-2: var(--line);
  --line-strong: #b8b8be;
  --on-night-1: var(--on-night);
  --font: "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --t--1: 0.875rem;
  --t-small: 0.875rem;
  --t-0: 1.0625rem;
  --t-1: 1.25rem;
  --t-4: 2.5rem;
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --r: 1.75rem;              /* Apple's tile radius */
  --r-2: 1.125rem;
  --gut: 1.5rem;
  --nav-h: 3.25rem;
  --band: clamp(5.5rem, 4rem + 6vw, 10rem);
  --band-sm: clamp(4.5rem, 3.5rem + 4vw, 7.5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ui: cubic-bezier(0.25, 0.1, 0.25, 1);
  --grad: linear-gradient(to left, #0b2a1d 0%, #127a45 55%, #1c9a5f 100%);
  --grad-night: linear-gradient(to left, #f5f5f7 0%, #c9f7df 45%, #3ee09a 100%);
  /* a fine speckle on the dark chapters, so the deep greens read as a material and never band */
  --grain: url("/assets/visuals/grain-v1.webp") 0 0 / 160px 160px;
}
@media (min-width: 48rem) { :root { --gut: 2.5rem; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 1rem); }
/* the home page starts and ends on dark green, so an iPhone's pull past either end shows the same dark, never white */
html:has(.hero) { background: var(--night); }
html { overflow-x: clip; }
a, button, summary, label { -webkit-tap-highlight-color: rgb(18 122 69 / 0.12); }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0;
  font: 400 var(--t-0) / 1.6 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgb(62 224 154 / 0.35); }
input, textarea { caret-color: var(--green); }
.hero input { caret-color: var(--mint); }
[hidden] { display: none !important; }

/* the side gutter grows to the notch on a phone held sideways (viewport-fit=cover) */
.wrap { width: min(100% - 2 * max(var(--gut), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 69rem); margin-inline: auto; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: var(--t-small); color: var(--ink-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; z-index: 100; inset-block-start: 0.75rem; inset-inline-start: 0.75rem;
  padding: 0.6rem 1rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform 0.2s var(--ease-ui);
}
.skip:focus-visible { transform: none; }

/* ---------- words ---------- */
.eyebrow { display: block; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); font-weight: 600; line-height: 1.25; color: var(--ink); }
.headline {
  font-size: clamp(2.25rem, 1.35rem + 3.7vw, 4.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.numbers .headline, .contact .headline { color: var(--on-night); }
.intro { font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem); font-weight: 450; line-height: 1.5; color: #515154; max-width: 38rem; text-wrap: pretty; }
.intro b { color: var(--ink); }
.sec-head { display: grid; justify-items: start; gap: 0.9rem; text-align: start; }
@media (min-width: 60rem) {
  .sec-head { grid-template-columns: 1.15fr 0.85fr; column-gap: 4rem; align-items: end; }
  .sec-head > .headline { grid-column: 1; grid-row: 1 / span 3; align-self: end; }
  .sec-head > .intro, .sec-head > .name-field { grid-column: 2; }
  .sec-head > .intro { margin: 0; padding-block-end: 0.35rem; }
}

.sec-head .intro { margin-top: 0.4rem; }
.cta-line { display: flex; justify-content: flex-start; margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.cta-line .more { font-size: 1.0625rem; font-weight: 600; }

/* ---------- actions ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.6rem 1.35rem;
  border: 1px solid transparent; border-radius: 980px;
  background: var(--green); color: #fff;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s var(--ease-ui), color 0.2s var(--ease-ui), border-color 0.2s var(--ease-ui), transform 0.16s var(--ease-out);
}
.pill svg { width: 1.15em; height: 1.15em; flex: none; }
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: var(--green-press); } }
.pill-sm { position: relative; min-height: 2rem; padding: 0.3rem 0.95rem; font-size: 0.875rem; }
.pill-sm::after { content: ""; position: absolute; inset: -0.4rem -0.2rem; }
.pill-lg { min-height: 3.25rem; padding: 0.8rem 1.6rem; font-size: 1.125rem; }

.pill-mint { background: var(--mint); color: #04170e; }
@media (hover: hover) and (pointer: fine) { .pill-mint:hover { background: #63e8ae; } }
.pill-ghost { background: transparent; color: var(--on-night); border-color: rgb(245 245 247 / 0.35); }
@media (hover: hover) and (pointer: fine) { .pill-ghost:hover { background: rgb(245 245 247 / 0.1); border-color: rgb(245 245 247 / 0.6); } }
.more {
  display: inline-flex; align-items: center; gap: 0.15rem; min-height: 2.75rem;
  color: var(--green); font-weight: 500; text-decoration: none;
}
.more svg { width: 1rem; height: 1rem; transition: translate 0.2s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) {
  .more:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  .more:hover svg { translate: -2px 0; }
}
.more-night { color: var(--mint); }
.link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.3); text-underline-offset: 0.3em; }
.link svg { width: 1.2em; height: 1.2em; }

/* ---------- the logo ---------- */
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: 4px; color: var(--green); text-decoration: none; }
.brand svg { height: 1.25rem; width: auto; overflow: visible; }
.brand-he { display: none; }
.mark-fill { fill: var(--green); }
.word-fill { fill: var(--green); }
.zdraw { fill: none; stroke: #fff; stroke-width: 18.5; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.zsheen { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .brand-top .zdraw { stroke-dashoffset: 1; animation: z-draw 1.15s var(--ease-io) 0.25s forwards; }
  html.js .brand-top .word-fill { opacity: 0; animation: fade-in 0.6s var(--ease-out) 1.05s forwards; }
  html.js .brand-top .zsheen { animation: z-sheen 0.95s var(--ease-io) 1.35s 1 both; }
  .card.is-drawn .card-front .zdraw { animation: z-draw 1.1s var(--ease-io) 0.1s both; }
  .card.is-drawn .card-front .zsheen { animation: z-sheen 0.9s var(--ease-io) 1.15s 1 both; }
  html.js .card:not(.is-drawn) .card-front .zdraw { stroke-dashoffset: 1; }
}
@keyframes z-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes z-sheen {
  0% { opacity: 0; transform: translateX(-70px) skewX(-18deg); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(130px) skewX(-18deg); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- local nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 251 253 / 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-ui), background-color 0.3s var(--ease-ui);
}
.nav.is-scrolled { border-bottom-color: rgb(0 0 0 / 0.1); }
/* over the night sections the bar turns dark, as Apple's does */
.nav .mark-fill, .nav .word-fill { transition: fill 0.3s var(--ease-ui); }
.nav.is-dark { background: rgb(4 20 13 / 0.6); border-bottom-color: rgb(255 255 255 / 0.07); }
.nav.is-dark .nav-links a { color: var(--on-night); }
.nav.is-dark .mark-fill, .nav.is-dark .word-fill { fill: var(--on-night); }
.nav.is-dark .pill-sm { background: var(--mint); color: #04170e; }
.nav.is-dark :focus-visible { outline-color: var(--mint); }
.nav-in { display: flex; align-items: center; gap: 1.5rem; width: min(100% - 2 * max(var(--gut), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 69rem); height: var(--nav-h); margin-inline: auto; }
.nav-links { display: none; margin-inline-start: auto; gap: 1.6rem; font-size: 0.875rem; }
.nav-links a { color: var(--ink); opacity: 0.8; text-decoration: none; padding-block: 0.6rem; }
.nav-links a:hover { opacity: 1; }
.nav .pill-sm { margin-inline-start: auto; }
@media (min-width: 48rem) {
  .nav-links { display: flex; }
  .nav .pill-sm { margin-inline-start: 0; }
}
@media (max-width: 47.99rem) {
  html.js .nav .pill-sm { display: none; }
  /* on a phone the logo is the bar's only item: it sits in the middle */
  html.js .nav-in { justify-content: center; }
}

/* ---------- the dock: on a phone, the one action sits under the thumb once the hero's own button has gone ----------
   It arrives after the hero and leaves before the close (which has the same buttons), so it never doubles one. */
.dock { display: none; }
@media (max-width: 47.99rem) {
  html.js .dock {
    position: fixed; z-index: 60; inset-inline: max(0.75rem, env(safe-area-inset-left, 0px)); inset-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem;
    border-radius: 980px; background: rgb(251 251 253 / 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 18px 40px -18px rgb(0 0 0 / 0.45);
    transform: translate3d(0, calc(100% + 2rem), 0); opacity: 0; pointer-events: none;
    transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-ui);
  }
  html.js .dock.is-on { transform: none; opacity: 1; pointer-events: auto; }
  html.js .dock.is-dark { background: rgb(11 21 17 / 0.8); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 18px 40px -18px rgb(0 0 0 / 0.6); }
  .dock.is-dark .pill { background: var(--mint); color: #04170e; }
  .dock.is-dark .dock-call { background: rgb(255 255 255 / 0.1); color: var(--mint); }
  .dock .pill { flex: 1; min-height: 3rem; }
  .dock-call { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #e9f6ef; color: var(--green); }
  .dock-call svg { width: 1.25rem; height: 1.25rem; }
}

/* ---------- hero: the answer ----------
   The page's one idea: when a customer asks Google, ChatGPT or Gemini who to hire, the business should be the
   answer. The words lead; beside them a phone shows a customer's question and an AI answer that names the visitor's
   business (they type its name; site.js carries it into the answer and the messages) with its website as the source.
   It is labelled as an illustration. On a phone the words come first, so the button is on the first screen. */
.hero {
  position: relative; margin-block-start: calc(-1 * var(--nav-h)); overflow: clip; color: var(--on-night);
  padding-block: calc(var(--nav-h) + clamp(2rem, 1rem + 4vw, 4.5rem)) 0;
  background: var(--grain), radial-gradient(60% 55% at 22% 42%, rgb(20 90 54 / 0.55) 0%, rgb(20 90 54 / 0) 70%), var(--hero-bg);
}
.hero-in { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.hero-copy { display: grid; justify-items: start; gap: 1rem; text-align: start; }
.hero h1 { display: grid; gap: 0.6rem; }
.hero .eyebrow { color: var(--mint); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 600; }
.hero-line { display: block; overflow: hidden; padding-block-end: 0.1em; margin-block-end: -0.1em; }
.hero-line-in {
  display: block; font-size: clamp(2.25rem, 1.35rem + 3.9vw, 4.375rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; color: #f5f5f7; padding-block-end: 0.06em;
}
.hero-sub { max-width: 36rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.6; color: rgb(245 245 247 / 0.76); text-wrap: pretty; }
.hero-name { margin-block-start: 0.5rem; width: min(100%, 24rem); justify-items: stretch; }
.hero-name label { font-size: 0.9375rem; font-weight: 600; color: rgb(245 245 247 / 0.8); }
.hero .hero-name input { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.22); color: #fff; }
.hero .hero-name input::placeholder { color: rgb(245 245 247 / 0.62); }
.hero .hero-name input:focus-visible { border-color: var(--mint); box-shadow: 0 0 0 4px rgb(62 224 154 / 0.2); }
.hero-name .name-note { color: var(--mint); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-block-start: 0.25rem; }
.hero-note { margin-block-start: -0.35rem; font-size: 0.9375rem; color: rgb(245 245 247 / 0.6); }
.hero :focus-visible { outline-color: var(--mint); }

/* the phone: a customer's question, then the answer, then its source */
.hero-ask { margin: 0; display: grid; justify-items: center; gap: 0.9rem; }
.hero-ask figcaption { max-width: 20rem; font-size: 0.8125rem; line-height: 1.45; color: rgb(245 245 247 / 0.5); text-align: center; text-wrap: balance; }
.hero .ask-phone { position: relative; width: min(16.5rem, 70vw); filter: drop-shadow(0 40px 50px rgb(0 0 0 / 0.55)); }
.ask-phone img { display: block; width: 100%; height: auto; }
/* the photograph's screen (brand/visuals-2026-11-04/export.py measured it); the chat sits just inside it */
.ask-phone .ask-screen { position: absolute; left: 6.6%; top: 5.4%; width: 86.8%; height: 90.5%; overflow: hidden; border-radius: 10% / 4.8%; padding: 13% 5.5% 6%; }
.ask-screen { display: flex; flex-direction: column; gap: 0.85rem; color: var(--ink); text-align: start; }
.ask-status { position: absolute; inset-block-start: 2.6%; inset-inline: 9%; display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.ask-sig { display: inline-flex; align-items: center; gap: 0.28rem; direction: ltr; }
.ask-sig svg { display: block; height: 0.62rem; width: auto; }
.ask-sig svg:last-child { height: 0.7rem; }
.ask-top { display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding-block-end: 0.6rem; border-bottom: 1px solid #ececf0; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.ask-top i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: conic-gradient(from 200deg, var(--mint), var(--green), #9be7c4, var(--mint)); }
.ask-q { align-self: flex-end; max-width: 86%; padding: 0.6rem 0.85rem; border-radius: 1.1rem; border-end-end-radius: 0.35rem; background: var(--ink); color: #fff; font-size: 0.875rem; line-height: 1.4; transition: opacity 0.35s var(--ease-ui), translate 0.35s var(--ease-out); }
.ask-a { display: grid; justify-items: start; gap: 0.55rem; transition: opacity 0.3s var(--ease-ui); }
.ask-text { font-size: 0.9rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; transition: opacity 0.5s var(--ease-ui), translate 0.5s var(--ease-out); }
.ask-text b { color: var(--green); }
.ask-src { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 980px; background: #eef6f1; color: var(--green-ink); font-size: 0.72rem; transition: opacity 0.5s var(--ease-ui) 0.1s, translate 0.5s var(--ease-out) 0.1s; }
.ask-src span { color: var(--ink-2); }
.ask-src b { font-weight: 600; }
.ask-dots { display: none; gap: 0.3rem; padding: 0.55rem 0.2rem; }
.ask-dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #c7c7cc; animation: ask-dot 1s var(--ease-io) infinite; }
.ask-dots i:nth-child(2) { animation-delay: 0.15s; }
.ask-dots i:nth-child(3) { animation-delay: 0.3s; }
/* the answer arrives word by word, the way an assistant writes it; then its source, then the business's card */
.ask-text .w { display: inline; }
@keyframes ask-word { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes ask-in { from { opacity: 0; translate: 0 0.4rem; } to { opacity: 1; translate: none; } }
@keyframes ask-dot { 0%, 100% { opacity: 0.35; translate: 0 0; } 50% { opacity: 1; translate: 0 -2px; } }
.ask-card { display: grid; gap: 0.25rem; width: 100%; padding: 0.7rem 0.8rem; border-radius: 0.9rem; border: 1px solid #e6e6eb; background: #fff; box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.25); transition: opacity 0.5s var(--ease-ui) 0.2s, translate 0.5s var(--ease-out) 0.2s; }
.ask-card b { font-size: 0.875rem; color: var(--ink); overflow-wrap: anywhere; }
.ask-card .ms-open { font-size: 0.68rem; }
.ask-card .ms-btns { margin-block-start: 0.2rem; }
.ask-card .ms-btns b { height: 1.6rem; font-size: 0.6rem; color: #fff; }
.ask-card .ms-btns b + b { color: var(--green); }
.ask-input { margin-block-start: auto; padding: 0.65rem 1rem; border-radius: 980px; background: #f0f0f3; color: var(--ink-2); font-size: 0.8rem; }
/* the input bar: placeholder, the question being typed with its caret, and the send button that lights up */
.ask-input { display: flex; align-items: center; gap: 0.5rem; }
.ask-typed { color: var(--ink); }
@keyframes caret { 50% { opacity: 0; } }
.ask-send { display: grid; place-items: center; inline-size: 1.45rem; block-size: 1.45rem; margin-inline-start: auto; border-radius: 50%; background: #dcdce1; color: #fff; transition: background-color 0.25s var(--ease-ui), scale 0.25s var(--ease-out); }
.ask-send svg { inline-size: 0.8rem; block-size: 0.8rem; }

@media (min-width: 60rem) {
  .hero-in { grid-template-columns: 1.15fr 0.85fr; align-items: center; column-gap: 4rem; min-height: min(calc(100svh - var(--nav-h) - 8rem), 40rem); }
  .hero .ask-phone { width: 21rem; }
}

/* the facts at the hero's foot: three numbers from the way the work runs (the steps below say the same) */
.hero-facts {
  position: relative; z-index: 2; display: grid; margin-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.hero-facts > div { display: grid; gap: 0.3rem; padding-block: 1rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.hero-facts dt { font-size: clamp(1.5rem, 1.25rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.012em; color: #f5f5f7; }
.hero-facts dd { margin: 0; max-width: 24ch; font-size: 0.98rem; line-height: 1.45; color: rgb(245 245 247 / 0.66); text-wrap: balance; }
@media (min-width: 48rem) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .hero-facts > div { padding: 1.5rem 0 0; padding-inline-end: 2rem; border-bottom: 0; border-top: 1px solid rgb(255 255 255 / 0.14); }
  .hero-facts > div + div { padding-inline-start: 2rem; border-inline-start: 1px solid rgb(255 255 255 / 0.08); }
}

/* the pause control the dark chapter's loop uses */
.hero-pause {
  position: absolute; z-index: 3; inset-block-end: 0.9rem; inset-inline-end: var(--gut);
  display: none; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.05); color: rgb(29 29 31 / 0.55); cursor: pointer;
  transition: background 0.2s var(--ease-ui), color 0.2s var(--ease-ui);
}
.hero-pause::after { content: ""; position: absolute; inset: -0.5rem; }
.hero-pause svg { width: 0.85rem; height: 0.85rem; }
.hero-pause .i-play { display: none; }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; translate: 0 1rem; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); transition-delay: var(--d, 0s); }
  html.js [data-reveal].is-in { opacity: 1; translate: none; }
}

/* ---------- what stops owners: their own thought, then the answer (set like a page, not as cards) ---------- */
.fears { padding-block: var(--band) calc(var(--band) * 0.6); background: var(--bg); }
.service { padding-block: var(--band); background: var(--bg-2); }
.svc-list .fear-q { color: var(--green-ink); }
.fear-list { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-top: 1px solid var(--ink); }
.fear-list li { display: grid; gap: 0.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.fear-q { hanging-punctuation: first; font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.008em; color: var(--ink); text-wrap: balance; }
.fear-a { max-width: 36rem; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; color: #48484d; text-wrap: pretty; }
.fears-close { margin-block-start: 1.75rem; font-size: 1.125rem; color: #48484d; }
.fears-close .more { font-weight: 600; }
@media (min-width: 60rem) {
  .fear-list li { grid-template-columns: 1.15fr 0.85fr; column-gap: 4rem; align-items: baseline; padding-block: 1.9rem; }
}

/* the method: how a business becomes the answer (on the hero's green, so the idea reads as one chapter) */
.method { padding-block: var(--band); background: var(--grain), var(--hero-bg); color: var(--on-night); }
.method .headline { color: #f5f5f7; }
.method .intro { color: rgb(245 245 247 / 0.72); }
.method .fear-list { border-top-color: rgb(255 255 255 / 0.4); }
.method .fear-list li { border-bottom-color: rgb(255 255 255 / 0.12); }
.method .fear-q { color: #f5f5f7; }
.method .fear-a { color: rgb(245 245 247 / 0.7); }
.method-list li { position: relative; padding-inline-start: 2.75rem; }
.step-no { position: absolute; inset-inline-start: 0; inset-block-start: 1.55rem; font-size: 1.125rem; font-weight: 700; color: var(--mint); font-variant-numeric: tabular-nums; }
.method-note { margin-block-start: 1.75rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.6; color: rgb(245 245 247 / 0.62); }
.method :focus-visible { outline-color: var(--mint); }
@media (min-width: 60rem) { .step-no { inset-block-start: 2.05rem; } }

/* ---------- who it is for: the trades as glass objects, one row ---------- */
.trades { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.25rem); text-align: center; }
.trades-line { font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem); font-weight: 600; color: var(--ink); }
.trades-list {
  display: flex; gap: 0.75rem; margin-block-start: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-inline: max(var(--gut), (100% - 69rem) / 2); padding-block: 0.25rem;
}
.trades-list::-webkit-scrollbar { display: none; }
@media (max-width: 71.99rem) {
  .trades-list { padding-inline-end: 3.5rem; -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3.5rem), transparent); }
}
.trades-list li { flex: 0 0 5.5rem; display: grid; justify-items: center; align-content: start; gap: 0.45rem; scroll-snap-align: start; font-size: 0.875rem; line-height: 1.25; color: var(--ink); text-align: center; }
.trades-list .trade-icon { display: block; width: 3.5rem; height: 3.5rem; object-fit: contain; transition: translate 0.4s var(--ease-out), filter 0.3s var(--ease-ui); }
.trade {
  display: grid; justify-items: center; align-content: start; gap: 0.45rem; inline-size: 100%; min-block-size: 2.75rem;
  padding: 0.5rem 0.25rem 0.6rem; border: 0; border-radius: 1rem; background: none; color: inherit; font: inherit; cursor: pointer;
  transition: background-color 0.25s var(--ease-ui), color 0.25s var(--ease-ui);
}
.trade span { text-wrap: balance; }
.trade[aria-pressed="true"] { background: #fff; color: var(--green); font-weight: 600; box-shadow: 0 0 0 1px rgb(18 122 69 / 0.22), 0 10px 22px -16px rgb(11 42 29 / 0.5); }
.trade[aria-pressed="true"] .trade-icon { translate: 0 -0.15rem; }
.trades-list:has([aria-pressed="true"]) .trade:not([aria-pressed="true"]) .trade-icon { filter: saturate(0.55) opacity(0.7); }
.trade:active { scale: 0.96; }
@media (hover: hover) and (pointer: fine) { .trade:hover .trade-icon { translate: 0 -0.15rem; } .trade:hover { color: var(--green); } }
.trade-note { min-block-size: 3.2em; max-inline-size: 40rem; margin-block-start: 1.1rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; text-align: center; }
.trade-note b { color: var(--ink); font-weight: 600; }
.trade-hint { color: var(--ink-3); }
@media (min-width: 72rem) {
  .trades-list { flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; column-gap: 0.25rem; overflow: visible; max-width: 69rem; margin-inline: auto; }
  .trades-list li { flex-basis: 6.5rem; }
}

/* ---------- what I build: six cells, each with its own drawn product ----------
   Text on top, the product below it running off the cell's edge (it reads as the real thing, cropped).
   Computer: three columns; the site takes a tall cell, booking and ordering take wide ones with the words beside
   the product; reviews, Google and the second language share the last row. Phone: one column, in reading order. */
.build { padding-block: var(--band); background: radial-gradient(70% 38rem at 50% 0, #e6f3ec 0%, rgb(230 243 236 / 0) 100%), var(--bg); }
.bento { display: grid; gap: 1rem; margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cell {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: hidden;
  min-height: 28rem; border-radius: var(--r); background: var(--bg-2);
}
.cell-text { position: relative; z-index: 4; padding: 2rem 1.75rem 0; }
.cell h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.014em; text-wrap: balance; }
.cell-text p { margin-block-start: 0.55rem; max-width: 30rem; color: #58585d; font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.cell-art { position: relative; min-width: 0; min-height: 16.5rem; }
@media (max-width: 47.99rem) { .cell { min-height: 0; } .cell-text p { font-size: 1rem; } }

@media (min-width: 48rem) {
  .bento { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .cell-site { grid-row: span 2; }
  .cell-lang { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-template-rows: 26rem 26rem 25rem; }
  .cell { min-height: 0; }
  .cell-site { grid-column: 1; grid-row: 1 / span 2; }
  .cell-book { grid-column: 2 / span 2; grid-row: 1; }
  .cell-leads { grid-column: 2 / span 2; grid-row: 2; }
  .cell-lang { grid-column: auto; }
  .cell-book, .cell-leads { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr; }
  .cell-book .cell-text, .cell-leads .cell-text { padding: 2.5rem 2.25rem; align-self: start; }
  .cell-site .cell-text { padding: 2.5rem 2.25rem 0; }
  .cell-text { padding: 2rem 2rem 0; }
}

/* each service is one solid object (brand/visuals-2026-11-04), standing at the foot of its card; on a computer the
   wide cells (booking, requests) hold theirs in the middle of the side beside the words */
.cell-art { display: grid; place-items: end center; padding-inline: 1.25rem; }
.svc-obj { position: relative; display: block; width: min(76%, 19rem); margin-block-end: 1.25rem; transition: translate 0.7s var(--ease-out); }
.svc-obj .svc-img { display: block; width: 100%; height: auto; }
.cell-site .svc-obj { width: min(84%, 22rem); }
@media (min-width: 60rem) {
  .cell-book .cell-art, .cell-leads .cell-art { place-items: center; padding: 1.5rem; }
  .cell-book .svc-obj, .cell-leads .svc-obj { width: min(88%, 17rem); margin-block-end: 0; }
  .cell-site .cell-art { place-items: center; }
  .cell-site .svc-obj { width: min(100%, 24rem); margin-block-end: 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .cell:hover .svc-obj { translate: 0 -2%; } }

.build-more { margin-block-start: 1.75rem; text-align: start; color: var(--ink-2); text-wrap: balance; }
.build-more .more { min-height: 2.75rem; }

/* the phone, drawn in CSS: a frame and a little site */
.device {
  position: relative; width: 13.5rem; aspect-ratio: 9 / 18.6; padding: 0.55rem;
  border-radius: 2.4rem; background: #1d1d1f;
  box-shadow: 0 0 0 1px #3a3a3c inset, 0 30px 60px -24px rgb(0 0 0 / 0.35);
}
.device::before { content: ""; position: absolute; z-index: 2; inset-block-start: 1.05rem; left: 50%; width: 28%; height: 1.15rem; translate: -50% 0; border-radius: 1rem; background: #000; }
.device-screen { position: relative; height: 100%; overflow: hidden; border-radius: 1.9rem; background: #fbfbfd; padding: 2.6rem 0.85rem 1rem; display: grid; align-content: start; gap: 0.6rem; }
.ms { border-radius: 0.6rem; }
.ms-photo { aspect-ratio: 16 / 11; border-radius: 0.9rem; background: radial-gradient(120% 90% at 30% 20%, #d9f5e7 0%, #9ed9bd 38%, #3d8f69 100%); }
.ms-name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.ms-open { display: flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; color: var(--ink-2); }
.ms-open i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #1fbf6b; box-shadow: 0 0 0 3px rgb(31 191 107 / 0.18); }
.ms-open.is-closed i { background: #a1a1a6; box-shadow: 0 0 0 3px rgb(161 161 166 / 0.2); }
.ms-btns { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 0.35rem; }
.ms-btns b { display: grid; place-items: center; height: 1.9rem; padding-inline: 0.2rem; white-space: nowrap; overflow: hidden; border-radius: 980px; background: var(--green); color: #fff; font-size: 0.62rem; font-weight: 600; }
.ms-btns b + b { background: #e9f6ef; color: var(--green); }
.ms-rows { display: grid; margin-block-start: 0.2rem; border-top: 1px solid #ececf0; }
.ms-rows span { display: flex; align-items: center; justify-content: space-between; padding-block: 0.5rem; border-bottom: 1px solid #ececf0; font-size: 0.68rem; font-weight: 600; color: var(--ink); }
.ms-rows span::after { content: ""; inline-size: 0.32rem; block-size: 0.32rem; border-inline-start: 1.5px solid #a1a1a6; border-block-end: 1.5px solid #a1a1a6; rotate: 45deg; }
.ms-bar { display: flex; justify-content: center; margin-block-end: 0.15rem; }
.ms-url { padding: 0.25rem 0.7rem; border-radius: 980px; background: #eceef0; font-size: 0.56rem; color: var(--ink-2); }

/* the chat */
.chat { display: grid; gap: 0.85rem; width: min(100% - 3rem, 21rem); }
.bubble { position: relative; max-width: 86%; padding: 0.7rem 0.95rem 1.35rem; border-radius: 1.15rem; font-size: 0.98rem; line-height: 1.4; box-shadow: 0 1px 1.5px rgb(0 0 0 / 0.08); }
.bubble time { position: absolute; inset-block-end: 0.35rem; inset-inline-end: 0.8rem; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: #56656e; font-variant-numeric: tabular-nums; }
.bubble time svg { width: 0.95rem; height: 0.95rem; color: #34b7f1; }
.bubble-in { justify-self: start; background: #fff; border-start-start-radius: 0.35rem; }
.bubble-out { justify-self: end; background: #d9fdd3; border-start-end-radius: 0.35rem; }

/* Ilan */
.who { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.who-avatar { display: grid; place-items: center; width: 7rem; height: 7rem; margin-block-end: 0.9rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.6rem #e9f6ef; }
.who-avatar svg { width: 44%; }
.who b { font-size: 1.5rem; }
.who span { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- how it works ---------- */
.how { padding-block: calc(var(--band) * 0.45) 0; background: var(--bg); overflow: clip; } /* the stage's soft edge stays inside the section */
.name-field { display: grid; justify-items: start; gap: 0.6rem; margin-block-start: 1.5rem; width: min(100%, 24rem); }
.name-field label { font-weight: 600; }
.name-field input {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 1.1rem;
  border: 1px solid var(--line); border-radius: 0.9rem; background: var(--bg);
  font-size: 1.0625rem; text-align: start;
  transition: border-color 0.2s var(--ease-ui), box-shadow 0.2s var(--ease-ui);
}
.name-field input::placeholder { color: var(--ink-2); }
.name-field input:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgb(18 122 69 / 0.15); }
.name-note { min-height: 1.4em; font-size: var(--t-small); color: var(--ink-2); }
.how-track { position: relative; display: grid; margin-block-start: 2.5rem; }
.how-stage {
  position: sticky; z-index: 2; top: var(--nav-h);
  display: grid; place-items: center;
  height: 46svh; padding-block: 0.75rem 1.4rem;
  background: var(--bg);
}
.how-stage::after { content: ""; position: absolute; inset: 100% 0 auto; height: 2.5rem; background: linear-gradient(var(--bg), rgb(255 255 255 / 0)); pointer-events: none; }
.how-stage .device { height: 100%; width: auto; }
.how-progress { position: absolute; inset-block-end: 0.4rem; left: 50%; translate: -50% 0; display: flex; gap: 0.35rem; }
.how-progress li { position: relative; width: 1.75rem; height: 0.25rem; overflow: hidden; border-radius: 1rem; background: #e2e2e7; }
.how-progress li::after { content: ""; position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-out); }
.how-progress li.is-done::after { transform: scaleX(1); }
.how-steps { position: relative; z-index: 1; display: grid; }
.step { min-height: 38svh; padding-block: 1.75rem 1rem; transition: opacity 0.5s var(--ease-ui); }
/* the step being read: its number fills green and its title darkens (the text stays fully readable) */
.step h3 { color: var(--ink-2); transition: color 0.4s var(--ease-ui); }
.step.is-on h3, html:not(.js) .step h3 { color: var(--ink); }
.step:last-child { min-height: 52svh; }
.step-n { margin-block-end: 0.45rem; color: var(--ink-3); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease-ui); }
.step.is-on .step-n, html:not(.js) .step-n { color: var(--green); }
.step h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); font-weight: 700; line-height: 1.2; }
.step p:last-child { margin-block-start: 0.6rem; max-width: 30rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); }
@media (min-width: 48rem) {
  .how { padding-block-end: calc(var(--band) * 0.6); }
  .how-track { grid-template-columns: 1fr 1fr; grid-template-areas: "steps stage"; gap: 3rem; margin-block-start: 3.5rem; }
  .how-stage { grid-area: stage; top: calc(var(--nav-h) + 2rem); height: calc(100svh - var(--nav-h) - 4rem); max-height: 46rem; padding: 0 0 2.25rem; }
  .how-stage::after { display: none; }
  .how-steps { grid-area: steps; }
  .step { min-height: 56svh; display: grid; align-content: center; padding-block: 0; }
  .step:first-child { min-height: 50svh; align-content: start; padding-block-start: 10svh; }
  .step:last-child { min-height: 60svh; }
}
/* the phone's states: 1 the chat, 2 the site assembles, 3 to look at, 4 live */
.device-lg { width: auto; }
.device-lg .device-screen { gap: 0; padding: 0; }
.st { position: absolute; inset: 0; padding: 2.9rem 0.95rem 1rem; display: grid; align-content: start; gap: 0.65rem; transition: opacity 0.6s var(--ease-ui); }
.st-chat { background: linear-gradient(#efeae2, #e7e1d8); }
.st-chat-head { display: flex; align-items: center; gap: 0.55rem; margin: -0.4rem -0.95rem 0.5rem; padding: 0.4rem 0.95rem 0.7rem; background: #fbfbfd; font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid #e5e5ea; }
.st-chat-head .who-avatar { width: 1.9rem; height: 1.9rem; margin: 0; box-shadow: none; }
.st-chat .bubble { font-size: 0.78rem; padding: 0.55rem 0.75rem; }
.st-site { opacity: 0; }
.st-site .ms-name { font-size: 1.15rem; }
.st-badge {
  position: absolute; z-index: 3; inset-block-end: 1.2rem; left: 50%; translate: -50% 0.5rem;
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border-radius: 980px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap; opacity: 0;
  transition: opacity 0.5s var(--ease-ui), translate 0.5s var(--ease-out);
}
.st-badge-look { background: #1d1d1f; color: #fff; }
.st-badge-live { background: var(--green); color: #fff; }
.st-badge-live i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--mint); }
.device-lg[data-stage="1"] .st-chat { opacity: 1; }
.device-lg:not([data-stage="1"]) .st-chat { opacity: 0; }
.device-lg:not([data-stage="1"]) .st-site { opacity: 1; }
.device-lg[data-stage="3"] .st-badge-look, .device-lg[data-stage="4"] .st-badge-live { opacity: 1; translate: -50% 0; }
.device-lg .ms-bar { visibility: hidden; }
.device-lg[data-stage="4"] .ms-bar { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  html.js .st-site .ms { opacity: 0; translate: 0 0.75rem; transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out); }
  html.js .device-lg:not([data-stage="1"]) .st-site .ms { opacity: 1; translate: none; }
  .st-site .ms:nth-child(2) { transition-delay: 0.05s; }
  .st-site .ms:nth-child(3) { transition-delay: 0.2s; }
  .st-site .ms:nth-child(4) { transition-delay: 0.32s; }
  .st-site .ms:nth-child(5) { transition-delay: 0.44s; }
  .st-site .ms:nth-child(6) { transition-delay: 0.56s; }
  .st-site .ms:nth-child(7) { transition-delay: 0.64s; }
  .st-site .ms:nth-child(8) { transition-delay: 0.72s; }
}

/* ---------- the numbers (night) ---------- */
.numbers { padding-block: var(--band); background: var(--night); color: var(--on-night); }
.numbers .eyebrow { color: var(--on-night); }
.numbers .intro { color: var(--on-night-2); }
.numbers-art { display: flex; flex-direction: column; }
.numbers-head { order: -1; position: relative; z-index: 3; }
.numbers-z { position: relative; overflow: hidden; margin-block: -1rem -2rem; }
.numbers-z picture { display: block; }
/* the night loop and the orbit scrub sit on the still, with its mask and its scroll transform */
.night-loop, .night-scrub {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 1.2s var(--ease-ui); pointer-events: none; display: none;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
}
.night-scrub { display: block; }
.numbers.is-lit .night-loop, .numbers.is-scrub .night-scrub { opacity: 1; }
.numbers.is-scrub .night-loop { display: none !important; }
.night-pause { display: none; background: rgb(255 255 255 / 0.12); color: rgb(245 245 247 / 0.85); inset-block-start: 1.25rem; }
.numbers.is-lit .night-pause, .numbers.is-paused .night-pause { display: grid; }
.numbers.is-paused .night-pause .i-pause { display: none; }
.numbers.is-paused .night-pause .i-play { display: block; }
@media (min-width: 48rem) { .night-loop { display: block; } }
.numbers-veil { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
.numbers-art img {
  width: 100%; height: auto; aspect-ratio: 1280 / 1500; object-fit: cover; object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
}
@media (min-width: 48rem) {
  .numbers-z { margin-block: -3rem -4rem; }
  .numbers-art img { aspect-ratio: 16 / 7.2; object-position: 50% 50%; }
}
.stats { display: grid; width: min(100% - 2 * max(var(--gut), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 58rem); margin-block-start: 1.5rem; border-top: 1px solid var(--night-line); }
.stat { display: grid; gap: 0.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--night-line); }
.stat-num {
  display: inline-flex; align-items: baseline; gap: 0.08em; justify-self: start;
  font-size: clamp(2.75rem, 2.2rem + 2.6vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; direction: ltr; color: var(--on-night);
}
.stat-num i { font-style: normal; font-size: 0.5em; font-weight: 600; color: var(--mint); }
.stat-num-text { direction: rtl; letter-spacing: 0; font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); }
.stat-text { font-size: 1.0625rem; line-height: 1.55; color: var(--on-night-2); max-width: 36rem; text-wrap: pretty; }
.stat-text b { color: var(--on-night); }
.fn {
  display: inline; margin-inline-start: 0.15em; font-size: max(0.75em, 0.75rem); font-weight: 600; line-height: 1;
  vertical-align: super; color: inherit; text-decoration: none; opacity: 0.8;
  /* a finger-sized target around a small number, without moving the line */
  padding: 0.85rem 1.2rem; margin: -0.85rem -1.05rem;
  border-radius: 0.4rem;
}
/* coming back from a source: the number it belongs to lights up for a moment */
.fn:target { animation: fn-lit 1.6s var(--ease-out); }
@keyframes fn-lit { 0%, 40% { background: rgb(62 224 154 / 0.28); opacity: 1; } 100% { background: transparent; } }
/* a word joiner: a source number never starts a line on its own */
.fn::before { content: "\2060"; }
.fn:hover { opacity: 1; text-decoration: underline; }
@media (min-width: 48rem) {
  .stat { grid-template-columns: 11rem 1fr; align-items: start; column-gap: 2.5rem; padding-block: 2rem; }
  .stat-num { padding-block-start: 0.1rem; }
}
.numbers :focus-visible, .contact :focus-visible, .foot :focus-visible { outline-color: var(--mint); }

/* ---------- before comparing a price ---------- */
.compare { padding-block: var(--band); background: var(--bg-2); }
.compare-in { display: grid; justify-items: center; gap: 1.75rem; max-width: 60rem; margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; text-align: start; }
.vs th, .vs td { text-align: start; vertical-align: top; }
.vs thead td { width: 24%; }
.vs thead th { width: 38%; }
@media (min-width: 48rem) { .vs { table-layout: fixed; } }
.vs thead th { padding: 1.1rem 1.25rem 0.9rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.vs thead .vs-us { border-radius: var(--r-2) var(--r-2) 0 0; color: var(--green); font-size: 1.125rem; font-weight: 700; box-shadow: inset 0 3px 0 var(--green); }
.vs tbody th { width: 24%; padding: 1.15rem 0; border-top: 1px solid var(--line); font-weight: 700; line-height: 1.4; }
.vs td { width: 38%; padding: 1.15rem 1.25rem; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.5; }
.vs .vs-us { background: var(--bg); color: var(--ink); }
.vs td.vs-us { font-weight: 500; border-top-color: #e8e8ed; }
.vs tbody tr:last-child .vs-us { border-radius: 0 0 var(--r-2) var(--r-2); }
@media (max-width: 47.99rem) {
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vs tbody tr { display: grid; gap: 0.5rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
  .vs tbody th, .vs td { width: auto; padding: 0; border: 0; }
  .vs tbody th { font-size: 1.0625rem; }
  .vs td::before { content: attr(data-l); display: block; margin-block-end: 0.1rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
  .vs td.vs-us { padding: 0.8rem 1rem; border-radius: 0.9rem; }
  .vs td.vs-us::before { color: var(--green); }
  .vs tbody tr:last-child .vs-us { border-radius: 0.9rem; }
}

/* ---------- the offer: no price list; every business gets its own written offer after it has seen its site ---------- */
.offer { padding-block: var(--band-sm); background: var(--bg); }
.offer-in {
  display: grid; gap: 2.5rem; padding: clamp(2.5rem, 1.75rem + 3vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4.5rem);
  border-radius: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); color: var(--on-night);
  background: var(--grain), radial-gradient(90% 120% at 85% 0%, #14532f 0%, #0a2a1b 45%, #04120b 100%);
  box-shadow: 0 30px 60px -48px rgb(11 42 29 / 0.45);
}
.offer-in .headline { color: #f5f5f7; }
.offer-in .intro { color: rgb(245 245 247 / 0.72); }
.offer-in :focus-visible { outline-color: var(--mint); }
.offer-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.offer-in > * { min-width: 0; }
.offer-copy .headline { text-wrap: balance; }
.offer-steps { display: grid; margin-block-start: 0.75rem; counter-reset: st; border-top: 1px solid rgb(255 255 255 / 0.16); }
.offer-steps li { counter-increment: st; display: grid; grid-template-columns: 1.75rem 1fr; padding-block: 0.8rem; border-bottom: 1px solid rgb(255 255 255 / 0.1); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; }
.offer-steps li::before { content: counter(st); color: var(--mint); font-variant-numeric: tabular-nums; }
.offer-card {
  display: grid; justify-items: start; gap: 1.25rem; padding: 2.25rem 1.75rem;
  border-radius: var(--r); color: var(--ink); background: #fff;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.45);
}
.offer-card h3 { font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); font-weight: 700; }
.offer-card :focus-visible { outline-color: var(--green); }
.offer-card .pill-mint { background: var(--green); color: #fff; }
@media (hover: hover) and (pointer: fine) { .offer-card .pill-mint:hover { background: var(--green-press); } }
.offer-note { font-size: 0.875rem; color: var(--ink-2); }
.offer-note a { padding-block: 0.75rem; color: var(--green); text-underline-offset: 0.25em; }
@media (min-width: 60rem) {
  .offer-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 4.5rem; }
  .offer-card { padding: 2.75rem 2.5rem; }
}
.feats { display: grid; width: 100%; text-align: start; border-top: 1px solid var(--line); }
.feats li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.6rem; align-items: start; padding-block: 0.8rem; border-bottom: 1px solid #e8e8ed; font-size: 0.98rem; line-height: 1.45; }
.feats li::before { content: ""; width: 0.4rem; height: 0.4rem; margin-block-start: 0.6rem; border-radius: 50%; background: var(--green); justify-self: center; }

/* ---------- about ---------- */
.about { padding-block: var(--band); background: var(--bg-2); }
.about-in { display: grid; justify-items: start; text-align: start; }
.about-copy { display: grid; justify-items: start; gap: 1.25rem; max-width: 46rem; }
/* large and bold, so even the words not yet lit keep large-text contrast */
.about-line { --lit-on: var(--green-ink); font-size: clamp(2.125rem, 1.4rem + 3vw, 4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; color: var(--green-ink); }
.about-sign { display: grid; gap: 0.1rem; margin-block-start: 0.75rem; font-size: 1.375rem; font-weight: 700; color: var(--green-ink); }
.about-sign span { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--green); }
.about-more { --lit-on: var(--ink); max-width: 40rem; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); font-weight: 500; line-height: 1.6; text-wrap: pretty; color: var(--ink); }
.about-photo img { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; margin-block-end: 1.5rem; }

/* ---------- questions ---------- */
.faq { padding-block: var(--band-sm); background: var(--bg); }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.faq-in { max-width: 46rem; }
.faq .headline { text-align: start; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem; padding-block: 1.25rem; cursor: pointer; list-style: none;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 1.1rem; height: 1.1rem; }
.pm::before, .pm::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--ink-2); transition: rotate 0.3s var(--ease-out); }
.pm::after { rotate: 90deg; }
details[open] .pm::after { rotate: 0deg; }
.faq-a { padding-block-end: 1.4rem; max-width: 44rem; color: var(--ink-2); line-height: 1.65; }
.faq-a .fn { color: var(--ink); }

/* ---------- the close (night) ---------- */
.contact { padding-block: var(--band); background: var(--grain), var(--night); color: var(--on-night); }
.contact-in { display: grid; gap: 3.5rem; }
.contact-copy { display: grid; gap: 1.1rem; }
.contact .intro { color: var(--on-night-2); }
.contact-act { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.75rem; }
.contact .pill:not(.pill-ghost) { background: var(--mint); color: #04170e; }
@media (hover: hover) and (pointer: fine) { .contact .pill:not(.pill-ghost):hover { background: #63e8ae; } }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-block-start: 0.5rem; color: var(--on-night-2); }
.contact-links li { display: flex; align-items: center; gap: 0.25rem; }
.copy-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--on-night-2); cursor: pointer; }
.copy-btn svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { background: rgb(255 255 255 / 0.08); color: var(--on-night); } }
.copied { font-size: var(--t-small); font-weight: 600; color: var(--mint); opacity: 0; transition: opacity 0.2s var(--ease-ui); }
.copied.is-on { opacity: 1; }
.ios-hint { flex-basis: 100%; color: var(--on-night-2); }
.card-stage { perspective: 1600px; justify-self: center; width: min(100%, 27.5rem); container-type: inline-size; }
.card-tilt { transform-style: preserve-3d; }
.card {
  position: relative; display: block; width: 100%; aspect-ratio: 90 / 54; padding: 0;
  border: 0; background: none; cursor: pointer; transform-style: preserve-3d;
  transition: transform 1.1s var(--ease-out); -webkit-tap-highlight-color: transparent;
}
.card.is-flipped { transform: rotateY(180deg); }
.card:focus-visible { outline-color: var(--mint); outline-offset: 6px; border-radius: var(--r-2); }
.card-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-2);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2), 0 30px 60px -20px rgb(0 0 0 / 0.6);
}
.card-front { display: grid; place-items: center; background: linear-gradient(150deg, #1b9a5c 0%, #127a45 45%, #0b4a2c 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 2px 4px rgb(0 0 0 / 0.2), 0 40px 80px -30px rgb(62 224 154 / 0.28); }
.card-front svg { width: 23.6%; height: auto; overflow: visible; }
.card-front .mark-fill { fill: #fff; }
.card-back { transform: rotateY(180deg); background: var(--white); color: #1e1e1e; text-align: start; }
.card-back .cb-logo { position: absolute; top: 15%; right: 9%; height: 7.6%; width: auto; }
.card-back .cb-qr { position: absolute; top: 15%; left: 9%; width: 14.5%; height: auto; fill: #1e1e1e; }
.card-back .cb-who { position: absolute; bottom: 14%; right: 9%; text-align: right; }
.card-back .cb-name { display: block; font-size: 4.7cqi; font-weight: 700; line-height: 1.2; }
.card-back .cb-role { display: block; margin-top: 0.4em; font-size: 2.6cqi; color: #6f6f6f; line-height: 1.3; }
.card-back .cb-lines { position: absolute; bottom: 14%; left: 9%; direction: ltr; text-align: left; font-size: 2.85cqi; line-height: 1.75; color: #1e1e1e; }
.card-back .cb-lines span { display: block; }
@media (min-width: 60rem) {
  .contact-in { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 4rem; }
  .card-stage { justify-self: end; }
}

/* ---------- footer: light on the inner pages, night under the close on the home page ---------- */
.foot { padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); background: var(--bg-2); color: var(--ink-2); font-size: 0.8125rem; border-top: 1px solid var(--line); }
.foot > .wrap:not(.foot-in), .foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.foot .brand { color: var(--green); }
.foot .brand svg { height: 1.125rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.foot a:not(.brand) { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { .foot a:not(.brand):hover { color: var(--ink); } }
.notes { display: grid; gap: 0.25rem 3rem; padding-block-end: 1.75rem; margin-block-end: 1.5rem; border-bottom: 1px solid var(--line); counter-reset: fn; font-size: 0.8125rem; line-height: 1.5; }
@media (min-width: 48rem) { .notes { grid-template-columns: 1fr 1fr; } }
.notes li { counter-increment: fn; display: grid; grid-template-columns: 1.25rem 1fr; }
.notes li::before { content: counter(fn); }
.notes a { display: inline !important; min-height: 0 !important; padding-block: 0.8rem; }
.foot-night { background: var(--grain), var(--night); color: var(--on-night-2); border-top-color: var(--night-line); }
.foot-night .brand { color: var(--on-night); }
.foot-night a:not(.brand) { color: var(--on-night-2); text-decoration-color: var(--night-line); }
.foot-night .notes { border-bottom-color: var(--night-line); }
.foot-night .notes a { color: var(--on-night-2); text-decoration: none; }
.foot-night .notes a:hover { color: var(--on-night); text-decoration: underline; }
.foot nav a { min-inline-size: 2.75rem; justify-content: center; }
/* five links do not fit one row on a phone (they need about 24rem): the three legal pages make the first row and
   «על ZSMART» and «English» sit under them in the same columns, so no link is ever left alone on a row */
@media (max-width: 29.99rem) { .foot nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; } .foot nav a { justify-self: start; } }
/* the topic pages: longer names, so two even columns on a phone, and their own row above the site's pages */
.foot .foot-topics { flex-basis: 100%; }
@media (max-width: 29.99rem) { .foot nav.foot-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; justify-content: stretch; } }
.foot-night .notes li:target { color: var(--on-night); }
.notes .fn-back { display: inline-flex !important; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; margin-block: -0.85rem; padding: 0 !important; vertical-align: middle; border-radius: 0.5rem; }
.notes .fn-back svg { inline-size: 0.9rem; block-size: 0.9rem; rotate: 90deg; }
.foot-night .notes .fn-back:hover { color: var(--mint); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-night a:not(.brand):hover { color: var(--on-night); } }

/* ---------- inner pages (terms, privacy, accessibility, 404) ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgb(251 251 253 / 0.85); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); }
.top-wa { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.3rem 0.95rem; border-radius: 980px; background: var(--green); color: #fff; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.top-wa svg { width: 1rem; height: 1rem; }
.page { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.page .wrap { max-width: 46rem; }
.page h1, .page h1.h2 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin-block-end: 1.25rem; }
.page h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.35; margin-block: 2.25rem 0.75rem; }
.page :is(h1, h2) { text-wrap: balance; } /* no heading ends on one lone word */
.page p, .page li { color: #3a3a3c; line-height: 1.7; }
.page p + p { margin-block-start: 0.85rem; }
.page ul.bullets { display: grid; gap: 0.5rem; margin-block-start: 0.75rem; }
.page ul.bullets li { position: relative; padding-inline-start: 1.1rem; }
.page ul.bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.terms-doc { counter-reset: sec; }
.terms-doc h2 { counter-increment: sec; }
.terms-doc h2::before { content: counter(sec) ". "; color: var(--green); font-variant-numeric: tabular-nums; }
.terms-doc .clauses { display: grid; gap: 0.75rem; counter-reset: cl; }
.terms-doc .clauses > li { position: relative; padding-inline-start: 2.75em; counter-increment: cl; }
.terms-doc .clauses > li::before { content: counter(sec) "." counter(cl); position: absolute; inset-inline-start: 0; top: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.page .updated { margin-top: 1.5rem; color: var(--ink-2); font-size: var(--t-small); }
.page a:not(.btn) { color: var(--green); text-underline-offset: 0.25em; }
.page .fn { opacity: 1; } /* green source numbers at 0.8 fell to 3.7:1 on white (AA needs 4.5:1) */
/* a text to copy (the sample accessibility statement): a quiet box, then its copy button */
.page .sample { margin-block-start: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 0.875rem; background: var(--bg-2); }
.page .sample p + ul, .page .sample ul + p { margin-block-start: 0.6rem; }
.page .sample-done { align-self: center; color: var(--ink-2); font-size: var(--t-small); }
/* a link inside a home-page answer reads as a link: the green of the inner pages */
.faq-a a:not(.fn) { color: var(--green); text-underline-offset: 0.25em; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.6rem 1.35rem; border-radius: 980px; font-weight: 600; text-decoration: none; }
.btn svg { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--green); color: #fff; }
.btn-quiet { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* the entity pages (/about in Hebrew, /en in English): what ZSMART is, in plain facts. A lead line, the facts as a
   ledger on hairlines, numbered steps, and the home page's questions (the same details markup) */
.page .lead { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.facts { margin-block-start: 0.75rem; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 0.1rem 1.5rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
@media (min-width: 40rem) { .facts > div { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.facts dt { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.facts dd { color: var(--ink); line-height: 1.6; }
.page ol.steps { display: grid; gap: 0.75rem; margin-block-start: 0.75rem; counter-reset: step; }
.page ol.steps > li { position: relative; padding-inline-start: 2.25rem; counter-increment: step; }
.page ol.steps > li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0.2em; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.page .faq-list { margin-block-start: 0.75rem; }
.page .faq-list details { border-bottom: 1px solid var(--line); scroll-margin-block: calc(var(--nav-h) + 1rem) 2rem; }
.page .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: 1rem; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.page .faq-list summary::-webkit-details-marker { display: none; }
.page .faq-a { padding-block-end: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .page .faq-list details { interpolate-size: allow-keywords; }
    .page .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete; }
    .page .faq-list details[open]::details-content { block-size: auto; }
  }
}
.page .closing { margin-block-start: 2.25rem; padding-block-start: 1.25rem; border-top: 1px solid var(--line); }

/* ---------- scroll choreography ----------
   site.js writes plain transforms (and one opacity) onto a few promoted layers as the page scrolls: the hero's
   planes on a computer, the dark chapter arriving, the card landing; and it lights words in [data-lit]. Nothing
   else changes per frame, so each frame is a compositor update. */
@media (prefers-reduced-motion: no-preference) {
  /* arrival: the studio settles, the glass lands, the line rises, the rest follows */
  html.js .hero-line > .hero-line-in { animation: rise 1.2s var(--ease-out) 0.15s both; }
  html.js .hero .eyebrow { animation: fade-up 0.9s var(--ease-out) 0.05s both; }
  html.js .hero-sub { animation: fade-up 0.9s var(--ease-out) 0.4s both; }
  html.js .hero-name, html.js .hero-act { animation: fade-up 0.9s var(--ease-out) 0.55s both; }
  html.js .hero-ask { animation: fade-up 1.1s var(--ease-out) 0.35s both; }

  /* the dark chapter (the studio lights come on as the glass arrives) and the card landing on the table are
     written by the script as plain transforms and one opacity, on these promoted layers */
  html.js .numbers-z picture, html.js .night-loop, html.js .night-scrub { transform-origin: 50% 60%; will-change: transform; }
  html.js .numbers-veil { will-change: opacity; }
  html.js .card-tilt { transform-origin: 50% 100%; will-change: transform; }

  /* words light up as they are read */
  html.js .lit.is-split .w { color: #76767b; transition: color 0.4s var(--ease-ui); }
  html.js .lit.is-split .w.on { color: var(--lit-on, var(--ink)); }
}
@keyframes settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes rise { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; translate: 0 0.9rem; } to { opacity: 1; translate: none; } }

/* ---------- a phone's first screen paints sooner ----------
   On a phone the browser lays out a section only once it comes near the screen. Until then it holds the
   section's height on a 390px-wide phone; once shown, a section keeps its real height. The numbers are the
   height inside the padding (the browser adds the section's padding to them): measure a section at 390px and
   take away its top and bottom padding (lab/measure-lazy.mjs prints them). Only where the browser also holds the page still while a section above
   the screen fills in (scroll anchoring), and only on phones, where no nav link jumps far down the page. */
@supports (content-visibility: auto) and (overflow-anchor: auto) {
  @media (max-width: 47.99rem) {
    .fears, .method, .build, .how, .service, .numbers, .compare, .offer, .about, .faq, .contact, .foot-night { content-visibility: auto; }
    .service { contain-intrinsic-block-size: auto 680px; }
    .method { contain-intrinsic-block-size: auto 962px; }
    .fears { contain-intrinsic-block-size: auto 1004px; }
    .build { contain-intrinsic-block-size: auto 5340px; }
    .compare { contain-intrinsic-block-size: auto 966px; }
    .how { contain-intrinsic-block-size: auto 1946px; }
    .numbers { contain-intrinsic-block-size: auto 1214px; }
    .offer { contain-intrinsic-block-size: auto 1353px; }
    .about { contain-intrinsic-block-size: auto 580px; }
    .faq { contain-intrinsic-block-size: auto 1204px; }
    .contact { contain-intrinsic-block-size: auto 639px; }
    .foot-night { contain-intrinsic-block-size: auto 1109px; }
  }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .hero-pause, .night-loop, .night-scrub, .night-pause { display: none !important; }
  .ask-dots i { animation: none; }
  .card { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .nav, .skip, .dock, .hero-ask, .hero-pause, .night-loop, .night-scrub, .night-pause, .cell-art, .how-stage, .name-field, .copy-btn, .card-stage, .numbers-art picture { display: none !important; }
  .hero { margin: 0; background: #fff !important; color: #000 !important; }
  html.js [data-reveal], html.js .step { opacity: 1 !important; translate: none !important; }
  .numbers, .contact, .foot, .cell-night, .offer-in, .hero-facts { background: #fff !important; color: #000 !important; }
  .hero-line-in, .hero-sub, .about-line, .stat-num { color: #000 !important; }
  .lit .w { color: #000 !important; }
  main > section, .foot { content-visibility: visible !important; }
}

/* lines that would end on one word wrap a little earlier */
.step p, .promise, .foot-row p, .faq-a p, .contact .intro { text-wrap: pretty; }

/* a name that should not break between its two words */
.nw { white-space: nowrap; }
/* the smallest phones (and large text): the offer panel and its card give their padding back to the words */
@media (max-width: 47.99rem) {
  .offer-in { padding-inline: 1.25rem; }
  .offer-card { padding: 1.75rem 1.25rem; }
  .offer-card .pill, .contact .pill-lg { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .night-scrub { display: none; }
}
/* on a computer the phone in the top is large: its chat grows with it, so the screen is not half empty */
@media (min-width: 60rem) {
  .hero .ask-screen { gap: 1rem; }
  .hero .ask-q { font-size: 0.98rem; }
  .hero .ask-text { font-size: 1.02rem; }
  .hero .ask-card b { font-size: 0.98rem; }
  .hero .ask-src { font-size: 0.8rem; }
  .ask-src { flex-wrap: wrap; }
}
.ask-src b { overflow-wrap: anywhere; }

/* ---------- the chosen trade: its most useful card comes first (on a phone) and stands out (everywhere) ----------
   The cards move with a view transition where the browser has one; elsewhere they simply take their places. */
.cell { transition: box-shadow 0.45s var(--ease-ui), background-color 0.45s var(--ease-ui), opacity 0.45s var(--ease-ui); }
.bento[data-for] .cell.is-yours { background: #fff; box-shadow: 0 0 0 1.5px rgb(18 122 69 / 0.45), 0 28px 50px -34px rgb(11 42 29 / 0.45); }
.bento[data-for] .cell:not(.is-yours) { opacity: 0.86; }
.cell-for { margin-block-start: 0.7rem; font-size: 0.9375rem; font-weight: 600; color: var(--green); }
.cell-for:empty { display: none; }
@media (max-width: 47.99rem) { .bento .cell { order: var(--o, 0); } }
.cell-site { view-transition-name: cell-site; } .cell-book { view-transition-name: cell-book; } .cell-leads { view-transition-name: cell-leads; }
.cell-reviews { view-transition-name: cell-reviews; } .cell-google { view-transition-name: cell-google; } .cell-lang { view-transition-name: cell-lang; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* the story's phone: the photographed phone (the top's), with the screen laid on its glass by the same measurements */
.device-lg { aspect-ratio: 667 / 1387; padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 30px 36px rgb(11 42 29 / 0.22)); }
.device-lg::before { display: none; }
.device-lg .device-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.device-lg .device-screen { position: absolute; left: 6.6%; top: 5.4%; width: 86.8%; height: 90.5%; border-radius: 10% / 4.8%; }
.device-lg .st { padding-block-start: 2.6rem; }
.device-lg .st-site { padding-block-end: 3.25rem; }
.device-lg .st-badge { inset-block-end: 0.85rem; }

/* while the assistant thinks, its last card and source are already gone (no flash between two answers) */
/* the story phone's little site: tighter at the top, a shorter photo, so its rows show on a small phone */
.device-lg .st { padding: 2.35rem 0.85rem 1rem; gap: 0.5rem; }
.device-lg .ms-photo { aspect-ratio: 16 / 9; }
/* a long link inside a sentence wraps like text, and its arrow stays with its last word */
.fears-close .more { display: inline; padding-block: 0.6rem; }
.fears-close .more svg { display: inline-block; vertical-align: -0.15em; margin-inline-start: 0.15rem; }

.offer-note a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* the last row on a computer is short: its three objects stand smaller, whole inside their cards */
@media (min-width: 60rem) {
  .cell-reviews .svc-obj, .cell-google .svc-obj, .cell-lang .svc-obj { width: min(62%, 13.5rem); }
}
/* the little sites' first button carries a two-word action: it gets the room it needs */
.ms-btns { grid-template-columns: 1.8fr 1fr 1fr; }
.device-lg .ms-btns b, .ask-card .ms-btns b { font-size: 0.56rem; }

/* ---------- the composer at the foot of the hero's phone: room for a question of two lines ---------- */
.ask-input { position: relative; align-items: flex-start; min-block-size: 3.4rem; border-radius: 1.1rem; padding: 0.6rem 0.9rem; }
.ask-ph { position: absolute; inset-inline-start: 0.9rem; inset-block-start: 0.6rem; }
.ask-typed { display: none; flex: 1; line-height: 1.35; color: var(--ink); }
.ask-send { position: relative; align-self: flex-end; overflow: hidden; }
.ask-send::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); opacity: 0; }
.ask-send svg { position: relative; }
.ask-a { position: relative; }
/* the phone's height fits a short screen too (the composer stays above the dock) */
.hero .ask-phone { width: min(16.5rem, 70vw, calc((100svh - var(--nav-h) - 8.5rem) * 0.48)); }
@media (min-width: 60rem) { .hero .ask-phone { width: min(21rem, calc((100svh - var(--nav-h) - 7rem) * 0.48)); } }

/* the light across a porcelain object (the object's own picture is the mask, so it never leaves its edge) */
.glaze { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--obj) center / contain no-repeat; mask: var(--obj) center / contain no-repeat; }
.glaze::before { content: ""; position: absolute; inset: 0 -100%; background: linear-gradient(112deg, transparent 44%, rgb(255 255 255 / 0.42) 50%, transparent 56%); translate: 40% 0; }

/* ---------- the page moves with the scroll ----------
   Where the browser runs scroll-driven animations (Chrome; Safari 26.4+ off the main thread) everything below plays at
   the speed of the visitor's own scroll, forwards and back; only opacity and transforms move. Elsewhere the arrivals
   play once (site.js) and the hero's phone simply shows its answer. Reduced motion: everything still. */
@keyframes sc-arrive { from { opacity: 0; translate: 0 1.75rem; } to { opacity: 1; translate: 0 0; } }
@keyframes sc-in { from { opacity: 0; translate: 0 0.45rem; } to { opacity: 1; translate: 0 0; } }
@keyframes sc-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-off { from { opacity: 1; } to { opacity: 0; } }
@keyframes sc-window { 0% { opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sc-ph { 0% { opacity: 1; } 4% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-lit { from { opacity: 0.38; } to { opacity: 1; } }
@keyframes sc-rail { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes sc-glaze { from { translate: 40% 0; } to { translate: -40% 0; } }
@keyframes sc-zoom { from { scale: 1.14; } to { scale: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* arrivals: each part rises into place as it is scrolled in */
    html.js [data-reveal] { opacity: 1; translate: 0 0; transition: none; animation: sc-arrive cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 0% entry 80%; }

    /* the hero: a runway after the first screen; while it passes, the phone stays and the scroll writes the chat */
    html.js .ask-pin { display: grid; justify-items: center; gap: 0.9rem; }
    html.js .ask-typed { display: block; }
    html.js .ask-typed .c { animation: sc-on cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --ask; animation-range: contain calc(3% + var(--i) * var(--k, 0.6%)) contain calc(3.4% + var(--i) * var(--k, 0.6%)); }
    html.js .ask-typed { animation: sc-off ease both; animation-timeline: --ask; animation-range: contain 29% contain 31%; }
    html.js .ask-ph { animation: sc-ph ease both; animation-timeline: --ask; animation-range: contain 2% contain 31%; }
    html.js .ask-send::before { animation: sc-window ease both; animation-timeline: --ask; animation-range: contain 4% contain 31%; }
    html.js .ask-q { transition: none; animation: sc-in cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --ask; animation-range: contain 30% contain 35%; }
    html.js .ask-dots { display: flex; position: absolute; inset-block-start: 0; inset-inline-start: 0; animation: sc-window ease both; animation-timeline: --ask; animation-range: contain 34% contain 45%; }
    html.js .ask-text { transition: none; }
    html.js .ask-text .w { animation: sc-on cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --ask; animation-range: contain calc(45% + var(--i) * var(--kw, 2%)) contain calc(47% + var(--i) * var(--kw, 2%)); }
    html.js .ask-src { transition: none; animation: sc-in cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --ask; animation-range: contain 80% contain 86%; }
    html.js .ask-card { transition: none; animation: sc-in cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --ask; animation-range: contain 86% contain 95%; }
    /* a phone: the phone itself pins under the nav while its runway passes */
    @media (max-width: 59.99rem) {
      html.js .hero-ask { view-timeline: --ask block; }
      html.js .hero-ask::after { content: ""; block-size: 75svh; } /* the runway: a pinned box needs room inside its parent */
      html.js .ask-pin { position: sticky; top: calc(var(--nav-h) + 0.75rem); }
    }
    /* a computer: the whole first screen pins (words and phone) while its runway passes */
    @media (min-width: 60rem) {
      html.js .hero-run { view-timeline: --ask block; }
      html.js .hero-run::after { content: ""; display: block; block-size: 70svh; }
      html.js .hero-in { position: sticky; top: calc(var(--nav-h) + clamp(2rem, 1rem + 4vw, 4.5rem)); }
    }

    /* the method: each step lights as it is read, and a line grows down the steps */
    html.js .method-list { position: relative; view-timeline: --steps block; }
    html.js .method-list::before { content: ""; position: absolute; inset-block: 1.9rem 1.9rem; inset-inline-start: 0.4rem; inline-size: 1px; background: rgb(62 224 154 / 0.55); transform-origin: 50% 0; animation: sc-rail cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --steps; animation-range: cover 18% cover 72%; }
    html.js .method-list .step-no { background: var(--hero-bg); padding-block: 0.25rem; }
    html.js .method-list li > p { animation: sc-lit cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: view(); animation-range: cover 18% cover 42%; }

    /* the porcelain: the light crosses each object as its card passes */
    html.js .cell { view-timeline: --cell block; }
    html.js .glaze::before { animation: sc-glaze cubic-bezier(0.45, 0, 0.55, 1) both; animation-timeline: --cell; animation-range: cover 20% cover 75%; }

    /* the numbers on a phone: the dark Z settles as the chapter comes in (a computer turns it frame by frame) */
    @media (max-width: 47.99rem) {
      html.js .numbers-z { view-timeline: --nz block; }
      html.js .numbers-z picture img { animation: sc-zoom cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --nz; animation-range: cover 0% cover 55%; }
    }
  }
}

/* ---------- the review card: the real use of the kit ----------
   As the card scrolls by, a phone comes to the stand, the tap sends a ripple, and the phone opens the page for writing
   a review of the business, where the stars fill one by one. Transforms and opacity only, tied to the card's scroll;
   without scroll-driven animations (or under reduced motion) the scene shows its last moment. */
.tap-scene { position: relative; inline-size: min(100%, 22rem); aspect-ratio: 1 / 0.92; margin-inline: auto; margin-block-end: 0.75rem; }
.cell-reviews .tap-scene .tap-kit { position: absolute; right: 0; bottom: 0; width: 68%; margin: 0; }
.tap-ring { position: absolute; z-index: 1; left: 50%; top: 40%; inline-size: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; border: 2px solid rgb(62 224 154 / 0.7); opacity: 0; }
.tap-phone { position: absolute; z-index: 2; left: 4%; top: 0; width: 36%; container-type: inline-size; rotate: -13deg; translate: 38% 10%; filter: drop-shadow(0 18px 22px rgb(11 42 29 / 0.28)); }
.tap-phone img { display: block; width: 100%; height: auto; }
.tap-screen { position: absolute; left: 6.6%; top: 5.4%; width: 86.8%; height: 90.5%; border-radius: 10% / 4.8%; overflow: hidden; background: #fbfbfd; text-align: center; color: var(--ink); }
.tap-sheet { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: 4cqi; padding: 22cqi 8cqi 0; }
.tap-lock { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: 1cqi; padding-block-start: 26cqi; background: linear-gradient(170deg, #0e3a26, #127a45 55%, #3ee09a); color: #fff; }
.tap-lock time { font-size: 21cqi; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.tap-lock span { font-size: 6cqi; opacity: 0.85; }
.tap-banner { position: absolute; z-index: 2; inset-inline: 5cqi; inset-block-start: 7cqi; display: flex; align-items: center; gap: 3cqi; padding: 3.5cqi 4cqi; border-radius: 6cqi; background: rgb(255 255 255 / 0.96); box-shadow: 0 4cqi 10cqi -4cqi rgb(0 0 0 / 0.35); text-align: start; }
.tap-banner i { flex: none; inline-size: 9cqi; aspect-ratio: 1; border-radius: 2.5cqi; background: var(--green); }
.tap-banner span { display: grid; font-size: 5.6cqi; line-height: 1.25; color: var(--ink-2); }
.tap-banner b { font-size: 6cqi; color: var(--ink); }
.tap-head { font-size: 7.5cqi; color: var(--ink-2); }
.tap-biz { margin-block-start: -2cqi; font-size: 9.5cqi; line-height: 1.2; overflow-wrap: anywhere; }
.tap-stars { display: flex; gap: 2.5cqi; direction: ltr; }
.tap-stars i { position: relative; isolation: isolate; inline-size: 12.5cqi; aspect-ratio: 1; }
.tap-stars svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fbbc04; }
.tap-stars i::before { content: ""; position: absolute; inset: 8%; -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 6 6.6.8-4.9 4.5 1.3 6.5L12 17.2l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8z'/%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 6 6.6.8-4.9 4.5 1.3 6.5L12 17.2l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat; background: #dadce0; z-index: -1; }
.tap-ph { inline-size: 100%; margin-block-start: 2cqi; padding: 4cqi 5cqi; border: 1px solid #dadce0; border-radius: 4cqi; font-size: 6.5cqi; color: var(--ink-3); text-align: start; }
.tap-post { padding: 3cqi 9cqi; border-radius: 99px; background: var(--green); color: #fff; font-size: 7cqi; font-weight: 600; }
@keyframes tap-come { from { translate: -70% -40%; rotate: -28deg; } to { translate: 38% 10%; rotate: -13deg; } }
@keyframes tap-ring { 0% { opacity: 0; scale: 0.4; } 25% { opacity: 0.9; } 100% { opacity: 0; scale: 1.9; } }
@keyframes tap-banner { 0% { opacity: 0; translate: 0 -140%; } 25% { opacity: 1; translate: 0 0; } 78% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -40%; } }
@keyframes tap-star { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .tap-phone { animation: tap-come cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --cell; animation-range: cover 12% cover 40%; }
    html.js .tap-ring { animation: tap-ring cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --cell; animation-range: cover 38% cover 52%; }
    html.js .tap-ring-2 { animation-range: cover 42% cover 56%; }
    html.js .tap-lock { animation: sc-off ease both; animation-timeline: --cell; animation-range: cover 39% cover 43%; }
    html.js .tap-banner { animation: tap-banner cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --cell; animation-range: cover 36% cover 47%; }
    html.js .tap-sheet { animation: sc-on ease both; animation-timeline: --cell; animation-range: cover 44% cover 47%; }
    html.js .tap-stars svg { animation: tap-star cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-timeline: --cell; animation-range: cover calc(49% + var(--s) * 3.2%) cover calc(52% + var(--s) * 3.2%); }
    html.js .tap-post { animation: sc-in cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: --cell; animation-range: cover 66% cover 70%; }
  }
}

.tap-lock, .tap-banner { opacity: 0; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { html.js .tap-lock { opacity: 1; } } }

/* the hero's phone on a short or narrow screen: the composer stays on the glass, the chat a touch smaller */
.ask-phone .ask-screen { padding-block-end: calc(3.4rem + 9%); }
.ask-phone .ask-input { position: absolute; inset-inline: 5.5%; inset-block-end: 4%; margin: 0; }
@media (max-width: 59.99rem) and (max-height: 780px) { .hero .ask-screen { zoom: 0.92; } }
@media (max-width: 59.99rem) and (max-height: 700px) { .hero .ask-screen { zoom: 0.86; } }
@media (max-width: 359.98px) { .hero .ask-screen { zoom: 0.84; } }

/* the chat's first screen: a greeting and two suggestions (only while the scroll has not sent the question yet) */
.ask-screen { position: relative; }
.ask-hello { position: absolute; inset-inline: 7%; inset-block-start: 34%; display: none; justify-items: center; gap: 0.7rem; text-align: center; pointer-events: none; }
.ask-hello i { inline-size: 2.1rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 200deg, var(--mint), var(--green), #9be7c4, var(--mint)); box-shadow: 0 6px 16px -8px rgb(18 122 69 / 0.6); }
.ask-hello p { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ask-hello span { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.ask-hello b { padding: 0.35rem 0.6rem; border: 1px solid #e3e3e8; border-radius: 99px; font-size: 0.66rem; font-weight: 500; color: var(--ink-2); background: #fff; }
/* the caret walks with the letters: each letter shows it for its own moment, the last one keeps it until sending */
.ask-typed .c { position: relative; }
.ask-typed .c::after { content: ""; position: absolute; inset-block: 0.1em; inset-inline-end: -1.5px; inline-size: 1.5px; background: var(--green); opacity: 0; }
@keyframes sc-caret { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .ask-hello { display: grid; animation: sc-off cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --ask; animation-range: contain 26% contain 31%; }
    html.js .ask-typed .c::after { animation: sc-caret steps(1, end) both; animation-timeline: --ask; animation-range: contain calc(3% + var(--i) * var(--k, 0.6%)) contain calc(3% + (var(--i) + 1) * var(--k, 0.6%)); }
    html.js .ask-typed .c:last-child::after { animation-range: contain calc(3% + var(--i) * var(--k, 0.6%)) contain 29%; }
  }
}

/* the top is clipped (not a scroll box, so the pins work); it still keeps its children's margins inside */
.hero { display: flow-root; }
/* until Ilan's photo arrives, the letter stands in the middle of its band on a computer (no empty half) */
@media (min-width: 60rem) { .about:not(.has-photo) .about-in { justify-items: center; } .about:not(.has-photo) .about-copy { inline-size: min(100%, 46rem); } }

/* ---------- the timing pass (2026-11-04, measured at 390x844 and 1440x900) ----------
   On a phone the nav covers the top 3.5rem and the dock the bottom ~6rem: every moment now plays in the open middle
   of the screen. Arrivals rise over ~150-250px of scroll instead of popping; the hero's conversation spans more than a
   screen of scroll with a real pause for thinking; the review card's tap lands mid-screen, ring first, then the
   notification, then the review page opening. */
.ask-dots span { margin-inline-start: 0.35rem; font-size: 0.7rem; color: var(--ink-3); }
.ask-dots i { flex: none; }
.ask-dots { align-items: center; }
.tap-banner em { margin-inline-start: auto; align-self: flex-start; font-style: normal; font-size: 5cqi; color: var(--ink-3); }
.tap-dock { position: absolute; inset-inline: 10cqi; inset-block-end: 13cqi; display: flex; justify-content: space-between; }
.tap-dock i { inline-size: 13cqi; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.2); }
.tap-home { position: absolute; inset-block-end: 4cqi; inset-inline: 32cqi; block-size: 1.6cqi; border-radius: 99px; background: rgb(255 255 255 / 0.85); }
@keyframes sc-send { 0% { opacity: 0; translate: 0 17rem; scale: 0.92; } 30% { opacity: 1; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sc-press { 0% { scale: 1; } 50% { scale: 0.86; } 100% { scale: 1; } }
@keyframes sc-lit { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes sc-glaze { from { translate: 30% 0; } to { translate: -30% 0; } }
@keyframes sc-z { from { scale: 1.2; translate: 0 5%; } to { scale: 1; translate: 0 0; } }
@keyframes sc-veil { from { opacity: 0.92; } to { opacity: 0; } }
@keyframes tap-come { 0% { translate: -70% -40%; rotate: -28deg; } 82% { translate: 41% 11%; rotate: -12deg; } 100% { translate: 38% 10%; rotate: -13deg; } }
@keyframes tap-open { from { opacity: 0; translate: 0 5%; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }
.glaze::before { background: linear-gradient(112deg, transparent 44%, rgb(255 255 255 / 0.5) 50%, transparent 56%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js [data-reveal] { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-range: cover 8% cover 30%; }

    html.js .ask-typed .c { animation-range: contain calc(2% + var(--i) * var(--k, 0.75%)) contain calc(2.8% + var(--i) * var(--k, 0.75%)); }
    html.js .ask-typed .c::after { animation-range: contain calc(2% + var(--i) * var(--k, 0.75%)) contain calc(2% + (var(--i) + 1) * var(--k, 0.75%)); }
    html.js .ask-typed .c:last-child::after { animation-range: contain calc(2% + var(--i) * var(--k, 0.75%)) contain 27%; }
    html.js .ask-typed { animation-range: contain 27% contain 28.5%; }
    html.js .ask-ph { animation-range: contain 1.5% contain 29%; }
    html.js .ask-send::before { animation-range: contain 2% contain 29%; }
    html.js .ask-send { animation: sc-press ease both; animation-timeline: --ask; animation-range: contain 26.5% contain 29%; }
    html.js .ask-hello { animation-range: contain 26.5% contain 29.5%; }
    html.js .ask-q { animation-name: sc-send; transform-origin: 0 100%; animation-range: contain 28% contain 34%; }
    html.js .ask-dots { animation-range: contain 33% contain 47%; }
    html.js .ask-text .w { animation-range: contain calc(46% + var(--i) * var(--kw, 2.06%)) contain calc(48.5% + var(--i) * var(--kw, 2.06%)); }
    html.js .ask-src { animation-range: contain 82% contain 87%; }
    html.js .ask-card { animation-range: contain 87% contain 95%; }
    @media (max-width: 59.99rem) {
      html.js .hero-ask { view-timeline-inset: 40svh 0px; }
      html.js .hero-ask::after { block-size: 120svh; }
    }
    @media (min-width: 60rem) {
      html.js .hero-run::after { block-size: 110svh; }
      html.js .ask-src { animation-range: contain 78% contain 83%; }
      html.js .ask-card { animation-range: contain 83% contain 91%; }
    }

    html.js .method-list li > p { animation-timeline: view(block 3.5rem 6rem); animation-range: cover 4% cover 30%; }
    html.js .glaze::before { animation-range: cover 30% cover 66%; }

    html.js .cell-reviews { view-timeline-inset: 3.5rem 6rem; }
    html.js .tap-phone { animation-range: cover 21% cover 40%; }
    html.js .tap-ring { animation-range: cover 42% cover 51%; }
    html.js .tap-ring-2 { animation-range: cover 45% cover 54%; }
    html.js .tap-banner { animation-range: cover 48% cover 56%; }
    html.js .tap-lock { animation-range: cover 54% cover 58%; }
    html.js .tap-sheet { animation-name: tap-open; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-range: cover 54% cover 58%; }
    html.js .tap-stars svg { animation-range: cover calc(58% + var(--s) * 2.5%) cover calc(61% + var(--s) * 2.5%); }
    html.js .tap-post { animation-range: cover 73% cover 77%; }

    @media (max-width: 47.99rem) {
      html.js .numbers-z { view-timeline: --nz block; view-timeline-inset: 3.5rem 0px; }
      html.js .numbers-z picture { animation: sc-z cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-timeline: --nz; animation-range: cover 0% cover 60%; }
      html.js .numbers-z picture img { animation: none; }
      html.js .numbers-veil { animation: sc-veil cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --nz; animation-range: cover 0% cover 60%; }
    }
  }
}
@media (min-width: 48rem) { @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { html.js .cell-reviews { view-timeline-inset: 4rem 1rem; } } } }

/* ---------- a page held in one hand (2026-11-04) ----------
   On a phone the nav takes the top 3.5rem and the dock the bottom ~6rem; the thumb works the lower half; the page is
   read in sunlight as often as indoors. */

/* the trades, all of them in view: a grid of four on a phone instead of a sideways row most visitors never swipe */
@media (max-width: 47.99rem) {
  .trades-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 0.25rem; overflow: visible; padding-inline: var(--gut); -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; }
  .trades-list li { font-size: 0.8125rem; }
  .trades-list .trade-icon { width: 2.9rem; height: 2.9rem; }
  .trade { padding: 0.45rem 0.1rem 0.55rem; gap: 0.35rem; }
}

/* nothing a visitor reaches for lands under the bars: anchors, keyboard focus and find-in-page keep clear of them */
@media (max-width: 47.99rem) { html { scroll-padding-bottom: 6.5rem; } }
.faq details { scroll-margin-block: calc(var(--nav-h) + 1rem) 7rem; }

/* small text that is read outdoors: one step darker */
.trade-hint, .ask-dots span, .tap-ph, .tap-banner em { color: var(--ink-2); }
.hero-ask figcaption { color: rgb(245 245 247 / 0.64); }

/* the reading line: a hairline under the nav that fills as the page is read (the scroll itself drives it) */
.read-line { position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--mint); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; opacity: 0; }
@keyframes sc-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .read-line { opacity: 0.9; animation: sc-read cubic-bezier(0, 0, 1, 1) both; animation-timeline: scroll(root block); }
  }
}

/* scrolling back up: each part rises in from below on the way down, and on the way up it comes back in from under the
   nav the same way (one timeline across the whole pass: arrive, stay, leave under the nav) */
@keyframes sc-leave { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -1.25rem; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* two moments on one part: it rises in from below, and it leaves only in its last 8.5rem as it slides under the nav
       (on the way back up, the same two moments play backwards) */
    html.js [data-reveal] {
      animation: sc-arrive cubic-bezier(0.25, 0.46, 0.45, 0.94) both, sc-leave cubic-bezier(0.42, 0, 0.58, 1) forwards;
      animation-timeline: view(block 3.5rem 0px), view(block 3.5rem 0px);
      animation-range: cover 6% cover 26%, exit calc(100% - 8.5rem) exit 100%;
    }
  }
}

/* ---------- the phones' screens in true proportion (2026-11-04) ----------
   Each screen is a container: every size inside is a share of the screen's own width (1em = 5.45% of the phone),
   so the hero's phone keeps the same proportions on a small iPhone, a large one and a computer, the way a real screen
   scales. Text, buttons and gaps keep one rhythm; nothing is cut. */
.hero .ask-phone { container-type: inline-size; }
.hero .ask-phone .ask-screen { zoom: 1; font-size: 5.45cqi; gap: 0.62em; padding: 11.5% 5.5% calc(3.9em + 7%); }
.hero .ask-phone .ask-status { inset-block-start: 1.9%; inset-inline: 8.5%; font-size: 0.8em; }
.hero .ask-phone .ask-sig { gap: 0.3em; }
.hero .ask-phone .ask-sig svg { height: 0.72em; }
.hero .ask-phone .ask-sig svg:last-child { height: 0.82em; }
.hero .ask-phone .ask-top { gap: 0.32em; padding-block-end: 0.62em; font-size: 0.84em; }
.hero .ask-phone .ask-top i { width: 0.78em; height: 0.78em; }
.hero .ask-phone .ask-q { max-width: 84%; padding: 0.5em 0.78em; border-radius: 1.05em; border-end-end-radius: 0.3em; font-size: 0.97em; line-height: 1.38; }
.hero .ask-phone .ask-a { gap: 0.55em; }
.hero .ask-phone .ask-text { font-size: 1em; line-height: 1.52; }
.hero .ask-phone .ask-src { gap: 0.4em; padding: 0.32em 0.78em; font-size: 0.8em; }
.hero .ask-phone .ask-card { gap: 0.28em; padding: 0.72em 0.8em 0.8em; border-radius: 0.9em; }
.hero .ask-phone .ask-card > b { font-size: 0.98em; }
.hero .ask-phone .ask-card .ms-open { gap: 0.4em; font-size: 0.8em; }
.hero .ask-phone .ask-card .ms-open i { width: 0.55em; height: 0.55em; }
.hero .ask-phone .ask-card .ms-btns { display: flex; gap: 0.32em; margin-block-start: 0.32em; }
.hero .ask-phone .ask-card .ms-btns b { flex: 1 1 auto; min-width: 0; height: 2.05em; padding-inline: 0.6em; font-size: 0.74em; overflow: visible; }
.hero .ask-phone .ask-card .ms-btns b:first-child { flex-grow: 1.6; }
.hero .ask-phone .ask-dots { gap: 0.3em; padding: 0.4em 0.1em; }
.hero .ask-phone .ask-dots i { width: 0.42em; height: 0.42em; }
.hero .ask-phone .ask-dots span { margin-inline-start: 0.3em; font-size: 0.78em; }
.hero .ask-phone .ask-hello { gap: 0.55em; }
.hero .ask-phone .ask-hello i { inline-size: 2.3em; }
.hero .ask-phone .ask-hello p { font-size: 1.12em; }
.hero .ask-phone .ask-hello span { gap: 0.35em; }
.hero .ask-phone .ask-hello b { padding: 0.38em 0.7em; font-size: 0.74em; }
/* the composer: one line, as a real one at rest (the placeholder and the send button centred) */
.hero .ask-phone .ask-input { inset-block-end: 3.2%; display: flex; align-items: center; gap: 0.5em; min-block-size: 0; block-size: 2.75em; padding: 0 0.95em 0 0.4em; border-radius: 99px; font-size: 0.88em; }
.hero .ask-phone .ask-ph { position: absolute; inset-inline-start: 1.1em; inset-block-start: 50%; translate: 0 -50%; }
.hero .ask-phone .ask-typed { position: relative; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.4; }
.hero .ask-phone .ask-run { display: inline-block; }
.hero .ask-phone .ask-send { align-self: center; inline-size: 1.95em; block-size: 1.95em; }
.hero .ask-phone .ask-send svg { inline-size: 1.05em; block-size: 1.05em; }
@keyframes sc-shift { from { translate: 0 0; } to { translate: var(--shift, 0px) 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .hero .ask-phone .ask-run { animation: sc-shift cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --ask; animation-range: contain calc(2% + var(--i0, 0) * var(--k, 0.75%)) contain calc(2.8% + var(--iend, 0) * var(--k, 0.75%)); }
  }
}

/* the story's phone: the same principle (1em = 5.6% of the phone) */
.device-lg { container-type: inline-size; }
.device-lg .device-screen { font-size: 5.6cqi; }
.device-lg .st { gap: 0.55em; padding: 2.5em 0.8em 1em; }
.device-lg .st-site { padding-block-end: 3.2em; }
.device-lg .st-chat-head { gap: 0.5em; margin: -0.35em -0.8em 0.45em; padding: 0.35em 0.8em 0.6em; font-size: 0.86em; }
.device-lg .st-chat-head .who-avatar { width: 2em; height: 2em; }
.device-lg .st-chat .bubble { padding: 0.55em 0.75em; border-radius: 1em; font-size: 0.86em; }
.device-lg .ms-bar { margin-block-end: 0.1em; }
.device-lg .ms-url { padding: 0.25em 0.75em; font-size: 0.7em; }
.device-lg .ms-photo { border-radius: 0.8em; }
.device-lg .st-site .ms-name { font-size: 1.22em; }
.device-lg .ms-open { gap: 0.35em; font-size: 0.74em; }
.device-lg .ms-open i { width: 0.55em; height: 0.55em; }
.device-lg .ms-btns { display: flex; gap: 0.3em; }
.device-lg .ms-btns b { flex: 1 1 auto; min-width: 0; height: 2.1em; padding-inline: 0.55em; font-size: 0.7em; overflow: visible; }
.device-lg .ms-btns b:first-child { flex-grow: 1.6; }
.device-lg .ms-rows span { padding-block: 0.55em; font-size: 0.76em; }
.device-lg .ms-rows span::after { inline-size: 0.4em; block-size: 0.4em; }
.device-lg .st-badge { inset-block-end: 0.9em; gap: 0.35em; padding: 0.45em 0.9em; font-size: 0.78em; }

/* the story's phone on a phone: larger and running off the foot of its stage, so its little site can be read
   (a whole phone in 46svh would set its text at 5 to 8px) */
@media (max-width: 47.99rem) {
  .how-stage { place-items: start center; overflow: hidden; }
  .how-stage .device { height: auto; width: min(66vw, 17.5rem); margin-block-start: 0.4rem; }
  .device-lg .st-badge { inset-block: 41% auto; }
}

/* the review card's phone: large enough for its screen to be read; the stand a little smaller beside it */
.cell-reviews .tap-scene .tap-kit { width: 58%; }
.tap-phone { width: 46%; left: 1%; }
@keyframes tap-come { 0% { translate: -70% -40%; rotate: -28deg; } 82% { translate: 33% 9%; rotate: -11deg; } 100% { translate: 30% 8%; rotate: -12deg; } }
.tap-phone { translate: 30% 8%; rotate: -12deg; }
.tap-ring { left: 60%; top: 46%; }
.tap-lock { gap: 1.5cqi; padding-block-start: 24cqi; }
.tap-lock time { font-size: 22cqi; }
.tap-lock span { font-size: 6.8cqi; }
.tap-banner { inset-inline: 4cqi; gap: 3cqi; padding: 3.5cqi 4cqi; }
.tap-banner i { inline-size: 10cqi; }
.tap-banner span { font-size: 6.4cqi; }
.tap-banner b { font-size: 7cqi; }
.tap-banner em { font-size: 6cqi; }
.tap-sheet { gap: 4cqi; padding: 20cqi 7cqi 0; }
.tap-head { font-size: 7.6cqi; }
.tap-biz { font-size: 10.5cqi; }
.tap-stars i { inline-size: 13.5cqi; }
.tap-ph { padding: 4.5cqi 5cqi; font-size: 6.8cqi; }
.tap-post { padding: 3.4cqi 10cqi; font-size: 7.6cqi; }
/* the last small labels, readable on a 320px screen too */
.tap-lock span { font-size: 7.6cqi; }
.tap-banner span { font-size: 7cqi; }
.tap-banner b { font-size: 7.6cqi; }
.tap-banner em { font-size: 6.9cqi; }
.tap-head { font-size: 8.2cqi; }
.tap-ph { font-size: 7.4cqi; }
.device-lg .ms-btns b { font-size: 0.78em; }
.device-lg .ms-url { font-size: 0.78em; }
/* "now" sits in the notification's top corner, as on an iPhone (it never pushes the text) */
.tap-banner { position: absolute; padding-inline-end: 4cqi; }
.tap-banner em { position: absolute; inset-inline-end: 3.5cqi; inset-block-start: 2.6cqi; margin: 0; }
.tap-banner span { padding-inline-end: 9cqi; }
@media (max-width: 359.98px) { .tap-phone { width: 50%; } }
/* the hero's screen filled the way an app fills it (the chat a touch larger: one rhythm, less empty glass) */
.hero .ask-phone .ask-screen { font-size: 6cqi; padding: 11.5% 5.5% calc(3.9em + 6%); }
/* the story's badge stands on the photo, clear of the business's name */
@media (max-width: 47.99rem) { .device-lg .st-badge { inset-block: 27% auto; } }
/* the review card: the stand and the phone in balance; the phone's screen keeps its large type */
.tap-phone { width: 40%; left: 2%; }
@keyframes tap-come { 0% { translate: -70% -40%; rotate: -28deg; } 82% { translate: 27% 9%; rotate: -11deg; } 100% { translate: 24% 8%; rotate: -12deg; } }
.tap-phone { translate: 24% 8%; }
.cell-reviews .tap-scene .tap-kit { width: 60%; }
.tap-ring { left: 58%; top: 44%; }
.tap-banner span { padding-inline-end: 17cqi; }
@media (max-width: 359.98px) { .tap-phone { width: 44%; } }
.tap-banner span { padding-inline-end: 0; }
@media (max-width: 359.98px) { .tap-lock span { font-size: 8.6cqi; } .tap-banner b { font-size: 8.4cqi; } .tap-banner span { font-size: 7.8cqi; } .tap-ph { font-size: 8.2cqi; } }
/* on a computer the review card's row is short: its scene stands smaller, whole inside the card */
@media (min-width: 60rem) { .tap-scene { inline-size: min(100%, 16.5rem); } }

/* ---------- the detail audit's catches (lab/detail-audit.mjs) ---------- */
/* the review page's rows: the stars carry their own height (a ratio inside a row is not counted when the row is sized) */
.tap-stars { block-size: 13.5cqi; }
.tap-stars i { block-size: 13.5cqi; aspect-ratio: auto; }
.tap-biz { margin-block-start: 0; }
.tap-sheet { gap: 3.6cqi; }
/* questions and intros never end on one short word */
.faq summary, .method .intro { text-wrap: balance; }
/* the story on a phone: the soft edge under the phone sits inside its stage (the stage clips what runs past it) */
@media (max-width: 47.99rem) { .how-stage::after { inset: auto 0 0; height: 2.75rem; } }
/* the review page stacks as a column: each row keeps its own height, nothing can ride over the next */
.tap-sheet { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.tap-sheet > * { flex: none; }
/* the story's stage on a phone clips only below the phone (a box clip turned the phone's shadow into a grey
   rectangle); its progress bars give way to the steps' own numbers, so nothing sits on the phone's buttons */
@media (max-width: 47.99rem) {
  .how-stage { overflow: visible; clip-path: inset(-3rem -50vw 0 -50vw); }
  .how-progress { display: none; }
  .how-stage::after { height: 3.5rem; }
}
@media (max-width: 47.99rem) { .how-stage::after { inset: auto -50vw 0; } }
@media (min-width: 60rem) { .tap-phone { width: 43%; } .tap-lock span { font-size: 8.6cqi; } .tap-banner b { font-size: 8.4cqi; } .tap-banner span { font-size: 7.8cqi; } .tap-ph { font-size: 8.4cqi; } }
@media (max-width: 47.99rem) { .how-stage::after { inset: auto calc(-1 * var(--gut)) 0; } }
/* the bento's last row on a computer holds the review card's scene whole (it ran 30px past the card) */
@media (min-width: 60rem) { .bento { grid-template-rows: 26rem 26rem 28rem; } }
@media (min-width: 60rem) and (max-width: 79.99rem) { .tap-scene { inline-size: min(100%, 13.5rem); } }
@media (min-width: 60rem) { .tap-phone { translate: 24% 2%; } }
@supports (animation-timeline: view()) { @media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
  @keyframes tap-come-wide { 0% { translate: -70% -40%; rotate: -28deg; } 82% { translate: 27% 3%; rotate: -11deg; } 100% { translate: 24% 2%; rotate: -12deg; } }
  html.js .tap-phone { animation-name: tap-come-wide; }
} }
@media (min-width: 60rem) and (max-width: 79.99rem) { .bento { grid-template-rows: 26rem 26rem 31rem; } }

/* ---------- his iPhone, 2026-11-04 evening ---------- */
/* the name field stands in the middle of a phone, with its button the full width under it */
@media (max-width: 59.99rem) {
  .hero-name { justify-self: stretch; width: 100%; justify-items: center; text-align: center; }
  .hero-name label, .hero-name .name-note { text-align: center; }
  .hero .hero-name input { text-align: center; }
  .hero-act { justify-content: center; width: 100%; }
  .hero-act .pill-lg { width: 100%; justify-content: center; }
  .hero-note { justify-self: center; text-align: center; }
}

/* the story's phone on a phone: no white band laid over it; the phone itself fades out at the stage's foot (a mask on
   the phone, measured from the stage: 46svh less its padding), and a soft edge falls below the stage over the text */
@media (max-width: 47.99rem) {
  .how-stage { clip-path: inset(-3rem -50vw -2.75rem -50vw); }
  .how-stage .device { -webkit-mask-image: linear-gradient(#000 calc(46svh - 7rem), transparent calc(46svh - 2.7rem)); mask-image: linear-gradient(#000 calc(46svh - 7rem), transparent calc(46svh - 2.7rem)); }
  .how-stage::after { inset: 100% calc(-1 * var(--gut)) auto; height: 2.5rem; background: linear-gradient(var(--bg), rgb(255 255 255 / 0)); }
}

/* the trades: one field at a time, large, switching as the page scrolls (where scroll-driven animations run);
   elsewhere, and under reduced motion, the whole set stands as a grid */
.trade-q { display: none; }
@keyframes tr-step { 0% { opacity: 0; translate: 0 1.75rem; scale: 0.92; visibility: hidden; } 16% { opacity: 1; translate: 0 0; scale: 1; visibility: visible; } 84% { opacity: 1; translate: 0 0; scale: 1; visibility: visible; } 100% { opacity: 0; translate: 0 -1.75rem; scale: 0.96; visibility: hidden; } }
@keyframes tr-first { 0%, 84% { opacity: 1; translate: 0 0; scale: 1; visibility: visible; } 100% { opacity: 0; translate: 0 -1.75rem; scale: 0.96; visibility: hidden; } }
@keyframes tr-last { 0% { opacity: 0; translate: 0 1.75rem; scale: 0.92; visibility: hidden; } 16%, 100% { opacity: 1; translate: 0 0; scale: 1; visibility: visible; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .trades { view-timeline: --trades block; }
    html.js .trades::after { content: ""; display: block; block-size: calc(19 * 3.8rem + 45svh); }
    html.js .trades-pin { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
    html.js .trades-list { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; block-size: clamp(16rem, 40svh, 21rem); margin-block-start: 0.75rem; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    html.js .trades-list li { grid-area: 1 / 1; inline-size: min(100% - 2 * var(--gut), 21rem); flex: none; animation: tr-step cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-timeline: --trades; animation-range: contain calc(var(--i) * 5.2632%) contain calc((var(--i) + 1) * 5.2632%); }
    html.js .trades-list li:first-child { animation-name: tr-first; }
    html.js .trades-list li:last-child { animation-name: tr-last; }
    html.js .trades-list .trade { gap: 0.55rem; padding: 1.1rem 1rem 1.25rem; border-radius: 1.75rem; }
    html.js .trades-list .trade-icon { width: clamp(6.5rem, 20svh, 9.5rem); height: auto; aspect-ratio: 1; filter: drop-shadow(0 16px 18px rgb(11 42 29 / 0.22)); }
    html.js .trades-list .trade > span { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 700; color: var(--ink); }
    html.js .trades-list .trade-q { display: block; max-inline-size: 19rem; font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
    html.js .trades-list:has([aria-pressed="true"]) .trade:not([aria-pressed="true"]) .trade-icon { filter: drop-shadow(0 16px 18px rgb(11 42 29 / 0.22)); }
    html.js .trades-list .trade[aria-pressed="true"] > span { color: var(--green); }
  }
}

/* ---------- no rendered objects (2026-11-04): pieces of the real product, set in type ---------- */
/* the trades as type: the name large, its customers' question under it */
.trade { padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; }
@media (max-width: 47.99rem) { .trades-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  html.js .trades-list .trade { border: 0; background: none; padding: 0.5rem 0.5rem 0.75rem; gap: 0.75rem; }
  html.js .trades-list .trade > span { font-size: clamp(2.5rem, 1.9rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
  html.js .trades-list .trade-q { font-size: 1.0625rem; }
  html.js .trades-list .trade[aria-pressed="true"] { box-shadow: none; background: none; }
  html.js .trades-list .trade[aria-pressed="true"] > span::after { content: ""; display: block; inline-size: 2.5rem; block-size: 3px; margin: 0.6rem auto 0; border-radius: 2px; background: var(--green); }
  html.js .trades-list { block-size: clamp(12rem, 30svh, 16rem); }
} }
/* the product pieces: one card language (white, a hairline, a soft shadow), real words, the page's type */
.ui { position: relative; inline-size: min(100% - 2rem, 19rem); margin-block-end: 1.5rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 18px 34px -22px rgb(11 42 29 / 0.35); color: var(--ink); text-align: start; font-size: 0.9375rem; line-height: 1.4; }
.ui p + p { margin-block-start: 0.55rem; }
.ui-h { font-size: 1.125rem; font-weight: 700; }
.ui-t { font-size: 1.0625rem; font-weight: 700; }
.ui-s { font-size: 0.875rem; color: var(--ink-2); }
.ui-s b { color: var(--ink); }
.ui-open { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--ink-2); }
.ui-open i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: #1fbf6b; box-shadow: 0 0 0 3px rgb(31 191 107 / 0.18); }
.ui-btns { display: flex; gap: 0.4rem; }
.ui-btns b { flex: 1 1 auto; display: grid; place-items: center; block-size: 2.1rem; border-radius: 99px; background: #e9f6ef; color: var(--green); font-size: 0.8125rem; }
.ui-btns b:first-child { flex-grow: 1.4; background: var(--green); color: #fff; }
.ui-site { padding: 0; overflow: hidden; }
.ui-bar { display: flex; align-items: center; gap: 0.3rem; padding: 0.6rem 0.8rem; background: #f3f4f6; font-size: 0.75rem; color: var(--ink-2); }
.ui-bar i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: #d7d9de; }
.ui-bar span { margin-inline-start: auto; padding: 0.15rem 0.6rem; border-radius: 99px; background: #fff; }
.ui-body { padding: 1rem 1.1rem 1.1rem; }
.ui-body > * + * { margin-block-start: 0.6rem; }
.ui-rows { display: grid; border-top: 1px solid #ececf0; }
.ui-rows span { display: flex; justify-content: space-between; align-items: center; padding-block: 0.55rem; border-bottom: 1px solid #ececf0; font-size: 0.875rem; font-weight: 600; }
.ui-rows span::after { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-inline-start: 1.5px solid #a1a1a6; border-block-end: 1.5px solid #a1a1a6; rotate: 45deg; }
.ui-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.ui-slots span { display: grid; place-items: center; block-size: 2.1rem; border: 1px solid #e2e4e8; border-radius: 0.6rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ui-slots .on { border-color: var(--green); background: var(--green); color: #fff; font-weight: 600; }
.ui-cta { display: grid; place-items: center; block-size: 2.4rem; margin-block-start: 0.75rem; border-radius: 0.7rem; background: var(--ink); color: #fff; font-size: 0.9375rem; }
.ui-wa { padding: 0.85rem 1rem 1rem; }
.ui-wa-h { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ui-wa-h i { inline-size: 1.3rem; block-size: 1.3rem; border-radius: 0.35rem; background: #25d366; }
.ui-wa-h span { margin-inline-start: auto; font-weight: 400; }
.ui-wa-m { display: grid; gap: 0.2rem; font-size: 0.9375rem; }
.ui-wa-m b { margin-block-end: 0.15rem; font-size: 1rem; }
.ui-wa-m span { color: var(--ink-2); }
.ui-reply { padding: 0.65rem 0.75rem; border-radius: 0.7rem; background: #f3f6f4; font-size: 0.875rem; color: var(--ink-2); }
.ui-reply b { display: block; margin-block-end: 0.15rem; font-size: 0.8125rem; color: var(--ink); }
.ui-upd { font-size: 0.8125rem; font-weight: 600; color: var(--green); }
.ui-switch { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ui-switch b { padding: 0.3rem 0.65rem; border-radius: 99px; background: #f3f4f6; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ui-switch .on { background: var(--ink); color: #fff; }
.ui-l { padding-block: 0.45rem; border-bottom: 1px solid #ececf0; font-size: 1rem; font-weight: 600; }
.ui-l:last-child { border-bottom: 0; }
.ui-l[dir="ltr"] { text-align: left; }
@media (min-width: 60rem) { .cell-book .cell-art .ui, .cell-leads .cell-art .ui { margin-block-end: 0; } .cell-site .ui { inline-size: min(100% - 2rem, 20rem); } }
/* the review card's tap card: flat, the brand's own mark, the tap mark */
.tap-card { position: absolute; right: 2%; bottom: 6%; inline-size: 52%; aspect-ratio: 1.586; display: grid; align-content: space-between; padding: 7% 8%; border-radius: 9% / 14%; background: linear-gradient(150deg, #0e5a34, #0b2a1d); color: #fff; box-shadow: 0 20px 30px -18px rgb(11 42 29 / 0.6); container-type: inline-size; }
.tap-card .tap-z { inline-size: 46%; color: #fff; }
.tap-card .tap-nfc { position: absolute; inset-inline-start: 8%; inset-block-start: 9%; inline-size: 15%; color: var(--mint); }
.tap-card em { font-style: normal; font-size: 8cqi; color: rgb(255 255 255 / 0.8); }
/* the hero's assistant: no glowing orb */
.hero .ask-phone .ask-top { padding-block-end: 0.62em; }
.tap-ring { left: 64%; top: 66%; }
.ui-wa-h i { display: grid; place-items: center; border-radius: 50%; color: #fff; }
.ui-wa-h i svg { inline-size: 0.8rem; block-size: 0.8rem; }
.ui-switch { flex-wrap: nowrap; gap: 0.25rem; }
.ui-switch b { padding: 0.28rem 0.5rem; font-size: 0.75rem; white-space: nowrap; }
.is-slot { padding: 0.02em 0.35em; border-radius: 0.35em; background: rgb(18 122 69 / 0.1); box-shadow: inset 0 0 0 1px rgb(18 122 69 / 0.28); }
.is-slot { white-space: nowrap; }
.ask-src .is-slot { padding-block: 0; }

/* ---------- less AI (2026-11-04 night): flat, confident colour; the brand's own mark, no rendered glass ---------- */
.hero { background: var(--grain), var(--hero-bg); }
.build { background: var(--bg); }
.offer-in { background: var(--grain), #0b2a1d; }
.numbers-art { position: relative; overflow: clip; padding-block-start: clamp(2rem, 1rem + 5vw, 5rem); }
.numbers-mark { position: absolute; inset-inline-end: -8%; inset-block-start: -4%; inline-size: min(78vw, 34rem); color: var(--mint); opacity: 0.16; pointer-events: none; }
@keyframes sc-mark { from { opacity: 0; scale: 0.94; } to { opacity: 0.16; scale: 1; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  html.js .numbers-mark { animation: sc-mark cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-timeline: view(); animation-range: cover 0% cover 45%; }
} }
.numbers-head { position: relative; }

/* the trades as a picker wheel, held in the middle of the screen: the current field large in the centre, the one
   before and the one after small and faint above and below; the wheel turns with the scroll */
@keyframes tr-wheel {
  0% { translate: 0 8.5rem; scale: 0.42; opacity: 0; visibility: hidden; }
  16.67% { translate: 0 5.6rem; scale: 0.52; opacity: 0.3; visibility: visible; }
  42%, 58% { translate: 0 0; scale: 1; opacity: 1; visibility: visible; }
  83.33% { translate: 0 -5.6rem; scale: 0.52; opacity: 0.3; visibility: visible; }
  100% { translate: 0 -8.5rem; scale: 0.42; opacity: 0; visibility: hidden; }
}
@keyframes tr-q { 0%, 38% { opacity: 0; } 46%, 54% { opacity: 1; } 62%, 100% { opacity: 0; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  html.js .trades::after { block-size: calc(19 * 3.4rem + 40svh); }
  html.js .trades-pin { top: var(--nav-h); min-block-size: calc(100svh - var(--nav-h)); display: grid; align-content: center; justify-items: center; }
  html.js .trades-list { block-size: clamp(18rem, 46svh, 22rem); }
  html.js .trades-list li, html.js .trades-list li:first-child, html.js .trades-list li:last-child {
    animation-name: tr-wheel; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-range: contain calc((var(--i) - 1.5) * 5.2632%) contain calc((var(--i) + 1.5) * 5.2632%);
  }
  html.js .trades-list .trade-q { animation: tr-q cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-timeline: --trades; animation-range: contain calc((var(--i) - 1.5) * 5.2632%) contain calc((var(--i) + 1.5) * 5.2632%); }
  html.js .trades-list .trade-q { --i: inherit; }
} }
@keyframes tr-wheel {
  0% { translate: 0 9.5rem; scale: 0.4; opacity: 0; visibility: hidden; }
  16.67% { translate: 0 6.6rem; scale: 0.5; opacity: 0.28; visibility: visible; }
  42%, 58% { translate: 0 0; scale: 1; opacity: 1; visibility: visible; }
  83.33% { translate: 0 -6.6rem; scale: 0.5; opacity: 0.28; visibility: visible; }
  100% { translate: 0 -9.5rem; scale: 0.4; opacity: 0; visibility: hidden; }
}
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  html.js .trades-list { block-size: clamp(21rem, 52svh, 25rem); }
  html.js .trades-list li { inline-size: min(100% - 2 * var(--gut), 36rem); }
  html.js .trades-list .trade > span { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem); white-space: nowrap; }
} }

/* the conversation sits just above the composer, as a chat app keeps it; the header stays at the top */
.hero .ask-phone .ask-screen { justify-content: flex-start; }
.hero .ask-phone .ask-top { margin-block-end: auto; }
.hero .ask-phone .ask-card > b.is-slot { justify-self: start; }
@media (max-width: 359.98px) { .ui-switch { flex-wrap: wrap; } }

/* ---------- every iPhone (scroll-driven animations or not) ---------- */
.ask-pin { display: grid; justify-items: center; gap: 0.9rem; }
/* the conversation in the middle of the screen, between the header and the composer */
.hero .ask-phone .ask-top { margin-block-end: auto; }
.hero .ask-phone .ask-card { margin-block-end: auto; }
.hero .ask-phone .ask-text { font-size: 1.05em; font-weight: 600; }

/* ---------- his iPhone audit, 2026-11-04 late ---------- */
/* the hero: the conversation starts under the header, as in a chat app; the composer stays at the foot */
.hero .ask-phone .ask-screen { font-size: 6.2cqi; }
.hero .ask-phone .ask-top { margin-block-end: 0.3em; }
.hero .ask-phone .ask-card { margin-block-end: 0; }

/* the hero's chat, played by the script on every browser. On a phone the phone holds in the middle of the screen,
   between the nav and the dock (the large viewport: Safari's bar is down while scrolling), and is sized so it also
   fits when the bar is up. Every frame the script sets the scene; the stylesheet's own scroll animations stand down. */
:root { --dock-space: 0px; --stage-h: calc(100lvh - var(--nav-h) - var(--dock-space)); }
@media (max-width: 47.99rem) { :root { --dock-space: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 59.99rem) {
  html.chat-js .hero-ask::after { content: ""; block-size: 120svh; }
  html.chat-js .ask-pin { position: sticky; top: var(--nav-h); min-block-size: var(--stage-h); align-content: center; }
  html.chat-js .hero .ask-phone { width: min(16.5rem, 70vw, calc((100svh - var(--nav-h) - var(--dock-space) - 5.75rem) * 0.48)); }
}
@media (min-width: 60rem) {
  html.chat-js .hero-run::after { content: ""; display: block; block-size: 110svh; }
  html.chat-js .hero-in { position: sticky; top: calc(var(--nav-h) + clamp(2rem, 1rem + 4vw, 4.5rem)); }
}
html.chat-js :is(.ask-typed, .ask-typed .c, .ask-ph, .ask-send, .ask-q, .ask-dots, .ask-text, .ask-text .w, .ask-card, .ask-hello, .ask-run) { animation: none !important; }
html.chat-js :is(.ask-typed .c, .ask-text, .ask-text .w, .ask-run) { transition: none !important; }
html.chat-js .ask-typed .c::after { animation: none !important; }
html.chat-js .ask-typed { display: block; transition: opacity 0.1s linear; }
html.chat-js .ask-typed .c { opacity: 0; }
html.chat-js .ask-typed .c.on { opacity: 1; }
@keyframes ask-caret { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
html.chat-js .ask-typed .c.cur::after { opacity: 1; animation: ask-caret 1.05s steps(1, end) infinite !important; }
html.chat-js .ask-ph { transition: opacity 0.12s linear; }
html.chat-js .s-type .ask-ph { opacity: 0; }
html.chat-js .ask-send { transition: none; }
html.chat-js .ask-send::before { opacity: 0; animation: none !important; transition: opacity 0.18s var(--ease-ui); }
html.chat-js .s-type .ask-send::before { opacity: 1; }
@keyframes ask-press { 0%, 100% { scale: 1; } 40% { scale: 0.84; } }
html.chat-js .s-sent .ask-send { animation: ask-press 0.32s cubic-bezier(0.3, 0, 0.3, 1) !important; }
html.chat-js .s-sent .ask-typed { opacity: 0; }
/* sending: the composer clears and the question rises from it to its place; the greeting steps aside */
/* the greeting, the sent question, the dots and the card move on springs in the script (site.js, "the hero's chat"),
   which writes their transform and opacity every frame; here they only start hidden and stay on their own layer */
html.chat-js .ask-hello { display: grid; transition: none; translate: none; }
html.chat-js .ask-q { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.92); transform-origin: 0 100%; transition: none; }
/* thinking, the way an assistant shows it: one soft dot breathing and its words with a light passing through them,
   right to left as Hebrew reads (1.2 s a breath, 1.5 s a pass: slow enough to read as calm, never as stuck) */
html.chat-js .ask-dots i { display: none; }
html.chat-js .ask-dots::before { content: ""; flex: none; inline-size: 0.62em; block-size: 0.62em; border-radius: 50%; background: var(--green); animation: ask-think-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
html.chat-js .ask-dots span { margin-inline-start: 0.5em; color: transparent; background: linear-gradient(90deg, #6e6e73 0 36%, #c9c9ce 50%, #6e6e73 64% 100%) 0 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: ask-think-light 1.5s linear infinite; }
@keyframes ask-think-dot { 0%, 100% { scale: 0.7; opacity: 0.55; } 50% { scale: 1; opacity: 1; } }
@keyframes ask-think-light { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* the assistant thinks, then the business's card comes up under the answer */
html.chat-js .ask-dots { display: flex; position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; transition: none; }
html.chat-js .ask-text .w { opacity: 0; }
html.chat-js .ask-card { opacity: 0; transform: translate3d(0, 0.9rem, 0) scale(0.97); transition: none; }

/* the trades wheel: a drum like a phone's time picker, played by the script on every browser. The field in the middle
   stands large and flat on a soft band; the ones before and after tilt away above and below. The drum moves with the
   finger (one field per field's height of scroll) and settles on a field when the scroll rests; that field's
   customers' question sits under the band. */
html.wheel-js .trades::after { content: ""; display: block; block-size: calc(18 * 5.13rem + 24svh); }
html.wheel-js .trades-pin { position: sticky; top: var(--nav-h); min-block-size: var(--stage-h); display: grid; align-content: center; justify-items: center; }
html.wheel-js .trades-list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; inline-size: 100%; block-size: clamp(17rem, 42svh, 21rem); margin-block-start: 0.5rem; padding: 0; overflow: visible; perspective: 60rem; -webkit-mask-image: none; mask-image: none; }
html.wheel-js .trades-list::before { content: ""; position: absolute; inset-inline: max(var(--gut), 50% - 11rem); inset-block-start: 50%; block-size: 4.25rem; translate: 0 -50%; border-radius: 1.25rem; background: rgb(18 122 69 / 0.055); box-shadow: inset 0 0 0 1px rgb(18 122 69 / 0.09); pointer-events: none; }
html.wheel-js .trades-list li { grid-area: 1 / 1; inline-size: min(100% - 2 * var(--gut), 36rem); display: grid; justify-items: center; animation: none !important; transition: none !important; translate: none !important; scale: none !important; opacity: 0; visibility: visible; will-change: transform, opacity; backface-visibility: hidden; }
html.wheel-js .trades-list .trade { position: relative; display: block; inline-size: auto; min-block-size: 0; padding: 0.35rem 0.75rem; border: 0; background: none; box-shadow: none; }
html.wheel-js .trades-list .trade > span { display: block; font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
html.wheel-js .trades-list .trade > span::after { display: none; }
html.wheel-js .trades-list .trade-q { display: none !important; }
html.wheel-js .trades-list .trade[aria-pressed="true"] > span { color: var(--green); }
html.wheel-js .trades-list .trade:active { scale: 1; }
.trades-ask { min-block-size: 1.5em; margin-block-start: 0.35rem; padding-inline: var(--gut); font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); text-align: center; text-wrap: balance; transition: opacity 0.2s var(--ease-ui), translate 0.3s var(--ease-out); }
.trades-ask.is-out { opacity: 0; translate: 0 0.35rem; }
html:not(.wheel-js) .trades-ask { display: none; }


/* WhatsApp as on a Hebrew phone: what you send is green, on the left; what you receive is white, on the right */
.ui-chat { padding: 0; overflow: hidden; background: #efeae2; }
.ui-chat p + p, .ui-chat .uc-body > * { margin: 0; }
.uc-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; background: #fff; border-bottom: 1px solid rgb(0 0 0 / 0.06); }
.uc-av { flex: none; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--green); }
.uc-av svg { inline-size: 46%; height: auto; }
.uc-head b { display: block; font-size: 0.9375rem; line-height: 1.25; }
.uc-head small { display: block; font-size: 0.75rem; color: var(--ink-2); }
.uc-body { display: grid; gap: 0.4rem; padding: 0.9rem 0.75rem 1rem; }
.uc-b { max-inline-size: 86%; padding: 0.45rem 0.7rem 0.35rem; border-radius: 0.85rem; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13); }
.uc-in { justify-self: start; background: #fff; border-start-start-radius: 0.2rem; }
.uc-out { justify-self: end; background: #d9fdd3; border-start-end-radius: 0.2rem; }
.uc-b time, .st-chat .bubble time { position: static; display: flex; justify-content: flex-end; align-items: center; gap: 0.2em; margin-block-start: 0.15em; font-size: 0.72em; line-height: 1.2; color: #667781; font-variant-numeric: tabular-nums; }
.uc-b time svg, .st-chat .bubble time svg { inline-size: 1.15em; block-size: 1.15em; color: #53bdeb; }
.st-chat .bubble > span { display: block; }
.uc-link { display: grid; gap: 0.45rem; padding: 0.3rem 0.3rem 0.35rem; }
.uc-link > span:not(.uc-prev), .uc-link time { padding-inline: 0.4rem; }
.uc-prev { display: grid; overflow: hidden; border-radius: 0.6rem; background: #f0f2f5; }
.uc-prev-img { display: block; aspect-ratio: 16 / 7; background: radial-gradient(120% 90% at 30% 20%, #d9f5e7 0%, #9ed9bd 38%, #3d8f69 100%); }
.uc-prev-t { display: grid; justify-items: start; gap: 0.1rem; padding: 0.5rem 0.65rem 0.55rem; }
.uc-prev-t b { font-size: 0.9375rem; }
.uc-prev-t small { font-size: 0.75rem; color: var(--ink-2); }

/* the story on a phone: no split screen. Each step reads whole: its number, its title, a line, and its own moment */
.step-art { display: none; }
@media (max-width: 47.99rem) {
  .how-stage { display: none; }
  .how-track { margin-block-start: 1.5rem; }
  .how-steps { gap: 3rem; }
  .step, .step:first-child, .step:last-child { min-height: 0; padding-block: 0; }
  .step h3 { color: var(--ink); }
  .step-n { color: var(--green); }
  .step-art { display: block; margin-block-start: 1.1rem; }
  .step-art .ui { inline-size: 100%; max-inline-size: 23rem; margin: 0; }
}
/* step 2: the site assembles, part after part, as it arrives */
.ui-build .ui-photo { aspect-ratio: 16 / 7; border-radius: 0.7rem; background: radial-gradient(120% 90% at 30% 20%, #d9f5e7 0%, #9ed9bd 38%, #3d8f69 100%); }
.ui-build .ui-body > * { transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out); }
.ui-build .ui-body > :nth-child(1) { transition-delay: 0.2s; }
.ui-build .ui-body > :nth-child(2) { transition-delay: 0.4s; }
.ui-build .ui-body > :nth-child(3) { transition-delay: 0.55s; }
.ui-build .ui-body > :nth-child(4) { transition-delay: 0.7s; }
html.js .step-art:not(.is-in) .ui-build .ui-body > * { opacity: 0; translate: 0 0.6rem; }
/* step 4: the address, and the site live on it */
.ui-live { display: grid; gap: 0.75rem; padding: 1rem 1.1rem 1.15rem; }
.ui-live > * { margin: 0 !important; }
.ul-bar { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-radius: 99px; background: #f3f4f6; font-size: 0.875rem; color: var(--ink); }
.ul-bar svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--ink-2); }
.ul-state { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.ul-state i { position: relative; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%; background: #1fbf6b; }
.ul-state i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1fbf6b; opacity: 0.5; }
@keyframes ul-ping { 0% { scale: 1; opacity: 0.5; } 70%, 100% { scale: 2.6; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .ul-state i::after { animation: ul-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; } }
.ul-sub { text-align: center; font-size: 0.875rem; color: var(--ink-2); }

/* the service: a request and its answer, then the promises in a line each */
.service-in { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); }
.service-in .sec-head { margin: 0; }
.svc-chat .ui { inline-size: min(100%, 24rem); margin: 0; }
.svc-checks { display: grid; border-top: 1px solid var(--line); }
.svc-checks li { display: flex; align-items: center; gap: 0.8rem; padding-block: 1rem; border-bottom: 1px solid var(--line); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); font-weight: 600; line-height: 1.4; color: var(--ink); }
.svc-checks svg { flex: none; inline-size: 1.6rem; block-size: 1.6rem; padding: 0.25rem; border-radius: 50%; background: #e3f4ea; color: var(--green); }
@media (min-width: 60rem) {
  .service-in { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "list chat"; align-items: center; column-gap: 4rem; }
  .service-in .sec-head { grid-area: head; }
  .svc-checks { grid-area: list; }
  .svc-chat { grid-area: chat; justify-self: center; }
}
/* a step's words (its pictures follow it now, so "last child" no longer finds them); the pictures keep their own type */
.step > p:not(.step-n) { margin-block-start: 0.6rem; max-width: 30rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); }
.step .step-art p:last-child { max-width: none; margin-block-start: 0; font-size: inherit; line-height: inherit; color: inherit; }
.step .step-art .ui-body > p:last-child { margin-block-start: 0.6rem; }
.step .step-art p.uc-b:last-child { max-inline-size: 86%; line-height: 1.4; }
.step .step-art p.ul-sub { font-size: 0.875rem; color: var(--ink-2); }
.svc-chat { inline-size: min(100%, 26rem); }
.svc-chat .ui { inline-size: 100%; }
.uc-b time { font-size: 0.8em; }
.numbers .intro { text-wrap: balance; }

/* the hero's foot: three times from the way the work runs, set as a short timeline (a line with a point for each) */
.hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(0.9rem, 0.4rem + 2vw, 3rem); padding-block-start: 1.7rem; border-top: 0; }
.hero-facts::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0.3rem; block-size: 1px; background: linear-gradient(to left, rgb(62 224 154 / 0.6), rgb(62 224 154 / 0.1)); transform-origin: right; }
.hero-facts > div, .hero-facts > div + div { position: relative; display: grid; align-content: start; gap: 0.55rem; padding: 0; border: 0; }
.hero-facts > div::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(-1.7rem + 0.3rem - 0.28rem + 0.5px); inline-size: 0.56rem; block-size: 0.56rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgb(62 224 154 / 0.14); }
.hero-facts dt { display: grid; justify-items: start; gap: 0.2rem; font-size: 1rem; }
.hero-facts dt b { font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #f5f5f7; font-variant-numeric: tabular-nums; }
.hero-facts dt span { font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); font-weight: 600; color: var(--mint); }
.hero-facts dd { max-width: 22ch; font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1.0625rem); line-height: 1.45; color: rgb(245 245 247 / 0.64); text-wrap: pretty; }
html.js .hero-facts::before { scale: 0 1; transition: scale 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
html.js .hero-facts.is-in::before { scale: 1 1; }
html.js .hero-facts > div { opacity: 0; translate: 0 0.75rem; transition: opacity 0.6s var(--ease-out), translate 0.75s var(--ease-out); }
html.js .hero-facts.is-in > div { opacity: 1; translate: none; }
html.js .hero-facts > div:nth-child(2) { transition-delay: 0.22s; }
html.js .hero-facts > div:nth-child(3) { transition-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) { html.js .hero-facts::before, html.js .hero-facts > div { scale: 1 1; opacity: 1; translate: none; transition: none; } }
/* the timeline, plain and solid: one even hairline, flat points, the numbers carry it */
.hero-facts::before { background: rgb(255 255 255 / 0.18); }
.hero-facts > div::before { inline-size: 0.5rem; block-size: 0.5rem; inset-block-start: calc(-1.7rem + 0.3rem - 0.25rem + 0.5px); box-shadow: none; }
.hero-facts dt b { font-size: clamp(2.5rem, 1.9rem + 2.8vw, 4rem); letter-spacing: -0.025em; }

/* the extras: a card of their own at the foot of the grid, in the cards' language (not a loose line) */
.build-more { margin-block-start: 1rem; color: inherit; text-wrap: initial; }
.bm-card { display: grid; justify-items: start; gap: 1rem; padding: 1.75rem; border-radius: var(--r); background: var(--bg-2); }
.bm-h { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; }
.bm-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bm-tags li { padding: 0.5rem 0.95rem; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.bm-card .more { min-height: 2.75rem; }
@media (min-width: 48rem) { .build-more { margin-block-start: 1.25rem; } }
@media (min-width: 60rem) { .bm-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; padding: 1.5rem 2rem; } }

/* what is different, on a phone: one list, each row its topic, ZSMART's answer with a check, and the usual way quieter */
@media (max-width: 47.99rem) {
  .compare-in { margin-block-start: 1.75rem; }
  .vs tbody { display: block; overflow: hidden; border-radius: var(--r); background: var(--bg); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 24px 44px -30px rgb(11 42 29 / 0.4); }
  .vs tbody tr { gap: 0.45rem; padding: 1.2rem 1.2rem 1.25rem; border-top: 1px solid #ececf0; }
  .vs tbody tr:first-child { border-top: 0; }
  .vs tbody th { order: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--green); }
  .vs td.vs-us { order: 1; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); column-gap: 0.6rem; align-items: start; padding: 0; border-radius: 0; background: none; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
  .vs td.vs-us::before { content: ""; display: block; inline-size: 1.4rem; block-size: 1.4rem; margin: 0.05rem 0 0; border-radius: 50%; background: #e3f4ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23127a45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.85rem no-repeat; }
  .vs td:not(.vs-us) { order: 2; padding-inline-start: 2rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
  .vs td:not(.vs-us)::before { content: "בדרך כלל: "; display: inline; margin: 0; font-size: inherit; font-weight: 600; color: var(--ink-2); }
  .vs tbody tr:last-child .vs-us { border-radius: 0; }
}

/* each extra opens WhatsApp with its own request written */
.bm-tags li { padding: 0; background: none; box-shadow: none; }
.bm-tag { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding: 0.45rem 1rem; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); transition: color 0.2s var(--ease-ui), box-shadow 0.2s var(--ease-ui), scale 0.15s var(--ease-out); }
.bm-tag:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .bm-tag:hover { color: var(--green); box-shadow: 0 0 0 1px rgb(18 122 69 / 0.35); } }
/* what is different, on a wider screen: the same check beside each of ZSMART's answers */
@media (min-width: 48rem) {
  .vs td.vs-us { position: relative; padding-inline-start: 3.1rem; }
  .vs td.vs-us::before { content: ""; position: absolute; inset-inline-start: 1.15rem; inset-block-start: 1.2rem; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%; background: #e3f4ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23127a45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.82rem no-repeat; }
  .vs thead .vs-us, .vs td.vs-us { box-shadow: inset 1px 0 0 #ececf0, inset -1px 0 0 #ececf0; }
  .vs thead .vs-us { box-shadow: inset 0 3px 0 var(--green), inset 1px 0 0 #ececf0, inset -1px 0 0 #ececf0; }
  .vs tbody tr:last-child td.vs-us { box-shadow: inset 1px 0 0 #ececf0, inset -1px 0 0 #ececf0, inset 0 -1px 0 #ececf0; }
}
.bm-tag { text-decoration: none; }

/* the comparison on a phone, as one card: a legend at its head (ZSMART with a check, the usual way with a dash), then
   each topic with both answers on the same marks, ours first */
@media (max-width: 47.99rem) {
  .vs { display: block; overflow: hidden; border-radius: var(--r); background: var(--bg); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 24px 44px -30px rgb(11 42 29 / 0.4); }
  .vs tbody { border-radius: 0; box-shadow: none; background: none; }
  .vs thead { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; }
  .vs thead tr { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0.9rem 1.2rem; background: #fafafb; border-bottom: 1px solid #ececf0; }
  .vs thead td { display: none; }
  .vs thead th, .vs thead .vs-us { display: inline-flex; align-items: center; gap: 0.45rem; width: auto; padding: 0; border-radius: 0; box-shadow: none; background: none; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
  .vs thead .vs-us { order: -1; font-size: 0.8125rem; color: var(--green); }
  .vs thead th::before { content: ""; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: #efeff2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2386868b' stroke-width='2.6' stroke-linecap='round' d='M7 12h10'/%3E%3C/svg%3E") center / 0.7rem no-repeat; }
  .vs thead .vs-us::before { background: #e3f4ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23127a45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.7rem no-repeat; }
  .vs tbody tr { gap: 0.5rem; }
  .vs td:not(.vs-us) { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); column-gap: 0.6rem; align-items: start; padding-inline-start: 0; }
  .vs td:not(.vs-us)::before { content: ""; display: block; inline-size: 1.4rem; block-size: 1.4rem; margin: 0; border-radius: 50%; background: #efeff2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2386868b' stroke-width='2.6' stroke-linecap='round' d='M7 12h10'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
}
/* the extras as even tiles: two by two on a phone, four in a row on a computer, each with the page's chevron */
.bm-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; inline-size: 100%; }
.bm-tag { justify-content: space-between; gap: 0.5rem; inline-size: 100%; min-block-size: 3.25rem; padding: 0.6rem 1rem; border-radius: 1rem; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 6px 14px -10px rgb(11 42 29 / 0.25); }
.bm-tag svg { flex: none; width: 1rem; height: 1rem; color: var(--green); transition: translate 0.2s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .bm-tag:hover svg { translate: -0.15rem 0; } }
@media (min-width: 60rem) { .bm-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bm-card { grid-template-columns: auto minmax(0, 1fr); } .bm-card .more { grid-column: 2; justify-self: start; } }
/* a little less air between the cards and the story on a phone */
@media (max-width: 47.99rem) { .build { padding-block-end: calc(var(--band) * 0.75); } }
@media (max-width: 47.99rem) {
  .vs thead td { display: none !important; }
  /* the extras on a phone: one grouped list, a row per extra (as a phone's own settings list) */
  .bm-tags { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 10px 24px -18px rgb(11 42 29 / 0.3); }
  .bm-tags li + li { border-top: 1px solid #ececf0; }
  .bm-tag { min-block-size: 3.25rem; padding: 0.6rem 1.1rem; border-radius: 0; box-shadow: none; background: none; }
}

/* ---------- the page as a run of sheets (2026-11-04 night) ----------
   Each section holds still once its end reaches the foot of the screen, and the next slides up over it with a rounded
   edge and a soft shadow, so the page moves from moment to moment instead of running on as one long sheet. Sticky,
   so the browser's own scrolling drives it; the script only tells each section its height (--h). */
html.sheets main > section { position: sticky; top: calc(100lvh - var(--h, 100lvh)); z-index: 0; }
html.sheets main > section:not(.hero), html.sheets .foot { margin-block-start: calc(-1 * var(--r)); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -1px 0 rgb(0 0 0 / 0.04), 0 -24px 44px -26px rgb(11 42 29 / 0.34); }
html.sheets :is(.method, .numbers, .contact, .foot-night) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 -24px 44px -24px rgb(0 0 0 / 0.6); }
html.sheets .foot { position: relative; z-index: 1; }
html.sheets .method { background: var(--grain), #061a10; }
@media print { html.sheets main > section { position: static; margin: 0; border-radius: 0; box-shadow: none; } }
/* the space between moments: the sheet's edge marks the change, so less air is needed around it */
:root { --band: clamp(4.5rem, 3.25rem + 5vw, 8.5rem); --band-sm: clamp(3.75rem, 3rem + 3.5vw, 6.5rem); }
/* the pinned stages sit centred between the nav and the dock once pinned, at their own height (no empty room before) */
@media (max-width: 59.99rem) { html.chat-js .ask-pin { min-block-size: 0; align-content: start; top: calc(var(--nav-h) + max(0px, (var(--stage-h) - var(--pin-h, 0px)) / 2)); } }
html.wheel-js .trades-pin { min-block-size: 0; top: calc(var(--nav-h) + max(0px, (var(--stage-h) - var(--pin-h, 0px)) / 2)); }
/* when the hero holds and the next sheet rises, its timeline stands whole above the dock */
html.sheets .hero-facts { margin-block-end: calc(var(--dock-space) + clamp(2.5rem, 2rem + 2vw, 3.5rem)); }

/* ---------- with sheets, every moment plays on its own clock once it is in view ----------
   A section that holds still while the next sheet slides over it would freeze any animation tied to its position
   half way. So arrivals, the method's steps and the review card's tap play as timed moments when they come in
   (the same on every browser, older iPhones included). */
html.sheets [data-reveal] { animation: none !important; opacity: 0; translate: 0 1rem; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); transition-delay: var(--d, 0s); }
html.sheets [data-reveal].is-in { opacity: 1; translate: none; }
html.sheets .method-list li > p { animation: none !important; }
html.sheets .method-list::before { animation: none !important; }
/* the review card: the phone comes to the stand, the tap rings, the notice drops, the review page opens, the stars
   fill one by one, and "post" lights; about three seconds, once the card is in view */
@keyframes tap-in { 0% { translate: -70% -40%; rotate: -28deg; } 82% { translate: 27% 9%; rotate: -11deg; } 100% { translate: 24% 8%; rotate: -12deg; } }
@keyframes tap-in-wide { 0% { translate: -70% -40%; rotate: -28deg; } 82% { translate: 27% 3%; rotate: -11deg; } 100% { translate: 24% 2%; rotate: -12deg; } }
html.sheets .tap-phone { animation: tap-in 1s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both paused !important; }
@media (min-width: 60rem) { html.sheets .tap-phone { animation-name: tap-in-wide !important; } }
html.sheets .tap-ring { animation: tap-ring 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) 1.05s both paused !important; }
html.sheets .tap-ring-2 { animation-delay: 1.22s !important; }
html.sheets .tap-banner { animation: tap-banner 0.75s cubic-bezier(0.23, 1, 0.32, 1) 1.3s both paused !important; }
html.sheets .tap-lock { opacity: 1; animation: sc-off 0.25s ease 1.85s both paused !important; }
html.sheets .tap-sheet { animation: tap-open 0.4s cubic-bezier(0.23, 1, 0.32, 1) 1.85s both paused !important; }
html.sheets .tap-stars svg { animation: tap-star 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) calc(2.25s + var(--s) * 0.14s) both paused !important; }
html.sheets .tap-post { animation: sc-in 0.3s cubic-bezier(0.23, 1, 0.32, 1) 3.05s both paused !important; }
html.sheets .cell-reviews.is-play :is(.tap-phone, .tap-ring, .tap-banner, .tap-lock, .tap-sheet, .tap-stars svg, .tap-post) { animation-play-state: running !important; }

/* ---------- the hero on a phone: room to breathe ----------
   The headline, one line on the problem it solves, the name field, the button and one promise; centred, with air
   between them. The eyebrow, the field's label line and the second link stay on the computer, where there is room. */
.hero-sub-phone, .hero-note-phone { display: none; }
@media (max-width: 59.99rem) {
  .hero-sub-wide, .hero-note-wide { display: none; }
  .hero-sub-phone, .hero-note-phone { display: block; }
  .hero .eyebrow, .hero-act .more-night { display: none; }
  .hero-copy { justify-items: center; gap: 0; text-align: center; }
  .hero h1 { justify-items: center; }
  .hero-line { text-wrap: balance; }
  .hero-sub-phone { margin-block-start: 1.15rem; max-width: 29ch; font-size: 1.125rem; line-height: 1.6; color: rgb(245 245 247 / 0.72); text-wrap: balance; }
  .hero-name { margin-block-start: 2.25rem; gap: 0; }
  .hero-name label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero-name .name-note { min-block-size: 0; }
  .hero-name .name-note:not(:empty) { margin-block-start: 0.5rem; }
  .hero-act { margin-block-start: 0.75rem; }
  .hero-note-phone { margin-block-start: 0.9rem; font-size: 0.9375rem; color: rgb(245 245 247 / 0.58); }
}

/* ---------- the method, even and square (2026-11-04 night) ----------
   No guide line for the numbers to sit crooked on: each step is a number, a title and a line on one grid. A phone
   reads them as rows (the number on the title's own baseline); a computer as five equal columns, each under a hairline
   with a short mint mark where it starts. */
.method-list::before { display: none !important; }
.method-list .step-no, html.js .method-list .step-no { position: static; padding: 0; background: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.04em; color: var(--mint); font-variant-numeric: tabular-nums; }
.method-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.5rem; row-gap: 0.4rem; align-items: baseline; padding-inline-start: 0; padding-block: 1.35rem; }
.method-list .step-no { grid-column: 1; grid-row: 1; }
.method-list .fear-q { grid-column: 2; grid-row: 1; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.method-list .fear-a { grid-column: 2; grid-row: 2; font-size: 1rem; }
@media (min-width: 60rem) {
  .method-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(1.25rem, 0.5rem + 1.5vw, 2.5rem); border-top: 0; }
  .method-list li { position: relative; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; row-gap: 0.8rem; padding-block: 1.5rem 0; border-bottom: 0; border-top: 1px solid rgb(255 255 255 / 0.2); }
  .method-list li::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; inline-size: 2rem; block-size: 2px; background: var(--mint); }
  .method-list .step-no, .method-list .fear-q, .method-list .fear-a { grid-column: 1; grid-row: auto; }
  .method-list .fear-q { font-size: clamp(1.25rem, 0.95rem + 0.55vw, 1.5rem); }
  .method-list .fear-a { font-size: 0.9375rem; line-height: 1.55; }
}
/* a section shorter than the screen holds at the top (no strip of the one before shows above it); a taller one holds
   once its end reaches the foot */
html.sheets main > section { top: min(0px, calc(100lvh - var(--h, 100lvh))); }
@media (max-width: 59.99rem) { .hero-sub-phone { max-width: 33ch; } }

/* ---------- the phone photo's own screen (measured on phone-520: 5.19% / 2.04% / 89.81% x 95.10%, corners about
   64px of 520) ----------
   The story's phone and the review card's phone draw their screens exactly over it, so no white of the photo shows
   around a coloured screen; WhatsApp's white header runs up under the status bar, as on a real phone. */
.device-lg .device-screen, .tap-screen { left: 5.3%; top: 2.15%; width: 89.4%; height: 94.9%; border-radius: 13.7% / 6.2%; }
.device-lg .st-chat { padding-block-start: 0; }
.device-lg .st-chat-head { margin: 0 -0.8em 0.55em; padding: 3.2em 0.8em 0.65em; }
.device-lg .st-site { padding-block-start: 3em; }

/* ---------- the review card where the eye goes ----------
   A computer gives the tap kit (the entry product) the wide card in the middle row; the ordering card takes its
   small place in the last row. */
@media (min-width: 60rem) {
  .bento { grid-template-rows: 26rem 27rem 25rem; }
  .cell-leads { grid-column: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .cell-leads .cell-text { padding: 2rem 1.75rem 0; align-self: auto; }
  .cell-reviews { grid-column: 2 / span 2; grid-row: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: 1fr; }
  .cell-reviews .cell-text { padding: 2.5rem 2.25rem; align-self: start; }
  .cell-reviews .cell-art { display: grid; place-items: center; min-height: 0; }
  .cell-reviews .tap-scene { inline-size: min(100%, 17rem); }
}
@media (min-width: 60rem) and (max-width: 79.99rem) { .bento { grid-template-rows: 26rem 27rem 26rem; } .cell-reviews .tap-scene { inline-size: min(100%, 15rem); } }

/* the tap plays once the card is almost whole on the screen, a little slower, and again if the visitor comes back */
html.sheets .tap-phone { animation-duration: 1.25s !important; animation-delay: 0.15s !important; }
html.sheets .tap-ring { animation-duration: 0.65s !important; animation-delay: 1.35s !important; }
html.sheets .tap-ring-2 { animation-delay: 1.55s !important; }
html.sheets .tap-banner { animation-duration: 0.95s !important; animation-delay: 1.7s !important; }
html.sheets .tap-lock { animation-delay: 2.45s !important; animation-duration: 0.3s !important; }
html.sheets .tap-sheet { animation-delay: 2.45s !important; animation-duration: 0.45s !important; }
html.sheets .tap-stars svg { animation-duration: 0.26s !important; animation-delay: calc(2.95s + var(--s) * 0.17s) !important; }
html.sheets .tap-post { animation-delay: 3.95s !important; animation-duration: 0.35s !important; }
html.sheets .cell-reviews.is-reset :is(.tap-phone, .tap-ring, .tap-banner, .tap-lock, .tap-sheet, .tap-stars svg, .tap-post) { animation-name: none !important; }

/* the comparison's head carries the brand's own logo, centred over its column */
.vs-logo { display: block; inline-size: auto; block-size: 1.3rem; aspect-ratio: 423.25 / 100; color: var(--green); }
@media (min-width: 48rem) { .vs thead .vs-us { text-align: center; } .vs thead .vs-us .vs-logo { margin-inline: auto; } }
@media (max-width: 47.99rem) { .vs thead .vs-us .vs-logo { block-size: 0.95rem; } }

/* ---------- the brand pressed into the material ----------
   A small Z engraved at the foot of the method and of the offer card, the same size in both: a shade darker than the
   surface it is cut into, with a hair of light along its lower edges and of shadow along its upper ones. */
.method, .offer-in { position: relative; }
.mark-engraved { position: absolute; left: 50%; inset-block-end: 1.5rem; inline-size: 1.75rem; block-size: auto; aspect-ratio: 103.98 / 100; translate: -50% 0; pointer-events: none; filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.075)) drop-shadow(0 -1px 0 rgb(0 0 0 / 0.42)); }
.mark-engraved path { fill: rgb(0 0 0 / 0.3); }
html.sheets .method { padding-block-end: calc(var(--band) + 2.75rem); }
html.sheets .method .mark-engraved { inset-block-end: calc(var(--r) + 1.25rem); }
@media (max-width: 59.99rem) { .offer-in { padding-block-end: calc(clamp(2.5rem, 1.75rem + 3vw, 5rem) + 2.25rem); } }
/* on a phone the method's mark stands clear of the dock when the section holds */
@media (max-width: 47.99rem) {
  html.sheets .method { padding-block-end: calc(var(--band) + var(--dock-space) + 1.5rem); }
  html.sheets .method .mark-engraved { inset-block-end: calc(var(--r) + var(--dock-space) + 0.75rem); }
}

/* ---------- the hero's phone: its screen over the photo's own screen (as the story's and the review's) ----------
   The chat inside keeps its place: every inset is re-taken from the larger box (screen 5.3% / 2.15% / 89.4% x 94.9%). */
.hero .ask-phone .ask-screen { left: 5.3%; top: 2.15%; width: 89.4%; height: 94.9%; border-radius: 13.7% / 6.2%; padding: 18.3% 6.8% calc(3.9em + 8.4%); }
.hero .ask-phone .ask-status { inset-block-start: 5.2%; inset-inline: 9.7%; }
.hero .ask-phone .ask-input { inset-inline: 6.8%; inset-block-end: 4.3%; }
.hero .ask-phone .ask-hello { inset-block-start: 35.8%; inset-inline: 8.25%; }

/* the wheel chooses the field it rests on: a green line fills along the foot of the band, then the name turns green and
   a short green mark draws in under it (only the field in the middle takes a tap) */
html.wheel-js .trades-list::after { content: ""; position: absolute; inset-inline: calc(max(var(--gut), 50% - 11rem) + 1.25rem); inset-block-start: calc(50% + 2.125rem - 3px); block-size: 2px; border-radius: 2px; background: var(--green); transform-origin: right; scale: 0 1; opacity: 0; pointer-events: none; }
html.wheel-js .trades-list.is-arming::after { scale: 1 1; opacity: 0.55; transition: scale var(--dwell, 3s) linear, opacity 0.3s var(--ease-ui); }
html.wheel-js .trades-list .trade > span { transition: color 0.5s var(--ease-ui); }
html.wheel-js .trades-list .trade > span { position: relative; }
html.wheel-js .trades-list .trade > span::after { content: ""; position: absolute; display: block !important; left: 50%; inset-block-start: 100%; inline-size: 2.5rem; block-size: 3px; margin: 0.15rem 0 0 !important; border-radius: 2px; background: var(--green); translate: -50% 0; scale: 0 1; transform-origin: right; transition: scale 0.6s var(--ease-out) 0.1s; }
html.wheel-js .trades-list .trade[aria-pressed="true"] > span::after { scale: 1 1; }

/* ---------- every section scrolls through the middle of the screen (2026-11-04, late) ----------
   Holding sections still while the next one slid over them left their last lines at the foot of the screen, covered
   before they were read. The sections now scroll as they are; the rounded seam between them stays. */
html.sheets main > section { position: relative; top: auto; }
html.sheets .hero-facts { margin-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (max-width: 47.99rem) {
  html.sheets .method { padding-block-end: calc(var(--band) + 2.75rem); }
  html.sheets .method .mark-engraved { inset-block-end: calc(var(--r) + 1.25rem); }
}

/* the review card: the phone starts composed above the stand (never outside the card) and comes down to tap it */
@keyframes tap-in { 0% { translate: 31% -7%; rotate: -5deg; } 70% { translate: 25% 9%; rotate: -12.5deg; } 100% { translate: 24% 8%; rotate: -12deg; } }
@keyframes tap-in-wide { 0% { translate: 31% -12%; rotate: -5deg; } 70% { translate: 25% 3%; rotate: -12.5deg; } 100% { translate: 24% 2%; rotate: -12deg; } }
html.sheets .tap-phone { animation-duration: 0.95s !important; animation-delay: 0.2s !important; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) !important; }
html.sheets .tap-ring { animation-delay: 1.05s !important; }
html.sheets .tap-ring-2 { animation-delay: 1.25s !important; }
html.sheets .tap-banner { animation-delay: 1.35s !important; }
html.sheets .tap-lock, html.sheets .tap-sheet { animation-delay: 2.1s !important; }
html.sheets .tap-stars svg { animation-delay: calc(2.6s + var(--s) * 0.16s) !important; }
html.sheets .tap-post { animation-delay: 3.55s !important; }

/* ---------- a computer (2026-11-04, late) ---------- */
@media (min-width: 60rem) {
  /* the first screen, words and phone, centred in the window (also before it pins), the phone sized to fit whole */
  html.chat-js .hero { padding-block-start: calc(var(--nav-h) + max(1rem, (100lvh - var(--nav-h) - var(--pin-h, 40rem)) / 2)); }
  html.chat-js .hero-in { top: calc(var(--nav-h) + max(1rem, (100lvh - var(--nav-h) - var(--pin-h, 40rem)) / 2)); align-items: center; }
  .hero .ask-phone { width: min(21rem, calc((100svh - var(--nav-h) - 9rem) * 0.48)); }

  /* the story's phone stands beside its heading from the start, so it is whole from the first step */
  .how-stage { margin-block-start: calc(-1 * var(--how-pull, 0px)); }

  /* the trades: every one at once, a centred set of buttons (the wheel is for a thumb) */
  html.js .trades::after { content: none !important; display: none !important; }
  html.js .trades-pin { position: static !important; min-block-size: 0 !important; display: block !important; }
  html.js .trades-list { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.6rem; inline-size: auto !important; block-size: auto !important; max-inline-size: 58rem; margin: 1.5rem auto 0 !important; padding: 0 !important; overflow: visible !important; perspective: none; -webkit-mask-image: none !important; mask-image: none !important; }
  html.js .trades-list::before, html.js .trades-list::after { display: none !important; }
  html.js .trades-list li { grid-area: auto !important; inline-size: auto !important; flex: none !important; animation: none !important; opacity: 1 !important; visibility: visible !important; translate: none !important; scale: none !important; transform: none !important; }
  html.js .trades-list .trade { display: inline-flex !important; align-items: center; min-block-size: 2.75rem; padding: 0.55rem 1.15rem !important; border: 1px solid var(--line) !important; border-radius: 99px !important; background: #fff !important; box-shadow: none !important; transition: border-color 0.2s var(--ease-ui), background-color 0.2s var(--ease-ui); }
  html.js .trades-list .trade > span { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: nowrap; color: var(--ink) !important; }
  html.js .trades-list .trade > span::after { display: none !important; }
  html.js .trades-list .trade-q { display: none !important; }
  html.js .trades-list .trade[aria-pressed="true"] { border-color: var(--green) !important; background: var(--green) !important; }
  html.js .trades-list .trade[aria-pressed="true"] > span { color: #fff !important; }
  .trade-note { margin-inline: auto; }
}
@media (min-width: 60rem) and (hover: hover) and (pointer: fine) {
  html.js .trades-list .trade:not([aria-pressed="true"]):hover { border-color: rgb(18 122 69 / 0.45) !important; }
  html.js .trades-list .trade:not([aria-pressed="true"]):hover > span { color: var(--green) !important; }
}
/* ---------- the hero's answer fits its screen with every trade's buttons ----------
   (a longer first button, "הצעת מחיר" or "קביעת תור", made the card wider than the screen) */
.hero .ask-phone .ask-a, .hero .ask-phone .ask-card { min-inline-size: 0; max-inline-size: 100%; }
.hero .ask-phone .ask-text { font-size: 0.9em; font-weight: 600; line-height: 1.4; }
.hero .ask-phone .ask-card { padding: 0.7em 0.7em 0.75em; }
.hero .ask-phone .ask-card .ms-btns { gap: 0.28em; }
.hero .ask-phone .ask-card .ms-btns b { min-inline-size: 0; padding-inline: 0.5em; font-size: 0.7em; white-space: nowrap; }

/* ---------- the review card: the square tap tag, photographed (Seedream 5 Pro, WaveSpeed, 2026-11-04), with the
   business's name, its stars and the tap mark set on its face; a tap opens the review page over it ----------
   The face in the photo: 22.95% / 21.68% / 55.08% x 54.30% (measured); every size inside is a share of the stage. */
.cell-reviews .cell-art { display: grid; align-items: end; min-height: 0; }
.nfc-more { margin-block-start: 0.85rem; font-weight: 600; }
.nfc-stage { position: relative; inline-size: 100%; aspect-ratio: 1; overflow: hidden; container-type: inline-size; background: #ebe3d8; }
.nfc-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.nfc-face { position: absolute; left: 22.95%; top: 21.68%; width: 55.08%; height: 54.3%; display: grid; align-content: center; justify-items: center; gap: 2.4cqi; padding: 5cqi 4cqi; text-align: center; color: #fff; }
.nfc-stars { display: flex; gap: 0.9cqi; }
.nfc-stars svg { inline-size: 4.2cqi; block-size: 4.2cqi; fill: #f5c542; }
.nfc-name { max-inline-size: 100%; font-size: 6.4cqi; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.nfc-tap { inline-size: 13cqi; block-size: 13cqi; margin-block-start: 1.2cqi; color: var(--mint); }
.nfc-cta { font-size: 3.7cqi; font-weight: 600; color: rgb(255 255 255 / 0.78); }
.nfc-ring { position: absolute; left: 50%; top: 56%; inline-size: 22cqi; block-size: 22cqi; margin: -11cqi 0 0 -11cqi; border-radius: 50%; border: 0.6cqi solid rgb(62 224 154 / 0.85); opacity: 0; pointer-events: none; }
.nfc-review { position: absolute; left: 50%; bottom: 5%; inline-size: 74%; translate: -50% 0; display: grid; justify-items: center; gap: 2.2cqi; padding: 5cqi 5cqi 5.5cqi; border-radius: 5cqi; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 4cqi 10cqi -4cqi rgb(11 42 29 / 0.45); color: var(--ink); text-align: center; }
.nr-head { font-size: 3.6cqi; color: var(--ink-2); }
.nr-biz { font-size: 5.4cqi; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.nr-stars { display: flex; gap: 1.4cqi; }
.nr-stars i { display: block; inline-size: 7cqi; block-size: 7cqi; }
.nr-stars svg { inline-size: 100%; block-size: 100%; fill: #f5c542; }
.nr-ph { inline-size: 100%; padding: 2.6cqi 3.4cqi; border: 1px solid #e3e3e8; border-radius: 2.6cqi; font-size: 3.6cqi; color: var(--ink-3); text-align: start; }
.nr-post { padding: 2.2cqi 7cqi; border-radius: 99px; background: var(--green); color: #fff; font-size: 3.8cqi; font-weight: 600; }
@media (min-width: 60rem) {
  .cell-reviews .cell-art { align-items: center; padding: 1.5rem 1.5rem 1.5rem 0; }
  .nfc-stage { inline-size: min(100%, 23rem); justify-self: center; border-radius: 1.25rem; }
}
/* the moment (timed, once the card is almost whole on the screen; set back when it leaves): the rings, the review page
   rising over the tag, the stars one by one, "post" lighting */
@keyframes nfc-ring { 0% { opacity: 0; scale: 0.5; } 25% { opacity: 0.9; } 100% { opacity: 0; scale: 2.1; } }
@keyframes nfc-rise { from { opacity: 0; translate: -50% 22%; } to { opacity: 1; translate: -50% 0; } }
@keyframes nfc-star { from { opacity: 0.18; scale: 0.6; } 60% { opacity: 1; scale: 1.15; } to { opacity: 1; scale: 1; } }
@keyframes nfc-post { from { background: #cfd8d3; } to { background: var(--green); } }
html.sheets .nfc-ring { animation: nfc-ring 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s both paused; }
html.sheets .nfc-ring-2 { animation-delay: 0.55s; }
html.sheets .nfc-review { animation: nfc-rise 0.65s cubic-bezier(0.2, 0.9, 0.25, 1) 1.35s both paused; }
html.sheets .nr-stars i { animation: nfc-star 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) calc(2s + var(--s) * 0.15s) both paused; }
html.sheets .nr-post { animation: nfc-post 0.4s ease 2.95s both paused; }
html.sheets .cell-reviews.is-play :is(.nfc-ring, .nfc-review, .nr-stars i, .nr-post) { animation-play-state: running; }
html.sheets .cell-reviews.is-reset :is(.nfc-ring, .nfc-review, .nr-stars i, .nr-post) { animation-name: none; }

/* ---------- the hero's name field: one premium control ----------
   A storefront mark at its start, a round go button inside its end that lights once a name is typed, a soft mint glow
   in focus; the button (or "done") carries the visitor down so the chat plays with their name. */
.name-box { position: relative; inline-size: 100%; }
.hero .hero-name input { min-block-size: 3.6rem; padding-block: 0.7rem; padding-inline: 3rem 3.75rem; border-radius: 99px; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 12px 30px -20px rgb(0 0 0 / 0.7); font-size: 1.0625rem; color: #fff; transition: border-color 0.2s var(--ease-ui), box-shadow 0.25s var(--ease-ui), background-color 0.2s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .hero .hero-name input:hover { border-color: rgb(255 255 255 / 0.34); } }
.hero .hero-name input:focus-visible { border-color: var(--mint); background: rgb(255 255 255 / 0.09); box-shadow: 0 0 0 4px rgb(62 224 154 / 0.18), 0 16px 36px -20px rgb(62 224 154 / 0.55); }
.name-ico { position: absolute; inset-inline-start: 1.1rem; top: 50%; translate: 0 -50%; inline-size: 1.3rem; block-size: 1.3rem; color: var(--mint); opacity: 0.85; pointer-events: none; }
.name-go { position: absolute; inset-inline-end: 0.45rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: rgb(245 245 247 / 0.55); cursor: pointer; transition: background-color 0.25s var(--ease-ui), color 0.25s var(--ease-ui), scale 0.15s var(--ease-out), box-shadow 0.3s var(--ease-ui); }
.name-go svg { inline-size: 1.15rem; block-size: 1.15rem; }
.hero-name.has-name .name-go { background: var(--mint); color: #04170e; box-shadow: 0 6px 18px -8px rgb(62 224 154 / 0.8); }
.name-go:active { scale: 0.92; }
.name-go:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 59.99rem) { .hero .hero-name input { padding-inline: 3.75rem; } }
/* the field invites (site.js, "the field invites"): an example name is typed in it, in the input's own place and type,
   with a mint caret; a line of light passes along its edge now and then until a name is in; the button lands lit */
.name-ghost { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-start; padding-inline: 3rem 3.75rem; font-size: 1.0625rem; color: rgb(255 255 255 / 0.88); white-space: nowrap; overflow: hidden; pointer-events: none; }
.hero-name.is-typing .name-ghost { display: flex; }
.hero .hero-name.is-typing input::placeholder { color: transparent; }
.ng-caret { flex: none; inline-size: 2px; block-size: 1.25em; margin-inline-start: 0.12em; border-radius: 1px; background: var(--mint); animation: ask-caret 1.05s steps(1, end) infinite; }
@media (max-width: 59.99rem) { .name-ghost { justify-content: center; padding-inline: 3.75rem; } }
@keyframes name-sheen { 0% { background-position: 0% 0; } 38%, 100% { background-position: 100% 0; } }
@keyframes name-go-pop { 0% { scale: 0.78; } 100% { scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .name-box::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 99px; pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgb(62 224 154 / 0.75) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: name-sheen 6.5s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite; transition: opacity 0.3s var(--ease-ui); }
  .hero .hero-name:focus-within .name-box::after, .hero .hero-name.has-name .name-box::after { opacity: 0; animation-play-state: paused; }
  .hero-name.has-name .name-go { animation: name-go-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
/* the photo sits as a tile; the review page leaves the tag's stars and name in view above it */
.nfc-stage { border-radius: 1.25rem; }
@media (max-width: 59.99rem) { .cell-reviews .cell-art { padding: 0 1.25rem 1.25rem; } }
.nfc-review { inline-size: 70%; bottom: 4.5%; gap: 1.5cqi; padding: 3.8cqi 4.5cqi 4.2cqi; }
.nr-head { font-size: 3.3cqi; }
.nr-biz { font-size: 4.9cqi; }
.nr-stars i { inline-size: 6cqi; block-size: 6cqi; }
.nr-ph { padding: 2.1cqi 3cqi; font-size: 3.3cqi; }
.nr-post { padding: 1.9cqi 6.5cqi; font-size: 3.5cqi; }
.nfc-face { align-content: start; padding-block-start: 6.5cqi; }

/* the review card's small words stay readable on a tablet and a computer (the stage is smaller there) */
.nr-head, .nr-ph { font-size: max(3.3cqi, 0.75rem); }
.nr-post { font-size: max(3.5cqi, 0.8125rem); }
.nfc-cta { font-size: max(3.7cqi, 0.75rem); }
@media (min-width: 60rem) { .nfc-stage { inline-size: min(100%, 25rem); } }
.nr-biz { font-size: max(4.9cqi, 0.8125rem); }
@media (max-width: 359.98px) { .nr-head { display: none; } }

/* ---------- the hero as a presentation (2026-11-05): words first, then the phone takes the stage ----------
   One stage pinned under the nav for the whole runway. On it, three layers share one place: the words (the first
   screen, alone), the phone, and the four beats that explain, with a number and its source each, why an assistant
   recommends a business with a site. The script (site.js, "the hero's chat") moves them by the scroll: the words
   step back, the phone rises to the middle, and each beat comes in as the chat reaches its moment. Without motion
   (reduced motion, no script) none of this applies: the words, the phone and the beats simply stand in order. */
.hero-beats { list-style: none; display: grid; gap: 2rem; margin: 0; padding: 0; color: var(--on-night); }
.beat { display: grid; gap: 0.6rem; max-inline-size: 34rem; }
.beat-k { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--mint); }
.beat-h { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.6rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.beat-p { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem); line-height: 1.6; color: rgb(245 245 247 / 0.8); text-wrap: pretty; }
.beat-src { font-size: 0.75rem; line-height: 1.45; color: rgb(245 245 247 / 0.58); }
.beat-act { margin-block-start: 0.4rem; }
.beat-act .pill { gap: 0.45rem; }
.beat-act .pill svg { inline-size: 1.15rem; block-size: 1.15rem; }

html.stage-js .hero { padding-block: var(--nav-h) 0; }
html.stage-js .hero-run::after { content: ""; display: block; block-size: 440svh; } /* about one natural flick per beat */
html.stage-js.chat-js .hero-in { position: sticky; top: var(--nav-h); block-size: var(--stage-h); min-block-size: 0; display: grid; grid-template: 1fr / 1fr; align-items: center; justify-items: center; gap: 0; padding-block: 0; }
html.stage-js .hero-in > * { grid-area: 1 / 1; }
html.stage-js .hero-copy { max-inline-size: 46rem; justify-items: center; text-align: center; }
html.stage-js .hero-copy h1 { text-align: center; }
html.stage-js .hero-name { justify-self: center; justify-items: center; }
html.stage-js .hero-name label { text-align: center; }
html.stage-js .hero-act { justify-content: center; }
html.stage-js .hero-note { justify-self: center; text-align: center; }
html.stage-js .hero-ask { opacity: 0; animation: none !important; }
html.stage-js .hero-ask::after { content: none; }
html.stage-js.chat-js .ask-pin { position: static; min-block-size: 0; top: auto; }
html.stage-js .hero-beats { gap: 0; pointer-events: none; }
html.stage-js .beat { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
html.stage-js .beat.is-on { pointer-events: auto; }
@media (min-width: 60rem) {
  /* the beat and the phone as one centred pair, the beat where a Hebrew reader starts (right), the phone beside it;
     the words span the whole stage */
  html.stage-js.chat-js .hero-in { grid-template-columns: 1fr minmax(0, 30rem) clamp(3rem, 2rem + 3vw, 6rem) auto 1fr; }
  html.stage-js .hero-in > .hero-copy { grid-column: 1 / -1; }
  html.stage-js .hero-in > .hero-beats { grid-column: 2; justify-self: stretch; }
  html.stage-js .hero-in > .hero-ask { grid-column: 4; justify-self: center; }
  html.stage-js .hero .ask-phone { width: min(21rem, calc((100svh - var(--nav-h) - 7rem) * 0.48)); }
}
@media (max-width: 59.99rem) {
  /* a phone: the phone above, its beat under it */
  html.stage-js .hero-ask { align-self: start; margin-block-start: 0.6rem; }
  html.stage-js .hero .ask-phone { width: min(62vw, 15.5rem, calc((var(--stage-h) - var(--beat-h, 13rem) - 2.6rem) * 0.48)); }
  html.stage-js .hero-ask figcaption { display: none; }
  html.stage-js .hero-beats { align-self: end; inline-size: 100%; padding-block-end: 0.9rem; }
  html.stage-js .beat { justify-items: center; text-align: center; gap: 0.35rem; margin-inline: auto; }
  html.stage-js .beat-k { display: none; }
  html.stage-js .beat-h { font-size: clamp(1.2rem, 1rem + 1.2vw, 1.45rem); }
  html.stage-js .beat-p { font-size: 0.875rem; line-height: 1.5; max-inline-size: 36ch; }
  html.stage-js .beat-src { font-size: 0.6875rem; }
}

/* the business name in the last beat reads as part of the sentence, in mint (not as the phone card's slot) */
.beat-h [data-biz-out], .beat-h [data-biz-out].is-slot { padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--mint); font: inherit; }
/* the first screen fits whole on a short laptop too (1280 x 720): the line under the title in three lines, not four,
   and a little less air between the parts when the window is short */
@media (min-width: 60rem) { html.stage-js .hero-sub-wide { max-inline-size: 41rem; } }
@media (min-width: 60rem) and (max-height: 820px) { html.stage-js .hero-copy { row-gap: 0.7rem; } html.stage-js .hero-name { margin-block-start: 1rem; } }

/* ---------- the scenes after the hero (2026-11-05): the promise timeline, and the method's card that builds ----------
   Each [data-scene] pins one stage under the nav for its runway (--run: about one natural flick, 85 to 100svh, per
   step). Its steps share one place and come in one at a time (site.js, "the scenes after the hero"); a scene with an
   intro shows the intro alone first, then everything else arrives as one move. The scene carries at-1, at-2... as its
   steps are reached, and the pictures on the stage take their states from those. Without motion all of it stands in
   order, every picture in its last state. */

/* the card (also the picture without motion, in its finished state) */
.ab { display: grid; gap: 0.8em; inline-size: 19.5em; max-inline-size: 100%; margin-block-start: 2rem; font-size: 16px; }
.ab-card { display: grid; gap: 0.6em; padding: 1.1em 1.2em 1.2em; border-radius: 1.25em; background: #fff; color: var(--ink); box-shadow: 0 34px 60px -34px rgb(0 0 0 / 0.75), 0 2px 6px rgb(0 0 0 / 0.12); }
.ab-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.ab-head b { font-size: 1.15em; font-weight: 700; color: var(--ink); }
.ab-stars { display: flex; gap: 0.15em; }
.ab-stars i { font-style: normal; font-size: 0.95em; line-height: 1; color: #f2b705; }
.ab-stars i::before { content: "\2605"; }
.ab-cat { margin-block-start: -0.35em; font-size: 0.8em; color: #6e6e73; }
.ab-r { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; color: #1d1d1f; }
.ab-ok { flex: none; position: relative; inline-size: 1em; block-size: 1em; border-radius: 50%; background: var(--green); }
.ab-ok::after { content: ""; position: absolute; inset-inline-start: 0.36em; inset-block-start: 0.2em; inline-size: 0.22em; block-size: 0.44em; border: solid #fff; border-width: 0 0.12em 0.12em 0; rotate: 40deg; }
.ab-ico { flex: none; inline-size: 1.05em; block-size: 1.05em; color: var(--green); }
.ab-site { display: grid; gap: 0.25em; padding: 0.6em 0.75em; border: 1px solid #e3e3e8; border-radius: 0.85em; }
.ab-url { display: flex; align-items: center; gap: 0.4em; font-size: 0.78em; font-weight: 600; color: var(--green); }
.ab-url .ab-ico { inline-size: 0.95em; block-size: 0.95em; }
.ab-snip { font-size: 0.88em; color: #3a3a3c; }
.ab-same { display: flex; flex-wrap: wrap; gap: 0.35em; }
.ab-same span { padding: 0.3em 0.65em; border-radius: 99px; background: #eaf5ee; font-size: 0.74em; font-weight: 600; color: var(--green); }
.ab-rev { display: flex; align-items: center; gap: 0.5em; font-size: 0.86em; color: #1d1d1f; }
.ab-ai { display: flex; align-items: center; gap: 0.6em; padding: 0.75em 1em; border-radius: 1em; background: rgb(255 255 255 / 0.1); color: #f5f5f7; font-size: 0.95em; }
.ab-ai i { flex: none; inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--mint); }
.ab-note { font-size: 0.72em; color: rgb(245 245 247 / 0.55); text-align: center; }
.step-why { font-size: 1rem; line-height: 1.6; color: rgb(245 245 247 / 0.84); }
.step-why b { color: var(--mint); font-weight: 600; }
.step-src { font-size: 0.75rem; color: rgb(245 245 247 / 0.55); }
.pt, .promise-k { display: none; }

/* the stage, common to every scene */
html.stage-js [data-scene] { position: relative; padding-block: 0; content-visibility: visible; contain-intrinsic-block-size: none; }
html.stage-js [data-scene]::after { content: ""; display: block; block-size: var(--run, 200svh); }
html.stage-js [data-scene] .stg-pin { position: sticky; top: var(--nav-h); block-size: var(--stage-h); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); align-items: center; justify-items: center; }
html.stage-js [data-scene] .stg-pin > * { grid-area: 1 / 1; }
html.stage-js [data-scene] [data-reveal], html.stage-js [data-scene] .stg-step > * { animation: none !important; opacity: 1; translate: none; transition: none; }
html.stage-js .stg-steps { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; margin: 0; padding: 0; border: 0; }
html.stage-js .stg-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; }

/* the promise: a track that fills, and one big number at a time */
html.stage-js .promise-stage { --run: 255svh; }
html.stage-js .promise-stage .stg-pin { grid-template: auto auto auto / minmax(0, 1fr); align-content: center; row-gap: clamp(1.5rem, 1rem + 3vh, 3rem); }
html.stage-js .promise-stage .stg-pin > * { grid-area: auto; }
html.stage-js .promise-k { display: block; font-size: 0.875rem; font-weight: 600; color: var(--mint); text-align: center; }
html.stage-js .pt { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); inline-size: min(100%, 34rem); padding-block-start: 1.4rem; }
html.stage-js .pt::before, html.stage-js .pt-fill { content: ""; position: absolute; inset-inline: 16.66%; inset-block-start: 0.3rem; block-size: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.14); }
html.stage-js .pt-fill { background: var(--mint); transform-origin: right center; scale: var(--pt, 0) 1; transition: scale 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
html.stage-js .pt-s { position: relative; text-align: center; font-size: 0.8125rem; color: rgb(245 245 247 / 0.5); transition: color 0.4s var(--ease-ui); }
html.stage-js .pt-s::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: -1.4rem; inline-size: 0.7rem; block-size: 0.7rem; margin-inline-start: -0.35rem; border-radius: 50%; background: #2a3a32; box-shadow: 0 0 0 3px #0b1f16; transition: background-color 0.4s var(--ease-ui); }
html.stage-js .promise-stage.at-1 .pt-s:nth-child(2), html.stage-js .promise-stage.at-2 .pt-s:nth-child(3), html.stage-js .promise-stage.at-3 .pt-s:nth-child(4) { color: #f5f5f7; }
html.stage-js .promise-stage.at-1 .pt-s:nth-child(2)::before, html.stage-js .promise-stage.at-2 .pt-s:nth-child(3)::before, html.stage-js .promise-stage.at-3 .pt-s:nth-child(4)::before { background: var(--mint); }
html.stage-js .promise-stage .hero-facts { grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; column-gap: 0; }
html.stage-js .promise-stage .hero-facts::before, html.stage-js .promise-stage .hero-facts > div::before { display: none; }
html.stage-js .promise-stage .hero-facts > div { justify-items: center; text-align: center; gap: 0.6rem; padding: 0; border: 0; }
html.stage-js .promise-stage .hero-facts dt { justify-items: center; gap: 0.35rem; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); color: var(--mint); }
html.stage-js .promise-stage .hero-facts dt b { font-size: clamp(5.5rem, 3rem + 14vw, 11rem); line-height: 0.95; letter-spacing: -0.03em; }
html.stage-js .promise-stage .hero-facts dd { max-inline-size: 22ch; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); line-height: 1.4; color: rgb(245 245 247 / 0.8); }
html.sheets.stage-js .hero-facts { margin-block-end: 0; }

/* the method: the title alone first, then the five basics beside the card that builds */
html.stage-js .method { --run: 520svh; }
html.stage-js .method .sec-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-inline-size: 44rem; }
html.stage-js .method .sec-head > * { grid-column: 1; grid-row: auto; }
html.stage-js .method .sec-head .intro { max-inline-size: 40rem; }
html.stage-js .method .mark-engraved { display: none; }
/* a step: one column of its own lines (the list's two-column grid, its rule and its side bar stand down) */
html.stage-js .method .fear-list { border: 0; }
html.stage-js .method-list::before, html.stage-js .method .method-list li::before { display: none; }
html.stage-js .method .fear-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 0; border: 0; align-content: center; }
html.stage-js .method .method-list li > * { grid-column: 1 / -1; grid-row: auto; }
html.stage-js .method-list .step-no { position: static; background: none; padding: 0; font-size: 0.875rem; }
html.stage-js .method .fear-q { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.15; }
html.stage-js .method .method-note { margin-block-start: 0.4rem; font-size: 0.95rem; }

/* the card builds with the steps. A part not yet reached takes no room, so the card is whole at every step; reached,
   it opens its space and rises in, and stays. (.ab-full: a hidden finished copy that site.js measures to fit the
   card on the stage.) */
html.stage-js .method .ab, html.stage-js .method .ab-card { gap: 0; }
html.stage-js .method .ab { margin: 0; }
html.stage-js .method :is(.ab-cat, .ab-r) { margin-block-start: 0.6em; }
html.stage-js .method .ab-note { margin-block-start: 0.8em; }
html.stage-js .method :is(.ab-head, .ab-cat, .ab-r, .ab-same span) { opacity: 0; transform: translate3d(0, 0.5em, 0); transition: opacity 0.45s var(--ease-ui), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
html.stage-js .method :is(.ab-site, .ab-same, .ab-rev, .ab-ai) { max-block-size: 0; margin-block-start: 0; overflow: clip; transition: max-block-size 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin-block-start 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
html.stage-js .method :is(.ab-site, .ab-rev, .ab-ai) { opacity: 0; transform: translate3d(0, 0.5em, 0); transition: max-block-size 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin-block-start 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s var(--ease-ui) 0.08s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s; }
html.stage-js .method.at-1 :is(.ab-head, .ab-cat, .ab-r) { opacity: 1; transform: none; }
html.stage-js .method.at-2 .ab-site, html.stage-js .method.at-3 .ab-same, html.stage-js .method.at-4 .ab-rev { max-block-size: 8em; margin-block-start: 0.6em; }
html.stage-js .method.at-5 .ab-ai { max-block-size: 8em; margin-block-start: 0.8em; }
html.stage-js .method.at-2 .ab-site, html.stage-js .method.at-3 .ab-same span, html.stage-js .method.at-4 .ab-rev, html.stage-js .method.at-5 .ab-ai { opacity: 1; transform: none; }
/* the profile's lines one after another; the four places one after another */
html.stage-js .method.at-1 .ab-cat { transition-delay: 0.06s; }
html.stage-js .method.at-1 .ab-r1 { transition-delay: 0.14s; }
html.stage-js .method.at-1 .ab-r2 { transition-delay: 0.22s; }
html.stage-js .method.at-1 .ab-ph { transition-delay: 0.3s; }
html.stage-js .method.at-3 .ab-same span:nth-child(2) { transition-delay: 0.09s; }
html.stage-js .method.at-3 .ab-same span:nth-child(3) { transition-delay: 0.18s; }
html.stage-js .method.at-3 .ab-same span:nth-child(4) { transition-delay: 0.27s; }
/* the stars: grey until reviews come in (step 4), then lit one after another */
html.stage-js .method .ab-stars i { color: #d6d6db; transition: color 0.3s var(--ease-ui); }
html.stage-js .method.at-4 .ab-stars i { color: #f2b705; }
html.stage-js .method.at-4 .ab-stars i:nth-child(2) { transition-delay: 0.08s; }
html.stage-js .method.at-4 .ab-stars i:nth-child(3) { transition-delay: 0.16s; }
html.stage-js .method.at-4 .ab-stars i:nth-child(4) { transition-delay: 0.24s; }
html.stage-js .method.at-4 .ab-stars i:nth-child(5) { transition-delay: 0.32s; }
html.stage-js .method .ab.ab-full :is(.ab-head, .ab-cat, .ab-r, .ab-site, .ab-same, .ab-same span, .ab-rev, .ab-ai) { max-block-size: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
html.stage-js .method .ab.ab-full :is(.ab-site, .ab-same, .ab-rev) { margin-block-start: 0.6em !important; }
html.stage-js .method .ab.ab-full .ab-ai { margin-block-start: 0.8em !important; }

@media (min-width: 60rem) {
  /* the step and the card as one centred pair, the step where a Hebrew reader starts (right); the title spans all */
  html.stage-js .method .stg-pin { grid-template-columns: 1fr min(30rem, 40vw) clamp(3rem, 2rem + 3vw, 6rem) auto 1fr; }
  html.stage-js .method .stg-pin > .sec-head { grid-column: 1 / -1; }
  html.stage-js .method .stg-pin > .stg-steps { grid-column: 2; justify-self: stretch; }
  html.stage-js .method .stg-pin > .ab { grid-column: 4; }
}
@media (max-width: 59.99rem) {
  /* a phone: the card above, its step under it */
  html.stage-js .method .stg-pin > .ab { align-self: start; margin-block-start: 1rem; }
  html.stage-js .method .stg-pin > .stg-steps { align-self: end; padding-block-end: 1rem; }
  html.stage-js .method .fear-list li { justify-items: center; text-align: center; gap: 0.4rem; }
  html.stage-js .method .fear-q { font-size: 1.3rem; }
  html.stage-js .method .fear-a { font-size: 0.95rem; }
  html.stage-js .method .step-why { font-size: 0.875rem; line-height: 1.5; }
  html.stage-js .method .step-src { font-size: 0.6875rem; }
  html.stage-js .method .method-note { font-size: 0.8125rem; }
}
/* a short phone: the card keeps its information and drops its note */
@media (max-width: 59.99rem) and (max-height: 720px) { html.stage-js .method .ab-note { display: none; } }

/* ---------- the scenes, presented (2026-11-05, the Apple pass) ----------
   No light blobs, gradient text or glows (the look of generated pages): scale, restraint and exact motion instead.
   The promise's numbers are the screen: very large, solid white, each digit rolling up into place when its step
   arrives. The method opens with a very large title, one line in mint, and one short line, rising in one after
   another as the stage arrives. All of it only with motion allowed; without, the same words simply stand. */
.dg { display: inline-block; }

/* the promise: the number is the screen */
html.stage-js .promise-stage .hero-facts dt b { display: inline-flex; color: #f5f5f7; font-size: clamp(7.5rem, 4rem + 22vw, 15rem); line-height: 0.9; letter-spacing: -0.045em; padding-block: 0.04em; overflow: clip; }
html.stage-js .promise-stage .hero-facts dt { gap: 0.6rem; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); font-weight: 600; }
html.stage-js .promise-stage .hero-facts dd { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem); font-weight: 500; color: #f5f5f7; }
html.stage-js .promise-k { font-size: 0.9375rem; letter-spacing: 0.01em; }
@keyframes dg-roll { from { transform: translate3d(0, 0.62em, 0); opacity: 0; } to { transform: none; opacity: 1; } }
html.stage-js .promise-stage .stg-step.is-roll .dg { animation: dg-roll 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 70ms + 60ms) both; }
html.stage-js .promise-stage .stg-step.is-roll dt > span, html.stage-js .promise-stage .stg-step.is-roll dd { animation: dg-roll 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both; }
html.stage-js .promise-stage .stg-step.is-roll dd { animation-delay: 0.34s; }

/* the method's opening: a very large title, one line in mint, one short line */
html.stage-js .method .sec-head { gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem); max-inline-size: 52rem; }
html.stage-js .method .sec-head .headline { font-size: clamp(2.75rem, 1.6rem + 5.4vw, 6rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
html.stage-js .method .intro-key { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.6rem); font-weight: 650; line-height: 1.2; color: var(--mint); text-wrap: balance; max-inline-size: 30ch; }
html.stage-js .method .intro-sub { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.55; color: rgb(245 245 247 / 0.72); max-inline-size: 36ch; }
html.stage-js .method .sec-head > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.8s var(--ease-ui), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
html.stage-js .method .sec-head.is-in > * { opacity: 1; transform: none; }
html.stage-js .method .sec-head.is-in > :nth-child(2) { transition-delay: 0.16s; }
html.stage-js .method .sec-head.is-in > :nth-child(3) { transition-delay: 0.32s; }

/* the method's steps: the number large and lit, the line a size up */
html.stage-js .method-list .step-no { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--mint); }
@media (min-width: 60rem) { html.stage-js .method .fear-q { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); } }
/* the digits are the number itself: they keep its size and colour (the line's small label rule is for «ימים») */
.hero-facts dt b .dg { display: inline-block; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; }
/* the mint line: each sentence on its own line, never a word left hanging */
.intro-key > span { display: block; }
/* paint-only decorations run only while seen (on a phone, a hidden animation that repaints still costs frames):
   the name field's passing light while the words are on screen, the thinking shimmer while the assistant thinks */
html.stage-js .hero .name-box::after { animation-play-state: paused; }
html.stage-js .hero-copy.is-seen .hero-name:not(:focus-within):not(.has-name) .name-box::after { animation-play-state: running; }
html.chat-js .ask-dots span, html.chat-js .ask-dots::before { animation-play-state: paused; }
html.chat-js .s-think .ask-dots span, html.chat-js .s-think .ask-dots::before { animation-play-state: running; }
/* heavier: a little more scroll for every step (each step is also held on screen at least 0.65 s, site.js) */
html.stage-js .hero-run::after { block-size: 500svh; }
html.stage-js .promise-stage { --run: 300svh; }
html.stage-js .method { --run: 600svh; }

/* the status dot's endless ping runs only while it is near the screen (site.js adds is-near) */
.ul-state i::after { animation-play-state: paused; }
.ul-state.is-near i::after { animation-play-state: running; }
/* the promise's numbers once had a fade-in of their own (0.6 s, delayed 0.22 s and 0.44 s for the second and third);
   on the stage the script moves them every frame, and each move restarted that delayed fade, so the numbers stayed
   invisible while they changed. On the stage they take the script's values directly. */
html.stage-js .promise-stage .hero-facts > div { transition: none !important; translate: none; }
/* the method reads slowly: its title holds about a screen, and each of the five basics (a line, the fact behind it and
   its source) gets about a screen and a half of scroll */
html.stage-js .method { --run: 860svh; }
/* a scene's last lines stay clear of the next section, which slides over the end of this one by its rounded top
   (--r) when the stage scrolls away */
@media (max-width: 59.99rem) { html.stage-js .method .stg-pin > .stg-steps { padding-block-end: calc(var(--r) + 1rem); } }
html.stage-js .promise-stage .stg-pin { padding-block-end: var(--r); }
/* a short phone (an SE): the basics' type a step smaller, so the tallest (the fifth, with its closing line) and the
   card both fit whole with room between them */
@media (max-width: 59.99rem) and (max-height: 720px) {
  html.stage-js .method-list .step-no { font-size: 1.6rem; }
  html.stage-js .method .fear-q { font-size: 1.15rem; }
  html.stage-js .method .fear-a { font-size: 0.875rem; }
  html.stage-js .method .step-why { font-size: 0.8125rem; line-height: 1.45; }
  html.stage-js .method .method-note { font-size: 0.75rem; }
  html.stage-js .method .fear-list li { gap: 0.3rem; }
}

/* ---------- the objections as a scene (2026-11-05): the white section keeps the page's rhythm ----------
   The title alone, then each of the five objections one at a time: the customer's words large, the answer under
   them, and its place among the five. The same engine and pacing as the method (site.js, "the scenes after the
   hero"): the title holds about a screen, each objection about a screen and a quarter. */
html.stage-js .fears { --run: 760svh; }
html.stage-js .fears .stg-pin { padding-block-end: var(--r); }
html.stage-js .fears .sec-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-inline-size: 52rem; }
html.stage-js .fears .sec-head > * { grid-column: 1; grid-row: auto; }
html.stage-js .fears .sec-head .headline { font-size: clamp(2.75rem, 1.6rem + 5.4vw, 6rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
html.stage-js .fears .sec-head > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.8s var(--ease-ui), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
html.stage-js .fears .sec-head.is-in > * { opacity: 1; transform: none; }
html.stage-js .fears .fear-list { margin: 0; border: 0; counter-reset: fear; }
html.stage-js .fears .fear-list li { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem); max-inline-size: 44rem; margin-inline: auto; padding: 0; border: 0; text-align: center; counter-increment: fear; }
html.stage-js .fears .fear-list li > * { grid-column: 1 / -1; }
/* its place among the five, read left to right as a count */
html.stage-js .fears .fear-list li::before { content: counter(fear) " / 5"; direction: ltr; unicode-bidi: isolate; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--green); font-variant-numeric: tabular-nums; }
html.stage-js .fears .fear-q { font-size: clamp(1.75rem, 1.15rem + 2.8vw, 3.5rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; }
html.stage-js .fears .fear-a { max-inline-size: 34ch; margin-inline: auto; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.375rem); line-height: 1.55; }
html.stage-js .fears .fears-close { margin-block-start: 0.6rem; font-size: 1rem; }