/* Design tokens: every font, color, weight, radius, curve and spacing step the site uses, in one place.
   The build puts this file first in assets/site.css, so every page reads its values from here.
   Change a value here and it changes everywhere. Colors keep at least 4.5:1 contrast with their background
   (the tests check every surface), so check contrast again after changing one. */

/* Segoe UI has no medium weight, so on Windows a plain 500 would look like 400. These name its real weights.
   Segoe UI Black has no Hebrew letters, so the heaviest weight here is Bold. */
@font-face { font-family: "Segoe UI Weights"; src: local("Segoe UI"); font-weight: 100 450; }
@font-face { font-family: "Segoe UI Weights"; src: local("Segoe UI Semibold"); font-weight: 451 650; }
@font-face { font-family: "Segoe UI Weights"; src: local("Segoe UI Bold"); font-weight: 651 900; }

/* The brand colors, then what each surface does with them. White is the default surface.
   The blue is the band across the top of the card itself, so the site's opening looks like the card.
   Inside .dark, .blue or .soft the same names hold other colors, so every rule below works on any surface.
   On black the blue is too dark to read, so accents there use the light blue. */
:root {
  --black: #000000;
  --white: #ffffff;
  --blue: #1f45c8;
  --blue-dark: #1a3aa8;
  --blue-light: #8aa4ff;
  --blue-pale: #dbe4ff;

  --bg: var(--white);
  --text: #1d1d1f;
  --text-2: #424245;
  --text-3: #6e6e73;
  --line: #d2d2d7;
  --field: #86868b;
  --tint: #f5f5f7;
  --mark: var(--blue);
  --btn: var(--blue);
  --btn-text: var(--white);
  --btn-hover: var(--blue-dark);
  --danger: #b3261e;
  --warn: #7a5b00;

  --radius: 1.5rem;
  --radius-small: 0.75rem;
  /* The curve behind every movement on the site: a quick start and a long, soft landing */
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Hebrew", "Segoe UI Weights", "Segoe UI", "Noto Sans Hebrew", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* How thick the type is, in one place */
  --weight-text: 500;
  --weight-strong: 700;
  --weight-head: 800;

  /* WhatsApp's own teal, only for the WhatsApp button. Its brighter green (#25d366) would leave the white icon at 2:1;
     this one keeps the icon, and the button against white, above the 3:1 that icons need. */
  --whatsapp: #128c7e;
  --whatsapp-dark: #075e54;

  /* Shades for drawings, states and shadows */
  --text-dim: #86868b; /* words of the big sentence before they light up: large type, so 3:1 is the minimum */
  --screen-on: #f5f5f7;
  --screen-off: #1c1c1e;
  --send-off: #c7c7cc;
  --chart-bar: #3a3a3c;
  --hover-light: #ececee;
  --hover-dark: #2b2b2e;
  --glass: rgb(255 255 255 / 0.8);
  --shadow-button: 0 2px 10px rgb(0 0 0 / 0.3);
  --shadow-panel: 0 10px 34px rgb(0 0 0 / 0.22);

  /* Spacing: one scale for padding, margins and gaps. --space-N is N quarter-rems, N × 4px at the default text size.
     The fluid values between sections (clamp) stay next to their rules in styles.css. */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-3-75: 0.9375rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-6-5: 1.625rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-13: 3.25rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  color-scheme: light;
}
.dark {
  --bg: var(--black);
  --text: #f5f5f7;
  --text-2: #d2d2d7;
  --text-3: #a1a1a6;
  --line: #424245;
  --field: #8d8d92;
  --tint: #1c1c1e;
  --mark: var(--blue-light);
  --btn: var(--blue-light);
  --btn-text: var(--black);
  --btn-hover: #a9bcff;
  --danger: #ff9d94;
  --warn: #ffd166;
}
.blue {
  --bg: var(--blue);
  --text: var(--white);
  --text-2: #eef2ff;
  --text-3: #c9d6ff;
  --line: #5873d6;
  --field: #c9d6ff;
  --tint: #2a51d4;
  --mark: var(--white);
  --btn: var(--white);
  --btn-text: var(--blue);
  --btn-hover: var(--blue-pale);
  --danger: #ffd4cf;
  --warn: #ffe08a;
}
.soft {
  --bg: #f5f5f7;
  --tint: var(--white);
}

/* Modes. The accessibility menu's high contrast mode goes beyond 4.5:1, and its plain font mode uses Arial.
   They come after the surfaces above, so they win over them. */
