/* ─────────────────────────────────────────────────────────────
   עונים לי — שפת המשפחה של אחיה אוטומציה (אושרה 24.9.2026)
   שתי שכבות:
   1. משפחה (כמו achiya-automation.com, clean v51): Suez One / Varela Round /
      Secular One, פינת עלה, צל קשיח, קרם, מרקר נטוי, קווי שיער, כרטיס עם לשונית,
      כרטיס מייסד, רצועה כהה.
   2. מוצר (עונים לי בלבד): דיו, צהוב החוגה, הסימן, הפתק (הסיכום האמיתי).
   הסגול של אחיה אוטומציה מופיע רק על השם «אחיה אוטומציה».
   ───────────────────────────────────────────────────────────── */

/* self-hosted family faces (@fontsource 5.2.8, OFL — see fonts/LICENSE-*.txt) */
@font-face { font-family: "Suez One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/suez-one-hebrew-400.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Suez One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/suez-one-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Varela Round"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/varela-round-hebrew-400.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Varela Round"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/varela-round-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/secular-one-hebrew-400.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/secular-one-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* family — from clean-conversion-home.css, do not drift */
  --f-display: "Suez One", Georgia, serif;
  --f-body: "Varela Round", system-ui, sans-serif;
  --f-ui: "Secular One", system-ui, sans-serif;
  --leaf: 30px 8px 30px 8px;
  --leaf-sm: 19px 6px 19px 6px;
  --leaf-xs: 12px 4px 12px 4px;
  --page: #fbf9f3;
  --ivory: #f6f0df;
  --sheet: #fffdf7;
  --achiya: #3a2168;

  /* product — onimli */
  --ink: #1b1a17;
  --ink-2: #2b2925;
  --ink-soft: #57534a;
  --yellow: #ffe81a;
  --line-strong: rgba(27, 26, 23, 0.32);
  --hair: rgba(27, 26, 23, 0.14);
  --band: #1f1d19;
  --band-2: #2c2a25;
  --on-band: #fbf6e8;
  --on-band-2: #d8cfb9;
  --wa-meta: #5f6f78;

  --shadow-hard: 3px 4px 0 rgba(27, 26, 23, 0.86);
  --card-shadow: 0 12px 28px rgba(27, 26, 23, 0.08), 4px 5px 0 rgba(27, 26, 23, 0.14);
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --head-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden means hidden, whatever display a component sets (.btn beat the UA rule once: #restart showed early) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); scrollbar-color: #8a8476 var(--page); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--page); color: var(--ink); caret-color: var(--ink); font: 17px/1.75 var(--f-body); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--yellow); color: var(--ink); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
p, li, dd, blockquote, .board__slam, .decide__q { text-wrap: pretty; }
/* the family faces ship one weight: emphasis switches family instead of faking bold */
b, strong { font-family: var(--f-ui); font-weight: 400; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the signup honeypot: clipped away for people, still a field for bots (an off-screen offset
   would widen an RTL page to the left) */
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nb { white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.band :focus-visible, .final :focus-visible { outline-color: var(--yellow); }
.skip-link { position: fixed; z-index: 1000; top: 8px; right: 8px; min-height: 44px; padding: 11px 15px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--leaf-xs); clip-path: inset(0 100% 100% 0); }
.skip-link:focus { clip-path: inset(0); }
/* family marker: the slanted swash from achiya-automation.com, in product yellow */
mark { color: inherit; padding: 0 0.05em; background: linear-gradient(176deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── buttons: family shape (leaf + hard shadow), product colour ── */
.btn { --btn-bg: var(--sheet); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 28px; border: 2px solid var(--ink); border-radius: var(--leaf-sm); background: var(--btn-bg); color: var(--ink); font: 18px/1.2 var(--f-ui); text-decoration: none; cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.btn--primary { --btn-bg: var(--yellow); box-shadow: var(--shadow-hard); }
.btn--primary:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 rgba(27, 26, 23, 0.86); }
.btn--primary:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(27, 26, 23, 0.86); }
.btn--ghost { box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.16); }
/* Sign in with Apple (18.10.2026, the iPhone app only): Apple's own key, black with its white logo, the Google key's size */
.btn--apple { --btn-bg: #000; color: #fff; border-color: #000; }
.btn--ghost:hover { box-shadow: 3px 4px 0 rgba(27, 26, 23, 0.3); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.btn--lg { min-height: 64px; padding: 16px 36px; font-size: 20px; }
.btn .i { width: 22px; height: 22px; stroke-width: 2.4; }
.band .btn--primary, .final .btn--primary { box-shadow: 3px 4px 0 rgba(251, 246, 232, 0.85); }
.band .btn--primary:hover, .final .btn--primary:hover { box-shadow: 4px 6px 0 rgba(251, 246, 232, 0.85); }
.band .btn--primary:active, .final .btn--primary:active { box-shadow: 1px 1px 0 rgba(251, 246, 232, 0.85); }
.text-link { display: inline-flex; align-items: center; gap: 6px; font: 17px/1.3 var(--f-ui); color: var(--ink); }
.text-link .i { width: 18px; height: 18px; }

/* audio: one custom control, native audio underneath (family.js) */
.play { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--ink); }
/* the play glyph always points right, whatever the text direction */
.play::before { content: ""; width: 11px; height: 12px; background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(1.5px); }
.is-playing .play::before { width: 10px; height: 12px; clip-path: none; transform: none; background: linear-gradient(90deg, var(--yellow) 0 35%, transparent 35% 65%, var(--yellow) 65%); }
.listen__bar { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: var(--hair); }
.listen__bar i { display: block; width: 0; height: 100%; background: var(--ink); }
.btn--listen, .btn--watch { position: relative; gap: 12px; padding-inline: 12px 22px; overflow: hidden; }
.btn--listen small, .btn--watch small { font: 14px/1 var(--f-body); color: var(--ink-soft); }
.btn--listen .listen__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; margin: 0; border-radius: 0; background: transparent; }
.btn--listen .listen__bar i { background: var(--yellow); }

/* ── header ── */
/* The same header on both products (/bot/ copies these numbers in its marketing.css): moving between them, it holds still. */
.masthead { position: sticky; top: 0; z-index: 140; background: rgba(251, 249, 243, 0.97); border-bottom: 1px solid var(--hair); view-transition-name: masthead; }
.masthead-row { position: relative; display: flex; align-items: center; gap: 26px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 42px; height: 42px; }
/* the product name inside running text (old pages mark it up as a span) stays in the line */
span.brand { display: inline; }
.brand__txt { display: grid; line-height: 1.05; }
.brand__name { font: 26px/1 var(--f-display); }
.brand__by { margin-top: 4px; font: 12px/1.3 var(--f-body); color: var(--ink-soft); }
.brand__by b { font-size: 12px; color: var(--achiya); }
/* one brand, two products (4.10.2026): the channel is a smaller descriptor beside the name, never part of the mark;
   in the masthead it is also the switch between the products, the current one lit */
.brand__line { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.brand__channel { font: 16px/1 var(--f-ui); color: var(--ink-soft); }
.product-switch { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: -10px; padding: 3px; background: var(--ivory); border: 1.5px solid var(--line-strong); border-radius: 999px; }
.product-switch a { display: inline-grid; place-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px; color: var(--ink-soft); font: 15px/1.1 var(--f-ui); text-decoration: none; transition: background-color 0.14s ease, color 0.14s ease; }
.product-switch a:hover { color: var(--ink); background: var(--sheet); }
@media (max-width: 640px) { .product-switch a { min-height: 44px; padding-block: 0; } }   /* a finger's target */
/* the current product is a state, not the action: ink, so the yellow stays with the header's one button */
.product-switch a[aria-current] { background: var(--band); color: var(--on-band); }
.masthead .product-switch a[aria-current] { view-transition-name: product-lit; }
/* moving between pages of onimli.com, the WhatsApp product's /bot/ pages included (they opt in too; same origin
   only): the header holds still, the lit product key slides to its new place, the page under it fades. Never
   under reduced motion; the accessibility panel's «עצירת הנפשות» skips it too (a11y.js). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-nav { display: flex; gap: 26px; margin-inline: auto; font-size: 16px; }
.site-nav a { padding-block: 6px; color: var(--ink-2); text-decoration: none; background: linear-gradient(var(--yellow), var(--yellow)) 100% 100% / 0 3px no-repeat; transition: background-size 0.2s ease; }
.site-nav a:hover, .site-nav a[aria-current] { background-size: 100% 3px; }
.site-nav .mobile-nav-cta, .site-nav .site-nav__login { display: none; }
.masthead-login { font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.masthead-login:hover { color: var(--ink); text-decoration: underline; }
.mast-cta { display: flex; }
.mobile-nav-toggle { display: none; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; padding: 0; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.mobile-nav-toggle > span { display: grid; width: 20px; gap: 4px; }
.mobile-nav-toggle i { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 999px; transition: transform 0.18s ease, opacity 0.18s ease; }
.mobile-nav-toggle[aria-expanded="true"] { background: var(--yellow); }
.mobile-nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* breadcrumbs on inner pages */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ── hero ── */
.hero { padding: 36px 0 72px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
.hero__copy { padding-top: clamp(20px, 6vw, 74px); }
.hero h1 { display: grid; gap: 12px; }
.h1-q { font-size: clamp(46px, 5.7vw, 80px); line-height: 1.02; }
.h1-a { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.22; }
.lead { margin-top: 22px; font-size: 19px; line-height: 1.7; color: var(--ink-2); max-width: 42ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.assure { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-soft); }
.assure li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.assure li small { flex-basis: 100%; padding-inline-start: 23px; font-size: 14px; line-height: 1.5; }   /* the carrier note on a line of its own, the price whole */
.assure .i { width: 17px; height: 17px; color: var(--ink); stroke-width: 2.6; }
/* 20.10.26, the owner: «כפתור ברור לחייג ולא כיתוב בקטן» -- the dial-demo line is a whole button now */
.dial-demo { margin: 16px 0 0; }
.btn--dial { gap: 12px; padding-inline: 18px 24px; }
.btn--dial .i { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.btn--dial small { font: 15px/1 var(--f-body); color: var(--ink-soft); white-space: nowrap; }
.nod { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; max-width: 470px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--hair); }
.nod img { grid-row: span 2; width: 60px; height: 44px; object-fit: cover; border-radius: var(--leaf-xs); }
.nod blockquote { margin: 0; font: 17px/1.45 var(--f-ui); }
.nod figcaption { font-size: 13px; color: var(--ink-soft); }
.nod figcaption a { color: var(--ink-2); }
.nod--center { margin-inline: auto; text-align: start; }

/* family card: ink edge, leaf corner, soft + hard shadow, yellow tab on the top edge */
.card { position: relative; margin: 0; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.tab { position: absolute; bottom: 100%; inset-inline-start: 28px; z-index: 1; margin-bottom: -2px; padding: 6px 14px 5px; background: var(--yellow); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; font: 13px/1.3 var(--f-ui); color: var(--ink); white-space: nowrap; }

.hero__visual { justify-self: end; width: min(100%, 452px); padding-top: 18px; }
.card--wa { padding: 12px; }
.wa { overflow: hidden; background: #efeae2; border-radius: 22px 6px 22px 6px; }
.wa__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f7f4ee; border-bottom: 1px solid rgba(27, 26, 23, 0.08); }
.wa__bar img { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: #fff; border: 1px solid rgba(27, 26, 23, 0.1); }
.wa__bar b { display: block; font-size: 15px; line-height: 1.2; }
.wa__bar small { font-size: 12px; color: var(--wa-meta); }
.wa__chat { display: grid; justify-items: start; gap: 5px; padding: 16px 14px 18px; }
.wa__msg { position: relative; width: min(100%, 296px); padding: 4px 4px 24px; background: #fff; border-radius: 10px; border-start-start-radius: 0; box-shadow: 0 1px 1px rgba(27, 26, 23, 0.12); font-size: 15px; line-height: 1.5; }
.wa__slip { width: 100%; height: auto; aspect-ratio: 900 / 1125; border-radius: 7px; }
.wa__msg p { padding-inline: 8px; }
.wa__msg p:first-of-type { margin-top: 8px; }
.wa__msg p + p { margin-top: 5px; }
.wa__msg b { font-size: 15px; }
.wa__time { position: absolute; inset-inline-end: 10px; bottom: 5px; font-size: 11px; color: var(--wa-meta); }
.wa__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(100%, 296px); padding: 9px; background: #fff; border-radius: 10px; box-shadow: 0 1px 1px rgba(27, 26, 23, 0.12); color: #027eb5; font: 15px/1.2 var(--f-ui); }
.wa__btn .i { width: 16px; height: 16px; }
/* the one authored moment: the slip finishes printing into the message (family.js adds the class) */
@media (prefers-reduced-motion: no-preference) {
  .wa__slip.is-printing { animation: print 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards; }
  @keyframes print { from { clip-path: inset(0 0 36% 0); transform: translateY(-12px); } to { clip-path: inset(0); transform: none; } }
}

.founder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 18px 12px 14px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: 0 10px 24px rgba(27, 26, 23, 0.07), 3px 4px 0 rgba(27, 26, 23, 0.13); color: var(--ink); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.founder:hover { transform: translate(-1px, -2px); box-shadow: 0 10px 24px rgba(27, 26, 23, 0.07), 4px 6px 0 rgba(27, 26, 23, 0.22); }
.founder img { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; object-position: 50% 18%; }
.founder b { display: block; font-size: 16px; line-height: 1.3; }
.founder small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }

/* ── proof band (family: the dark testimonial panel) ── */
.band { padding: 8px 0 24px; }
.band__panel { padding: clamp(28px, 5vw, 64px); background: var(--band); color: var(--on-band); border-radius: var(--leaf); }
.band__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "copy media" "act media"; gap: 0 clamp(28px, 5vw, 72px); align-items: start; }
.band__copy { grid-area: copy; }
.band__media { grid-area: media; display: grid; gap: 18px; align-self: center; }
.band__act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 30px; }
.band__act p { font: 18px/1.3 var(--f-ui); color: var(--on-band); }
.band h2 { font-size: clamp(34px, 4vw, 52px); color: var(--on-band); }
.band__quote { position: relative; margin: 26px 0 0; padding-inline-start: 46px; }
.band__quote::before { content: "«"; position: absolute; inset-inline-start: -4px; top: -16px; font: 76px/1 var(--f-display); color: var(--yellow); }
.band__quote p { font: clamp(19px, 1.65vw, 22px)/1.75 var(--f-body); color: var(--on-band); }
.band__quote footer { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--on-band-2); }
.band__quote footer a { color: var(--on-band); font-family: var(--f-ui); }
.shot { margin: 0; padding: 10px; background: #fff; border-radius: var(--leaf-sm); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35); transform: rotate(-1.2deg); }
.shot img { width: 100%; height: auto; aspect-ratio: 800 / 529; border-radius: 12px 4px 12px 4px; }
.shot figcaption { padding: 8px 4px 0; font-size: 13px; color: var(--ink-soft); }
.player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 16px; padding: 14px 18px 14px 16px; background: var(--band-2); border: 1.5px solid rgba(251, 246, 232, 0.2); border-radius: var(--leaf-sm); }
.player__btn { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.player__btn .play { background: transparent; }
.player__btn .play::before { background: var(--ink); }
.player__btn.is-playing .play::before { background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%); }
.player b { display: block; font-size: 16px; line-height: 1.35; color: var(--on-band); }
.player small { display: block; font-size: 13px; line-height: 1.45; color: var(--on-band-2); }
.player .listen__bar { background: rgba(251, 246, 232, 0.18); }
.player .listen__bar i { background: var(--yellow); }
.player__time { font-size: 14px; color: var(--on-band-2); }

/* ── chapters (family: text on the right, object on the left, hairlines between) ── */
.chapter { padding: clamp(72px, 9vw, 120px) 0; }
.chapter + .chapter { border-top: 1px solid var(--hair); }
/* row 1 hugs the heading: a tall object beside it must not open a gap above the body */
.chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head art" "body art"; gap: 0 clamp(36px, 6vw, 96px); align-items: start; }
.chapter__grid--art-wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.chapter__grid--art-narrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.chapter__head { grid-area: head; }
.chapter__body { grid-area: body; }
.chapter__art { grid-area: art; align-self: center; }
.chapter h2 { font-size: clamp(34px, 4.2vw, 56px); }
.chapter__lead { margin-top: 16px; font-size: 19px; line-height: 1.7; color: var(--ink-2); max-width: 44ch; }
.chapter__lead a { color: var(--ink); font-family: var(--f-ui); }

.facts { margin: 30px 0 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hair); }
.facts li:last-child { border-bottom: 1px solid var(--hair); }
.facts .ico { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ivory); border-radius: var(--leaf-xs); }
.facts .ico .i { width: 24px; height: 24px; stroke-width: 1.9; }
.facts b { display: block; font-size: 18px; line-height: 1.4; }
.facts p { margin-top: 2px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.facts a { color: var(--ink); }

.card--story { padding: 10px; }
.card--story img { width: 100%; height: auto; aspect-ratio: 904 / 508; border-radius: 22px 6px 22px 6px; }
.story__cap { padding: 14px 12px 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.steps { margin: 30px 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hair); }
.steps li:last-child { border-bottom: 1px solid var(--hair); }
/* dial holes — the first one is the logo's answered (yellow) hole */
.hole { display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sheet); font: 19px/1 var(--f-ui); }
.steps li:first-child .hole, .hole--on { background: var(--yellow); }
.steps b { display: block; font-size: 19px; line-height: 1.4; }
.steps p { margin-top: 2px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 32px; }
.hint { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }

.card--code { padding: 30px 28px 26px; text-align: center; }
.code__obj { width: min(70%, 300px); height: auto; margin: 0 auto 10px; aspect-ratio: 960 / 460; }
.code__num { display: block; padding: 14px 16px; border: 2px dashed var(--line-strong); border-radius: var(--leaf-xs); background: var(--page); font: clamp(24px, 2.5vw, 32px)/1.2 var(--f-ui); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
@media (max-width: 372px) { .code__num { font-size: 19px; } }
.code__note { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* price = the family quote sheet, printed like the slip */
.checks { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.checks .i { width: 20px; height: 20px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); stroke-width: 3; }
.card--sheet { padding: 38px 34px 24px; }
/* the printer stands on the card's top edge on its own foot (the lowest opaque pixel is 85% down the 600x650 poster):
   no tilt and no corner overhang, so it reads as an object on the card and not a sticker on its corner */
.sheet__obj, .tag__obj { position: absolute; top: -106px; inset-inline-end: 26px; width: 118px; height: auto; pointer-events: none; }
.rcpt { margin: 0; padding: 0; list-style: none; }
.rcpt li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 17px; }
.rcpt li i { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-6px); }
.rcpt li b { font: 22px/1 var(--f-display); white-space: nowrap; }
.rcpt .main { flex-wrap: wrap; padding-bottom: 18px; font: 20px/1.35 var(--f-ui); }
.rcpt .main b { font-size: 44px; }
.rcpt .main b small { font: 16px/1 var(--f-body); color: var(--ink-soft); }
.rcpt .main em { flex-basis: 100%; margin-top: -4px; font: 14px/1.2 var(--f-body); font-style: normal; color: var(--ink-soft); text-align: end; }
.rcpt .free b { padding: 4px 9px; background: var(--yellow); border-radius: 8px 2px 8px 2px; }
.rcpt span a { color: var(--ink); text-decoration-color: var(--line-strong); }
.rcpt span a:hover { text-decoration-color: var(--ink); }
.rcpt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 14px; color: var(--ink-soft); }
.rcpt-foot a { color: var(--ink); font-family: var(--f-ui); }

/* FAQ — family: heading beside quiet details with a circled plus */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq details { padding: 20px 0; border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font: 19px/1.35 var(--f-ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; transition: transform 0.2s ease, background-color 0.2s ease; }
.faq summary:hover::after { background-color: var(--ivory); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
.faq details p { max-width: 62ch; margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.more { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-soft); }
.more a { color: var(--ink-2); }

.faq summary h3 { font: inherit; }

/* ── onimli.com: the brand's door to its two products (5.10.2026; distilled 6.10.2026 after Achiya: «מבלבל קצת בגלל
   שזה שני מוצרים», «לא מבינים בדיוק מה כל דבר עושה»). One choice and nothing else: two doors, each led by its machine,
   each saying in big words what it answers, its price on the tab and one way in. The product pages carry the rest. ── */
.doorway { padding: clamp(34px, 4.6vw, 64px) 0 clamp(48px, 6vw, 84px); }
.doorway h1 { font-size: clamp(46px, 5.6vw, 80px); line-height: 1.04; }
.doorway .lead { margin-top: 16px; max-width: 56ch; text-wrap: balance; }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 48px); margin: clamp(46px, 5vw, 64px) 0 0; padding: 0; list-style: none; scroll-margin-top: calc(var(--head-h) + 24px); }
.door { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; grid-template-areas: "name obj" "does obj" "what what" "go go"; align-items: end; gap: 6px clamp(14px, 2vw, 24px);
  padding: clamp(26px, 2.8vw, 34px) clamp(24px, 2.8vw, 34px) clamp(20px, 2.2vw, 26px); background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf);
  box-shadow: var(--shadow-hard), 0 16px 34px rgba(27, 26, 23, 0.07); transition: translate 0.15s ease, box-shadow 0.15s ease; }
