/* ─────────────────────────────────────────────────────────────
   עונים לי בוואטסאפ — the public pages (/bot/, pricing, faq, how-it-works).
   On top of family.css. The chrome (masthead, chapters, FAQ, closing strip, footer) is onimli's
   family, unchanged; the objects are this product's own: on the landing, the owner's note beside the
   bot's answer (yellow = what the owner wrote), the chat that turned into an appointment, the email
   it sends when it doesn't know, the busy salon with the away message and the bot's answer, and the
   plain plan rows — each led by a picture, its words few and large; on the help pages, the plan fork,
   the year strip, the conversation counter, the topic chat list and the route. No WhatsApp green, no glyph.
   ───────────────────────────────────────────────────────────── */

html { scroll-padding-top: calc(var(--head-h) + 16px); }
/* the public pages: the family's measures, a little more air (calibrated to onimli's home, 4.10) */
:root { --gutter: clamp(20px, 4.5vw, 48px); --wrap: 1180px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i--tiny { width: 15px; height: 15px; stroke-width: 2.2; }
.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); }
.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; }
.hint { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }

/* ── segmented keys: the product switch, the plan switch on phones, monthly/annual ── */
.product-switch, .period, .fork__switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--ivory); border: 1.5px solid var(--line-strong); border-radius: 999px; }
.product-switch a, .period button, .fork__switch button { display: inline-grid; place-items: center; min-height: 34px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 15px/1.1 var(--f-ui); text-decoration: none; cursor: pointer; transition: background-color 0.14s ease, color 0.14s ease; }
.product-switch a:hover, .period button:hover, .fork__switch button:hover { color: var(--ink); background: var(--sheet); }
.product-switch a[aria-current] { background: var(--band); color: var(--on-band); }
.period button[aria-pressed="true"], .fork__switch button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ── masthead: the lockup, the product switch beside it, then the pages of this product ──
   The geometry is onimli's own (family.css on the phone site: its gutter, gaps, the switch's pull), so moving between
   the two products the header stays where it was; only the lit key and the page under it change (5.10.2026).
   The page under it keeps this product's own gutter (above). */
.masthead { --gutter: clamp(18px, 4vw, 40px); position: sticky; top: 0; z-index: 140; background: rgba(251, 249, 243, 0.97); border-bottom: 1px solid var(--hair); view-transition-name: masthead; }
.masthead-row { position: relative; display: flex; align-items: center; gap: 26px; min-height: var(--head-h); }
.masthead .product-switch { margin-inline-start: -10px; }
.masthead .product-switch a[aria-current] { view-transition-name: product-lit; }
.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 .site-nav__login, .site-nav .mobile-nav-cta { display: none; }
.masthead-login { font-size: 15px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.masthead-login:hover { color: var(--ink); text-decoration: underline; }
.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); }

/* moving between pages of onimli.com (both products opt in, same origin only): the header holds still, the lit
   product key slides to its new place, the page under it fades. Never under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ── hero ── */
