/* ─────────────────────────────────────────────────────────────
   עונים לי — שפת המשפחה של אחיה אוטומציה (אושרה 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); }
.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 ── */
.masthead { position: sticky; top: 0; z-index: 140; background: rgba(251, 249, 243, 0.97); border-bottom: 1px solid var(--hair); }
.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); }
.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; align-items: center; gap: 6px; }
.assure .i { width: 17px; height: 17px; color: var(--ink); stroke-width: 2.6; }
.dial-demo { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.dial-demo a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; 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); }

/* 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 / 934; 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; }
.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; }
.sheet__obj { position: absolute; top: -78px; inset-inline-end: -26px; width: 118px; height: auto; transform: rotate(7deg); 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; }

/* ── 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__copy { margin-top: 22px; }
.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: on the base rule, a tab that loads in the
   background froze the cards mid-way at 0deg */
.stair__card { position: absolute; width: 64%; }
.stair__card:hover { rotate: 0deg; translate: 0 -3px; z-index: 3; transition: rotate 0.2s ease, 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; rotate: -2deg; }
.s2 { top: 166px; inset-inline-start: 18%; rotate: 1.4deg; z-index: 1; }
.s3 { top: 332px; inset-inline-start: 36%; rotate: -1deg; 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; }

/* 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 { 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, the machine that prints it peeking over the corner */
.card--tag { padding: 36px 32px 24px; text-align: center; }
.tag__obj { position: absolute; top: -86px; inset-inline-end: -30px; width: 132px; height: auto; transform: rotate(8deg); pointer-events: none; }
.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__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--line-strong); 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 */
.duo { display: grid; gap: 30px; margin: 0; padding-top: 20px; }
.card--talk { padding: 26px 22px 18px; }
.card--talk .tab { margin: 0 0 -2px; }
.card--talk:not(.card--talk-biz) .tab { background: var(--ivory); }
.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; }
.card--talk-biz .talk__out { background: var(--yellow); color: var(--ink); }
.talk__cap { 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__cap b { font-size: 16px; color: var(--ink); }
.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); rotate: -1.5deg; 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; }

/* business plans as two stamped tickets */
.tickets { display: grid; gap: 22px; }
.ticket { padding: 24px 26px; }
.ticket:first-child { rotate: -1.2deg; }
.ticket--plus { rotate: 1.2deg; }
.ticket__price { font: 16px/1 var(--f-ui); color: var(--ink-soft); }
.ticket__price b { margin-inline-end: 6px; font: 44px/1 var(--f-display); color: var(--ink); }
.ticket p + p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* 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 .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 */
.aside-note--list { align-items: flex-start; }
.aside-note--list ul { display: grid; gap: 10px; margin: 10px 0 0; padding-inline-start: 18px; }
.aside-note--list li { line-height: 1.6; }
/* 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); }
/* 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); transform: rotate(7deg); 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); }
@media (max-width: 600px) {
  .showing { gap: 24px; padding-top: 0; }
  .showing__tag { position: relative; top: auto; inset-inline-end: auto; justify-self: end; margin-bottom: -28px; transform: rotate(5deg); }
  .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: grid; gap: 8px; 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%; }
.notfound-agents { font-size: 14px !important; color: var(--ink-soft) !important; }
.notfound-agents a { color: var(--ink-soft); }
/* 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: the same markup and script as before, on the family card; 16px+ fields (no zoom on
   iPhone), one yellow action per step, hidden means hidden (see [hidden] at the top) ── */
.signup { padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.signup-box { position: relative; max-width: 620px; 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(28px, 3.4vw, 40px); line-height: 1.15; }
.signup-box h2.xl { font-size: clamp(32px, 4.2vw, 48px); }
.signup-box p { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.signup-box a { color: var(--ink); }
.signup-box .hl { background: linear-gradient(176deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); color: var(--ink); }
.signup-progress { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.signup-progress li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; border-bottom: 3px solid var(--hair); font: 14px/1.2 var(--f-ui); color: var(--ink-soft); }
.signup-progress span { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 2px solid var(--line-strong); border-radius: 50%; font-size: 13px; }
.signup-progress li[aria-current="step"] { border-bottom-color: var(--ink); color: var(--ink); }
.signup-progress li[aria-current="step"] span { background: var(--yellow); border-color: var(--ink); }
.signup-progress li.is-complete { border-bottom-color: var(--yellow); }
.signup-progress li.is-complete span { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.signup-required-note { padding: 12px 14px; background: var(--ivory); border-radius: var(--leaf-xs); font-size: 15px !important; }
.signup-box label { display: block; margin-top: 22px; 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); }
.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; }
.signup-box legend { padding: 0; font: 15.5px/1.4 var(--f-ui); }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.signup-box .radio-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.cta-button { --btn-bg: var(--yellow); display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin-top: 22px; 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: 19px/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; }
.signup-box .btn { width: 100%; margin-top: 12px; }
.signup-box .hint { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.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); }
.form-message.is-success, .status.is-success { color: #1e6b37; }
.form-message.is-error, .status.is-error { color: #b3261e; }
.signup-optional { margin-top: 22px; border-block: 1px solid var(--hair); }
.signup-optional summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; list-style: none; cursor: pointer; font: 16px/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::after { 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::after { transform: rotate(45deg); background-color: var(--yellow); }
.signup-optional__fields { padding-bottom: 18px; }
.signup-ref-ok { padding: 12px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); color: var(--ink) !important; }
.signup-consent label { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font: 15px/1.5 var(--f-body); }
.signup-consent input { margin-top: 3px; flex: none; }
.signup-carrier-note { padding: 12px 14px; background: var(--ivory); border-radius: var(--leaf-xs); }
#activation-guide { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: act; }
#activation-guide > li { position: relative; padding: 16px 0 16px 0; padding-inline-start: 44px; border-top: 1px solid var(--hair); counter-increment: act; }
#activation-guide > li::before { content: counter(act); position: absolute; top: 16px; inset-inline-start: 0; display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); border-radius: 50%; color: var(--yellow); font: 15px/1 var(--f-ui); }
#activation-guide > li > p:first-child { margin-top: 2px; }
.signup-act-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-act-actions .btn, .signup-act-actions .cta-button { width: auto; margin-top: 12px; }
.signup-code-reveal { margin-top: 12px; }
.signup-code-reveal summary { 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-assistance { max-width: 620px; margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--ink-soft); }
.signup-assistance a { color: var(--ink); font-family: var(--f-ui); }

/* ── 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 ── */
@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; }
}
/* 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; }
  .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 { width: 84px; top: -58px; inset-inline-end: -8px; }
  .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; }
  .tag__obj { width: 96px; top: -62px; inset-inline-end: -8px; }
  .card--tag { padding: 32px 20px 20px; }
  .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; }
@media (scripting: none) { .nojs-note { display: block; } }