/* ─────────────────────────────────────────────────────────────
   «עונים לי בתורים» (/agent/) and «עונים לי בסידורים» (/calls/), 28.10.2026.
   The family's paper and ink (family.css) carry everything; this file only
   adds each product's own object and the few parts the old pages never needed
   (the docs' code, the phone-code steps). Same tokens, same leaf corners.
   ───────────────────────────────────────────────────────────── */

/* ── /agent/ hero object: one page of the business's diary, one row written by a call ── */
.daypage { width: min(100%, 400px); margin: 72px 0 0; margin-inline-start: auto; padding: 22px 22px 18px; }
.daypage__obj { position: absolute; top: -78px; inset-inline-end: 24px; width: 52px; height: auto; pointer-events: none; }
.daypage__date { font: 16px/1.2 var(--f-ui); }
.daypage__rows { margin: 12px 0 0; padding: 0; list-style: none; }
.daypage__rows li { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-soft); }
.daypage__rows time { font: 14px/1 var(--f-ui); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.daypage__rows .is-new { padding-block: 8px; }
.daypage__rows .is-new > span { display: grid; gap: 2px; padding: 9px 12px 8px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); color: var(--ink); }
.daypage__rows .is-new b { font: 16px/1.3 var(--f-ui); }
.daypage__rows .is-new small { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.daypage__rows .is-new time { color: var(--ink); }
.daypage__sent { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--ink); font: 15px/1.3 var(--f-ui); }
.tick { width: 14px; height: 14px; flex: none; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); border: 1.5px solid var(--ink); fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── /calls/ hero object: what you asked, the one question she brought back, what was agreed ── */
.errand { display: grid; gap: 12px; width: min(100%, 410px); margin: 0; margin-inline-start: auto; }
.errand__msg { position: relative; max-width: 300px; margin: 0; padding: 12px 16px 13px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 20px 20px 20px 6px; box-shadow: var(--card-shadow); font: 18px/1.4 var(--f-ui); }
.errand__msg small { display: block; margin-bottom: 3px; font: 13px/1.2 var(--f-body); color: var(--ink-soft); }
.errand__msg--her { justify-self: end; max-width: 270px; background: var(--ivory); border-radius: 20px 20px 6px 20px; box-shadow: none; font-size: 16px; }
.errand__keys { display: flex; gap: 8px; margin-top: 8px; }
.errand__keys span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); background: var(--sheet); font: 14px/1 var(--f-ui); }
.errand__keys .is-on { background: var(--yellow); box-shadow: 2px 2px 0 rgba(27, 26, 23, 0.86); }
.errand__got { margin-top: 52px; padding: 20px 22px 18px; }
.errand__ok { display: flex; align-items: center; gap: 10px; font: 30px/1.1 var(--f-display); }
.errand__ok .tick { width: 18px; height: 18px; padding: 5px; }
.errand__got dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 15px; }
.errand__got dt { color: var(--ink-soft); }
.errand__got dd { margin: 0; font-family: var(--f-ui); }
.errand__obj { position: absolute; top: -62px; inset-inline-end: 24px; width: 66px; height: auto; pointer-events: none; }

/* ── what it does: six small paper objects, a few words each ── */
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(22px, 3vw, 48px); margin: 46px 0 0; padding: 0; list-style: none; }
.acts li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 2px 16px; }
.acts img { grid-row: span 2; width: 64px; height: 56px; object-fit: contain; object-position: center top; }
.acts b { font: 19px/1.3 var(--f-ui); }
.acts span { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.acts a { color: var(--ink); }
.sec-head { max-width: 760px; }
.sec-head h2 { font-size: clamp(32px, 3.8vw, 50px); }
.sec-head p { margin-top: 14px; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.sec-head p a { color: var(--ink); font-family: var(--f-ui); }

/* ── «what you decide»: the editor's parts as quiet pills ── */
.parts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.parts li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 999px; font: 15.5px/1.3 var(--f-ui); }
.parts li .i { width: 16px; height: 16px; }
.trades-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.trades-row li { padding: 5px 13px; background: var(--ivory); border-radius: var(--leaf-xs); font: 15px/1.3 var(--f-ui); color: var(--ink-2); }

/* ── plans of the two products (the phone shelf keeps its own) ── */
.plans__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.plan__min { margin-top: 8px; font: 17px/1.3 var(--f-ui); }
.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 40px 0 0; padding: 0; list-style: none; }
.extras li { display: grid; gap: 2px; padding: 16px 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-sm); }
.extras b { font: 26px/1.1 var(--f-display); }
.extras span { font: 15px/1.4 var(--f-ui); }
.extras small { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.extras--1 { grid-template-columns: minmax(0, 380px); }
.fine { display: grid; gap: 6px; max-width: 70ch; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.fine li { display: flex; align-items: flex-start; gap: 8px; }
.fine li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--line-strong); }
.fine a { color: var(--ink); }