.hero { padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 9vw, 120px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { padding-top: clamp(16px, 4vw, 52px); }
.hero h1 { display: grid; gap: 10px; }
.h1-q { font-size: clamp(44px, 4.8vw, 68px); line-height: 1.04; }
.h1-a { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.22; }
.lead { margin-top: 22px; font-size: 19.5px; line-height: 1.75; color: var(--ink-2); max-width: 42ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.hero__note { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 46ch; }
.inapp { display: grid; justify-items: start; gap: 10px; max-width: 52ch; margin-top: 16px; padding: 14px 16px; background: var(--ivory); border-radius: var(--leaf-sm); font-size: 15px; line-height: 1.6; }
.signin-msg { margin-top: 12px; font: 16px/1.4 var(--f-ui); color: var(--warn-text); }
.hero__visual { justify-self: end; width: min(100%, 480px); }
/* the landing's hero object is a picture: a little more room for it (side by side only) */
@media (min-width: 961px) {
  .page-landing .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .page-landing .hero__visual { width: min(100%, 520px); }
}

/* ── the page object: one crafted illustration (onimli's object style), on the page itself. Objects stay at the phone
   site's scale (its paper objects are 118–168px): an accent beside the words, never a block to scroll past ── */
.hero-object { position: relative; margin: 0; }
.hero-object__img { width: min(100%, 230px); height: auto; margin-inline: auto; mix-blend-mode: multiply; }
.hero-object__talk { position: absolute; inset: 0; pointer-events: none; }
.hero-object__talk .say { position: absolute; max-width: 66%; font-size: 15.5px; box-shadow: 0 10px 24px rgba(27, 26, 23, 0.1); }
.hero-object__talk .say--in { top: -4%; inset-inline-start: -3%; }
.hero-object__talk .say--out { bottom: -2%; inset-inline-end: -3%; border-start-start-radius: 16px; border-start-end-radius: 4px; }
.hero-object__tag { position: absolute; bottom: 0; inset-inline-start: 6px; font: 13px/1 var(--f-ui); color: var(--ink-soft); }
.hero-object__cap { margin-top: 16px; font: 17px/1.45 var(--f-ui); color: var(--ink-2); text-align: center; }
/* pricing: the object is the price list — three plans, the recommended one lit */
.plan-labels { display: flex; justify-content: center; align-items: stretch; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.plan-label { display: grid; justify-items: center; gap: 4px; min-width: 104px; padding: 10px 14px 12px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.plan-label b { font: 15px/1.2 var(--f-ui); color: var(--ink-2); }
.plan-label span { font: 28px/1 var(--f-display); white-space: nowrap; }
.plan-label.is-rec { background: var(--yellow); }

/* ── the hero object (landing): the product's one idea in two large steps — what the owner wrote once, and the
   answer the bot built from it. Yellow is the owner's own words, the way the dashboard marks them, and nothing else
   in the card is yellow ── */
.yours { padding: 0; }
.yours__note { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "step obj" "words obj"; align-items: start; column-gap: 8px; padding: 26px 26px 22px; }
.yours__note .yours__step { grid-area: step; }
.yours__words { grid-area: words; }
/* the notepad: what the owner writes once, the important words marked in yellow */
.yours__obj { grid-area: obj; align-self: center; width: 120px; height: auto; margin-inline-end: -8px; mix-blend-mode: multiply; }
.yours__step { display: flex; align-items: center; gap: 10px; font: 16px/1.35 var(--f-ui); color: var(--ink); }
.yours__n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; font: 15px/1 var(--f-ui); }
.yours__words { margin-top: 14px; padding-inline-start: 38px; font: 22px/1.6 var(--f-ui); }
.yours__talk { padding: 20px 20px 24px; background: var(--ivory); border-top: 1.5px solid var(--ink); border-radius: 0 0 28px 6px; }
.yours__chat { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.yours__chat .say { max-width: 94%; padding: 10px 16px 11px; font-size: 18px; line-height: 1.5; }
.yours__chat .say--in { justify-self: start; background: var(--field-white); }
.yours__chat .say--out { justify-self: end; border-start-start-radius: 16px; border-start-end-radius: 4px; }
/* the owner's words: a highlighter stroke (slanted, square-ended — a marker, never a key), on paper and on the ink
   bubble alike */
.yours mark { padding: 0 0.18em; color: var(--ink); background: linear-gradient(176deg, transparent 14%, var(--yellow) 14%, var(--yellow) 90%, transparent 90%); }

/* ── the night band (landing): the chat that turned into an appointment — the object, then the two messages, large ── */
.night { padding: 18px 22px 24px; rotate: -1deg; border-color: var(--sheet); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35); }
.night__obj { width: 150px; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.night__chat { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.night__chat .say { max-width: 94%; padding: 10px 16px 11px; font-size: 18px; line-height: 1.5; }
.night__chat .say--in { justify-self: start; }
.night__chat .say--out { justify-self: end; border-start-start-radius: 16px; border-start-end-radius: 4px; }
.band__small { margin-top: 20px; font: 16px/1.5 var(--f-ui); color: var(--on-band-2); }

/* ── what it can't answer reaches the owner (landing): the real email's three parts, large — its title, the
   customer's question, its one key ── */
.letter { justify-self: center; width: min(100%, 500px); margin-top: 22px; padding: 30px 32px 36px; text-align: center; }
.letter__obj { width: 120px; height: auto; margin: 0 auto 4px; mix-blend-mode: multiply; }
.letter__title { font: clamp(28px, 2.6vw, 34px)/1.2 var(--f-display); }
.letter .letter__ask { margin: 20px auto 0; padding: 12px 20px 13px; font-size: 21px; }
.letter__key { display: inline-block; margin-top: 26px; padding: 15px 32px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--shadow-hard); font: 19px/1.2 var(--f-ui); }

/* ── the built-in away message (landing): the same question, two replies — dashed is not ours ── */
.auto { padding: 10px 10px 0; }
.auto__scene { width: 100%; height: auto; aspect-ratio: 904 / 603; border-radius: 22px 6px 22px 6px; }
.auto__body { position: relative; margin-top: -34px; padding: 0 16px 24px; }
.auto .auto__ask { background: var(--field-white); box-shadow: 0 12px 26px rgba(27, 26, 23, 0.14); }
/* a short head beside a tall picture card: centred against it (side by side only) */
@media (min-width: 961px) { #auto-reply .chapter__head { grid-row: 1 / -1; align-self: center; } }
.auto .auto__ask { font-size: 18px; }
.auto__pair { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 18px; }
.auto__pair > div { display: grid; align-content: start; gap: 6px; padding: 16px 16px 18px; border-radius: var(--leaf-sm); }
.auto__not { border: 1.5px dashed var(--line-strong); color: var(--ink-soft); }
.auto__bot { background: var(--band); color: var(--on-band); }
.auto__who { font: 13px/1.3 var(--f-ui); }
.auto__bot .auto__who { color: var(--on-band-2); }
.auto__said { font-size: 20px; line-height: 1.45; }
.auto__bot .auto__said { font: 24px/1.3 var(--f-ui); }

/* ── the plans (landing): one row a plan — the name and the price on one line, who it is for and the quota under it;
   the recommended row lit ── */
.planlist { padding: 6px 0; }
.planlist__rows { margin: 0; padding: 0; list-style: none; }
.plan-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "name rec . price" "for for for quota"; gap: 4px 12px; align-items: center; padding: 20px 26px; }
.plan-row + .plan-row { border-top: 1px solid var(--hair); }
.plan-row.is-rec { background: var(--ivory); }
.plan-row__name { display: contents; }
.plan-row__name b { grid-area: name; font: 28px/1.15 var(--f-display); }
.plan-row__rec { grid-area: rec; justify-self: start; padding: 3px 11px 2px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; font: 12.5px/1.2 var(--f-ui); }
.plan-row__for { grid-area: for; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.plan-row__price { grid-area: price; justify-self: end; font: 15px/1 var(--f-ui); color: var(--ink-soft); white-space: nowrap; }
.plan-row__amount { font: 38px/1 var(--f-display); color: var(--ink); }
.plan-row__quota { grid-area: quota; justify-self: end; font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.plans__how { margin-top: 22px; }
.plans__how .text-link { font-size: 16px; }
/* plain checks: a yellow tick and one short line (family) */
.checks { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.5; }
.checks .i { width: 15px; height: 15px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); color: var(--ink); stroke-width: 3; }

/* the founder card (family): a face and one line, beside the first object */
.founder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 34px; 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: 2px solid var(--ink); border-radius: 50%; 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); }

/* the family card: ink edge, leaf corner, soft + hard shadow, the yellow tab names the object */
.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: 0 0 -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; }

/* ── speech: the customer in ivory, the bot on the night band; time stamps as in a chat ── */
.say { position: relative; width: fit-content; max-width: 100%; margin: 0; padding: 9px 14px 8px; border-radius: 16px; font: 16px/1.5 var(--f-body); }
.say--in { background: var(--ivory); color: var(--ink); border-start-start-radius: 4px; }
.say--out { background: var(--band); color: var(--on-band); border-start-start-radius: 4px; }
.say__meta { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 12px; font: 12px/1 var(--f-body); color: var(--ink-soft); vertical-align: -1px; white-space: nowrap; }
.say--out .say__meta { color: var(--on-band-2); }
.say__tag { display: block; margin-bottom: 2px; font: 12px/1.3 var(--f-ui); color: var(--ink-soft); }

/* ── the plan fork (landing): the customer's message, one ink trunk, three branches ── */
.fork { padding: 24px 22px 10px; }
.fork__ask { position: relative; padding-bottom: 18px; }
.fork__ask .say { max-width: 84%; font-size: 17px; }
.fork__ask::after { content: ""; position: absolute; inset-inline-start: 12px; bottom: 0; height: 18px; border-inline-start: 2px solid var(--ink); }
.fork__plans { margin: 0; padding: 0; list-style: none; }
.fork__plan { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 16px; padding: 16px 0 16px; padding-inline-start: 38px; border-top: 1px solid var(--hair); }
.fork__plan::before { content: ""; position: absolute; inset-inline-start: 12px; top: 0; bottom: 0; border-inline-start: 2px solid var(--ink); }
.fork__plan::after { content: ""; position: absolute; inset-inline-start: 12px; top: 36px; width: 18px; border-top: 2px solid var(--ink); }
/* the last branch turns the corner: └ */
.fork__plan:last-child::before { bottom: auto; height: 38px; width: 18px; border-bottom: 2px solid var(--ink); border-end-start-radius: 12px; }
.fork__plan:last-child::after { display: none; }
.fork__label { display: grid; align-content: start; justify-items: start; gap: 3px; margin: 0; }
.fork__name { font: 20px/1.2 var(--f-ui); }
.fork__rec { padding: 2px 9px; background: var(--band); color: var(--on-band); border-radius: 999px; font: 12px/1.4 var(--f-ui); }
.fork__price { margin-top: 2px; font: 26px/1 var(--f-display); white-space: nowrap; }
.fork__price small { font: 13px/1 var(--f-body); color: var(--ink-soft); }
.fork__adds { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.fork__out { display: grid; align-content: start; justify-items: start; gap: 8px; min-width: 0; }
.fork__then { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fork__then .i { width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }
.fork__quota { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.say--list { display: grid; gap: 8px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { padding: 3px 11px; border: 1.5px solid rgba(251, 246, 232, 0.5); border-radius: 999px; font: 14.5px/1.4 var(--f-ui); }
.slot.is-picked { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.say--list .say__meta { justify-self: end; margin: 0; }
/* the leads room, small: who, what, and the state it waits in */
.inq { width: 100%; max-width: 330px; padding: 8px 12px 10px; background: var(--page); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); }
.inq__title { display: flex; align-items: center; gap: 6px; font: 12.5px/1.3 var(--f-ui); color: var(--ink-soft); }
.inq__title .i { width: 15px; height: 15px; }
.inq__row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 15px; }
.inq__row span:not(.inq__status) { color: var(--ink-soft); }
.inq__status { margin-inline-start: auto; padding: 1px 10px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; font: 12.5px/1.4 var(--f-ui); }
.fork__switch { display: none; }
.fork--wide { margin-top: 36px; padding: 28px 26px 16px; }
.fork--wide .fork__ask { display: flex; justify-content: center; padding-bottom: 22px; }
.fork--wide .fork__ask::after, .fork--wide .fork__plan::before, .fork--wide .fork__plan::after { display: none; }
.fork--wide .fork__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fork--wide .fork__plan { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 20px 22px 18px; border-top: 1px solid var(--hair); }
.fork--wide .fork__plan + .fork__plan { border-inline-start: 1px solid var(--hair); }
.fork--wide .fork__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fork--wide .fork__price { font-size: 34px; }
.fork--wide .fork__adds { flex-basis: 100%; margin: 0; font-size: 14.5px; }
.fork__quota { flex-basis: 100%; font-size: 13px; color: var(--ink-soft); }
.fork.is-switchable .fork__plan.is-shown { animation: fork-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes fork-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fork--wide .fork__then { font-size: 15px; }

/* reassurance under the hero's buttons (family) */
/* the landing's three plain facts: a bold lead, then the plain words (the strongest simple facts, read at a glance) */
.assure { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.assure b { color: var(--ink); }
/* the price, the one number of the first screen: a size up, under the family's marker */
.assure__price { font-size: 1.18em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.assure li { display: flex; align-items: flex-start; gap: 10px; }
.assure .i { width: 16px; height: 16px; margin-top: 3px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); color: var(--ink); stroke-width: 3; }

/* ── chapters: text at the start, the object at the end, hairlines between ── */
.chapter { padding: clamp(80px, 10vw, 128px) 0; }
.chapter + .chapter { border-top: 1px solid var(--hair); }
.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, 92px); 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.05fr) minmax(0, 0.95fr); }
/* after the base grid, so it wins: the object first (inline start), the text beside it */
.chapter__grid--flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "art head" "art body"; }
.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); line-height: 1.1; }
main h2.is-long { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.18; }
.chapter__lead { margin-top: 18px; font-size: 19.5px; line-height: 1.75; color: var(--ink-2); max-width: 42ch; }
.chapter__lead a { color: var(--ink); font-family: var(--f-ui); }
.chapter__top { max-width: 760px; }

/* plain rows: a bold line and a short line under it, hairlines between (no icons); the action row (family) */
.rows { margin: 30px 0 0; padding: 0; list-style: none; }
.rows li { display: grid; gap: 2px; padding: 16px 0; border-top: 1px solid var(--hair); }
.rows li:last-child { border-bottom: 1px solid var(--hair); }
.rows b { font-size: 18.5px; line-height: 1.4; }
.rows span { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
/* a quiet closing line under a chapter (family) */
.more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink-soft); }
.more a { color: var(--ink); text-decoration-color: var(--line-strong); }
.more .brand__name { font-size: 22px; }
.more .brand__channel { font-size: 14px; }