/* High contrast darkens the blue itself, so the band, its curve and every blue button change together. */
.a11y-contrast { --black: #000; --blue: #16318f; --text: #000; --danger: #8b0000; --warn: #4a3700; }
.a11y-contrast, .a11y-contrast .dark, .a11y-contrast .blue {
  --text-2: var(--text);
  --text-3: var(--text);
  --line: var(--text);
  --field: var(--text);
}
.a11y-contrast .dark { --text: #fff; --danger: #ffc2bb; --warn: #ffe08a; }
.a11y-contrast .blue { --text: #fff; --danger: #ffc2bb; --warn: #ffe08a; }
.a11y-contrast .soft { --bg: #fff; --text-2: var(--text); --text-3: var(--text); --line: var(--text); --field: var(--text); }
:root.a11y-plain { --font: Arial, Helvetica, sans-serif; }

/* Paper gets dark text, whatever the screen shows */
@media print {
  .dark, .blue, .soft {
    --bg: #fff;
    --text: #000;
    --text-2: #000;
    --text-3: #000;
    --mark: #000;
    --line: #999;
  }
}

/* Mobile first, and logical properties throughout, so one set of rules serves Hebrew (RTL) and English (LTR). */

.dark, .blue, .soft { background: var(--bg); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: var(--space-18); interpolate-size: allow-keywords; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--weight-text) 1.0625rem/1.55 var(--font);
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }
::selection { background: var(--blue-pale); color: var(--black); }
a, button, summary { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 30;
  padding: var(--space-3) var(--space-4-5);
  border-radius: var(--radius-small);
  background: var(--blue);
  color: var(--white);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

.wrap { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
.wrap--wide { width: min(100% - 2.5rem, 76rem); }
.wrap--narrow { width: min(100% - 2.5rem, 46rem); }
.center { text-align: center; }

h1, h2, h3, h4 { font-weight: var(--weight-head); letter-spacing: -0.015em; }
:lang(en) :is(h1, h2) { letter-spacing: -0.02em; }
h2 { font-size: clamp(2.25rem, 6.4vw, 4rem); line-height: 1.08; text-wrap: balance; }
h3 { font-size: 1.3125rem; line-height: 1.25; }
.lead { color: var(--text-3); font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.4; text-wrap: pretty; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-2) var(--space-6-5);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--btn); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--primary:disabled { background: var(--field); color: var(--white); cursor: not-allowed; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--bg); }
.btn--small {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3-75);
  background: var(--btn);
  color: var(--btn-text);
  font-size: 0.875rem;
}
.btn--small:hover { background: var(--btn-hover); }

/* A quiet link with a small arrow */
.more { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 2.75rem; color: var(--text); font-weight: var(--weight-strong); text-decoration: none; }
.more::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate 0.3s var(--ease);
}
[dir="rtl"] .more::after { transform: rotate(-45deg); }
.more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.more:hover::after { translate: 0.2em 0; }
[dir="rtl"] .more:hover::after { translate: -0.2em 0; }

/* Header */
.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
/* Wraps instead of pushing the page sideways when the accessibility menu makes the text larger */
.site-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); min-height: 3.25rem; }
.brand { color: var(--text); font-size: 1.25rem; font-weight: var(--weight-head); letter-spacing: -0.02em; text-decoration: none; }
.site-head .brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-nav { display: none; }
.site-nav a {
  color: var(--text-2);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.site-nav a:hover { color: var(--text); }
.site-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin-inline-start: auto; font-size: 0.875rem; }
.lang-link, .site-head__cancel { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); white-space: nowrap; }
.lang-link { text-decoration: none; }
.lang-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* The law asks for this link to stand out, so it's bright and underlined at all times */
.site-head__cancel { font-weight: var(--weight-strong); text-underline-offset: 0.2em; }