/* ── one quoted line on a card (a rule, an instruction); .said is the family's call line ── */
.quote-card { max-width: 560px; margin: 30px 0 0; padding: 24px 24px 20px; }
.quote-card blockquote { margin: 0; font: clamp(20px, 2vw, 24px)/1.5 var(--f-display); }
.quote-card .hint { margin-top: 10px; line-height: 1.55; }
.yesno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 34px 0 0; }
.yesno h3 { font: 18px/1.3 var(--f-ui); }
.yesno ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.yesno li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; }
.yesno .i { width: 16px; height: 16px; margin-top: 4px; padding: 3px; box-sizing: content-box; border-radius: 50%; stroke-width: 3; }
.yesno .ok .i { background: var(--yellow); }
.yesno .no li { color: var(--ink-soft); }
.yesno .no .i { border: 1.5px solid var(--line-strong); }

/* ── where the request comes from (calls) ── */
.doors3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
.doors3 li { display: grid; align-content: start; gap: 6px; padding: 22px 22px 20px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.doors3 img { width: 56px; height: 48px; object-fit: contain; object-position: right center; }
.doors3 b { font: 20px/1.3 var(--f-ui); }
.doors3 span { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.doors3 a { color: var(--ink); font-family: var(--f-ui); }

/* ── developer pages: the code stays left-to-right inside a right-to-left page ── */
.code { position: relative; margin: 18px 0 0; padding: 16px 18px; overflow-x: auto; contain: inline-size; background: var(--band); color: var(--on-band); border-radius: var(--leaf-xs); font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; text-align: left; tab-size: 2; }
.code code, .article-body .code code { display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; white-space: pre; }
.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 12px; font: 11px/1 var(--f-ui); letter-spacing: 0.06em; color: var(--on-band-2); text-transform: uppercase; }
code.c, .article-body code.c { display: inline; padding: 1px 6px; background: var(--ivory); border: 0; box-shadow: none; color: var(--ink); border-radius: 5px; font: 0.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; white-space: normal; overflow-wrap: anywhere; }
.table-scroll code.c { white-space: nowrap; }
.docnav { display: grid; gap: 2px; padding: 18px 18px 16px; background: var(--sheet); border: 1.5px solid var(--hair); border-radius: var(--leaf-sm); font-size: 15px; }
.docnav b { margin-bottom: 6px; font: 13px/1.3 var(--f-ui); color: var(--ink-soft); }
.docnav a { padding: 6px 2px; color: var(--ink-2); text-decoration: none; }
.docnav a:hover, .docnav a[aria-current] { color: var(--ink); text-decoration: underline; }
.docnav a[aria-current] { font-family: var(--f-ui); }
.endpoint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 34px; font: 18px/1.4 var(--f-ui); direction: ltr; justify-content: flex-end; }
.endpoint .verb { padding: 2px 9px; border: 1.5px solid var(--ink); border-radius: 6px; font: 13px/1.4 ui-monospace, Menlo, monospace; }
.endpoint .verb--post { background: var(--yellow); }
.endpoint code, .article-body .endpoint code { min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); font: 16px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: normal; overflow-wrap: anywhere; }
.devcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.devcards a { display: grid; gap: 4px; height: 100%; padding: 20px 22px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); color: var(--ink); text-decoration: none; transition: translate 0.15s ease, box-shadow 0.15s ease; box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.16); }
.devcards a:hover { translate: 0 -2px; box-shadow: 3px 5px 0 rgba(27, 26, 23, 0.3); }
.devcards b { font: 19px/1.3 var(--f-ui); }
.devcards span { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ── the phone-code steps (/start/, /no-calls/) ── */
.steps-card { width: min(100%, 520px); padding: 30px 28px 26px; }
.steps-card h2 { font-size: 30px; }
.steps-card .hint { margin-top: 8px; }
.field { display: grid; gap: 6px; margin-top: 20px; }
.field label { font: 15.5px/1.3 var(--f-ui); }
.field input { width: 100%; min-height: 52px; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 18px/1.3 var(--f-body); color: var(--ink); }
.field input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.field input[inputmode="numeric"], .field input[type="tel"] { direction: ltr; text-align: right; letter-spacing: 0.04em; }
.field small { font-size: 14px; color: var(--ink-soft); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 15.5px; line-height: 1.55; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); }
.check a { color: var(--ink); font-family: var(--f-ui); }
.form-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.linkbtn { min-height: 44px; padding: 8px 2px; background: none; border: 0; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.status { min-height: 1.5em; margin-top: 14px; font: 15.5px/1.5 var(--f-ui); }
.status.is-bad { color: #9b1c1c; }
.status.is-good { color: var(--ink); }
.done-mark { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 26px/1.2 var(--f-display); }
.done-mark .tick { width: 20px; height: 20px; padding: 6px; }
.start__grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px; align-items: start; }
.start__next h2 { font-size: 24px; }
.start__next .steps { margin-top: 14px; }
.start__next .checks { margin-top: 14px; }
.start__next > .hint { margin-top: 14px; }
.pickset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pickset legend { padding: 0; font: 30px/1.2 var(--f-display); }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.pick label { position: relative; display: grid; gap: 2px; padding: 14px 16px; background: var(--sheet); border: 2px solid var(--line-strong); border-radius: var(--leaf-sm); cursor: pointer; }
.pick label:has(input:checked) { border-color: var(--ink); box-shadow: var(--shadow-hard); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.pick b { font: 18px/1.3 var(--f-ui); }
.pick small { font-size: 14px; color: var(--ink-soft); }

/* ── legal pages of the two products: the bot's agreement layout, in family dress ── */
.article-body ul.clauses > li { padding-inline-start: 0; }
.article-body ul.clauses > li::before { content: none; }
.clauses .n { margin-inline-end: 4px; font: 15px/1 var(--f-ui); color: var(--ink-soft); }
.article-body .quote-card ul { margin-top: 6px; }
.article-body .quote-card li { font-size: 16px; line-height: 1.6; }
.legal-sum { display: grid; gap: 10px; max-width: 70ch; margin: 26px 0 0; padding: 22px 24px; background: var(--ivory); border-radius: var(--leaf-sm); list-style: none; }
.legal-sum li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.6; }
.legal-sum .i { width: 14px; height: 14px; flex: none; margin-top: 6px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--yellow); stroke-width: 3.2; }