/* ── the night band (family proof panel): the paper lies on it, tilted a degree ── */
.band { padding: 8px 0 clamp(56px, 7vw, 96px); }
.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); gap: 36px clamp(28px, 5vw, 72px); align-items: center; }
.band h2 { color: var(--on-band); }
.page-landing .band h2 { font-size: clamp(32px, 3.7vw, 50px); line-height: 1.12; }
.band .chapter__lead { color: var(--on-band-2); }

.band__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }
.band__act p { font: 18px/1.3 var(--f-ui); color: var(--on-band); }
.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); }

/* ── plans: family cards, the recommended one lifted with a yellow flag ── */
.plans__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.plans__head h2 { font-size: clamp(32px, 3.4vw, 46px); }
.plans__head .chapter__lead { flex-basis: 100%; max-width: none; margin-top: 0; }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; margin: 52px 0 0; padding: 0; list-style: none; }
.plan-card { 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-card.is-recommended { translate: 0 -12px; box-shadow: 0 18px 38px rgba(27, 26, 23, 0.12), 6px 8px 0 rgba(27, 26, 23, 0.86); }
.plan-card__tag { 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-card__audience { font: 15px/1.3 var(--f-ui); color: var(--ink-soft); }
.plan-card__name { margin-top: 6px; font-size: 38px; }
.plan-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 14px; font: 17px/1 var(--f-ui); color: var(--ink-soft); }
.plan-card__amount { font: 54px/1 var(--f-display); color: var(--ink); }
.plan-card__price--year { display: none; }
.plan-cards.is-year .plan-card__price:not(.plan-card__price--year), .plan-cards.is-year .plan-card__annual { display: none; }
.plan-cards.is-year .plan-card__price--year { display: flex; }
.plan-card__price--year .plan-card__period { flex-basis: 100%; margin-top: 6px; font-size: 15px; }
.plan-card__quota { margin-top: 14px; font: 16px/1.45 var(--f-ui); }
.plan-card__annual { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.plan-card__inherits { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-size: 15px; color: var(--ink-2); }
.plan-card__list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.plan-card__list li { position: relative; padding-inline-start: 30px; font-size: 15px; line-height: 1.55; }
.plan-card__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 20px; height: 20px; 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 / 12px no-repeat; }
.plan-card__list b { font-size: 15px; }
.plans__start { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 40px; }
.plans__start p { max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* step markers: a speech bubble with the number (the landing's steps, the how-it-works route) */
.bub { display: grid; place-items: center; width: 46px; height: 46px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; border-end-start-radius: 4px; font: 19px/1 var(--f-ui); color: var(--ink); }
.bub--on { background: var(--yellow); }

/* ── FAQ: heading beside quiet details with a circled plus (family) ── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 92px); 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.75; color: var(--ink-soft); }
.faq details p + p { margin-top: 10px; }
.faq details a { color: var(--ink); font-family: var(--f-ui); }
.faq-wide { max-width: 860px; margin-top: 30px; }

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

/* ── closing strip (family: night band, warm top rule) and the person behind it ── */
.final { padding: clamp(64px, 8vw, 100px) 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: 30px clamp(32px, 6vw, 88px); align-items: center; }
.final h2 { font-size: clamp(36px, 4.4vw, 58px); 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 small { font-size: 14px; color: var(--on-band-2); }
/* the product's own object above the key, as on the phone site's closing strip */
.final__act img { width: 190px; height: auto; margin-bottom: -6px; }
.people { display: flex; align-items: center; gap: 14px; margin-top: 60px; 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__top .brand__channel { font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot nav a { color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot__products { margin-top: 22px; font: 15px/1.5 var(--f-ui); color: var(--ink-2); }
.foot__products a { color: var(--ink); }
.foot__products a[aria-current] { text-decoration: none; }
.foot__id { margin-top: 8px; font-size: 13px; }
.hero__id { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.foot__copy { margin-top: 6px; font-size: 13px; line-height: 1.6; }
.foot__copy a { color: var(--achiya); }

/* ── sticky start bar on phones (appears after the hero's own button 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; }

/* ── the start step: every family key opens it, and Google's own sign-in button lives only here (sign-in branding
   while Google reviews the app). A modal dialog; without scripts the #start link shows it in place. ── */
.start-sheet { width: min(460px, calc(100vw - 32px)); max-width: none; padding: 24px 0 0; overflow: visible; color: var(--ink); background: none; border: 0; }
.start-sheet::backdrop { background: rgba(27, 26, 23, 0.55); }
.start-sheet__card { display: grid; justify-items: start; gap: 14px; padding: 34px 28px 26px; box-shadow: var(--shadow-hard); }
.start-sheet h2 { font-size: clamp(27px, 6vw, 33px); padding-inline-end: 44px; }
.start-sheet__card > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.start-sheet .btn--google { width: 100%; min-height: 60px; font-size: 19px; }
.start-sheet .start-sheet__id { font-size: 14px; color: var(--ink-soft); }
.start-sheet__id bdi { white-space: nowrap; }
.start-sheet form { position: absolute; top: 14px; inset-inline-end: 14px; margin: 0; }
.start-sheet__x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.start-sheet__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.start-sheet .inapp { margin-top: 0; }
.start-sheet:target:not([open]) { display: block; position: static; width: auto; max-width: 460px; margin: 30px 0 0; }

/* ═════════ supporting pages ═════════ */
.page-hero { padding: 20px 0 64px; }
.crumbs ol { 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; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 26px; }
.page-title { font-size: clamp(38px, 4.3vw, 58px); line-height: 1.08; }
.page-hero .lead { margin-top: 18px; }
.page-hero .cta-row { margin-top: 26px; }
.page-hero__visual { justify-self: end; width: min(100%, 440px); }
.page-hero__visual:empty { display: none; }
[data-support-body] > .chapter:first-child { border-top: 1px solid var(--hair); }
.page-pricing .page-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.page-pricing .page-title { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.12; }
.page-pricing .page-hero { padding-bottom: 36px; }
.page-pricing #plans { padding-top: clamp(48px, 5vw, 64px); }

/* pricing, signature 2: the conversation counter — one token per customer per day */
.count { padding: 26px 18px 18px; }
/* the counter: one customer, two days — however long the chat, one conversation a day */
.count__days { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.count__day { display: grid; gap: 14px; align-content: start; padding: 16px 16px 14px; background: var(--page); border-radius: var(--leaf-sm); }
.count__name { font: 15px/1.2 var(--f-ui); color: var(--ink-soft); }
.count__chat { display: grid; gap: 7px; min-height: 126px; align-content: start; }
.count__bub { display: block; height: 15px; border-radius: 9px; }
.count__bub--in { justify-self: start; background: var(--field-white); box-shadow: inset 0 0 0 1.5px var(--hair); border-start-start-radius: 3px; }
.count__bub--out { justify-self: end; background: var(--band); border-start-end-radius: 3px; }
.count__bub[data-w="74"] { width: 74%; } .count__bub[data-w="66"] { width: 66%; } .count__bub[data-w="62"] { width: 62%; }
.count__bub[data-w="52"] { width: 52%; } .count__bub[data-w="34"] { width: 34%; } .count__bub[data-w="30"] { width: 30%; }
.count__bub[data-w="24"] { width: 24%; } .count__bub[data-w="22"] { width: 22%; } .count__bub[data-w="18"] { width: 18%; }
.count__eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 14.5px; color: var(--ink-soft); }
.count__token { padding: 4px 13px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.count__sum { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.count__sum b { font: 22px/1.2 var(--f-display); color: var(--ink); }

/* the counter on the band: the paper lies on it, and one line slams the rule */
.band__slam { margin-top: 26px; font: clamp(24px, 2.4vw, 30px)/1.3 var(--f-display); color: var(--on-band); }
.band__slam mark { padding: 0 0.15em; background: var(--yellow); color: var(--ink); border-radius: 4px; }
.band .count { rotate: -1deg; border-color: var(--sheet); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35); }

/* the end of the month: the dashboard's meter, then the rules in plain lines */
.quota { max-width: 760px; margin-top: 44px; }
.meter { position: relative; height: 16px; margin: 40px 0 44px; background: var(--field-white); border: 2px solid var(--ink); border-radius: 999px; }
.meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 80%; background: var(--yellow); border-inline-end: 2px solid var(--ink); border-start-start-radius: 999px; border-end-start-radius: 999px; }
.meter__mark { position: absolute; top: calc(100% + 8px); font: 13px/1.2 var(--f-ui); color: var(--ink-soft); white-space: nowrap; }
/* the label sits under the yellow fill and ends at the 80% tick, so it never runs past the page edge */
.meter__mark--80 { inset-inline-end: 20%; }
.meter__mark--end { top: auto; bottom: calc(100% + 8px); inset-inline-end: 0; }
.rules { margin: 0; padding: 0; list-style: none; }
.rules li { padding: 14px 0; border-top: 1px solid var(--hair); font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }

/* a year = ten months: the family's one yellow card (the phone page's trial card has this place) */
.yearcard { padding: 0 0 clamp(64px, 8vw, 104px); }
.yearcard__card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto; align-items: center; gap: 24px 36px; padding: clamp(24px, 3.6vw, 42px); background: var(--yellow); }
.year__months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.year__months li { display: grid; place-items: center; aspect-ratio: 1; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 9px 3px 9px 3px; font: 15px/1 var(--f-ui); }
.year__months li.is-gift { background: var(--ink); color: var(--yellow); }
.yearcard__copy h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; }
.yearcard__copy p { margin-top: 10px; font-size: 16px; line-height: 1.7; }
.yearcard__all { font: 15px/1.5 var(--f-ui); }

/* the small print, side by side (family) */
.chapter--fine { padding-block: clamp(64px, 8vw, 96px); }
.fine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); align-items: start; }
.fine-grid h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; }
.fine-grid p { max-width: 58ch; margin-top: 14px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.fine-grid a { color: var(--ink); font-family: var(--f-ui); }
/* the other product, as a card band (pricing) */
.sibling-band { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--hair); }

/* the comparison table, in family dress */
.plan-table-wrap { position: relative; margin-top: 30px; 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 thead th.is-rec { background: linear-gradient(var(--yellow), var(--yellow)) bottom / 100% 5px no-repeat, var(--sheet); }
.plan-table .row-group th { padding: 14px 14px 10px; background: var(--ivory); font: 14px/1.3 var(--f-ui); 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: 17px/1 var(--f-ui); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.plan-table tbody tr + tr { border-top: 1px solid var(--hair); }
.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: var(--placeholder); }
/* what every plan has stays quiet; the yellow marks what a plan adds */
.plan-table tbody.is-common td.yes::before { background-color: var(--sheet); }

/* faq, signature: the topics as a chat list — the first question is the last message, the count its badge */
.topics { padding: 22px 0 6px; }
.topics ul { margin: 0; padding: 0; list-style: none; }
.topic { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; transition: background-color 0.14s ease; }
.topics li:first-child .topic { border-top: 0; }
.topic:hover { background: var(--ivory); }
.topic__face { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ivory); border: 1.5px solid var(--ink); border-radius: 50%; transition: background-color 0.14s ease; }
.topic:hover .topic__face { background: var(--yellow); }
.topic__body { min-width: 0; }
.topic__body b { display: block; font-size: 16px; line-height: 1.3; }
.topic__last { display: block; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.topic__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; background: var(--band); color: var(--on-band); border-radius: 999px; font: 13px/1 var(--f-ui); }
.faqset { padding-block: clamp(48px, 6vw, 76px); scroll-margin-top: var(--head-h); }
.chapter--topics { padding: clamp(40px, 5vw, 64px) 0; }
.chapter--topics .topics { max-width: 760px; }
.faqset__head h2 { margin-top: 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }

.route { max-width: 1000px; margin-top: 36px; }
.route__list { position: relative; margin: 0; padding: 0; list-style: none; }
.station { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; }
.station--obj { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 340px); }
.station .bub { position: relative; z-index: 1; }
.station:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 22px; top: 37px; bottom: -37px; border-inline-start: 2px solid var(--ink); }
.station__txt h3 { font: 19px/1.4 var(--f-ui); padding-top: 9px; }
.station__txt p { max-width: 58ch; margin-top: 4px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.perf { position: relative; margin: 30px 0 34px; text-align: center; }
.perf::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 2px dashed var(--ink); }
.perf span { position: relative; display: inline-block; padding: 7px 18px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; font: 15px/1.3 var(--f-ui); }
.obj { display: grid; gap: 8px; align-self: start; margin-top: 4px; padding: 14px 16px 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.obj__tab { font: 12.5px/1.3 var(--f-ui); color: var(--ink-soft); }
.obj .say { font-size: 15px; }
.pair-code { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 4px 0 2px; }
.pair-code span { display: grid; place-items: center; width: 28px; height: 38px; background: var(--page); border-bottom: 2.5px solid var(--ink); border-radius: 6px 6px 0 0; font: 21px/1 var(--f-ui); }
.pair-code i { padding: 0 3px; font-style: normal; color: var(--ink-soft); }
.pair-path { font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.cal-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--ivory); border-radius: var(--leaf-xs); }
.cal-row__time { padding: 2px 9px; background: var(--band); color: var(--on-band); border-radius: 999px; font: 14px/1.4 var(--f-ui); }
.cal-row__what { font: 15px/1.3 var(--f-ui); }
.cal-saved { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cal-saved .i { width: 14px; height: 14px; padding: 3px; box-sizing: content-box; background: var(--yellow); border-radius: 50%; stroke-width: 3; }
.live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; color: var(--ink-soft); }
.live b { font-size: 16px; color: var(--ink); }
.live__switch { position: relative; width: 54px; height: 32px; flex: none; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; }
.live__switch::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 20px; height: 20px; background: var(--ink); border-radius: 50%; }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 34px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.pack__col { padding: 26px 28px 24px; }
.pack__col + .pack__col { border-inline-start: 1px dashed var(--line-strong); }
.pack h3 { font: 22px/1.2 var(--f-display); }
.pack ul { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }

.pack li { position: relative; padding-inline-start: 32px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.pack li::before { content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 5px; background: var(--field-white); }

/* ── accessibility toolbar (assets/js/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 .final a:not(.btn) { color: var(--ink); }
.a11y-font * { font-family: Arial, "Noto Sans Hebrew", sans-serif !important; letter-spacing: 0 !important; }
.a11y-no-motion *, .a11y-no-motion *::before, .a11y-no-motion *::after { animation: none !important; transition: none !important; }
html.a11y-no-motion { scroll-behavior: auto; }
#a11y-btn, #a11y-panel, .btn, .card, .tab { forced-color-adjust: auto; }

/* ── narrow screens ── */
/* the same steps as the phone site's header (family.css), so both headers fold at the same widths */
@media (max-width: 1100px) {
  .masthead-row, .site-nav { gap: 18px; }
}
@media (max-width: 960px) {
  .site-nav { gap: 18px; }
  .masthead-login { display: none; }
  .hero__grid, .page-hero__grid, .page-pricing .page-hero__grid, .chapter__grid, .chapter__grid--art-wide, .chapter__grid--art-narrow, .faq-grid, .final__grid, .band__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-top: 6px; }
  .hero__visual, .page-hero__visual { justify-self: stretch; width: 100%; max-width: 560px; margin-inline: auto; padding-top: 34px; }
  .chapter__grid { grid-template-rows: none; grid-template-areas: "head" "art" "body"; }
    .chapter__art { margin-top: 40px; }
  .chapter__body { margin-top: 8px; }
  .plan-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 44px; }
  .plan-card.is-recommended { translate: none; }
  .final__act { justify-items: start; text-align: start; }
  .final__act img { display: none; }
  .station--obj { grid-template-columns: 46px minmax(0, 1fr); }
  .station--obj .obj { grid-column: 2; max-width: 380px; }
}
/* a11y.js turns the nav into a disclosure below 941px; without scripts the links stay a row */
@media (max-width: 940px) {
  /* the menu key closes the row (a11y.js appends it here: this header's key is no .mast-cta), the header key beside it */
  html.nav-enhanced .mobile-nav-toggle { display: grid; margin-inline-start: auto; }
  html.nav-enhanced .mast-go { margin-inline-start: auto; }
  html.nav-enhanced .mast-go + .mobile-nav-toggle { margin-inline-start: 0; }
  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 { 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: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; }
}
/* until a11y.js runs, the menu key's place is held (the phone site does the same with its nav-pending class): no pop-in */
@media (max-width: 940px) and (scripting: enabled) {
  html:not(.nav-enhanced) .masthead .site-nav { order: 5; display: block; flex: 0 0 46px; width: 46px; height: 46px; margin: 0; margin-inline-start: auto; padding: 0; overflow: hidden; }
  html:not(.nav-enhanced) .masthead .site-nav > a { display: none; }
  html:not(.nav-enhanced) .masthead .mast-go { margin-inline-start: auto; }
  html:not(.nav-enhanced) .masthead-row:has(.mast-go) .site-nav { margin-inline-start: 0; }
}
@media (max-width: 760px) and (scripting: enabled) {
  html:not(.nav-enhanced) .masthead-row:has(.mast-go) .site-nav { margin-inline-start: auto; }
}
@media (max-width: 760px) {
  :root { --head-h: 64px; }
  html { scroll-padding-top: 16px; }
  body { padding-bottom: 84px; }
  .masthead { position: relative; }
  .masthead-row { flex-wrap: wrap; gap: 10px; }
  /* Google's key does not fit beside the lockup on a phone; the hero's key and the sticky bar carry it there */
  .mast-go { display: none; }
  html.nav-enhanced .mast-go + .mobile-nav-toggle { margin-inline-start: auto; }
  .brand img { width: 36px; height: 36px; }
  .brand__name { font-size: 23px; }
  /* the product switch gets its own row, small: it is the way between the two products, not the page's action */
  .masthead .product-switch { order: 10; margin: 0 0 10px; }
  .masthead .product-switch a { min-height: 30px; padding: 3px 14px; font-size: 14px; }
  /* A proposal waiting for Achiya's choice (5.10.2026), off until <html> carries the class pin-switch; the phone
     site has the same rules (family.css). The switch always takes its own row; while the page scrolls, the lockup
     row goes away and the switch row stays pinned at the top (the 46px row and the 10px above the switch scroll
     off). An open menu unpins the header, so its panel never stays on screen without the key that closes it. */
  html.pin-switch:has(.masthead .product-switch) { scroll-padding-top: 66px; }
  html.pin-switch .masthead:has(.product-switch):not(.mobile-nav-open) { position: sticky; top: -56px; }
  html.pin-switch .masthead-row:has(> .product-switch) { row-gap: 0; }
  html.pin-switch .masthead-row:has(> .product-switch)::after { content: ""; order: 9; flex-basis: 100%; }
  html.pin-switch .masthead .product-switch { margin-top: 10px; }
  .sticky-cta { display: flex; }
  #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: 24px 0 56px; }
  .h1-q { font-size: 42px; }
  .h1-a { font-size: 27px; }
  .lead { margin-top: 16px; font-size: 17px; }
  .assure { font-size: 16px; }
  .assure__price { font-size: 1.08em; }
  .cta-row { margin-top: 22px; gap: 12px; }
  .cta-row .btn { width: 100%; min-height: 58px; }
  .cta-row .text-link { margin-inline: auto; }
  .tab { inset-inline-start: 18px; font-size: 12px; }
  .chapter { padding: 64px 0; }
  .band__panel { padding: 30px 20px; border-radius: 24px 6px 24px 6px; }
  .chapter__lead { font-size: 17px; }
  .plan-card { padding: 26px 20px 22px; }
  .plan-card__amount { font-size: 48px; }
  .faq summary { font-size: 17px; }
  .yearcard__card, .fine-grid { grid-template-columns: 1fr; }
  .yearcard__card .btn { width: 100%; }
  /* the fork on a phone: the plans stack, the trunk lines go */
  .fork { padding: 22px 14px 6px; }
  .fork__ask { padding-bottom: 14px; }
  .fork__ask::after, .fork__plan::before, .fork__plan::after { display: none; }
  .fork__plan { grid-template-columns: 1fr; padding: 14px 0; padding-inline-start: 0; }
  .fork__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .fork__price { margin: 0; font-size: 22px; }
  .fork--wide .fork__plans { grid-template-columns: 1fr; }
  .fork--wide .fork__plan + .fork__plan { border-inline-start: 0; }
  .act-row .btn, .band__act .btn { width: 100%; }
  .yours__note { grid-template-areas: "step obj" "words words"; padding: 20px 16px 18px; }
  .yours__words { padding-inline-start: 0; font-size: 19px; }
  .yours__obj { width: 84px; }
  .yours__talk { padding: 16px 14px 20px; }
  .yours__chat .say { max-width: 100%; padding: 9px 14px 10px; font-size: 16px; }
  .auto__body { margin-top: -28px; padding: 0 8px 18px; }
  .night { margin-inline: -6px; padding: 14px 12px 18px; }
  .night__obj { width: 120px; }
  .night__chat .say { max-width: 100%; padding: 9px 14px 10px; font-size: 16px; }
  .letter { padding: 32px 20px 28px; }
  .letter__obj { width: 96px; }
  .auto__pair { grid-template-columns: 1fr; }
  .plan-row { padding: 18px 18px; gap: 4px 10px; }
  .plan-row__name b { font-size: 25px; }
  .plan-row__amount { font-size: 30px; }
  .chapter__lead { font-size: 18px; }
  .count__days { grid-template-columns: 1fr 1fr; gap: 10px; }
  .count__day { padding: 12px 10px 12px; }
  .sibling { grid-template-columns: auto minmax(0, 1fr); padding: 22px 20px; }
  .sibling img { width: 48px; height: 48px; }
  .sibling__go { grid-column: 1 / -1; justify-self: start; }
  .final__act, .final__act .btn { width: 100%; }
  .people { align-items: flex-start; }
  .page-hero { padding-bottom: 48px; }
  .page-title { font-size: 36px; }
  /* phones: all four columns on one screen; the one-line names carry the row */
  .hero-object__talk .say { font-size: 14px; }
  .hero-object__img { width: 150px; }
  .plan-label { min-width: 0; padding: 8px 10px 10px; }
  .plan-label span { font-size: 22px; }
  .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 8px 8px; font-size: 12.5px; }
  .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; font-size: 15px; }
  .plan-table td.yes::before { width: 22px; height: 22px; background-size: 13px; }
  .topic { padding: 11px 14px; }
  .station, .station--obj { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; }
  .station--obj .obj { grid-column: 1 / -1; max-width: none; margin-inline-start: 60px; }
  .perf span { font-size: 14px; }
  .pack { grid-template-columns: 1fr; }
  .pack__col + .pack__col { border-inline-start: 0; border-top: 1px dashed var(--line-strong); }
  .pack__col { padding: 22px 18px; }
}