/* Hero. Like the card: a blue band whose lower edge curves into white, and the photo standing over the curve. */
.hero { overflow: hidden; text-align: center; }
.hero__band { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2rem); }
.hero h1 { font-size: clamp(2.5rem, 8vw, 6.25rem); line-height: 1.05; }
.hero h1 span { display: block; text-wrap: balance; }
/* The 1px overlap keeps a hairline of white from showing between the band and its curve when the browser zooms. */
.hero__curve { display: block; width: 100%; height: clamp(2.5rem, 7vw, 6rem); margin-block-start: -1px; fill: var(--blue); }
.hero__text {
  max-width: 36rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
  color: var(--text-2);
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-7); margin-block-start: clamp(1.5rem, 3vw, 2rem); }
@keyframes rise { from { opacity: 0; transform: translateY(1.75rem); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span, .hero__text, .hero__actions, .strip, .hero__photo { animation: rise 1.3s var(--ease) both; }
  .hero h1 span:nth-child(2) { animation-delay: 0.12s; }
  .hero__text { animation-delay: 0.24s; }
  .hero__actions { animation-delay: 0.36s; }
  .strip { animation-delay: 0.48s; }
  .hero__photo { animation-delay: 0.6s; }
}

/* The moving strip sits inside the hero, so it's on the first screen.
   As it comes it's a list you can swipe. It only moves once the script has set it up (the rules further down). */
.strip { margin-block-start: clamp(1.75rem, 4vw, 2.75rem); }
.strip__title { color: var(--text-3); font-size: 0.9375rem; font-weight: var(--weight-strong); letter-spacing: 0; line-height: 1.3; }
.strip__view { margin-block-start: var(--space-2-5); overflow-x: auto; scrollbar-width: none; }
.strip__view::-webkit-scrollbar { display: none; }
.strip__view:focus-visible { outline-offset: -3px; }
.strip__track { display: flex; gap: var(--space-11); width: max-content; padding-inline: max(1.25rem, calc((100% - 76rem) / 2)); }
.strip__group { display: flex; gap: var(--space-11); }
.strip__copy { display: none; }
.strip__item { flex: none; display: flex; align-items: baseline; gap: var(--space-2); color: var(--text-2); line-height: 1.4; white-space: nowrap; }
:root[dir="rtl"] .strip__item { direction: rtl; }
:root[dir="ltr"] .strip__item { direction: ltr; }
.strip__name { color: var(--text); font-weight: var(--weight-strong); }
.strip__item figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); max-inline-size: min(26rem, 80vw); white-space: normal; text-align: start; }
.strip__item blockquote { margin: 0; }
.strip__item figcaption { color: var(--text); font-weight: var(--weight-strong); }
@keyframes strip-slide { to { transform: translate3d(calc(var(--strip-shift) * -1), 0, 0); } }
/* Moves only for people who didn't ask for less motion. "Stop animations" in the accessibility menu is what stops it (WCAG 2.2.2),
   so that setting has to stay. Hovering or focusing it also holds it still. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-still) .strip.is-moving .strip__view {
    overflow: hidden;
    direction: ltr;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  html:not(.a11y-still) .strip.is-moving .strip__track { padding-inline: 0; animation: strip-slide var(--strip-time, 90s) linear infinite; }
  html:not(.a11y-still) .strip.is-moving .strip__copy { display: flex; }
  html:not(.a11y-still) .strip.is-moving .strip__view:focus-within .strip__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html:not(.a11y-still) .strip.is-moving .strip__view:hover .strip__track { animation-play-state: paused; }
}

/* The photo grows to full size as it comes up the screen. It starts over the curve, so it joins the band to the white below. */
.hero__photo { position: relative; width: min(100% - 2.5rem, 40rem); margin: calc(-1 * clamp(2rem, 6vw, 5rem)) auto 0; }
/* Until there is a photo the business may publish (see CREDITS.md), a marked placeholder keeps its place. */
.hero__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--space-6);
  border: 2px dashed var(--field);
  border-radius: var(--radius);
  text-align: center;
}
/* The photo was taken on black, so it stands in a black frame with the site's rounded corners. */
.hero__frame { overflow: hidden; border-radius: var(--radius); background: var(--black); transform: scale(calc(0.9 + 0.1 * var(--zoom, 1))); }
/* The hand runs off the left and bottom of the photo, so those two edges fade into the black frame instead of ending in a hard line. */
.hero__frame img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to top, transparent, #000 16%);
  mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to top, transparent, #000 16%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* One sentence, whose words light up as it scrolls by. Unlit words still pass the contrast minimum for large type (3:1). */
.statement { padding-block: clamp(4rem, 12vw, 9.5rem); text-align: center; }
.statement__text {
  max-width: 18em;
  margin-inline: auto;
  font-size: clamp(2rem, 5.6vw, 4rem);
  font-weight: var(--weight-head);
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
}
.statement__text .word { transition: color 0.5s var(--ease); }
.statement__text.is-live .word { color: var(--text-dim); }
.statement__text.is-live .word.is-lit { color: var(--text); }