.door:hover { translate: -1px -2px; box-shadow: 4px 6px 0 rgba(27, 26, 23, 0.86), 0 18px 38px rgba(27, 26, 23, 0.09); }
.door:active { translate: 2px 3px; box-shadow: 1px 1px 0 rgba(27, 26, 23, 0.86); }
.door:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.door .tab { inset-inline-start: 30px; }
.door__name { grid-area: name; font-size: clamp(25px, 2.3vw, 30px); line-height: 1.1; }
.door__name a { color: var(--ink-2); text-decoration: none; outline: none; }
/* the channel at a glance (Achiya, 6.10: «שיבינו את זה גם בויזואל»): the big line ends in a small yellow dot, the dial's
   answered hole, holding the handset or WhatsApp's own glyph. The glyph is shown as Meta publishes it: black, no stroke,
   never recoloured or reshaped. */
.door__dot { display: inline-grid; place-items: center; width: 0.84em; height: 0.84em; margin-inline-start: 0.22em; vertical-align: -0.04em; background: var(--yellow); border-radius: 50%; }
.door__dot svg { width: 0.5em; height: 0.5em; fill: var(--ink); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.door__dot--wa svg { width: 0.54em; height: 0.54em; fill: #000; stroke: none; }
/* the whole card is the link: the name's link stretches over it, and the name stays the link's text */
.door__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.door__does { grid-area: does; margin: 0; font: clamp(36px, 3.4vw, 46px)/1.08 var(--f-display); color: var(--ink); text-wrap: balance; }
/* the sentence row takes the spare height, so both doors keep their name and line at the same height */
.door__what { grid-area: what; align-self: start; max-width: 46ch; margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
/* both machines share one box: cover trims the call machine's empty sides, so the two weigh the same */
.door__obj { grid-area: obj; align-self: start; width: clamp(132px, 13vw, 176px); height: auto; aspect-ratio: 1.3; object-fit: cover; }
/* the bot's object is drawn on white paper: multiply lets it take the card's own paper colour, with no rectangle */
.door__obj--paper { mix-blend-mode: multiply; }
.door__go { grid-area: go; justify-self: end; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font: 17px/1 var(--f-ui); }
.door__go .i { width: 44px; height: 44px; padding: 10px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; stroke-width: 2.4; transition: translate 0.15s ease; }
.door:hover .door__go .i { translate: -4px 0; }
/* a way to start on each door (research 25.10.26 §2), above the card-wide link; «לפרטים» keeps the other side */
.door__start { grid-area: go; justify-self: start; position: relative; z-index: 1; margin-top: 14px; }
.doors__assure { margin-top: clamp(28px, 3vw, 38px); }
.doors__sibling { margin-top: clamp(34px, 3.4vw, 48px); }
.doors__sibling img { object-fit: contain; }   /* the receipt is tall: kept whole in the card's square */
/* the brand page has no product switch and no header CTA; «כניסה» asks which account, because each product has its own */
.mast-login { position: relative; }
.mast-login summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; list-style: none; cursor: pointer; font: 16px/1 var(--f-ui); color: var(--ink-2); }
.mast-login summary::-webkit-details-marker { display: none; }
.mast-login summary::after { content: ""; width: 7px; height: 7px; margin-inline-start: 9px; border: solid currentColor; border-width: 0 0 2px 2px; translate: 0 -2px; rotate: -45deg; transition: rotate 0.2s ease, translate 0.2s ease; }
.mast-login[open] summary::after { rotate: 135deg; translate: 0 2px; }
.mast-login__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 150; display: grid; min-width: 220px; padding: 6px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.mast-login__menu a { padding: 11px 14px; border-radius: 10px; color: var(--ink); font: 16px/1.2 var(--f-ui); text-decoration: none; }
.mast-login__menu a:hover { background: var(--ivory); }
.doorway + .chapter { border-top: 1px solid var(--hair); }
@media (max-width: 940px) {
  .mast-login { display: none; }
}
@media (max-width: 760px) {
  .doorway { padding-top: 26px; }
  .doorway h1 { font-size: 44px; }
  .doorway .lead { margin-top: 12px; font-size: 17px; }
  .doors { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
  /* on a phone the name takes the whole row, and the machine stands beside the big line */
  .door { grid-template-areas: "name name" "does obj" "what what" "go go"; padding: 22px 20px 16px; gap: 8px 12px; }
  .door__obj { align-self: center; }
  .door__name { font-size: 22px; }
  .door__does { font-size: 31px; }
  .door__what { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
  .door__obj { width: 104px; }
  .door__go { margin-top: 6px; font-size: 15px; }
  .door__start { margin-top: 6px; }
  .door__go .i { width: 38px; height: 38px; padding: 8px; }
  .doors__assure { justify-content: flex-start; }
}
@media (max-width: 360px) {
  .door__go { gap: 0; font-size: 0; }   /* the narrowest phones: the arrow alone beside the start button */
}

/* ── the other product of the family (4.10.2026): one card, the product's lockup, its job in one line ── */
.sibling-band { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--hair); }
.sibling { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 26px; padding: 26px 30px; background: var(--ivory); border: 2px solid var(--ink); border-radius: var(--leaf); color: var(--ink); text-decoration: none; transition: translate 0.15s ease; }
.sibling:hover { translate: 0 -2px; }
.sibling img { width: 64px; height: 64px; }
.sibling__txt { display: grid; gap: 4px; }
.sibling__kicker { font: 13px/1.3 var(--f-ui); color: var(--ink-soft); }
.sibling .brand__name { font-size: 32px; }
.sibling .brand__channel { font-size: 19px; }
.sibling__what { max-width: 62ch; margin-top: 2px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.sibling__go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.16); font: 17px/1 var(--f-ui); white-space: nowrap; }
@media (max-width: 760px) {
  .sibling { grid-template-columns: auto minmax(0, 1fr); padding: 22px 20px; }
  .sibling img { width: 48px; height: 48px; }
  .sibling__go { grid-column: 1 / -1; justify-self: start; }
}

/* ── closing band (family: dark band with a warm top rule) ── */
.final { padding: clamp(64px, 8vw, 104px) 0 0; background: var(--band); color: var(--on-band); border-top: 5px solid var(--yellow); }
.final__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px clamp(32px, 6vw, 88px); align-items: center; }
.final h2 { font-size: clamp(38px, 4.8vw, 62px); color: var(--on-band); }
.final__grid > div > p { max-width: 46ch; margin-top: 16px; font-size: 19px; line-height: 1.7; color: var(--on-band-2); }
.final__act { display: grid; justify-items: center; gap: 14px; text-align: center; }
.final__act img { width: 190px; height: auto; margin-bottom: -6px; }
.final__act small { font-size: 14px; color: var(--on-band-2); }
.people { display: flex; align-items: center; gap: 14px; margin-top: 64px; padding: 22px 0 30px; border-top: 1px solid rgba(251, 246, 232, 0.14); font-size: 15px; line-height: 1.5; color: var(--on-band-2); }
.people img { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.people a { color: var(--on-band); font-family: var(--f-ui); }

/* ── footer ── */
.foot { padding: 40px 0 48px; font-size: 14px; color: var(--ink-soft); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot__top .brand img { width: 34px; height: 34px; }
.foot__top .brand__name { font-size: 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot nav a { color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot__products { margin-top: 20px; font: 15px/1.5 var(--f-ui); color: var(--ink-2); }
.foot__products a { color: var(--ink); }
.foot__products a[aria-current] { text-decoration: none; }
.foot__copy { margin-top: 10px; }
.foot__copy a { color: var(--achiya); }

/* ── sticky mobile CTA (appears after the hero leaves the screen) ── */
.sticky-cta { position: fixed; z-index: 50; inset-inline: 12px; bottom: 12px; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--shadow-hard); transform: translateY(140%); transition: transform 0.25s ease; }
.sticky-cta small { font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.sticky-cta small b { display: block; font-size: 15px; color: var(--ink); }
.sticky-cta.is-on { transform: none; }

/* ── video card (inner pages) ── */
.card--video { padding: 10px; }
.card--video video { width: 100%; aspect-ratio: 16 / 9; background: var(--band); border-radius: 22px 6px 22px 6px; }
.card--video figcaption:not(.tab) { padding: 12px 10px 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.transcript { margin: 16px 12px 0; font-size: 15px; color: var(--ink-soft); }
.transcript summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; font-family: var(--f-ui); color: var(--ink); }
.transcript summary::-webkit-details-marker { display: none; }
/* physical sides on purpose: a down chevron (⌄) in either text direction */
.transcript summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
.transcript[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.transcript p { margin-top: 8px; line-height: 1.7; }

/* ── relay: what happens on one unanswered call ── */
.relay { position: relative; margin: 34px 0 0; padding: 0; list-style: none; }
.relay::before { content: ""; position: absolute; inset-block: 26px 26px; inset-inline-start: 23px; border-inline-start: 2px dashed var(--line-strong); }
.relay li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 12px 0; }
.relay .hole { width: 48px; height: 48px; }
.relay .hole .i { width: 22px; height: 22px; }
.relay b { display: block; font-size: 18px; line-height: 1.4; padding-top: 10px; }
.relay p { margin-top: 2px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.relay a { color: var(--ink); }
.aside-note { display: flex; align-items: flex-start; gap: 12px; max-width: 60ch; margin-top: 22px; padding: 14px 18px; background: var(--ivory); border-radius: var(--leaf-sm); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.aside-note .i { width: 20px; height: 20px; margin-top: 2px; }

/* ── inner pages ── */
.page-hero { padding-bottom: 48px; }
.page-hero .hero__copy { padding-top: 24px; }
.page-hero + .chapter { padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--hair); }
.page-title { margin-top: 14px; font-size: clamp(42px, 5vw, 68px); line-height: 1.05; }
.hero__visual--wide { width: min(100%, 540px); }
.hole--sm { width: 34px; height: 34px; border-width: 2.5px; font-size: 15px; }

/* hero: the three steps as a staircase of family cards, each with its object */
.stair { position: relative; height: 482px; margin: 0; padding: 0; list-style: none; }
/* the transition lives on :hover only (a background tab froze it mid-way); the cards stand straight since 28.10.26 */
.stair__card { position: absolute; width: 64%; }
.stair__card:hover { translate: 0 -3px; z-index: 3; transition: translate 0.2s ease; }
.stair__card a { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; gap: 10px; padding: 16px 18px 16px 12px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; }
.s1 { top: 0; inset-inline-start: 0; }
.s2 { top: 166px; inset-inline-start: 18%; z-index: 1; }
.s3 { top: 332px; inset-inline-start: 36%; z-index: 2; }
.s1::after, .s2::after { content: ""; position: absolute; top: 100%; inset-inline-start: 48%; height: 24px; border-inline-start: 2px dashed var(--ink); }
.stair__txt { display: grid; justify-items: start; gap: 3px; }
.stair__txt .hole { margin-bottom: 6px; }
.stair__txt b { font-size: 19px; line-height: 1.25; }
.stair__txt small { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.stair img { width: 118px; height: 112px; margin-block: -22px -18px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(27, 26, 23, 0.16)); }

/* step headings: the number as a quiet tag, the promise as the headline */
/* the ring is drawn, not typed: the heading text stays exactly «שלב N: …» */
.step-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 16px/1 var(--f-ui); color: var(--ink-soft); }
.step-tag::before { content: ""; width: 16px; height: 16px; flex: none; border: 2.5px solid currentColor; border-radius: 50%; }
.step-tag--on::before { background: var(--yellow); border-color: var(--ink); }
.board .step-tag--on::before { border-color: var(--yellow); }
.chapter--step h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.12; }
.chapter--step .chapter__body { margin-top: 18px; }
.chapter__grid--flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "art head" "art body"; }
.prose p:not(.chapter__lead):not(.aside-note) { max-width: 60ch; margin-top: 14px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose a { color: var(--ink); font-family: var(--f-ui); }
/* short emphasised names («HOT Mobile», «019», «עסקי+») never break across lines */
.prose strong, .chapter__lead strong { white-space: nowrap; }
/* a whole sentence in bold (/pricing/) pushed the page 70px sideways on a phone */
@media (max-width: 640px) { .chapter__lead strong { white-space: normal; } }

/* step 1: what signing up takes, and what it does not */
.card--needs { padding: 32px 24px 24px; }
.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.needs__h { margin-bottom: 12px; font: 14px/1 var(--f-ui); color: var(--ink-soft); }
.needs ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.needs li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.needs__ico { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
.needs__ico .i { width: 22px; height: 22px; }
.needs li b { display: block; font-size: 16px; }
.needs li small { display: block; font-size: 13px; color: var(--ink-soft); }
.needs--no { padding-inline-start: 22px; border-inline-start: 1px dashed var(--line-strong); }
.needs--no .needs__ico { background: var(--ivory); border-color: var(--line-strong); color: var(--ink-soft); }
.needs--no .needs__ico::after { content: ""; position: absolute; top: 50%; right: 5px; left: 5px; height: 2px; margin-top: -1px; background: var(--ink); transform: rotate(-45deg); }
.needs--no b { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* step 2: the one short dial, on a phone keypad */
.card--dial { padding: 28px 26px 22px; }
.dial { display: grid; justify-items: center; gap: 16px; padding: 24px 20px 20px; background: var(--band); border-radius: 22px 6px 22px 6px; color: var(--on-band); }
.dial__num { font: clamp(20px, 2vw, 26px)/1.2 var(--f-ui); letter-spacing: 0.06em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.dial__keys { direction: ltr; display: grid; grid-template-columns: repeat(3, 44px); gap: 10px 18px; }
.dial__keys i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--band-2); font: 18px/1 var(--f-ui); font-style: normal; color: var(--on-band); }
.dial__call { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #1daa61; color: #fff; }
.dial__call .i { width: 24px; height: 24px; }
.card--dial .code__note { margin-top: 16px; text-align: center; }

/* step 3: the relay board (a dark family band) with the demo beside it */
.board { padding: 8px 0 24px; }
.board__panel { padding: clamp(28px, 5vw, 64px); background: var(--band); color: var(--on-band); border-radius: var(--leaf); }
.board__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.board h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.12; color: var(--on-band); }
.board .step-tag { color: var(--on-band-2); }
.board .hole { border-color: var(--on-band); background: var(--band); color: var(--on-band); }
.board .hole--on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.board__lead { margin-top: 14px; font-size: 18px; line-height: 1.7; color: var(--on-band-2); }
.relay--board { margin-top: 26px; }
.relay--board::before { border-inline-start-color: rgba(251, 246, 232, 0.3); }
.relay--board b { color: var(--on-band); }
.relay--board p { color: var(--on-band-2); }
.relay--board a { color: var(--on-band); }
/* the answered lamp is lit */
.relay--board .hole--on { box-shadow: 0 0 22px rgba(255, 232, 26, 0.45); }
.board__media { display: grid; gap: 14px; align-self: center; }
.board .transcript { margin-inline: 4px; color: var(--on-band-2); }
.board .transcript summary { color: var(--on-band); }
.board__slam { margin-top: 12px; font: clamp(26px, 2.6vw, 34px)/1.25 var(--f-display); color: var(--on-band); }
.board__slam mark { white-space: nowrap; padding: 0 0.15em; background: var(--yellow); color: var(--ink); border-radius: 4px; }

/* video with a family play button; native controls come back once it plays (family.js) */
.vid { position: relative; }
.vid__play { display: none; }
.vid.is-ready .vid__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; width: 100%; padding: 0; background: rgba(27, 26, 23, 0.05); border: 0; border-radius: 22px 6px 22px 6px; cursor: pointer; }
.vid__play .play { width: 76px; height: 76px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); transition: transform 0.15s ease; }
.vid__play .play::before { width: 22px; height: 24px; background: var(--ink); transform: translateX(3px); }
.vid__play:hover .play { transform: scale(1.06); }
.vid__label { padding: 5px 12px; background: var(--ink); color: var(--on-band); border-radius: 999px; font: 14px/1.2 var(--f-ui); }
.vid.is-on .vid__play { display: none; }

/* ── pricing ── */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: one price tag; under its tear line the two business plans, so the whole ladder reads at once */
.page-hero .hero__visual:has(.card--tag) { padding-top: 64px; }
.page-hero .hero__visual:has(.tag__obj) { padding-top: 118px; }
.card--tag { padding: 36px 32px 24px; text-align: center; }
.tag__from { font: 16px/1 var(--f-ui); color: var(--ink-soft); }
.tag__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 8px; }
.tag__price b { font: clamp(72px, 8vw, 104px)/1 var(--f-display); }
.tag__price span { font: 20px/1 var(--f-ui); color: var(--ink-soft); }
.tag__sub { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
.tag__tiers { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 0; padding: 18px 0 0; border-top: 2px dashed var(--line-strong); list-style: none; }
.tag__tiers li { display: grid; justify-items: center; gap: 4px; }
.tag__tiers li + li { border-inline-start: 1px solid var(--hair); }
.tag__tiers span { font: 16px/1.2 var(--f-ui); color: var(--ink-2); }
.tag__tiers b { font: 34px/1 var(--f-display); }
.tag__tiers small { font-size: 13.5px; color: var(--ink-soft); }
.tag__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 20px; font-size: 14px; color: var(--ink-soft); }
.tag__chip { padding: 5px 12px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); font: 14px/1.2 var(--f-ui); color: var(--ink); }

/* the three plans: family cards, the recommended one lifted with a yellow tab */
.plans { padding: 8px 0 clamp(64px, 8vw, 104px); }
.plans__head h2 { font-size: clamp(30px, 3.2vw, 42px); }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; margin-top: 44px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.plan--pick { translate: 0 -12px; box-shadow: 0 18px 38px rgba(27, 26, 23, 0.12), 6px 8px 0 rgba(27, 26, 23, 0.86); }
.plan__flag { position: absolute; bottom: 100%; inset-inline-start: 26px; margin-bottom: -2px; padding: 6px 16px 5px; background: var(--yellow); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; font: 14px/1.2 var(--f-ui); }
.plan__for { font: 15px/1.3 var(--f-ui); color: var(--ink-soft); }
.plan h3 { margin-top: 6px; font-size: 38px; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font: 18px/1 var(--f-ui); color: var(--ink-soft); }
.plan__price b { font: 54px/1 var(--f-display); color: var(--ink); }
.plan__sub { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.plan__inherits { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-strong); font-size: 15px; color: var(--ink-2); }
.plan__features { display: grid; gap: 10px; margin: 12px 0 22px; padding: 0; list-style: none; }
.plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.plan__features .i { width: 16px; height: 16px; margin-top: 3px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); stroke-width: 3; }
.plan__addon { margin-top: auto; padding: 10px 12px; background: var(--ivory); border-radius: var(--leaf-xs); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.plan__addon a { color: var(--ink); }
.plan__cta { width: 100%; margin-top: 16px; }
.assure--center { justify-content: center; margin-top: 34px; }

/* comparison table: the same rows the tests parse, in family dress */
.compare { padding: 0 0 clamp(64px, 8vw, 104px); }
.compare__panel { padding: clamp(24px, 4vw, 48px); background: var(--ivory); border-radius: var(--leaf); }
.compare__title { font: clamp(26px, 2.6vw, 34px)/1.2 var(--f-display); }
/* position:relative keeps the screen-reader-only labels inside the scroller; without it
   they escape to the page and widen it on phones */
.plan-table-wrap { position: relative; margin-top: 24px; overflow-x: auto; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.plan-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 15px; }
.plan-table thead th { padding: 18px 14px; background: var(--sheet); border-bottom: 2px solid var(--ink); font: 22px/1.2 var(--f-display); text-align: center; }
.plan-table thead th:first-child { font: 15px/1.3 var(--f-ui); color: var(--ink-soft); text-align: start; }
.plan-table thead th small { display: block; margin-top: 4px; font: 13px/1.2 var(--f-body); color: var(--ink-soft); }
.plan-table .row-group th { padding: 14px 14px 10px; background: var(--ivory); font: 14px/1.3 var(--f-ui); color: var(--ink-soft); text-align: center; }
.plan-table .row-group th:first-child { color: var(--ink); text-align: start; }
.plan-table tbody th[scope="row"] { width: 52%; padding: 14px 16px; font: 15px/1.4 var(--f-ui); text-align: start; }
.plan-table tbody th[scope="row"] small { display: block; margin-top: 4px; font: 13px/1.55 var(--f-body); color: var(--ink-soft); }
.plan-table td { padding: 14px 10px; font: 18px/1 var(--f-ui); text-align: center; vertical-align: middle; }
.plan-table tbody tr + tr { border-top: 1px solid var(--hair); }
.plan-table td.yes { font-size: 0; }
.plan-table td.yes .sr { font-size: 16px; }
.plan-table td.yes::before { content: ""; display: inline-block; width: 26px; height: 26px; vertical-align: middle; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center / 15px no-repeat; }
.plan-table .no { color: #6c675c; }
.plan-compare__note { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 90ch; }
.plan-compare__note a { color: var(--ink); font-family: var(--f-ui); }

/* the one-line difference, acted out: the same question to both plans */
.calls { display: grid; gap: 34px; margin: 0; padding-top: 20px; }
.call { padding: 24px 22px 16px; }
.call .tab { margin: 0 0 -2px; }
.call:not(.call--answers) .tab { background: var(--ivory); }
.call__line { margin-bottom: 10px; font: 13px/1.3 var(--f-ui); color: var(--ink-soft); }
/* a call is heard, so each line carries its speaker and a sound wave instead of a chat bubble */
.said { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.said + .said { margin-top: 10px; }
.said__who { display: inline-flex; align-items: center; gap: 7px; font: 14px/1.3 var(--f-ui); color: var(--ink-soft); }
.said__who .i { width: 18px; height: 18px; stroke-width: 2.4; }
.said--bot .said__who { color: var(--ink); }
.said--bot .said__who .i { width: 14px; height: 14px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); stroke-width: 2.6; }
.said__words { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.said--bot .said__words { color: var(--ink); }
.call__then { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.talk { display: grid; gap: 8px; }
.talk p { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 16px; line-height: 1.5; }
.talk__in { justify-self: start; background: var(--ivory); border-start-start-radius: 4px; }
.talk__out { justify-self: end; background: var(--band); color: var(--on-band); border-start-end-radius: 4px; }
.duo__note { font-size: 13px; color: var(--ink-soft); text-align: center; }

/* the register: everything the personal plan includes, printed on one receipt */
.band--receipt { padding: 0 0 24px; }
.receipt-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.receipt-band h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; color: var(--on-band); }
.receipt-band__lead { margin-top: 14px; font-size: 18px; line-height: 1.7; color: var(--on-band-2); }
.receipt-band .board__slam { margin-top: 26px; }
.receipt-band__fine { max-width: 52ch; margin-top: 22px; font-size: 15px; line-height: 1.7; color: var(--on-band-2); }
.receipt-band__more { margin-top: 16px; font-size: 15px; color: var(--on-band-2); }
.receipt-band__more a { color: var(--on-band); font-family: var(--f-ui); }
.receipt { justify-self: center; width: min(100%, 390px); margin: 0 0 14px; }
.receipt__machine { position: relative; z-index: 2; width: 168px; height: auto; margin: 0 auto -56px; }
.receipt__paper { position: relative; padding: 72px 24px 22px; background: var(--sheet); color: var(--ink); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.4); }
.receipt__paper::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 12px; background: var(--sheet); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; }
.receipt__head { display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 14px; border-bottom: 2px dashed var(--line-strong); font: 15px/1.2 var(--f-ui); }
.receipt__items { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.receipt__items li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--line-strong); font-size: 14px; line-height: 1.45; }
.receipt__tick { font: 12px/1.7 var(--f-ui); color: var(--ink-soft); white-space: nowrap; }
.receipt__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); font: 16px/1 var(--f-ui); }
.receipt__total b { font: 46px/1 var(--f-display); }
.receipt__foot { margin-top: 6px; font-size: 13px; color: var(--ink-soft); text-align: end; }
.receipt__year { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--line-strong); font: 15px/1.2 var(--f-ui); }
.receipt__year b { font: 28px/1 var(--f-display); }
.receipt__year small { grid-column: 1 / -1; font: 13px/1.5 var(--f-body); color: var(--ink-soft); }