/* ═════════ the terms (/bot/terms/): one reading column in the family voice; the legal text is untouched ═════════ */
.doc { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 96px); }
.doc h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.1; }
.doc__kind { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.doc h2 { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; scroll-margin-top: calc(var(--head-h) + 16px); }
.doc p, .doc li { font-size: 17px; line-height: 1.85; color: var(--ink-2); }
.doc p { margin-top: 14px; }
.doc ul, .doc ol { margin: 14px 0 0; padding-inline-start: 22px; }
.doc li + li { margin-top: 8px; }
.doc a { color: var(--ink); font-family: var(--f-ui); }
.doc .callout { margin-top: 30px; padding: 22px 26px; background: var(--ivory); border-radius: var(--leaf-sm); }
.doc .callout p { margin: 0; }
.doc .callout ul { margin-top: 10px; }
.doc .doc__en { padding: 14px 18px; background: var(--ivory); border-radius: var(--leaf-xs); font-size: 15px; line-height: 1.7; }
.doc .table-scroll { position: relative; margin-top: 18px; overflow-x: auto; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.doc table { width: 100%; min-width: 560px; border-collapse: collapse; }
.doc th, .doc td { padding: 12px 14px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.6; text-align: start; vertical-align: top; }
.doc thead th { border-top: 0; border-bottom: 2px solid var(--ink); background: var(--ivory); font: 15px/1.3 var(--f-ui); }
.doc .doc__version { margin-top: 44px; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .doc p, .doc li { font-size: 16px; }
  .doc h2 { margin-top: 40px; }
  .doc .callout { padding: 18px 18px; }
}