/* Sections */
.section { padding-block: clamp(4.5rem, 11vw, 8.5rem); }
.section__head { max-width: 44rem; margin-inline: auto; text-align: center; }
.section__head .lead { margin-block-start: var(--space-4); }

/* Product */
.product { padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(3.5rem, 8vw, 6rem); }
/* Two across on a phone, and one across when the accessibility menu makes the text too large for two */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-3); margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.tile { overflow: hidden; border-radius: var(--radius); background: var(--tint); }
.tile--fact { display: flex; flex-direction: column; gap: var(--space-1-5); min-height: 10.5rem; padding: var(--space-4-5); }
.tile__icon { flex: none; width: 2.25rem; height: 2.25rem; margin-block-end: auto; padding-block-end: var(--space-2); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tile--fact p:last-child { color: var(--text-3); font-size: 0.9375rem; line-height: 1.35; }
.tile__big { font-size: clamp(1.5rem, 5.2vw, 2.375rem); font-weight: var(--weight-head); letter-spacing: -0.015em; line-height: 1.1; }
.product__note { margin-block-start: var(--space-6); color: var(--text-3); text-align: center; }

/* How it works */
.how__layout { display: grid; gap: var(--space-6); margin-block-start: clamp(2rem, 6vw, 4rem); }
.how__stage { display: grid; place-items: center; color: var(--text); }
.tap { width: 100%; max-width: 22rem; max-height: 40svh; overflow: visible; }
.how__steps { display: grid; gap: var(--space-8); }
.how__number { display: block; margin-block-end: var(--space-1); color: var(--mark); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.how__step h3 { font-size: clamp(1.875rem, 4.2vw, 3rem); line-height: 1.1; }
.how__step p { max-width: 28rem; margin-block-start: var(--space-2-5); color: var(--text-2); font-size: clamp(1.0625rem, 2vw, 1.375rem); line-height: 1.4; }
.how__honest { max-width: 40rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0; color: var(--text-3); text-align: center; }

/* The drawing. Each state only changes what differs from the finished picture. */
.tap__phone, .tap__ripple, .tap__ink { transform-box: fill-box; }
.tap__phone { transform-origin: center; transition: transform 1.2s var(--ease), opacity 0.8s var(--ease); }
.tap__screen { fill: var(--screen-on); transition: fill 0.8s var(--ease); }
.tap__window { transition: opacity 0.8s var(--ease) 0.15s; }
.tap__ink { transform-origin: 100% 50%; transition: transform 0.9s var(--ease); }
.tap__ink:nth-of-type(n) { transition-delay: 0.2s; }
.tap__send { fill: var(--mark); transition: fill 0.7s var(--ease) 0.9s; }
.tap__ripple { transform-origin: center; opacity: 0; }
.tap[data-state="0"] .tap__phone { transform: translate(78px, -10px) rotate(9deg); opacity: 0.45; }
.tap:is([data-state="0"], [data-state="1"]) .tap__screen { fill: var(--screen-off); }
.tap:is([data-state="0"], [data-state="1"]) .tap__window { opacity: 0; }
.tap:not([data-state="3"]) .tap__ink { transform: scaleX(0); }
.tap:not([data-state="3"]) .tap__send { fill: var(--send-off); }
@keyframes tap-ripple { from { transform: scale(0.55); opacity: 0.55; } to { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-still) .tap[data-state="1"] .tap__ripple { animation: tap-ripple 2.8s var(--ease) infinite; }
  html:not(.a11y-still) .tap[data-state="1"] .tap__ripple:nth-child(2) { animation-delay: 1.4s; }
  html:not(.a11y-still) .how.is-live .how__stage { position: sticky; inset-block-start: var(--space-13); z-index: 2; padding-block: var(--space-2); background: var(--bg); }
  html:not(.a11y-still) .how.is-live .how__steps { gap: 0; }
  /* Steps that aren't the current one are dimmed, but not below 4.5:1 for their text (0.5 gave 3.8:1). */
  html:not(.a11y-still) .how.is-live .how__step { display: flex; flex-direction: column; justify-content: center; min-height: 44svh; opacity: 0.6; transition: opacity 0.7s var(--ease); }
  html:not(.a11y-still) .how.is-live .how__step.is-active { opacity: 1; }
}

/* Dashboard */
.chart { max-width: 52rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--radius); }
.chart:not(.is-ready) { display: none; }
.chart__bars { display: flex; align-items: flex-end; gap: clamp(2px, 0.6vw, 6px); height: clamp(8rem, 24vw, 14rem); direction: ltr; }
.chart__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: var(--chart-bar); transform-origin: bottom; transition: transform 1.2s var(--ease) calc(var(--i) * 20ms); }
.chart__bars i:last-child { background: var(--mark); }
.chart.is-waiting .chart__bars i { transform: scaleY(0); }
.chart figcaption { margin-block-start: var(--space-3); color: var(--text-3); font-size: 0.8125rem; }
.data__items { display: grid; gap: var(--space-5); max-width: 52rem; margin: clamp(2rem, 5vw, 3rem) auto 0; }
.data__items p { margin-block-start: var(--space-1); color: var(--text-3); }
.data__honest { max-width: 40rem; margin: clamp(2rem, 5vw, 3rem) auto 0; color: var(--text); font-weight: var(--weight-strong); text-align: center; }