/* what counts: a phone's recent-calls list, one row per kind of call */
.clog { padding: 26px 22px 12px; }
.clog__rows { margin: 0; padding: 0; list-style: none; }
.clog__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num tag" "what tag"; align-items: center; gap: 2px 14px; padding: 14px 0; }
.clog__rows li + li { border-top: 1px solid var(--hair); }
.clog__num { grid-area: num; justify-self: start; font: 16px/1.3 var(--f-ui); color: var(--ink); }
.clog__what { grid-area: what; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.clog__tag { grid-area: tag; padding: 5px 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-xs); font: 14px/1.2 var(--f-ui); color: var(--ink-soft); white-space: nowrap; }
.clog__tag--yes { background: var(--yellow); border: 1.5px solid var(--ink); color: var(--ink); }
/* the quota in the dial's own holes: 40 answered calls, the 32nd lit when the WhatsApp nudge goes out */
.quota { max-width: 520px; margin-top: 26px; }
.quota__cap { font: 15px/1.3 var(--f-ui); color: var(--ink-2); }
.quota__holes { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 7px; max-width: 420px; margin: 14px 0 0; padding: 0; list-style: none; }
.quota__holes li { aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--sheet); }
.quota__holes .is-used { background: var(--ink); }
.quota__holes .is-warn { background: var(--yellow); }
.quota__holes li:last-child { border-width: 3px; }
.quota__keys { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.quota__keys li { display: flex; align-items: baseline; gap: 10px; }
.quota__keys b { color: var(--ink); }
.quota__dot { flex: none; width: 12px; height: 12px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sheet); translate: 0 1px; }
.quota__dot--warn { border-width: 1.5px; background: var(--yellow); }