@media (max-width: 960px) {
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors3 { grid-template-columns: 1fr; max-width: 540px; }
  .extras { grid-template-columns: 1fr; max-width: 540px; }
  .plans__grid--2 { grid-template-columns: 1fr; max-width: 540px; }
  .daypage, .errand { margin-inline: auto; }
  .start__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .acts { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .acts li { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; }
  .acts img { width: 52px; height: 46px; }
  .acts b { font-size: 18px; }
  .daypage { margin-top: 64px; padding: 18px 18px 14px; }
  .daypage__obj { width: 44px; top: -66px; }
  .errand__msg { font-size: 17px; }
  .errand__obj { width: 56px; top: -54px; }
  .yesno, .devcards, .pick { grid-template-columns: 1fr; }
  .steps-card { padding: 24px 20px 22px; }
}

/* ── /pricing/#new: the two products' shelves, small, under the phone's own ── */
.newpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: 40px 0 0; }
.newpair__card { display: grid; align-content: start; gap: 6px; padding: 26px 26px 24px; }
.newpair__card img { width: 60px; height: 52px; object-fit: contain; object-position: right center; }
.newpair__card h3 { margin-top: 6px; font-size: 26px; }
.newpair__card > p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.newpair__rows { display: grid; margin: 10px 0 16px; }
.newpair__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.newpair__rows dt { font: 16px/1.3 var(--f-ui); }
.newpair__rows dd { margin: 0; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.newpair__rows dd b { font: 20px/1 var(--f-display); color: var(--ink); }
.newpair .btn { justify-self: start; }
@media (max-width: 760px) { .newpair { grid-template-columns: 1fr; } .newpair__card { padding: 22px 20px 20px; } }

/* ── developer pages: a code block on a card, and the article's own code ── */
.devhero { width: min(100%, 540px); margin: 0; margin-inline-start: auto; padding: 16px; }
.devhero .code { margin: 0; }
.article-body .code { margin-top: 18px; }
.article-body .code + .code { margin-top: 12px; }
.article-body .endpoint + .code { margin-top: 10px; }
.article-body .table-scroll td, .article-body .table-scroll th { font-size: 14.5px; }
@media (max-width: 960px) { .devhero { margin-inline: auto; } }