/* Who it's for */
.eyebrow { color: var(--text-3); font-size: 1.0625rem; font-weight: var(--weight-strong); letter-spacing: 0; }
:lang(en) .eyebrow { letter-spacing: 0; }
.audience {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.16em 0.45em;
  margin-block-start: var(--space-5);
  font-size: clamp(2.125rem, 6.6vw, 4.75rem);
  font-weight: var(--weight-head);
  letter-spacing: -0.02em;
  line-height: 1.14;
}
.audience__more { color: var(--text-3); }
/* Like the tide: each business type recedes and comes back at its own slow pace, so they never line up.
   The fade stops where the text still passes the contrast minimum. The gap above keeps neighbours from touching at full size.
   "Stop animations" in the accessibility menu stops this too. */
@keyframes audience-breathe { from { transform: scale(0.6); opacity: 0.65; } to { transform: scale(1.04); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .audience li:not(.audience__more) { animation: audience-breathe var(--pace) cubic-bezier(0.37, 0, 0.63, 1) var(--start) infinite alternate; }
}
.audience li:nth-child(1) { --pace: 3.7s; --start: -0.6s; }
.audience li:nth-child(2) { --pace: 5.1s; --start: -3.4s; }
.audience li:nth-child(3) { --pace: 4.3s; --start: -5.8s; }
.audience li:nth-child(4) { --pace: 6.1s; --start: -1.8s; }
.audience li:nth-child(5) { --pace: 3.3s; --start: -4.4s; }
.audience li:nth-child(6) { --pace: 5.7s; --start: -7.2s; }
.audience li:nth-child(7) { --pace: 4.7s; --start: -2.2s; }
.audience li:nth-child(8) { --pace: 6.5s; --start: -8.6s; }
.audience ~ .lead { max-width: 34rem; margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; }

/* Order */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-3); max-width: 44rem; margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; }
.tier {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-0-5);
  padding: var(--space-4-5) var(--space-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: start;
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.tier:hover { box-shadow: inset 0 0 0 1px var(--field); }
.tier[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mark); }
.tier:active { transform: scale(0.985); }
.tier:disabled { cursor: default; }
.tier__label { color: var(--text-2); font-size: 0.9375rem; font-weight: var(--weight-strong); }
.tier__price { font-size: clamp(1.625rem, 6vw, 2.5rem); font-variant-numeric: tabular-nums; font-weight: var(--weight-head); letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.tier__note { color: var(--text-3); font-size: 0.9375rem; line-height: 1.3; }
.tiers__shipping { max-width: 44rem; margin: var(--space-3-5) auto 0; color: var(--text-3); text-align: center; }
.order { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-block-start: clamp(2rem, 5vw, 3.5rem); }
.calc, .details { padding: clamp(1.25rem, 5vw, 2.25rem); border-radius: var(--radius); background: var(--white); }
.calc .field { margin-block-start: var(--space-5); }
.stepper {
  display: grid;
  grid-template-columns: 3.25rem 1fr 3.25rem;
  overflow: hidden;
  border: 1px solid var(--field);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
}
.stepper:focus-within { outline: 3px solid var(--mark); outline-offset: 3px; }
.stepper button {
  min-height: 3.25rem;
  border: 0;
  background: transparent;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.stepper button:hover { background: var(--hover-light); }
.stepper button:focus-visible { outline-color: var(--black); outline-offset: -3px; }
.stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 1.1875rem;
  font-weight: var(--weight-strong);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input:focus { outline: none; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
/* How the cards arrive: shipping or pickup. Nothing is chosen in advance, so shipping is never added for the customer. */
.delivery { min-width: 0; margin: var(--space-5) 0 0; padding: 0; border: 0; }
.delivery legend { margin-block-end: var(--space-1-5); padding: 0; font-size: 0.9375rem; font-weight: var(--weight-strong); }
.delivery__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-block-start: var(--space-2);
  padding: var(--space-3-5) var(--space-4);
  border-radius: var(--radius-small);
  box-shadow: inset 0 0 0 1px var(--field);
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease);
}
.delivery__option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--mark); }
.delivery__option input { width: 1.25rem; height: 1.25rem; margin: var(--space-0-5) 0 0; accent-color: var(--mark); cursor: pointer; }
.delivery__name { display: block; font-weight: var(--weight-strong); }
.delivery__note { display: block; color: var(--text-3); font-size: 0.9375rem; line-height: 1.35; }
.calc__lines { margin-block-start: var(--space-6); }
.calc__lines > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2-5);
  border-block-start: 1px solid var(--line);
}
.calc__lines dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__total { align-items: center; padding-block-start: var(--space-4); }
.calc__total dt { font-weight: var(--weight-strong); }
.calc__total dd { color: var(--mark); font-size: clamp(1.75rem, 8.6vw, 2.5rem); font-weight: var(--weight-head); letter-spacing: -0.02em; line-height: 1.1; }
.calc__per-card { color: var(--text-3); font-size: 0.9375rem; text-align: end; }
.calc__nudge { margin-block-start: var(--space-4); color: var(--mark); font-weight: var(--weight-strong); }
.calc__note { margin-block-start: var(--space-2); color: var(--text-3); font-size: 0.9375rem; }
.calc__summary { margin-block-start: var(--space-2); }
.calc__grand dt, .calc__grand dd { font-weight: var(--weight-strong); }