/* 7 days free, in the dial's yellow */
.trial { padding: 0 0 clamp(40px, 5vw, 64px); }
.trial + .chapter { padding-top: clamp(48px, 6vw, 80px); }
.trial__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 34px; padding: clamp(24px, 3.6vw, 42px); background: var(--yellow); }
.trial__seven { display: grid; place-items: center; width: 112px; height: 112px; background: var(--sheet); border: 4px solid var(--ink); border-radius: 50%; font: 66px/1 var(--f-display); }
.trial__copy h2 { font-size: clamp(28px, 3vw, 40px); }
.trial__copy p { max-width: 70ch; margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.trial__keeps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.trial__keeps li { padding: 12px 14px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 12px; font-size: 14px; line-height: 1.55; }
.trial__keeps b { display: block; font: 20px/1.2 var(--f-display); margin-bottom: 4px; }
.trial__copy .trial__note { margin-top: 10px; font-weight: 700; }
@media (max-width: 720px) { .trial__keeps { grid-template-columns: 1fr; } }
.trial .btn--primary { --btn-bg: var(--sheet); }

/* the personal answering number: one clear add-on card */
.card--addon { padding: 34px 28px 24px; }
.addon__price { font: 18px/1 var(--f-ui); color: var(--ink-soft); }
.addon__price b { margin-inline-end: 6px; font: 58px/1 var(--f-display); color: var(--ink); }
.addon__what { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.addon__facts { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--line-strong); }
.addon__facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.addon__facts .i { width: 16px; height: 16px; margin-top: 3px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); stroke-width: 3; }
.prose-list { max-width: 60ch; margin: 14px 0 0; padding-inline-start: 22px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.prose-list li + li { margin-top: 8px; }

/* the small print, side by side */
.fine-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.chapter--fine h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; }
.chapter--fine p { max-width: 62ch; margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.chapter--fine a { color: var(--ink); font-family: var(--f-ui); }

/* ── business: its own signatures — the card the assistant answers from, the call and the
   summary it produced, the trades whose phone rings mid-work, the settings sheet, the spectrum ── */
.page-title--long { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.1; }
.page-meta { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }

/* hero: the business card, the row it answered from, and the answer */
.bizcard { padding: 26px 24px 22px; }
.bizcard__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 2px dashed var(--line-strong); }
.bizcard__mark { display: grid; place-items: center; width: 52px; height: 52px; flex: none; background: var(--band); border-radius: var(--leaf-xs); color: var(--yellow); font: 28px/1 var(--f-display); }
.bizcard__head b { display: block; font-size: 20px; line-height: 1.2; }
.bizcard__head small { display: block; font-size: 14px; color: var(--ink-soft); }
.bizcard__rows { margin: 10px 0 0; }
.bizcard__rows div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 10px; border-radius: var(--leaf-xs); }
.bizcard__rows dt { font: 14px/1.5 var(--f-ui); color: var(--ink-soft); }
.bizcard__rows dd { margin: 0; font-size: 15px; line-height: 1.5; }
.bizcard__rows .is-hit { position: relative; background: var(--yellow); }
/* the thread from the row it read to the answer it gave, in the empty end margin */
.bizcard__rows .is-hit::after { content: ""; position: absolute; inset-inline-end: 18px; top: 100%; height: 162px; border-inline-start: 2px dashed var(--ink); opacity: 0.55; pointer-events: none; }
.bizcard__talk { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.bizcard__talk p { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.bizcard__talk .talk__in { justify-self: start; background: var(--ivory); border-start-start-radius: 4px; }
.bizcard__talk .talk__out { position: relative; z-index: 1; justify-self: end; background: var(--band); color: var(--on-band); border-start-end-radius: 4px; }

/* three plain facts, as a ruled spec line under the hero */
.specline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-block: 2px solid var(--ink); }
.specline__item { display: grid; align-content: start; gap: 8px; padding: 18px 4px; }
.specline__item + .specline__item { padding-inline-start: 28px; border-inline-start: 1px solid var(--hair); }
.specline__item b { font: 34px/1 var(--f-display); white-space: nowrap; }
.specline__item p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* hear it: the call screen (its waveform moves only while it plays) and, in grid area «act»,
   the summary it produced — under the heading on wide screens, after the call on phones */
.band__more { grid-area: act; }
.band__cta { margin-top: 28px; }
.band .more-details--band { margin-top: 28px; border-color: rgba(251, 246, 232, 0.18); }
.band .more-details--band summary { font-size: 15px; color: var(--on-band); }
.band .more-details--band summary::after { border-color: var(--on-band); background: linear-gradient(var(--on-band), var(--on-band)) center / 11px 2px no-repeat, linear-gradient(var(--on-band), var(--on-band)) center / 2px 11px no-repeat; }
.band .more-details--band[open] summary::after { border-color: var(--yellow); background: linear-gradient(var(--ink), var(--ink)) center / 11px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 11px no-repeat, var(--yellow); }
.band .more-details--band p { margin-bottom: 14px; font-size: 14px; line-height: 1.7; color: var(--on-band-2); }
.callscreen { padding: 22px 20px 18px; background: var(--band-2); border: 1.5px solid rgba(251, 246, 232, 0.2); border-radius: 26px 8px 26px 8px; }
.callscreen__who b { display: block; font-size: 18px; color: var(--on-band); }
.callscreen__who small { display: block; margin-top: 2px; font-size: 13px; color: var(--yellow); }
.callscreen__wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 64px; margin: 14px 0; }
.callscreen__wave i { width: 5px; height: 30%; border-radius: 3px; background: rgba(251, 246, 232, 0.35); }
.callscreen__wave i:nth-child(3n) { height: 62%; } .callscreen__wave i:nth-child(4n+1) { height: 44%; } .callscreen__wave i:nth-child(5n+2) { height: 82%; } .callscreen__wave i:nth-child(7n) { height: 52%; }
.callscreen:has(.is-playing) .callscreen__wave i { background: var(--yellow); animation: wave 0.9s ease-in-out infinite alternate; }
.callscreen:has(.is-playing) .callscreen__wave i:nth-child(2n) { animation-delay: -0.3s; }
.callscreen:has(.is-playing) .callscreen__wave i:nth-child(3n) { animation-delay: -0.6s; }
@keyframes wave { to { transform: scaleY(0.35); } }
.player--call { padding: 0; background: none; border: 0; }
.summary-card { margin-top: 44px; padding: 26px 22px 20px; }
.summary-card p:not(.tab) { font-size: 17px; line-height: 1.8; color: var(--ink); }

/* who it fits: the trades whose phone rings mid-work, each with a missed call waiting
   (the yellow dot = the logo's answered hole); «what it is not» as struck-out words */
.who h2 { max-width: 20ch; font-size: clamp(32px, 3.8vw, 50px); }
.who .chapter__lead { max-width: none; }
.who__link { margin: 22px 0 0; font-size: 16.5px; color: var(--ink-2); }
.who__link a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.trades { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.trades li { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.trades__ico { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 10px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-hard); }
.trades__ico .i { width: 40px; height: 40px; stroke-width: 1.6; }
.trades__ico::after { content: ""; position: absolute; top: 1px; inset-inline-end: 1px; width: 18px; height: 18px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.trades b { font-size: 17px; line-height: 1.3; }
.trades small { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.trades .is-more .trades__ico { background: var(--ivory); border-style: dashed; box-shadow: none; }
.trades .is-more .trades__ico::after { display: none; }
.trades .is-more b { max-width: 14ch; font: 15px/1.45 var(--f-body); color: var(--ink-2); }
.who__not { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--hair); }
.who__not-label { font: 15px/1.3 var(--f-ui); color: var(--ink-soft); }
.nots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nots li { padding: 5px 13px; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-xs); font: 15px/1.3 var(--f-ui); color: var(--ink-soft); text-decoration: line-through 2px var(--ink); }

/* what the business plan adds: the settings sheet, switches on */
.settings { padding: 30px 24px 18px; }
.settings__list { margin: 0; padding: 0; list-style: none; }
.settings__list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hair); }
.settings__list li:first-child { border-top: 0; }
.settings__list b { display: block; font-size: 16px; }
.settings__list small { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.switch { position: relative; width: 46px; height: 26px; flex: none; background: var(--ivory); border: 2px solid var(--ink); border-radius: 999px; }
/* RTL switches mirror: off rests at the start (right), on slides to the end (left) */
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; }
.switch.is-on { background: var(--yellow); }
.switch.is-on::after { inset-inline-start: auto; inset-inline-end: 3px; background: var(--ink); }
.settings__quota strong { font: 34px/1 var(--f-display); }
.settings__list .settings__up { border-top: 1.5px dashed var(--line-strong); }
.settings__badge { flex: none; padding: 6px 13px; background: var(--ink); border-radius: var(--leaf-xs); color: var(--yellow); font: 15px/1.2 var(--f-ui); text-decoration: none; }
.settings__badge:hover { background: var(--ink-2); }

/* AI or a person: one spectrum of how much of the call the system runs, and the one source */
.spectrum { padding: 34px 26px 22px; }
.spectrum__track { position: relative; height: 12px; margin: 6px 6px 0; background: var(--ivory); border: 2px solid var(--ink); border-radius: 999px; }
.spectrum__track span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 22%; background: var(--yellow); border-inline-end: 2px solid var(--ink); border-radius: 999px; }
.spectrum__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.spectrum__points li { position: relative; padding-top: 14px; }
.spectrum__points li::before { content: ""; position: absolute; top: -26px; inset-inline-start: 6px; width: 14px; height: 14px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; }
.spectrum__points .is-us::before { background: var(--ink); }
.spectrum__points b { display: block; font-size: 16px; }
.spectrum__points .is-us b { background: linear-gradient(176deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); }
.spectrum__points small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.spectrum__ends { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font: 13px/1 var(--f-ui); color: var(--ink-soft); }
.source-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; max-width: 560px; margin-top: 32px; padding: 20px 22px; color: var(--ink); text-decoration: none; transition: translate 0.15s ease; }
.source-card:hover { translate: 0 -3px; }
.source-card__ico { display: grid; place-items: center; width: 56px; height: 56px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
.source-card__ico .i { width: 30px; height: 30px; stroke-width: 1.8; }
.source-card__text { display: grid; gap: 5px; }
.source-card__text b { font-size: 17px; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.source-card__text small { font: 13.5px/1.55 var(--f-body); color: var(--ink-soft); }
.source-card__go { width: 22px; height: 22px; }
.final__act img.final__obj--tall { width: 104px; }

/* ── breathing room for long copy (25.9: «אזורים דחוסים עם הרבה מלל צמוד») ── */
.prose p + p, .prose p + .side-note, .prose .side-note + .side-note { margin-top: 18px; }
.prose p:not(.chapter__lead):not(.aside-note) { line-height: 1.85; }
.chapter__lead { line-height: 1.8; }
/* long headings speak calmer; a three-line display heading is a wall of its own */
main h2.is-long { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.18; }
.final h2.is-long { font-size: clamp(30px, 3.4vw, 46px); }
/* long detail lists wait behind a quiet disclosure */
.more-details { max-width: 60ch; margin-top: 22px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.more-details summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; list-style: none; cursor: pointer; font: 17px/1.3 var(--f-ui); color: var(--ink); }
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::after { content: ""; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 11px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 11px no-repeat; transition: transform 0.2s ease; }
.more-details[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
.more-details > ul { margin: 4px 0 18px; }
/* a limit list inside the warm note */
/* side notes: small, iconed, set apart from the running text */
.side-note { display: flex; align-items: flex-start; gap: 12px; max-width: 60ch; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.side-note .i { width: 22px; height: 22px; margin-top: 2px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: var(--ivory); }

/* ── articles and documents (blog, legal): one reading column in the family voice; the dial
   codes these guides are full of read as keys on a keypad; beside a blog article, the product
   in one card ── */
.page-head { padding: clamp(26px, 4vw, 44px) 0 clamp(30px, 4vw, 46px); border-bottom: 1px solid var(--hair); }
.page-head .crumbs { margin-bottom: 20px; }
.kicker { display: inline-flex; margin: 0; padding: 5px 13px 4px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px 10px 10px 3px; font: 13px/1.3 var(--f-ui); color: var(--ink); }
.page-head h1 { max-width: 24ch; margin-top: 16px; font-size: clamp(32px, 4.3vw, 54px); line-height: 1.14; }
.page-head .lead { max-width: 62ch; margin-top: 18px; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.75; }
.page-head .lead a { color: var(--ink); font-family: var(--f-ui); }
.page-head .page-meta { max-width: 80ch; line-height: 1.6; }
.article { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.article > .wrap { display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.article > .wrap:has(.article-aside) { grid-template-columns: minmax(0, 760px) minmax(0, 300px); justify-content: space-between; }
.article-body { min-width: 0; }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { margin-top: 64px; font-size: clamp(26px, 2.7vw, 36px); line-height: 1.2; scroll-margin-top: calc(var(--head-h) + 20px); }
.article-body h2::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-end: 12px; vertical-align: 0.16em; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.article-body h3 { margin-top: 34px; font: 20px/1.4 var(--f-ui); }
.article-body h2 + h3 { margin-top: 20px; }
.article-body p, .article-body li { font-size: 17.5px; line-height: 1.85; color: var(--ink-2); }
.article-body p { margin-top: 16px; }
.article-body h2 + p, .article-body h3 + p { margin-top: 10px; }
.article-body a { color: var(--ink); text-decoration-thickness: 1.5px; }
.article-body a:hover { background: linear-gradient(176deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); }
.article-body strong { color: var(--ink); }
.article-body ul, .article-body ol { margin: 16px 0 0; padding: 0; list-style: none; }
.article-body li { position: relative; padding-inline-start: 30px; }
.article-body li + li { margin-top: 10px; }
.article-body ul > li::before { content: ""; position: absolute; inset-inline-start: 5px; top: 0.72em; width: 9px; height: 9px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.article-body ol { counter-reset: step; }
.article-body ol > li { counter-increment: step; padding-inline-start: 42px; }
.article-body ol > li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0.18em; display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); border-radius: 50%; color: var(--yellow); font: 14px/1 var(--f-ui); }
/* the dial codes: keys on a keypad */
.article-body code, .page-head code { display: inline-block; padding: 1px 8px 0; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 7px; box-shadow: 0 2px 0 var(--ink); font: 0.9em/1.5 var(--f-ui); color: var(--ink); white-space: nowrap; }
.article-body blockquote { position: relative; margin: 34px 0 0; padding: 30px 28px 22px; background: var(--ivory); border-radius: var(--leaf-sm); }
.article-body blockquote::before { content: ""; position: absolute; top: -16px; inset-inline-start: 22px; width: 34px; height: 34px; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='20' text-anchor='middle' font-size='22' font-family='Georgia' fill='%231b1a17'%3E%C2%AB%3C/text%3E%3C/svg%3E") center / 26px no-repeat; border: 2px solid var(--ink); border-radius: 50%; }
.article-body blockquote p { margin-top: 0; font-size: 18px; color: var(--ink); }
.article-body cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; line-height: 1.5; color: var(--ink-soft); }
.article-body .table-scroll { position: relative; margin-top: 26px; overflow-x: auto; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.article-body table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.article-body caption { padding: 14px 16px 2px; font: 14px/1.4 var(--f-ui); color: var(--ink-soft); text-align: start; }
.article-body th, .article-body td { padding: 12px 14px; line-height: 1.55; text-align: start; vertical-align: top; }
.article-body thead th { border-bottom: 2px solid var(--ink); font: 14px/1.3 var(--f-ui); color: var(--ink-soft); }
.article-body tbody th { font: 15px/1.45 var(--f-ui); color: var(--ink); }
.article-body td { color: var(--ink-2); }
.article-body tbody tr + tr { border-top: 1px solid var(--hair); }
/* ── a text wall drawn (22.10.2026, Achiya: «כן זו הכוונה»): each long section opens with its gist as
   small paper objects and a few words (.drawn); the section's full words stay right under it, folded
   in .more-details «בפירוט», so search engines and AI still read every one of them ── */
.drawn { max-width: 60ch; }
/* inside an article the folded words keep the article's own width, as they had before the fold; a folded table or quota strip too */
.article-body .more-details, .more-details:has(table, .quota) { max-width: none; }
.drawn + .more-details { margin-top: 26px; }
.drawn + .more-details[open], .drawn ~ .more-details[open] { padding-bottom: 14px; }
.drawn .gist-lead { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.drawn .hint { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* inside a .prose column too, whose own paragraph rule is more specific */
.prose .drawn p.gist-lead { margin-top: 10px; font-size: 16.5px; line-height: 1.6; }
.prose .drawn p.hint { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.drawn ul, .drawn ol { margin: 0; padding: 0; list-style: none; }
.drawn :is(.ways, .pills, .gist, .tags, .sims, .steps, .checks, .nots) > li { margin: 0; padding-inline-start: 0; }
.drawn :is(.ways, .pills, .gist, .tags, .sims, .steps, .checks, .nots) > li::before { content: none; }
.drawn p, .drawn li { font-size: 15px; line-height: 1.5; }
.drawn p { margin-top: 0; }
/* the section in two to four pictures */
.drawn .gist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 22px; }
.drawn .gist > li { display: grid; justify-items: start; align-content: start; gap: 2px; }
.gist img { width: 64px; height: 52px; object-fit: contain; object-position: right center; margin-bottom: 8px; }
.drawn .gist b { font: 17px/1.3 var(--f-ui); color: var(--ink); }
.drawn .gist span { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
/* the options side by side: ours solid ink with the key shadow, the others dashed (not ours) */
.drawn .ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; margin-top: 34px; } /* room for the yellow tab when «ours» is in the first row */
.drawn .ways > li { position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; padding: 14px 14px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-sm); }
.way img { width: 60px; height: 48px; object-fit: contain; object-position: right center; margin-bottom: 4px; }
.drawn .way b { font: 16.5px/1.3 var(--f-ui); color: var(--ink); }
.way__got { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.way__got .i { flex: none; width: 15px; height: 15px; margin-top: 3px; }
.drawn .ways > .way--us { background: var(--sheet); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); }
.way--us .tab { inset-inline-start: 14px; }
.way--us .way__got { color: var(--ink); }
.way--us .way__got .i, .stamp .i, .drawn .checks .i { width: 11px; height: 11px; padding: 2px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); stroke-width: 3.2; }
/* which one fits: two branches, the one we answer lit */
.fork { display: grid; gap: 8px; margin-top: 26px; }
.drawn .fork__q { font: 15px/1.3 var(--f-ui); color: var(--ink-soft); }
.fork__row { display: grid; grid-template-columns: minmax(0, 1fr) 18px auto; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--leaf-xs); background: var(--ivory); }
.fork__row span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.fork__row .i { width: 18px; height: 18px; color: var(--ink-soft); }
.fork__row b { font: 15.5px/1.3 var(--f-ui); color: var(--ink); white-space: nowrap; }
.fork__row--on b { padding: 0 5px; background: linear-gradient(176deg, transparent 10%, var(--yellow) 10%, var(--yellow) 90%, transparent 90%); }
/* short facts as round tags */
.drawn .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.drawn .pills > li { padding: 5px 13px 4px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.drawn .pills b { font: 14.5px/1.4 var(--f-ui); color: var(--ink); }
/* what it is not: struck, dashed (the family's .nots) */
.drawn .nots { margin-top: 12px; }
/* a short yes-list: a yellow check per line */
.drawn .checks { display: grid; gap: 8px; margin-top: 16px; }
.drawn .checks > li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); }
.drawn .checks .i { flex: none; margin-top: 4px; }
/* carriers, each a SIM card with its stamp */
.drawn .sims { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 20px; }
.sims--tested .sim { gap: 5px; padding: 12px 14px; }
.drawn .sims > .sim { padding: 12px 14px; } /* the list reset above takes the card's inline-start padding otherwise */
.sims--tested .sim__chip { width: 30px; height: 23px; margin-bottom: 2px; border-radius: 5px; }
.sims--tested .sim__carrier { font-size: 19px; }
.stamp { display: inline-flex; align-items: center; gap: 6px; font: 14.5px/1.3 var(--f-ui); color: var(--ink); }
.drawn .sim__code { margin-top: 4px; font-size: 14px; }
/* steps as dial holes, a keycap under each */
.drawn .steps { margin-top: 22px; }
.drawn .steps > li { grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding-block: 13px; }
.drawn .steps .hole { width: 42px; height: 42px; font-size: 17px; }
.drawn .steps b { font: 17px/1.35 var(--f-ui); color: var(--ink); }
.drawn .steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.drawn .key { display: inline-block; margin-top: 6px; padding: 1px 9px 0; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 7px; box-shadow: 0 2px 0 var(--ink); font: 15px/1.5 var(--f-ui); color: var(--ink); unicode-bidi: isolate; }
.drawn .side-note { margin-top: 22px; }
.side-note b { font-family: var(--f-ui); color: var(--ink); }
/* numbers as small printed tags */
.drawn .tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.drawn .tags > li { display: grid; justify-items: center; gap: 3px; padding: 12px 4px 10px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-xs); text-align: center; }
.drawn .tags b { font: 25px/1.1 var(--f-display); color: var(--ink); }
.drawn .tags span { font: 13px/1.35 var(--f-ui); color: var(--ink-soft); }
.drawn .tags--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawn .tags--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* an article's questions: each answer folded behind its question, as on /faq/ */
.article-body .faq { max-width: 60ch; margin-top: 18px; }
.article-body .faq details { padding: 16px 0; }
.article-body .faq summary { font-size: 17px; }
.article-body .faq summary h3 { margin: 0; font: inherit; }
.article-body .faq details > :not(summary):first-of-type { margin-top: 12px; }
.article-body .faq details p, .article-body .faq details li { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
/* the closing card, in the family card with its yellow tab */
.endcta { position: relative; margin-top: 64px; padding: 30px 26px 26px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.endcta-tag { position: absolute; bottom: 100%; inset-inline-start: 28px; margin-bottom: -2px; padding: 6px 14px 5px; background: var(--yellow); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; font: 13px/1.3 var(--f-ui); white-space: nowrap; }
.endcta p { margin-top: 0; font-size: 18px; line-height: 1.7; color: var(--ink); }
.endcta .btn { --btn-bg: var(--yellow); margin-top: 18px; box-shadow: var(--shadow-hard); }
/* after the article: the related pages as a quiet line */
.article > .page-meta { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.9; }
.article > .page-meta a { color: var(--ink); font-family: var(--f-ui); }
/* beside a blog article: the product in one card, riding along while reading */
.article-aside { position: sticky; top: calc(var(--head-h) + 36px); padding-top: 18px; }
.aside-card { display: grid; justify-items: start; gap: 10px; padding: 28px 22px 22px; }
.aside-card img { width: 44px; height: 44px; }
.aside-card__title { font: 24px/1.2 var(--f-display); }
.aside-card p:not(.tab):not(.aside-card__title) { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.aside-card .btn { width: 100%; margin-top: 6px; }
.aside-card small { font-size: 13px; color: var(--ink-soft); }

/* ── blog index: posts grouped by what the reader is after; the voicemail guides, the
   blog's most-read corner, as one SIM card per carrier with its code on a key ── */
.bloggroup { padding: clamp(44px, 6vw, 72px) 0; }
.bloggroup + .bloggroup { border-top: 1px solid var(--hair); }
.bloggroup h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; }
.sims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.sim { display: grid; align-content: start; gap: 8px; height: 100%; padding: 20px 18px 18px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 22px 6px 22px 6px; box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: translate 0.15s ease; }
.sim:hover { translate: 0 -3px; }
.sim__chip { width: 42px; height: 32px; margin-bottom: 6px; border: 2px solid var(--ink); border-radius: 7px; background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 33% / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 67% / 100% 2px no-repeat, var(--yellow); }
.sim__carrier { font: 24px/1.15 var(--f-display); }
.sim__code { justify-self: start; padding: 1px 9px 0; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 7px; box-shadow: 0 2px 0 var(--ink); font: 15px/1.5 var(--f-ui); white-space: nowrap; }
.sim__title { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.sim__meta { font-size: 12.5px; color: var(--ink-soft); }
.bloggroup__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.posts { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.posts li { border-bottom: 1px solid var(--hair); }
.posts a { display: grid; gap: 4px; padding: 18px 2px 18px 36px; color: var(--ink); text-decoration: none; background: no-repeat left 4px center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); transition: background-position 0.15s ease; }
.posts a:hover { background-position: left 0 center; }
.posts a:hover .posts__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.posts__meta { font-size: 13px; color: var(--ink-soft); }
.posts__title { font-size: 19px; line-height: 1.4; }
.posts__ex { font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* ── faq: its own signature is the card index — one drawer label per topic with how many
   questions it holds — and every answer folded behind its question ── */
.drawers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 34px 0 0; padding: 0; list-style: none; }
.drawer { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; height: 100%; padding: 16px 16px 14px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 14px 14px 6px 6px; color: var(--ink); text-decoration: none; transition: translate 0.15s ease; }
.drawer::before { content: ""; position: absolute; top: -9px; inset-inline-start: 50%; width: 38px; height: 7px; margin-inline-start: -19px; background: var(--ink); border-radius: 4px 4px 0 0; }
.drawer:hover { translate: 0 -3px; }
.drawer b { display: grid; place-items: center; width: 42px; height: 42px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; font: 20px/1 var(--f-display); }
.drawer span { font: 16px/1.3 var(--f-ui); }
.faqset { scroll-margin-top: var(--head-h); }
.faqset__label { font: 14px/1.3 var(--f-ui); color: var(--ink-soft); }
.faqset__head h2 { margin-top: 6px; font-size: clamp(30px, 3.4vw, 44px); }
.faqset .faq details p + p { margin-top: 10px; }
.faqset .faq details a { color: var(--ink); font-family: var(--f-ui); }

/* ── landing pages (the SEO pages): the article body stays word for word; the hero adds the
   start button and one visual that is the page's own ── */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-hero__copy h1 { max-width: 20ch; }
.lp-hero__copy .cta-row { margin-top: 26px; }
.lp-hero__visual { justify-self: end; width: min(100%, 460px); padding-top: 20px; }
.final__more { max-width: 46ch; margin-top: 14px; font-size: 16px; color: var(--on-band-2); }
.final__more a { color: var(--on-band); font-family: var(--f-ui); }

/* unknown number: the «?» becomes a name and a reason */
.unknown { display: grid; gap: 30px; margin: 0; }
.unknown__call { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 22px 22px 20px; background: var(--band); border-radius: 26px 8px 26px 8px; color: var(--on-band); }
.unknown__call b { display: block; font-size: 19px; }
.unknown__call p span { font: 15px/1.4 var(--f-ui); color: var(--on-band-2); }
.unknown__state { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(251, 246, 232, 0.25); font: 14px/1.4 var(--f-ui); color: var(--yellow); }
.unknown__face { display: grid; place-items: center; width: 56px; height: 56px; background: var(--band-2); border: 2px dashed rgba(251, 246, 232, 0.45); border-radius: 50%; font: 28px/1 var(--f-display); color: var(--on-band); }
.unknown__known { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; margin-inline-start: 34px; padding: 26px 22px 20px; }
.unknown__face--known { background: var(--yellow); border: 2px solid var(--ink); color: var(--ink); }
.unknown__known b { display: block; font-size: 18px; }
.unknown__known p span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.unknown__known small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.unknown__known::before { content: ""; position: absolute; top: -32px; inset-inline-start: 50px; height: 30px; border-inline-start: 2px dashed var(--ink); opacity: 0.55; }

/* hebrew answering: who answers a call in Hebrew, in Israel — the vendors' own pages, one line each */
.langboard { padding: 28px 22px 16px; }
.langboard ul { margin: 0; padding: 0; list-style: none; }
.langboard li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); }
.langboard li:first-child { border-top: 0; }
.langboard b { display: block; font-size: 16px; }
.langboard small { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.langboard li:not(.is-us) b { color: var(--ink-soft); }
.langboard em { flex: none; padding: 4px 11px; border: 1.5px dashed var(--line-strong); border-radius: 999px; font: 13px/1.3 var(--f-ui); font-style: normal; color: var(--ink-soft); }
.langboard .is-us { margin: 4px -10px 0; padding: 14px 10px; background: var(--yellow); border-radius: var(--leaf-xs); }
.langboard .is-us em { background: var(--ink); border: 0; color: var(--yellow); }
.langboard__foot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 12.5px; color: var(--ink-soft); }

/* kosher phone: the phone itself, a stamp, and the summary that arrives by email */
.kosher { position: relative; margin: 0; padding-bottom: 60px; }
.kosher img { width: 70%; margin-inline-end: auto; }
.kosher__stamp { position: absolute; top: 4%; inset-inline-end: 4%; display: grid; place-items: center; width: 118px; height: 118px; border: 3px double var(--ink); border-radius: 50%; font: 15px/1.35 var(--f-ui); text-align: center; transform: rotate(-12deg); background: rgba(255, 232, 26, 0.85); }
.kosher__mail { position: absolute; bottom: 0; inset-inline-end: 0; width: min(70%, 300px); padding: 24px 20px 18px; }
.kosher__from { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--hair); }
.kosher__from b { font-size: 16px; }
.kosher__from small { font-size: 13px; color: var(--ink-soft); }
.kosher__mail p:last-child { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* realtors — the showing: a key tag, the tour's clock, and the summary that arrives mid-tour */
.showing { position: relative; display: grid; gap: 30px; margin: 0; padding-top: 34px; }
.showing__tag { position: absolute; top: 0; inset-inline-end: 6%; z-index: 2; display: grid; justify-items: center; gap: 2px; width: 132px; padding: 30px 10px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 14px 14px 46px 46px; box-shadow: var(--shadow-hard); text-align: center; }
.showing__hole { position: absolute; top: 9px; width: 16px; height: 16px; background: var(--page); border: 2px solid var(--ink); border-radius: 50%; }
.showing__tag b { font: 17px/1.15 var(--f-display); }
.showing__tag small { font: 12.5px/1.3 var(--f-ui); color: var(--ink-2); }
.showing__line { display: grid; gap: 12px; width: min(100%, 330px); margin: 0; padding: 22px 22px 20px; list-style: none; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.showing__line li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.45; }
.showing__line time { font: 14px/1 var(--f-ui); color: var(--ink-soft); direction: ltr; text-align: end; }
.showing__line .is-missed span { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.showing__line span { justify-self: start; }
.showing__line .is-answered span { background: linear-gradient(transparent 58%, var(--yellow) 58%); font-weight: 700; }
.showing__note { width: min(92%, 340px); margin-inline-start: auto; padding: 26px 20px 18px; }
.showing__note p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.showing__note p + p { margin-top: 6px; }
.showing__note b { font-size: 16px; color: var(--ink); }
.showing__phone { font-family: var(--f-ui); }
/* therapists — the session: a door hanger, and the calls the assistant took while the door was closed */
.session { position: relative; display: grid; margin: 0; }
.session__door { position: relative; z-index: 2; justify-self: end; display: grid; justify-items: center; gap: 4px; width: 150px; margin-bottom: -22px; padding: 56px 14px 18px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 22px 22px 10px 10px; box-shadow: var(--shadow-hard); transform: rotate(-4deg); text-align: center; }
.session__knob { position: absolute; top: 14px; width: 30px; height: 30px; background: var(--page); border: 2px solid var(--ink); border-radius: 50%; }
.session__door b { font: 27px/1.05 var(--f-display); }
.session__door small { font: 13px/1.3 var(--f-ui); color: var(--ink-soft); }
.session__door time { margin-top: 8px; padding: 4px 11px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; font: 13px/1 var(--f-ui); direction: ltr; white-space: nowrap; }
.session__log { padding: 40px 22px 18px; }
.session__log ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.session__log li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: start; }
.session__log time { font: 14px/1.5 var(--f-ui); color: var(--ink-soft); direction: ltr; text-align: end; }
.session__log li span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.session__log li b { display: block; font-size: 16px; color: var(--ink); }
.session__after { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-strong); font: 14px/1.4 var(--f-ui); color: var(--ink); }
@media (max-width: 600px) {
  .session__door { width: 142px; padding-top: 50px; }
  .session__door time { padding-inline: 8px; font-size: 12.5px; }
  .showing { gap: 24px; padding-top: 0; }
  .showing__tag { position: relative; top: auto; inset-inline-end: auto; justify-self: end; margin-bottom: -28px; }
  .showing__line { width: 100%; padding-top: 36px; }
}

/* voicemail alternative: 41 seconds of listening next to one line of reading */
.vmcompare { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 20px; margin: 0; }
.vmcompare__tape { display: grid; justify-items: center; gap: 10px; padding: 30px 18px 24px; background: var(--band); border-radius: 22px 6px 22px 6px; color: var(--on-band); text-align: center; }
.vmcompare__label { font: 15px/1.3 var(--f-ui); color: var(--on-band-2); }
.vmcompare__reels { display: flex; gap: 22px; padding: 12px 18px; border: 2px solid rgba(251, 246, 232, 0.3); border-radius: 12px; }
.vmcompare__reels i { width: 50px; height: 50px; border: 3px solid var(--on-band); border-radius: 50%; background: radial-gradient(circle, var(--on-band) 0 4px, transparent 5px); }
.vmcompare__time { font: 21px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.vmcompare__tape small { font-size: 12.5px; line-height: 1.4; color: var(--on-band-2); }
.vmcompare__note { padding: 30px 22px 22px; }
.vmcompare__note p:not(.tab) { font: 20px/1.5 var(--f-ui); }
.vmcompare__note small { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* ai secretary: the one question that decides */
.decide { padding: 30px 24px 22px; }
.decide__q { font: 24px/1.25 var(--f-display); }
.decide__ways { display: grid; gap: 12px; margin-top: 18px; }
.decide__way { display: grid; gap: 2px; padding: 16px 18px; border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.decide__way b { font-size: 18px; }
.decide__way span { font-size: 15px; color: var(--ink-2); }
.decide__way em { justify-self: start; margin-top: 8px; padding: 3px 10px; background: var(--ivory); border-radius: 999px; font: 13px/1.3 var(--f-ui); font-style: normal; }
.decide__way.is-us { background: var(--yellow); box-shadow: var(--shadow-hard); }
.decide__way.is-us em { background: var(--ink); color: var(--yellow); }

/* voice agent: a cannon against a fly — the full stack beside the one block */
.stackviz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 22px; margin: 0; }
.stackviz ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stackviz li { padding: 11px 12px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 10px 4px 10px 4px; font: 14px/1.3 var(--f-ui); text-align: center; }
.stackviz__col:not(.is-us) li { background: var(--ivory); color: var(--ink-2); }
.stackviz .is-us li { padding: 18px 12px; background: var(--yellow); box-shadow: var(--shadow-hard); }
.stackviz__col > p { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); text-align: center; }
.stackviz b { display: block; font-size: 17px; }
.stackviz small { font-size: 13px; color: var(--ink-soft); }

/* no app: a home screen with nothing to add, and the one code that does the work */
.homescreen { position: relative; margin: 0; padding-bottom: 36px; }
.homescreen__phone { width: 214px; margin-inline-start: auto; padding: 34px 18px 22px; background: var(--band); border-radius: 34px; box-shadow: 0 22px 44px rgba(27, 26, 23, 0.25); }
.homescreen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; padding-inline: 8px; }
.homescreen__grid i { aspect-ratio: 1; background: rgba(251, 246, 232, 0.16); border-radius: 12px; }
.homescreen__grid i:nth-child(3n + 1) { background: rgba(251, 246, 232, 0.26); }
.homescreen__grid .is-empty { background: none; border: 2px dashed var(--yellow); }
.homescreen__note { margin-top: 18px; font: 15px/1.3 var(--f-ui); color: var(--yellow); text-align: center; }
.homescreen__code { position: absolute; bottom: 0; inset-inline-start: 0; width: 230px; padding: 24px 18px 16px; }
.homescreen__code p:not(.tab) { font-size: 15px; line-height: 1.5; }
.homescreen__code code { display: inline-block; margin-top: 10px; padding: 3px 12px 1px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 8px; box-shadow: 0 2px 0 var(--ink); font: 18px/1.5 var(--f-ui); }

/* ── about, contact, trust: the facts word for word; each page its own object ── */
/* about: the founder's portrait card */
.portrait { padding: 14px 14px 18px; transform: rotate(1.2deg); }
.portrait img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 16%; border-radius: 20px 6px 20px 6px; }
.portrait__name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 6px 0; }
.portrait__name b { font: 22px/1.2 var(--f-display); }
.portrait__name small { font-size: 14px; color: var(--ink-soft); }
/* what it does / what it is not, marked */
.article-body ul.does > li::before, .article-body ul.doesnt > li::before { top: 0.28em; inset-inline-start: 0; width: 22px; height: 22px; border: 0; }
.article-body ul.does > li::before { background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.article-body ul.doesnt > li::before { background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.article-body ul.does > li, .article-body ul.doesnt > li { padding-inline-start: 34px; }
/* the operator's details as a business card */
.article-body ul.operator { display: grid; gap: 0; max-width: 520px; margin-top: 20px; padding: 20px 24px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.article-body ul.operator > li { padding: 9px 0; padding-inline-start: 0; border-top: 1px dashed var(--line-strong); font-size: 16px; }
.article-body ul.operator > li:first-child { border-top: 0; }
.article-body ul.operator > li + li { margin-top: 0; }
.article-body ul.operator > li::before { display: none; }
/* contact: the two ways in, as tiles */
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.channel { display: grid; justify-items: start; gap: 4px; padding: 24px 20px 20px; color: var(--ink); text-decoration: none; transition: translate 0.15s ease; }
.channel--wa { background: var(--yellow); box-shadow: var(--shadow-hard); }
.channel__ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 10px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; }
.channel__ico .i { width: 26px; height: 26px; }
.channel b { font: 24px/1.2 var(--f-display); }
.channel a { color: var(--ink); font: 16px/1.4 var(--f-ui); }
.channel .channel__go { font-size: 18px; }
.channel small { font-size: 13px; color: var(--ink-soft); }
.channel--wa small { color: var(--ink-2); }
.channels__note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.channels__note .i { margin-top: 2px; }
.channels__note .i { width: 18px; height: 18px; }
/* trust: one week on a ruler — the call's data is gone on day seven */
.week { padding: 30px 24px 22px; }
.week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.week__days li { display: grid; place-items: center; height: 34px; border-bottom: 2px solid var(--ink); font: 15px/1 var(--f-ui); color: var(--ink-soft); }
.week__days .is-end { color: var(--ink); border-bottom-color: var(--yellow); }
.week__bar { margin-top: 12px; padding: 12px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px 4px 10px 4px; font: 15px/1.35 var(--f-ui); }
.week__end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; font: 16px/1.3 var(--f-ui); }
.week__end .i { width: 22px; height: 22px; }
.week__note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--ink-soft); }