.details h3, .calc h3 { font-size: 1.5rem; }
.details__required { margin-block-start: var(--space-1); color: var(--text-3); font-size: 0.9375rem; }
.details__grid { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }
.field label { display: block; margin-block-end: var(--space-1-5); font-size: 0.9375rem; font-weight: var(--weight-strong); }
.field > input, .field > select {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-2-5) var(--space-4);
  border: 1px solid var(--field);
  border-radius: var(--radius-small);
  background-color: var(--white);
  color: var(--black);
  transition: border-color 0.3s var(--ease);
}
.field > input:focus, .field > select:focus { border-color: var(--mark); outline: 2px solid var(--mark); outline-offset: 0; }
.field > [aria-invalid="true"] { border-color: var(--danger); }
.field > select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0b0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
[dir="rtl"] .field > select { background-position: left 1rem center; }
[dir="rtl"] input[dir="ltr"] { text-align: right; }
.field__hint { margin-block-start: var(--space-1-5); color: var(--text-3); font-size: 0.875rem; }
.field__error { margin-block-start: var(--space-1-5); color: var(--danger); font-size: 0.9375rem; font-weight: var(--weight-strong); }
.field__warning { margin-block-start: var(--space-2); color: var(--warn); font-size: 0.9375rem; }
.details__submit { display: grid; gap: var(--space-3); margin-block-start: var(--space-7); }
/* The full sum stays in view right where the customer commits */
.details__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); width: 100%; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); font-weight: var(--weight-strong); }
.details__total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: var(--weight-head); letter-spacing: -0.02em; white-space: nowrap; }
.details__note { color: var(--text-3); font-size: 0.875rem; }
.details__problem { color: var(--danger); font-size: 0.9375rem; font-weight: var(--weight-strong); }
.details__notice { margin-block-start: var(--space-7); color: var(--text-3); font-size: 0.875rem; }
.details__notice a { color: var(--mark); }
.result {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-small);
}
.result[hidden] { display: none; }
.result:focus { outline: 3px solid var(--black); outline-offset: 3px; }
.result h4 { font-size: 1.25rem; }

/* FAQ */
.faq { margin-block-start: clamp(2rem, 5vw, 3.5rem); border-block-end: 1px solid var(--line); }
.faq details { border-block-start: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
  padding-block: var(--space-4);
  font-size: 1.1875rem;
  font-weight: var(--weight-strong);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  color: var(--text-3);
  font-size: 1.625rem;
  font-weight: var(--weight-text);
  line-height: 1;
  transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-block-end: var(--space-6); color: var(--text-2); }
/* Browsers that can animate an opening <details> do. The others simply open it. */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Form consent */
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; margin-block-start: var(--space-5); }
.consent input { width: 1.375rem; height: 1.375rem; margin: var(--space-0-5) 0 0; accent-color: var(--mark); cursor: pointer; }
.consent label { font-size: 0.9375rem; font-weight: var(--weight-strong); cursor: pointer; }
.consent .field__error { grid-column: 2; margin-block-start: 0; }