/* ── small pages, each with its own object ── */
/* friends: a wrapped gift, one tag for you and one for the friend */
.gift { position: relative; display: grid; justify-items: center; margin: 0; padding: 72px 0 0; }
.gift__box { position: relative; width: 210px; height: 170px; background: var(--band); border-radius: 12px 12px 18px 18px; background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 30px 100%; background-position: center; background-repeat: no-repeat; }
.gift__lid { position: absolute; top: -26px; inset-inline: -12px; height: 40px; background: var(--band) linear-gradient(var(--yellow), var(--yellow)) center / 30px 100% no-repeat; border: 2px solid var(--page); border-radius: 10px; }
.gift__bow { position: absolute; top: -60px; left: 50%; width: 100px; height: 40px; margin-left: -50px; }
.gift__bow::before, .gift__bow::after { content: ""; position: absolute; bottom: 0; width: 44px; height: 30px; border: 7px solid var(--yellow); border-radius: 50%; }
.gift__bow::before { left: 2px; transform: rotate(-18deg); }
.gift__bow::after { right: 2px; transform: rotate(18deg); }
.gift__tag { position: absolute; top: 156px; display: grid; justify-items: center; gap: 2px; padding: 12px 18px 10px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; box-shadow: var(--shadow-hard); text-align: center; }
.gift__tag small { font: 13px/1.2 var(--f-ui); color: var(--ink-soft); }
.gift__tag b { font: 26px/1 var(--f-display); }
.gift__tag--you { inset-inline-start: 2%; transform: rotate(-6deg); }
.gift__tag--friend { inset-inline-end: 2%; transform: rotate(6deg); }
.gift__note { margin-top: 28px; max-width: 30ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); text-align: center; }
/* share: the message, already in the bubble it will arrive in */
.share { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); }
.share__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.share__copy h1 { margin-top: 16px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; }
.share__copy .lead { max-width: 46ch; }
.share-chat { padding: 26px 18px; background: #efeae2; border-radius: 26px 8px 26px 8px; }
.share-msg { position: relative; margin: 0 auto 0 0; max-width: 92%; padding: 12px 14px 12px; background: #d9fdd3; border-radius: 12px 12px 12px 3px; box-shadow: 0 1px 1px rgba(27, 26, 23, 0.12); font-size: 16px; line-height: 1.6; white-space: pre-line; color: #111b21; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 22px; }
.share-status { min-height: 1.6em; margin-top: 10px; font: 15px/1.5 var(--f-ui); }
.share-desktop { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.share__act p a { color: var(--ink); font-family: var(--f-ui); }
.share__act > p:last-child { margin-top: 14px; }
/* thanks: the receipt, stamped */
.paid { padding: 30px 24px 26px; overflow: hidden; }
.paid__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--line-strong); font-size: 15.5px; }
.paid__row:first-of-type { border-top: 0; }
.paid__row span:first-child { font-family: var(--f-ui); }
.paid__stamp { position: absolute; bottom: 18px; inset-inline-end: 18px; padding: 6px 18px; border: 4px double #1f6e43; border-radius: 10px; font: 30px/1 var(--f-display); color: #1f6e43; transform: rotate(-12deg); opacity: 0.9; }
.paid { padding-bottom: 86px; }
.notfound .lp-hero__copy h1 { margin-top: 0; }
.notfound .lp-hero__copy p { max-width: 56ch; margin-top: 16px; font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.notfound-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.notfound-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 17px/1.5 var(--f-ui); }
.notfound-links a::before { content: ""; width: 10px; height: 10px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
/* 404: a number that is not connected */
.wrongno { padding: 26px 24px 24px; }
.wrongno__screen { padding: 16px 18px; background: var(--band); border-radius: 14px; font: 46px/1 var(--f-display); letter-spacing: 0.08em; color: var(--yellow); text-align: center; }
.wrongno__msg { margin-top: 12px; font: 16px/1.5 var(--f-ui); text-align: center; }
.wrongno__keys { display: grid; grid-template-columns: repeat(3, 52px); justify-content: center; gap: 10px 16px; margin-top: 18px; }
.wrongno__keys i { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 50%; font: 20px/1 var(--f-ui); font-style: normal; }
.wrongno__keys i:nth-child(4), .wrongno__keys i:nth-child(11) { background: var(--yellow); }
/* voices: the voice rack — one card per voice, the wave moves only while it plays */
.voices__intro { max-width: 62ch; margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.page-head audio { width: min(100%, 420px); margin-top: 20px; }
.voices h2 { font-size: clamp(28px, 3vw, 40px); }
.voices h3 { margin-top: 30px; font: 19px/1.35 var(--f-ui); }
.voices__lead { max-width: 64ch; margin-top: 12px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.voices + .voices { border-top: 1px solid var(--hair); }
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.voice { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 14px; padding: 14px 16px 12px 14px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 18px 5px 18px 5px; }
.voice__play { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.voice__play .play { background: transparent; }
.voice__play .play::before { background: var(--ink); }
.voice__txt b { display: block; font-size: 17px; }
.voice__txt em { display: block; font-size: 13.5px; font-style: normal; line-height: 1.4; color: var(--ink-soft); }
.voice__wave { display: flex; align-items: center; gap: 3px; height: 16px; margin-top: 4px; }
.voice__wave i { width: 3px; height: 40%; border-radius: 2px; background: var(--line-strong); }
.voice__wave i:nth-child(2n) { height: 80%; } .voice__wave i:nth-child(3) { height: 100%; }
.voice.on { background: var(--yellow); box-shadow: var(--shadow-hard); }
.voice.on .voice__play { background: var(--sheet); }
.voice.on .voice__play .play::before { background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%); }
.voice.on .voice__wave i { background: var(--ink); animation: wave 0.8s ease-in-out infinite alternate; }
.voice.on .voice__wave i:nth-child(2n) { animation-delay: -0.3s; }
.voices-end { padding-top: 0; }
.voices-end__card { max-width: 760px; padding: 26px 24px; }
.voices-end__card p + p { margin-top: 10px; color: var(--ink-2); }
.voices-end__card a { color: var(--ink); font-family: var(--f-ui); }

/* ── the English pages: the same family left to right; the recordings in the family player on paper ── */
.player--light { max-width: 560px; margin-top: 18px; background: var(--sheet); border: 2px solid var(--ink); }
.player--light b { color: var(--ink); }
.player--light small, .player--light .player__time { color: var(--ink-soft); }
.player--light .listen__bar { background: var(--hair); }
.player--light .listen__bar i { background: var(--ink); }

/* ── signup (15.10.2026, «כמה שפחות טקסט וכמה שיותר ויזואלי»): every step is a title, one
   drawing, the field and one yellow action; the steps are three icon holes, the connection
   three numbered holes on a thread. 18px+ fields (no zoom on iPhone), hidden means hidden
   (see [hidden] at the top). On a phone the card's frame falls away and the step is the screen;
   from 560px it sits on the family card. ── */
.signup { padding: clamp(18px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }
.signup-box { position: relative; max-width: 540px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.signup-box h2 { font-size: clamp(34px, 9vw, 46px); line-height: 1.08; text-align: center; }
.signup-box h2 mark { padding: 0 0.04em; }
.signup-box p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.signup-box a { color: var(--ink); }
.signup-sub { text-align: center; font: 19px/1.4 var(--f-ui) !important; color: var(--ink) !important; }
.signup-context { width: fit-content; margin: 12px auto 0 !important; padding: 4px 14px; background: var(--ivory); border: 1.5px solid var(--ink); border-radius: 999px; font: 15px/1.4 var(--f-ui) !important; color: var(--ink) !important; }
.signup-art { display: flex; justify-content: center; margin: 20px 0 18px; }
.signup-art svg { width: 210px; height: 150px; }
/* 22.10.2026: in the phone step the field comes first on a phone screen (Facebook's in-app bar takes the top) */
#step-phone .signup-art { margin: 10px 0 12px; }
#step-phone .signup-art svg { width: 140px; height: 100px; }
#step-code[data-channel="call"] .art-wa, #step-code:not([data-channel="call"]) .art-call { display: none; }
/* the three steps as holes: a phone, a key, a check; the one you are on is lit */
.signup-progress { display: flex; justify-content: center; align-items: center; margin: 0 0 24px; padding: 0; list-style: none; }
.signup-progress li { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: var(--sheet); border: 2px solid var(--line-strong); border-radius: 50%; color: var(--ink-soft); }
.signup-progress li + li { margin-inline-start: 34px; }
.signup-progress li + li::before { content: ""; position: absolute; top: calc(50% - 1px); inset-inline-end: calc(100% + 6px); width: 22px; height: 2px; background: var(--line-strong); }
.signup-progress .i { width: 22px; height: 22px; }
.signup-progress li[aria-current="step"] { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.signup-progress li.is-complete { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.signup-progress li[aria-current="step"]::before, .signup-progress li.is-complete::before { background: var(--ink); }
.signup-box label { display: block; margin-top: 20px; font: 15.5px/1.4 var(--f-ui); color: var(--ink); }
.signup-box input[type="tel"], .signup-box input[type="text"], .signup-box input[type="email"], .signup-box input[type="url"], .signup-box textarea { width: 100%; min-width: 0; margin-top: 8px; padding: 14px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; font: 18px/1.35 var(--f-body); color: var(--ink); }
/* the number and the code are the screen's one field: big, and read right to left like the page */
.signup-box #phone, .signup-box #code-input { min-height: 64px; margin-top: 0; font-size: 22px; letter-spacing: 0.04em; }
.signup-box #phone { text-align: right; }
.signup-box #code-input { text-align: center; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.signup-box input::placeholder, .signup-box textarea::placeholder { color: #8d8779; }
.signup-box input:focus-visible, .signup-box textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.signup-box input[type="radio"], .signup-box input[type="checkbox"] { width: 1.15em; height: 1.15em; accent-color: var(--ink); }
.signup-box fieldset { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.signup-box legend { padding: 0; font: 15.5px/1.4 var(--f-ui); }
/* choices as keys: tap one, it turns yellow */
.signup-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.signup-seg--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signup-box .signup-seg label { position: relative; margin: 0; }
.signup-seg input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; cursor: pointer; }
.signup-seg span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 6px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.2 var(--f-ui); text-align: center; }
.signup-seg span .i { width: 18px; height: 18px; }
.signup-seg input:checked + span { background: var(--yellow); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
.signup-seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.cta-button { --btn-bg: var(--yellow); display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; margin-top: 14px; padding: 14px 24px; background: var(--btn-bg); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--shadow-hard); color: var(--ink); font: 21px/1.2 var(--f-ui); text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.cta-button:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 rgba(27, 26, 23, 0.86); }
.cta-button:disabled { opacity: 0.6; cursor: default; transform: none; }
.cta-button .i, .signup-box .btn .i { width: 26px; height: 26px; }
.signup-box .btn { width: 100%; min-height: 60px; margin-top: 12px; font-size: 20px; }
.signup-box .hint { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.signup-box .hint--icon, .signup-fine--icon { display: flex; align-items: flex-start; gap: 8px; }
/* «או» between the number and the other ways in (19.10.2026), a hairline each side as on the sign-in card */
.signup-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); }
.signup-or::before, .signup-or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong, #cfc7b4); }
.signup-or[hidden] { display: none; }
.hint--icon .i, .signup-fine--icon .i { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.signup-fine--icon { justify-content: center; }
.signup-fine { margin-top: 14px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--ink-soft) !important; text-align: center; }
@media (max-width: 640px) { .signup-fine { padding-inline-end: 64px; } }   /* clear of #a11y-btn (bottom-left) */
.signup-fine strong { font-size: 16px; color: var(--ink); letter-spacing: 0.06em; }
.optional { font: 13.5px/1 var(--f-body); color: var(--ink-soft); }
.form-message { min-height: 1.4em; margin-top: 14px; font: 15.5px/1.5 var(--f-ui); text-align: center; }
.form-message:empty { min-height: 0; margin-top: 0; }
.form-message.is-success, .status.is-success { color: #1e6b37; }
.form-message.is-error, .status.is-error { color: #b3261e; }
/* the quiet ways out: back to the number, and "didn't arrive?" behind one tap */
.signup-back { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin: 10px auto 0; padding: 6px 12px; background: none; border: 0; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.signup-back .i { width: 18px; height: 18px; }
.signup-help { margin-top: 6px; text-align: center; }
.signup-help summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; font: 15.5px/1.3 var(--f-ui); color: var(--ink-2); text-decoration: underline 1px; text-underline-offset: 0.25em; }
.signup-help summary::-webkit-details-marker { display: none; }
.signup-help .hint { margin-top: 0; }
/* the opening as a caller will hear it, the typed name under the yellow marker */
.signup-bubble { max-width: 94%; margin: 18px auto 4px !important; padding: 12px 16px; background: var(--band); border-radius: 16px; border-start-end-radius: 4px; font: 17px/1.55 var(--f-body) !important; color: var(--on-band) !important; text-align: start; }
.signup-bubble mark { padding: 0 0.18em; background: var(--yellow); color: var(--ink); border-radius: 3px; }
.signup-optional { margin-top: 22px; border-block: 1px solid var(--hair); }
.signup-optional summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; list-style: none; cursor: pointer; font: 17px/1.35 var(--f-ui); }
.signup-optional summary::-webkit-details-marker { display: none; }
.signup-optional summary span { font: 14px/1 var(--f-body); color: var(--ink-soft); }
.signup-optional summary::before { content: ""; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat; transition: transform 0.2s ease; }
.signup-optional[open] summary::before { transform: rotate(45deg); background-color: var(--yellow); }
.signup-optional__fields { padding-bottom: 18px; }
.signup-ref-ok { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 15.5px/1.45 var(--f-ui) !important; color: var(--ink) !important; }
.signup-ref-ok .i { flex: none; width: 22px; height: 22px; }
.signup-consent label { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font: 15px/1.5 var(--f-body); }
.signup-consent input { width: 22px !important; height: 22px !important; margin-top: 1px; flex: none; }
.signup-carrier-note { padding: 12px 14px; background: var(--ivory); border-radius: var(--leaf-xs); }
/* done: a lit check, then the connection as three numbered holes on one thread */
.signup-done-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 12px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-hard); }
.signup-done-mark .i { width: 30px; height: 30px; stroke-width: 2.6; }
.signup-keep { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 12px auto 0 !important; padding: 6px 14px; background: var(--ivory); border-radius: 999px; font-size: 14.5px !important; line-height: 1.4 !important; text-align: center; }
.signup-keep .i { flex: none; width: 18px; height: 18px; }
.signup-keep strong { color: var(--ink); }
#activation-guide { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: act; }
#activation-guide > li { position: relative; padding: 2px 0 24px; padding-inline-start: 50px; counter-increment: act; }
#activation-guide > li::before { content: counter(act); position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 34px; height: 34px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; font: 16px/1 var(--f-ui); color: var(--ink); }
#activation-guide > li:first-child::before { background: var(--yellow); }
#activation-guide > li:not(:last-child)::after { content: ""; position: absolute; top: 38px; bottom: 4px; inset-inline-start: 17px; border-inline-start: 2px solid var(--line-strong); }
#activation-guide > li > p:first-child { margin-top: 4px; font-size: 15px; color: var(--ink-soft); }
#activation-guide > li > p:first-child strong { display: block; font-size: 17.5px; line-height: 1.35; color: var(--ink); }
#activation-guide #act-step-copy { color: var(--ink-soft); }
.signup-act-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-act-actions .btn, .signup-act-actions .cta-button { width: auto; min-height: 52px; margin-top: 10px; font-size: 18px; }
#activation-guide .btn { width: auto; min-height: 52px; padding-inline: 22px; font-size: 18px; }
.signup-code-reveal { margin-top: 10px; }
.signup-code-reveal summary { min-height: 44px; padding: 10px 0; cursor: pointer; font: 15px/1.4 var(--f-ui); color: var(--ink-2); text-decoration: underline 1px; text-underline-offset: 0.2em; }
.activation-code { display: inline-block; margin: 10px 0 6px; padding: 6px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; font: 20px/1.4 var(--f-ui); }
.signup-box .status { min-height: 1.4em; margin-top: 10px; font: 15px/1.5 var(--f-ui); }
.signup-demo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px !important; font: 15px/1.45 var(--f-ui) !important; color: var(--ink) !important; text-align: center; }
.signup-demo .i { flex: none; width: 22px; height: 22px; padding: 4px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 50%; }
#conn-done { text-align: center; }
.signup-assistance { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; max-width: 540px; margin: 26px auto 0 !important; font-size: 15px !important; color: var(--ink-soft) !important; }
.signup-assistance a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-family: var(--f-ui); }
.signup-assistance .i { width: 18px; height: 18px; }
@media (max-width: 559px) {
  .signup-box { padding: 6px 2px 0; background: none; border: 0; box-shadow: none; }
}

/* ── accessibility toolbar (assets/a11y.js), in the family look ── */
#a11y-btn { position: fixed; z-index: 220; bottom: 14px; left: 14px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); cursor: pointer; transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.14s ease; }
#a11y-btn:hover { background: var(--sheet); }
#a11y-btn.is-tucked { transform: translateX(calc(-100% - 20px)); }
#a11y-btn.is-tucked:focus-visible { transform: none; }
#a11y-panel { position: fixed; z-index: 220; bottom: 72px; left: 14px; display: flex; flex-direction: column; gap: 8px; width: min(300px, calc(100vw - 28px)); max-height: calc(100vh - 100px); padding: 16px; overflow-y: auto; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
#a11y-panel[hidden] { display: none; }
#a11y-panel h2 { margin: 0 0 4px; font-size: 22px; }
#a11y-panel button { min-height: 44px; padding: 10px 12px; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.2 var(--f-ui); text-align: start; cursor: pointer; }
#a11y-panel button:hover { background: var(--yellow); }
#a11y-panel .a11y-toggle[aria-pressed="true"] { color: var(--sheet); background: var(--ink); }
#a11y-panel .a11y-toggle[aria-pressed="true"]::after { content: " ✓"; }
#a11y-panel a { min-height: 44px; margin-top: 4px; padding-block: 10px; font-family: var(--f-ui); }
.a11y-row { display: flex; align-items: center; gap: 8px; }
.a11y-row .a11y-lbl { margin-inline-end: auto; font-family: var(--f-ui); }
.a11y-row button { min-width: 46px; text-align: center; }
html.a11y-contrast { --page: #fff; --sheet: #fff; --ivory: #f2f2f2; --ink: #000; --ink-2: #000; --ink-soft: #111; --yellow: #ffea00; --hair: #000; --line-strong: #000; --band: #000; --band-2: #111; --on-band: #fff; --on-band-2: #fff; }
.a11y-links a:not(.btn) { color: var(--ink); background: var(--yellow); text-decoration: underline !important; text-decoration-thickness: 2px; }
.a11y-links .band a:not(.btn), .a11y-links .final a:not(.btn) { color: var(--ink); }
/* the visitor's own "readable font" choice in the accessibility panel: a plain system sans on purpose */
.a11y-font * { font-family: Arial, "Noto Sans Hebrew", sans-serif !important; letter-spacing: 0 !important; }
.a11y-no-motion *, .a11y-no-motion *::before, .a11y-no-motion *::after { animation: none !important; transition: none !important; }
html.a11y-no-motion { scroll-behavior: auto; }
#a11y-btn, #a11y-panel, .btn, .card, .tab { forced-color-adjust: auto; }

/* ── narrow screens ── */
/* the product switch joined the masthead row: tighten it before the nav folds */
@media (max-width: 1100px) {
  .masthead-row { gap: 18px; }
  .site-nav { gap: 18px; }
}
/* just above the fold (941–1199px) the five links no longer fit on one line beside the three-key switch, «כניסה» and the key:
   the blog's link steps out of the header there (it stays in the footer), so no label breaks into two lines */
@media (min-width: 941px) and (max-width: 1199px) {
  .masthead .site-nav > a[href="/blog/"] { display: none; }
}
@media (max-width: 960px) {
  .site-nav { gap: 18px; }
  .masthead-login { display: none; }
  .hero__grid, .band__grid, .board__grid, .chapter__grid, .chapter__grid--art-wide, .chapter__grid--art-narrow, .chapter__grid--flip, .faq-grid, .final__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-top: 8px; }
  .hero__visual { justify-self: stretch; width: 100%; max-width: 480px; margin-inline: auto; padding-top: 30px; }
  .band__grid { grid-template-areas: "copy" "media" "act"; }
  .band__media { margin-top: 30px; }
  .chapter__grid, .chapter__grid--flip { grid-template-rows: none; grid-template-areas: "head" "art" "body"; }
  .chapter__grid--body-first { grid-template-areas: "head" "body" "art"; }
  .chapter__art { margin-top: 44px; }
  .final__act { justify-items: start; text-align: start; }
  .final__act img { display: none; }
  .plans__grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; gap: 44px; }
  .plan--pick { translate: none; }
  .receipt-band, .fine-grid { grid-template-columns: 1fr; }
  .trial__card { grid-template-columns: auto minmax(0, 1fr); }
  .trial__card .btn { grid-column: 1 / -1; justify-self: start; }
  .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .article > .wrap:has(.article-aside) { grid-template-columns: minmax(0, 760px); }
  .article-aside { display: none; }
  .sims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloggroup__grid { grid-template-columns: 1fr; gap: 22px; }
  .drawers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .lp-hero { grid-template-columns: 1fr; }
  .lp-hero__visual { justify-self: stretch; width: 100%; max-width: 480px; margin-inline: auto; }
}
/* three product keys beside the full nav (941–1199px): narrower keys and gaps keep every label on one line
   (measured 1.11.26: 5 pages × 7 widths, all clean). Below 1000px «כניסה» leaves the header too — it stays in the footer */
@media (min-width: 941px) and (max-width: 1199px) {
  .masthead .product-switch a { padding-inline: 10px; }
  .masthead-row, .site-nav { gap: 14px; }
  .brand__by { white-space: nowrap; }
}
@media (min-width: 941px) and (max-width: 999px) {
  .masthead-login { display: none; }
}
/* a11y.js turns the nav into a disclosure below 941px */
@media (max-width: 940px) {
  html.nav-enhanced .mobile-nav-toggle { display: grid; margin-inline-start: auto; }
  html.nav-enhanced .masthead .site-nav { position: absolute; z-index: 140; top: 100%; right: 0; left: 0; display: grid; gap: 2px; margin: 0; padding: 10px var(--gutter) 18px; background: var(--page); border-bottom: 2px solid var(--ink); box-shadow: 0 14px 30px rgba(27, 26, 23, 0.14); }
  html.nav-enhanced .masthead .site-nav[hidden] { display: none !important; }
  html.nav-enhanced .masthead .site-nav > a:not(.mobile-nav-cta) { display: flex; align-items: center; min-height: 48px; padding: 10px 4px; border-bottom: 1px solid var(--hair); color: var(--ink); background: none; }
  html.nav-enhanced .masthead .site-nav > a[aria-current] { font-family: var(--f-ui); }
  html.nav-enhanced .masthead .site-nav .site-nav__login { display: flex; }
  html.nav-enhanced .masthead .site-nav .mobile-nav-cta { display: grid; min-height: 52px; place-items: center; margin-top: 12px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--shadow-hard); font: 18px/1.2 var(--f-ui); text-decoration: none; }
  html:not(.nav-enhanced) .masthead-row { flex-wrap: wrap; }
  html:not(.nav-enhanced) .masthead .site-nav { order: 5; width: 100%; margin: 0; padding-bottom: 10px; overflow-x: auto; }
  /* Reserve the disclosure's footprint before deferred enhancement. When JS
     is unavailable or fails, the original horizontal links remain the fallback. */
  html.nav-pending .masthead:not([data-mobile-nav-visible]) .masthead-row { flex-wrap: nowrap; }
  html.nav-pending .masthead:not([data-mobile-nav-visible]) .site-nav { order: 0; display: block; flex: 0 0 46px; width: 46px; height: 46px; margin: 0; margin-inline-start: auto; padding: 0; overflow: hidden; }
  html.nav-pending .masthead:not([data-mobile-nav-visible]) .site-nav > a { display: none; }
}
@media (max-width: 760px) {
  :root { --head-h: 64px; }
  html { scroll-padding-top: 16px; }
  body { padding-bottom: 84px; }
  .masthead { position: relative; }
  .masthead-row { gap: 10px; }
  .brand img { width: 36px; height: 36px; }
  .brand__name { font-size: 23px; }
  .mast-cta .btn { padding-inline: 14px; }
  /* the product switch gets its own row: two equal keys, the current one lit */
  .masthead .masthead-row:has(> .product-switch) { flex-wrap: wrap !important; }
  html:not(.pin-switch) .masthead .masthead-row:has(> .product-switch) { padding-top: 9px; }
  /* small on phones: the way between the two products, not the page's action (5-second test, 4.10) */
  .masthead .product-switch { order: 10; margin: 0 0 10px; }
  .masthead .product-switch a { position: relative; min-height: 30px; padding: 3px 14px; font-size: 14px; }
  /* the key looks 30px tall but takes a 44px finger */
  .masthead .product-switch a::after { content: ""; position: absolute; inset: -7px 0; }
  /* A proposal waiting for Achiya's choice (5.10.2026), off until <html> carries the class pin-switch; /bot/ has the
     same rules (marketing.css). The switch always takes its own row; while the page scrolls, the lockup row goes
     away and the switch row stays pinned at the top (the 46px row and the 10px above the switch scroll off). An
     open menu unpins the header, so its panel never stays on screen without the key that closes it.
     ponytail: below ~340px the yellow key wraps under the lockup and stays pinned with the switch (93px at 320px). */
  html.pin-switch:has(.masthead .product-switch) { scroll-padding-top: 66px; }
  html.pin-switch .masthead:has(.product-switch):not(.mobile-nav-open) { position: sticky; top: -56px; }
  html.pin-switch .masthead-row:has(> .product-switch) { row-gap: 0; }
  html.pin-switch .masthead-row:has(> .product-switch)::after { content: ""; order: 9; flex-basis: 100%; }
  html.pin-switch .masthead .product-switch { margin-top: 10px; }
  .sticky-cta { display: flex; }
  /* the accessibility button rises above the sticky CTA while the bar is up, never on it */
  #a11y-btn { transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.25s ease, background-color 0.14s ease; }
  html.sticky-on #a11y-btn { bottom: 90px; }
  html.sticky-on #a11y-panel { bottom: 148px; }
  .hero { padding: 26px 0 56px; }
  .h1-q { font-size: 44px; }
  .h1-a { font-size: 28px; }
  .lead { margin-top: 16px; font-size: 17px; }
  .cta-row { margin-top: 24px; gap: 10px; }
  .cta-row .btn, .act-row .btn, .band__act .btn, .final__act, .final__act .btn { width: 100%; }
  .btn--lg { min-height: 60px; font-size: 19px; }
  .assure { gap: 4px 14px; font-size: 14px; }
  .nod { margin-top: 22px; padding-top: 18px; }
  .nod blockquote { font-size: 16px; }
  .tab { inset-inline-start: 18px; font-size: 12px; }
  .band__panel { padding: 30px 20px; border-radius: 24px 6px 24px 6px; }
  .band__quote { padding-inline-start: 0; padding-top: 34px; }
  .band__quote::before { top: -8px; inset-inline-start: 0; font-size: 60px; }
  .chapter { padding: 64px 0; }
  .chapter__lead { font-size: 17px; }
  .facts b, .steps b, .relay b { font-size: 17px; }
  .facts p, .steps p, .relay p { font-size: 15px; }
  .card--code { padding: 26px 16px 20px; }
  .card--sheet { padding: 32px 18px 20px; }
  .sheet__obj, .tag__obj { width: 88px; top: -78px; inset-inline-end: 18px; }
  .rcpt li { gap: 8px; font-size: 15px; }
  .rcpt li b { font-size: 19px; }
  .rcpt .main { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; font-size: 17px; }
  .rcpt .main span { grid-column: 1 / -1; }
  .rcpt .main i { display: none; }
  .rcpt .main b { grid-column: 2; font-size: 34px; }
  .rcpt .main em { grid-column: 1; grid-row: 2; margin: 0; text-align: start; }
  .rcpt-foot { flex-direction: column; }
  .faq summary { font-size: 17px; }
  .stair { display: grid; gap: 12px; height: auto; }
  .stair__card { position: relative; inset: auto; width: 94%; }
  .s2 { margin-inline-start: 3%; }
  .s3 { margin-inline-start: 6%; }
  .stair img { width: 88px; height: 84px; margin-block: -12px -10px; }
  .stair__card a { grid-template-columns: minmax(0, 1fr) 88px; }
  .s1::after, .s2::after { display: none; }
  .needs { grid-template-columns: 1fr; gap: 18px; }
  .needs--no { padding: 18px 0 0; border-inline-start: 0; border-top: 1px dashed var(--line-strong); }
  .board__panel { padding: 30px 20px; border-radius: 24px 6px 24px 6px; }
  .dial__keys { grid-template-columns: repeat(3, 40px); gap: 8px 16px; }
  .dial__keys i { width: 40px; height: 40px; }
  .people { align-items: flex-start; }
  .card--tag { padding: 32px 20px 20px; }
  .page-hero .hero__visual:has(.card--tag) { padding-top: 44px; }
  /* the price in the first phone screen: the tag right under the H1 */
  .hero__grid:has(.card--tag) { gap: 0; padding-top: 8px; }
  .hero__grid:has(.card--tag) .hero__copy { display: contents; }
  .hero__grid:has(.card--tag) .hero__copy > :nth-child(n+3) { order: 2; }
  .hero__grid:has(.card--tag) .hero__visual { order: 1; margin-bottom: 8px; }
  .page-hero .hero__visual:has(.tag__obj) { padding-top: 100px; }
  .card--sheet.chapter__art { margin-top: 100px; }
  .tag__tiers b { font-size: 30px; }
  .call { padding: 22px 16px 14px; }
  .said { grid-template-columns: 1fr; gap: 2px; }
  .said + .said { margin-top: 12px; }
  .clog { padding: 22px 16px 8px; }
  .quota__holes { gap: 5px; }
  .plan { padding: 26px 20px 22px; }
  .plan__price b { font-size: 48px; }
  .trial__card { grid-template-columns: 1fr; }
  .trial__seven { width: 78px; height: 78px; font-size: 46px; }
  .trial__card .btn { width: 100%; }
  .receipt__machine { width: 140px; margin-bottom: -46px; }
  .receipt__paper { padding: 60px 18px 20px; }
  /* phones: all four columns on one screen; the one-line feature names carry the row */
  .plan-table { min-width: 0; font-size: 14px; }
  .plan-table thead th { padding: 12px 4px; font-size: 16px; }
  .plan-table thead th small { font-size: 11px; }
  .plan-table .row-group th { padding: 10px 4px 8px; font-size: 12px; }
  .plan-table tbody th[scope="row"] { width: auto; padding: 12px 10px; font-size: 14px; }
  .plan-table tbody th[scope="row"] small { display: none; }
  .plan-table td { padding: 10px 2px; }
  .plan-table td.yes::before { width: 22px; height: 22px; background-size: 13px; }
  .specline { grid-template-columns: 1fr; }
  .specline__item + .specline__item { padding-inline-start: 4px; border-inline-start: 0; border-top: 1px solid var(--hair); }
  .specline__item { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 4px; }
  .specline__item b { font-size: 28px; }
  .article-body p, .article-body li { font-size: 17px; }
  .article-body h2 { margin-top: 52px; }
  .endcta { padding: 28px 20px 22px; }
  .endcta .btn { width: 100%; }
  .sims { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sims li:first-child { grid-column: 1 / -1; }
  .sim { padding: 16px 14px 14px; }
  .sim__carrier { font-size: 21px; }
  .posts a { padding-inline-end: 30px; }
  .posts__title { font-size: 17.5px; }
  .unknown__known { margin-inline-start: 0; }
  .vmcompare { grid-template-columns: 1fr; }
  .kosher__stamp { width: 96px; height: 96px; font-size: 13px; }
  .kosher { padding-bottom: 0; }
  .kosher img { width: 64%; }
  .kosher__mail { position: relative; width: 86%; margin: -34px 0 0; margin-inline-start: auto; }
  .homescreen__phone { width: 200px; }
  .homescreen__code { width: 200px; }
  .channels { grid-template-columns: 1fr; }
  .portrait { max-width: 340px; margin-inline: auto; }
  .share__grid { grid-template-columns: 1fr; }
  .gift__tag--you { inset-inline-start: 0; }
  .gift__tag--friend { inset-inline-end: 0; }
  .bizcard__rows div { grid-template-columns: 1fr; gap: 2px; }
  .bizcard__rows .is-hit::after { display: none; }
  .spectrum__points { grid-template-columns: 1fr; gap: 14px; }
  .spectrum__points li::before { display: none; }
  .trades { column-gap: 10px; }
  .trades__ico { width: 66px; height: 66px; margin-bottom: 8px; }
  .trades__ico .i { width: 30px; height: 30px; }
  .trades__ico::after { width: 15px; height: 15px; }
  .trades b { font-size: 15px; }
  .trades small { font-size: 13px; }
  .source-card { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .source-card__go { display: none; }
}

/* No-JS notice: hidden while scripts run, shown when they cannot (replaces <noscript>, which WAVE flags). */
.nojs-note { display: none; }
/* a small phone (360px): the lockup, the header key and the menu key still share the first row */
@media (max-width: 380px) {
  .masthead-row { column-gap: 8px; }
  .mast-cta .btn { padding-inline: 12px; }
}
@media (max-width: 359px) { .page-title .nb { white-space: normal; } }
@media (scripting: none) { .nojs-note { display: block; } }
.who__link + .who__link { margin-top: 6px; }

/* ── inside the Google Play app (family.js adds .in-app, 15.10.2026) ──
   Play's payments policy: nothing in the app may lead to a payment outside Play's billing.
   A page opened from the app keeps its own text; the menu, the sign-up buttons and the footer
   go, and a link to the prices or the sign-up inside a sentence stays as plain words. */
.in-app .product-switch, .in-app .site-nav, .in-app .mast-cta, .in-app .crumbs, .in-app .foot,
.in-app .sticky-cta, .in-app a.btn[href*="signup"], .in-app a.btn[href^="/start/"], .in-app a.btn[href*="pricing"] { display: none !important; }
.in-app a[href*="signup"], .in-app a[href*="pricing"] { pointer-events: none; color: inherit; text-decoration: none; }
/* the App Store too (16.10.2026, 3.1.1 / 3.1.3(f)): no price and no way to a purchase in either app, so a page's
   price paragraphs (data-web-only, the terms' «מנוי, תשלום וביטול») and its closing sign-up card stay on the site */
.in-app [data-web-only], .in-app .endcta { display: none !important; }
/* the sign-up page itself, opened from the app (16.10.2026): the gift a paid month brings is a sale, so it goes */
.in-app #ref-manual, .in-app #ref-ok { display: none !important; }

/* ── the app's look on the site's pages (Achiya 18.10.2026, «ג»; same as the /bot/ pages): the floating layer is soft
   glass (the top bar, the phone's start bar, the accessibility key) and every key is the app's key — the yellow lens
   with soft leaf corners, no ink frame, the family's hard shadow kept. The dashboard (html.lg) keeps its own glass.css. ── */
html:not(.lg) {
  --lg-tint: rgba(255, 253, 247, 0.6);
  --lg-tint-strong: rgba(255, 253, 247, 0.92);
  --lg-blur: blur(28px) saturate(180%);
  --lg-edge: rgba(27, 26, 23, 0.1);
  --lg-shine: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 -10px 18px -14px rgba(255, 255, 255, 0.9);
  --lg-lift: 0 10px 30px rgba(27, 26, 23, 0.13), 0 2px 6px rgba(27, 26, 23, 0.07);
  --lg-lens: linear-gradient(180deg, #fff38a 0%, #ffe81a 58%, #f6dc00 100%);
  --lg-lens-shine: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 5px rgba(170, 140, 0, 0.16);
  --lg-key: 26px 11px 26px 11px;
}
html:not(.lg) .masthead { background: rgba(251, 249, 243, 0.86); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border-bottom: 0.5px solid var(--lg-edge); }
html:not(.lg) .masthead .product-switch { background: var(--lg-tint); border-color: var(--lg-edge); box-shadow: var(--lg-shine); }
html:not(.lg) .sticky-cta { background: var(--lg-tint-strong); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 0.5px solid var(--lg-edge); border-radius: 30px 14px 30px 14px; box-shadow: var(--lg-shine), var(--lg-lift); }
html:not(.lg) .sticky-cta .btn--primary { box-shadow: var(--lg-lens-shine), 0 6px 16px rgba(214, 182, 0, 0.3); }
html:not(.lg) #a11y-btn { border: 0.5px solid var(--lg-edge); background: var(--lg-lens); box-shadow: var(--lg-lens-shine), var(--lg-lift); }
html:not(.lg) .btn { border: 0; border-radius: var(--lg-key); }
html:not(.lg) .btn--primary { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), var(--shadow-hard); }
html:not(.lg) .btn--primary:hover { box-shadow: var(--lg-lens-shine), 4px 6px 0 rgba(27, 26, 23, 0.86); }
html:not(.lg) .btn--primary:active { box-shadow: var(--lg-lens-shine), 1px 1px 0 rgba(27, 26, 23, 0.86); }
html:not(.lg) .btn:not(.btn--primary) { box-shadow: var(--lg-shine), 0 0 0 1.5px var(--ink), 2px 3px 0 rgba(27, 26, 23, 0.16); }
html:not(.lg) .btn--google { box-shadow: var(--lg-shine), 0 0 0 1.5px var(--ink), var(--shadow-hard); }
@media (prefers-reduced-transparency: reduce) {
  html:not(.lg) :is(.masthead, .sticky-cta) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sheet); }
}

/* ── «ג» polish (18.10.2026): the same key everywhere, nothing left in the old frame ── */
/* on the dark strips the lens keeps the family's cream shadow (an ink shadow disappears on ink) */
html:not(.lg) :is(.band, .final) .btn--primary { box-shadow: var(--lg-lens-shine), 3px 4px 0 rgba(251, 246, 232, 0.85); }
html:not(.lg) :is(.band, .final) .btn--primary:hover { box-shadow: var(--lg-lens-shine), 4px 6px 0 rgba(251, 246, 232, 0.85); }
html:not(.lg) :is(.band, .final) .btn--primary:active { box-shadow: var(--lg-lens-shine), 1px 1px 0 rgba(251, 246, 232, 0.85); }
/* the quiet keys answer a hover too */
html:not(.lg) .btn:not(.btn--primary):hover { box-shadow: var(--lg-shine), 0 0 0 1.5px var(--ink), 3px 4px 0 rgba(27, 26, 23, 0.3); }
/* signup's WhatsApp-code key and the menu's start key are the same lens key as every other */
html:not(.lg) :is(.cta-button, .masthead .site-nav .mobile-nav-cta) { border: 0; border-radius: var(--lg-key); background: var(--lg-lens); box-shadow: var(--lg-lens-shine), var(--shadow-hard); }
html:not(.lg) .cta-button:hover { box-shadow: var(--lg-lens-shine), 4px 6px 0 rgba(27, 26, 23, 0.86); }
html:not(.lg) .cta-button:active { transform: translate(2px, 3px); box-shadow: var(--lg-lens-shine), 1px 1px 0 rgba(27, 26, 23, 0.86); }
/* the play keys: a yellow lens without the ink ring; a voice playing turns to glass */
html:not(.lg) :is(.player__btn, .voice__play) { border: 0; background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.3); }
html:not(.lg) .voice.on .voice__play { background: var(--lg-tint-strong); box-shadow: var(--lg-shine), 0 0 0 1.5px var(--ink); }
/* the menu key is a glass key in the glass bar; open, it is the yellow lens */
html:not(.lg) .mobile-nav-toggle { border: 0.5px solid var(--lg-edge); background: var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shine), 0 4px 14px rgba(27, 26, 23, 0.1); }
html:not(.lg) .mobile-nav-toggle[aria-expanded="true"] { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 14px rgba(214, 182, 0, 0.28); }
html:not(.lg) .skip-link { border: 0; border-radius: var(--lg-key); background: var(--lg-lens); box-shadow: var(--lg-lens-shine), var(--shadow-hard); }
@media (max-width: 940px) {
  /* the open menu: a paper sheet that floats under the bar (glass inside the glass bar would not blur the page) */
  html.nav-enhanced:not(.lg) .masthead .site-nav { top: calc(100% + 6px); padding: 8px 18px 16px; border: 0.5px solid var(--lg-edge); border-radius: 30px 14px 30px 14px;
    background: var(--sheet); box-shadow: var(--lg-shine), 0 24px 60px rgba(27, 26, 23, 0.2); }
}

/* 20.10.2026: the English map of the Hebrew sign-up form, only for visitors from the English pages */
.signup-en { margin: 0 0 18px; padding: 12px 16px; border: 1.5px solid var(--hair); border-radius: 12px; font-size: 15px; line-height: 1.5; text-align: left; }
.signup-en summary { font-weight: 700; cursor: pointer; }
.signup-en ol { margin: 8px 0; padding-inline-start: 20px; }
.signup-en li + li { margin-top: 6px; }
.signup-en p { margin: 0; }

/* no dense text (21.10.2026, «אסור שיהיה בשום מקום באתר שמרוכז בו הרבה טקסט דחוס»): on a phone no block runs
   past three lines. A block split at its natural seams keeps its own type, and each part starts its own line */
.split { display: block; }
.split > span { display: block; }
.split > span + span { margin-top: 8px; }
/* the sibling card on a phone: the mark above the words, so its line gets the card's whole width */
@media (max-width: 560px) {
  .sibling { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* 21.10.2026 «אסור … טקסט דחוס», the leftovers of the split pass: a wide comparison table scrolls sideways
   instead of squeezing a cell into a column of 15 lines; the parts of a split quote or list item get a gap
   like every other split block; a long heading takes a calmer size on a phone */
.article-body table:has(thead th:nth-child(5)) td { min-width: 12em; }
.article-body blockquote p + p { margin-top: 10px; }
.article-body li > p { margin-top: 6px; }
@media (max-width: 560px) {
  main h2.is-long, .final h2.is-long { font-size: 26px; }
  .page-head h1.is-long { font-size: 28px; }
}

/* 22.10.26: feature videos on /phone/ — a swipe row of cards on a phone, a grid on a computer */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); gap: 18px; margin-top: 44px; padding: 26px 2px 14px; overflow-x: auto; scroll-snap-type: inline mandatory; list-style: none; }
.reel > li { scroll-snap-align: start; }
.reel .card { padding: 10px; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 22px 6px 22px 6px; background: var(--sheet); object-fit: cover; }
.reel__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 8px 4px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.reel__btn { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; font: 15px/1 var(--f-ui); }
.reel__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (min-width: 900px) {
  .reel { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; gap: 56px 28px; }
  .reel video { aspect-ratio: 16 / 9; }
}