/* Contact */
.contact { padding-block: 0 clamp(4.5rem, 11vw, 8rem); }
.contact h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.contact .lead { margin-block: var(--space-2-5) var(--space-6); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-7); }
.placeholder {
  padding: var(--space-3-5) var(--space-4-5);
  border: 1.5px dashed var(--mark);
  border-radius: var(--radius-small);
  color: var(--mark);
  font-weight: var(--weight-strong);
}

/* Cancelling a transaction. The law wants a prominent link on the home page, with the ways to cancel beside it in emphasised, clear letters
   (section 14ט). The link is in the header. The ways stand at the bottom in bold, without a frame. The returns page keeps the frame. */
.cancel-deal {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 46rem;
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 2px solid var(--text);
  border-radius: var(--radius-small);
}
.cancel-deal h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.15; }
.cancel-deal ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-inline-start: var(--space-5); list-style: disc; font-weight: var(--weight-strong); }
.cancel-deal__details { font-weight: var(--weight-strong); }
.cancel-deal__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.legal__body .cancel-deal { margin-block-start: var(--space-11); }
.site-foot__cancel { margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.cancel-deal--plain { gap: var(--space-1); max-width: none; padding: 0; border: 0; border-radius: 0; color: var(--text); font-size: 1rem; }
.cancel-deal--plain h2 { font-size: 1.25rem; }
.cancel-deal--plain ul { display: flex; flex-wrap: wrap; gap: var(--space-0-5) var(--space-7); padding-inline-start: 0; list-style: none; }
.cancel-deal--plain .cancel-deal__actions { gap: 0 var(--space-6); }
.cancel-deal--plain .cancel-deal__actions a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: var(--weight-strong); text-underline-offset: 0.2em; }

/* Legal pages */
.legal { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 7rem); }
.legal__body > * { max-width: 46rem; }
.legal h1 { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1.05; }
.legal__updated { margin-block-start: var(--space-4); color: var(--text-3); font-size: 0.9375rem; }
.legal__note {
  margin-block-start: var(--space-6);
  padding: var(--space-3-5) var(--space-4-5);
  border: 1.5px dashed var(--mark);
  border-radius: var(--radius-small);
  color: var(--mark);
  font-weight: var(--weight-strong);
}
/* The smallest the purchase terms may go: letters of at least 2 mm in a standard contract (letter-size regulations, 2 and 3). */
.legal__fine { margin-block-start: var(--space-12); color: var(--text-3); font-size: 0.8125rem; line-height: 1.7; }
.legal__translation { margin-block-start: var(--space-4); color: var(--text-3); font-size: 0.9375rem; }
.legal section { margin-block-start: var(--space-11); }
.legal h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
.legal section p, .legal section ul { margin-block-start: var(--space-3); color: var(--text-2); }
.legal section ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-inline-start: var(--space-5); list-style: disc; }
.legal a:not(.btn) { color: var(--mark); }
.fill {
  padding-inline: 0.25em;
  border-radius: 0.25em;
  background: var(--blue-pale);
  color: var(--black);
  font-weight: var(--weight-strong);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The page for an address that doesn't exist */
.not-found { display: grid; place-items: center; min-height: 70svh; padding-block: clamp(4rem, 12vw, 8rem); }
.not-found h1 { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.05; }
.not-found .lead { margin-block: var(--space-4) var(--space-8); }

/* Footer. The extra room at the bottom keeps the last line clear of the accessibility button. */
.site-foot { padding-block: var(--space-7) var(--space-24); color: var(--text-3); font-size: 0.8125rem; line-height: 1.5; }
.site-foot__grid { display: grid; gap: var(--space-4); }
.site-foot__fine p + p { margin-block-start: var(--space-1); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); text-decoration: none; }
.site-foot__links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }

/* Accessibility menu. The button floats over every surface, so it carries its own ring. */
.a11y { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); z-index: 25; }
.a11y[hidden], .a11y__panel[hidden] { display: none; }
.a11y__open {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--white), var(--shadow-button);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.a11y__open:hover { background: var(--blue-dark); }
.a11y__open:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
.a11y__panel {
  position: absolute;
  inset-block-end: calc(100% + 0.75rem);
  inset-inline-end: 0;
  display: grid;
  gap: var(--space-1);
  width: min(17rem, 100vw - 2rem);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: var(--space-3-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-panel);
  font-size: 0.9375rem;
}
.a11y__title { margin-block-end: var(--space-1); font-size: 1.0625rem; font-weight: var(--weight-strong); }
.a11y__panel button, .a11y__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1-5) var(--space-3);
  border: 0;
  border-radius: 0.625rem;
  background: var(--tint);
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
}
.a11y__panel button:hover { background: var(--line); }
.a11y__panel [aria-pressed="true"], .a11y__panel [aria-pressed="true"]:hover { background: var(--blue); color: var(--white); font-weight: var(--weight-strong); }
.a11y__panel [aria-pressed="true"]::after { content: "✓"; content: "✓" / ""; }
.a11y__panel a { background: none; color: var(--mark); font-weight: var(--weight-strong); }

/* WhatsApp. Floats in the corner opposite the accessibility button and opens a chat with the business.
   The white ring keeps it clear of the blue band and the black section, like the accessibility button. */
.wa-float {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 25;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--white), var(--shadow-button);
  transition: background-color 0.3s var(--ease);
}
.wa-float:hover { background: var(--whatsapp-dark); }
.wa-float svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-float:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }

/* The menu's settings. Each class goes on <html>. */
html.a11y-size-1 { font-size: 112.5%; }
html.a11y-size-2 { font-size: 125%; }
html.a11y-size-3 { font-size: 150%; }
/* With text this large the header takes several lines, so on a phone it scrolls away instead of covering the page */
@media (max-width: 40rem) {
  html:is(.a11y-size-2, .a11y-size-3) .site-head { position: static; }
}
.a11y-contrast .statement__text.is-live .word { color: var(--text); }
.a11y-contrast .a11y__panel button { box-shadow: inset 0 0 0 1px var(--black); }
.a11y-contrast .a11y__panel [aria-pressed="true"] { box-shadow: none; }
.a11y-links a { font-weight: var(--weight-strong); text-decoration: underline 2px !important; text-underline-offset: 0.2em; }
.a11y-plain * { letter-spacing: 0 !important; }
.a11y-still, .a11y-still *, .a11y-still *::before, .a11y-still *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.a11y-still [data-reveal].is-waiting { opacity: 1; transform: none; }
.a11y-still .hero__frame { transform: none; }
.a11y-still .statement__text.is-live .word { color: var(--text); }
.a11y-still .chart.is-waiting .chart__bars i { transform: none; }
.a11y-still .btn:active { transform: none; }

/* Larger screens */
@media (min-width: 30rem) {
  .details__submit { justify-items: start; }
}
@media (min-width: 40rem) {
  .details__grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 50rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
  .tile--fact { grid-column: span 3; min-height: 14rem; padding: var(--space-7); }
  .tile--fact p:last-child { font-size: 1.0625rem; }
  .data__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .site-foot__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: start; }
  .site-foot__links { max-width: 34rem; justify-content: flex-end; }
}
@media (min-width: 62rem) {
  .site-nav { display: flex; gap: var(--space-7); margin-inline-start: var(--space-10); }
  .how__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .how__stage { grid-column: 2; grid-row: 1; }
  .how__steps { grid-column: 1; grid-row: 1; }
  .tap { max-width: 26rem; max-height: 74svh; }
  .order { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-4); align-items: start; }
  .calc { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: var(--space-18); }
  .details { grid-column: 1; grid-row: 1; }
}
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  html:not(.a11y-still) .how.is-live .how__stage { inset-block-start: calc(50svh - 13rem); padding-block: 0; background: none; }
  html:not(.a11y-still) .how.is-live .how__step { min-height: 72svh; }
}

/* Motion stays slow and soft, and goes away for anyone who asked for less */
[data-reveal] { transition: opacity 1.1s var(--ease) var(--delay, 0s), transform 1.1s var(--ease) var(--delay, 0s); }
[data-reveal].is-waiting { opacity: 0; transform: translateY(2.25rem); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
  .hero__frame { transform: none; }
}
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .a11y__open, .wa-float { border: 1px solid ButtonText; }
  .tile, .delivery__option { border: 1px solid CanvasText; }
}
/* Paper gets dark text on no background, whatever the screen shows */
@media print {
  .a11y, .wa-float, .skip, .strip, .how__stage, .chart { display: none !important; }
  .site-head { position: static; }
  .dark, .blue, .soft {
    background: none;
  }
  .hero__curve { display: none; }
}