/* ══════════════════════════════════════════════════════════
   AGENT SELA — article pages only (everything under /blog)
   Loaded ONLY by article pages, so the 5 marketing pages don't pay for it.
   Everything here is scoped under .article-body or an ar-/calc-/proc-/rail-
   prefix — site.css is never touched and never overridden.

   site.css has no long-form prose styles at all (.tt-body is a one-off utility,
   not a flowing article). That's what the first block below supplies.
   ══════════════════════════════════════════════════════════ */

/* ── shell: body first (right in RTL), rail second (left) ────────── */
.ar-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1080px) {
  .ar-shell { grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
}

/* ── article header ──────────────────────────────────────────────── */
.ar-head { max-width: 46rem; }
.ar-title { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: var(--t-h1); line-height: 1.14; letter-spacing: -0.01em; margin-top: 14px; }
.ar-sum { font-size: var(--t-lede); line-height: 1.65; color: var(--slate); margin-top: 18px; }
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; font-size: .95rem; color: var(--slate); }
.ar-meta time { font-variant-numeric: tabular-nums; }
.ar-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.ar-hero { margin-top: clamp(28px, 4vw, 44px); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.ar-hero img { display: block; width: 100%; height: auto; }

/* ── prose ───────────────────────────────────────────────────────── */
.article-body { max-width: 42rem; }
.article-body > * + * { margin-top: 1.15em; }

.article-body p { font-size: var(--t-body); line-height: 1.8; color: #2C3A4D; }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body em { font-style: normal; color: var(--turqdk); font-weight: 600; }

.article-body h2 {
  font-family: 'Rubik', sans-serif; font-weight: 900;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem); line-height: 1.25;
  color: var(--ink); margin-top: 2.2em; scroll-margin-top: 96px;
}
.article-body h3 {
  font-family: 'Rubik', sans-serif; font-weight: 700;
  font-size: var(--t-h3); color: var(--ink); margin-top: 1.8em;
}

.article-body ul, .article-body ol { padding-inline-start: 1.3em; }
.article-body li { font-size: var(--t-body); line-height: 1.75; color: #2C3A4D; }
.article-body li + li { margin-top: .5em; }
.article-body ul { list-style: none; padding-inline-start: 0; }
.article-body ul > li { position: relative; padding-inline-start: 1.5em; }
.article-body ul > li::before {
  content: ''; position: absolute; inset-inline-start: .25em; top: .72em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--turq);
}

.article-body a { color: var(--turqdk); text-underline-offset: 3px; }

/* pull quote — a real editorial break, not a styled blockquote */
.article-body blockquote {
  margin-top: 1.8em; padding-inline-start: 20px;
  border-inline-start: 3px solid var(--turq);
  font-family: 'Rubik', sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); line-height: 1.45; color: var(--ink);
}

.article-body hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }

/* numbers must not flip in RTL */
.article-body .num, .ar-meta time { direction: ltr; unicode-bidi: isolate; }

/* ── action callout — the `> **פעולה:**` convention ──────────────── */
.ar-act {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(25, 211, 197, .08);
  border: 1px solid rgba(25, 211, 197, .34);
  border-radius: 14px; padding: 16px 18px; margin-top: 1.8em;
}
.ar-act .ar-act-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--turqdk); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: .82rem; }
.ar-act p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.ar-act b { font-family: 'Rubik', sans-serif; }

/* ══ 1 · CALCULATOR ═══════════════════════════════════════════════ */
.calc { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 32px); margin-top: 2.2em; }
.calc-h { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); color: var(--ink); }
.calc-sub { font-size: 1rem; color: var(--slate); margin-top: 6px; }

.calc-in { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 640px) { .calc-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.calc-f { display: block; }
.calc-f > span { display: block; font-weight: 700; font-size: .98rem; color: var(--ink); margin-bottom: 6px; }
/* Physical properties on purpose, not logical ones. The input is direction:ltr
   (numbers) inside an RTL box, so inline-end resolves to opposite sides for the
   two elements — the unit chip landed on the left while the input reserved its
   padding on the right. Explicit right/left keeps them on the same side. */
.calc-box { position: relative; display: block; }
.calc-f input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; padding-right: 66px;
  font-family: 'Assistant', sans-serif; font-size: 1.15rem; font-weight: 600;
  color: var(--ink); background: var(--paper); min-height: 52px;
  direction: ltr; text-align: left;
}
.calc-f input:focus { outline: 2px solid var(--turqdk); outline-offset: 1px; border-color: transparent; }
.calc-f .calc-u {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: .92rem; color: var(--slate); pointer-events: none;
}

/* The assumption input is deliberately quieter — it's a dial, not a question.
   Height stays identical to its neighbour: a shorter box beside a taller one
   reads as a misaligned bug, not as hierarchy. Label metrics must match too: a
   smaller label is a shorter label, which pushes its input down and misaligns
   the row. Colour and fill carry the hierarchy; size and weight stay identical. */
.calc-f.is-soft > span { color: var(--slate); }
.calc-f.is-soft input { background: #fff; }

.calc-out { display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .calc-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc-o { background: var(--panel); border-radius: 14px; padding: 16px 18px; }
.calc-o .calc-o-l { font-size: .95rem; color: var(--slate); }
.calc-o .calc-o-v { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); color: var(--ink); line-height: 1.15; margin-top: 4px; direction: ltr; unicode-bidi: isolate; text-align: start; }
.calc-o.is-key { background: var(--ink); }
.calc-o.is-key .calc-o-l { color: rgba(255,255,255,.72); }
.calc-o.is-key .calc-o-v { color: var(--turq); }

/* the assumption is stated on screen, never hidden — AVIEL_VOICE forbids
   presenting a projection as a fact. This line is the brand, not a disclaimer. */
.calc-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: .95rem; line-height: 1.55; color: var(--slate); }
.calc-note svg { flex: none; width: 17px; height: 17px; color: var(--turqdk); margin-top: 3px; }

/* ══ 2 · BEFORE / AFTER ═══════════════════════════════════════════ */
.proc { margin-top: 2.4em; display: grid; gap: 16px; }
@media (min-width: 820px) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.proc-col { border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 2.4vw, 26px); background: #fff; }
.proc-col.is-after { border-color: rgba(25, 211, 197, .5); background: rgba(25, 211, 197, .045); }

.proc-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.proc-cap .proc-l { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.proc-cap .proc-t { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: 1.05rem; direction: ltr; unicode-bidi: isolate; }
.proc-col.is-before .proc-t { color: #C4553F; }
.proc-col.is-after  .proc-t { color: var(--turqdk); }

.proc-step { display: flex; gap: 13px; align-items: flex-start; padding-top: 15px; }
.proc-n { flex: none; width: 25px; height: 25px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: .8rem; background: var(--panel); color: var(--slate); }
.proc-col.is-after .proc-n { background: var(--turqdk); color: #fff; }
.proc-step .proc-s-t { font-weight: 600; color: var(--ink); line-height: 1.45; }
.proc-step .proc-s-m { font-size: .93rem; color: var(--slate); margin-top: 2px; direction: rtl; }
.proc-col.is-before .proc-s-m { color: #C4553F; }

/* Steps ship VISIBLE in the HTML. JS removes .proc-anim only to re-hide them for
   the reveal, so a JS-off reader sees the whole comparison. Right→left, RTL. */
.proc-anim .proc-step { opacity: 0; transform: translateX(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.proc-anim.on .proc-step { opacity: 1; transform: none; }
/* .proc-cap is child 1, so the first step is nth-child(2) — delays start there */
.proc-anim.on .proc-step:nth-child(3) { transition-delay: .07s; }
.proc-anim.on .proc-step:nth-child(4) { transition-delay: .15s; }
.proc-anim.on .proc-step:nth-child(5) { transition-delay: .23s; }
.proc-anim.on .proc-step:nth-child(6) { transition-delay: .31s; }

/* ══ 4 · THE PROMPT BOX ═══════════════════════════════════════════
   The one thing a reader can paste into ChatGPT/Claude right now and get a
   result from. This is the block that earns the article its keep, so it's the
   loudest thing on the page after the H1 — dark, full-bleed of the column. */
.pbox {
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: clamp(22px, 3vw, 34px); margin-top: 2.4em;
  position: relative; overflow: hidden;
}
.pbox::after {                                  /* the brand arc, quietly */
  content: ''; position: absolute; left: -140px; bottom: -200px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 34px solid rgba(25, 211, 197, .13); pointer-events: none;
}
.pbox > * { position: relative; }
.pbox .tt-label { color: var(--turq); }
.pbox .tt-label::before { background: var(--turq); }
/* Scoped under .pbox on purpose: these are <p> elements sitting inside
   .article-body, and `.article-body p` (0,1,1) outranks a bare `.pbox-h` (0,1,0).
   Without the parent selector the dark prose colour wins and the text goes
   near-black on near-black. */
.pbox .pbox-h { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.25; margin-top: 10px; color: #fff; }
.pbox .pbox-sub { color: rgba(255,255,255,.78); margin-top: 8px; font-size: 1.02rem; line-height: 1.6; }
.pbox .pbox-sub em { color: var(--turq); font-style: normal; font-weight: 600; }

.pbox-code {
  margin-top: 18px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(25,211,197,.28); border-radius: 14px;
  padding: 18px 20px; max-height: 340px; overflow: auto;
  font-family: 'Assistant', sans-serif; font-size: .98rem; line-height: 1.62;
  color: #EAF2F1; white-space: pre-wrap; word-break: break-word;
  direction: rtl; text-align: start;
}
.pbox-code::-webkit-scrollbar { width: 9px; }
.pbox-code::-webkit-scrollbar-thumb { background: rgba(25,211,197,.34); border-radius: 6px; }

.pbox-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pbox-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 13px 22px; border-radius: 999px; min-height: 50px; border: 0; cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.pbox-btn svg { width: 19px; height: 19px; }
.pbox-btn:active { transform: translateY(1px); }
.pbox-copy { background: var(--turq); color: var(--ink); flex: 1 1 220px; }
.pbox-copy.done { background: #fff; }
.pbox-share { background: var(--wa); color: #fff; text-decoration: none; flex: 1 1 200px; }
.pbox .pbox-note { margin-top: 14px; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.pbox .pbox-note b { color: var(--turq); font-weight: 700; }

/* ══ 5 · THE COACH BLOCK ══════════════════════════════════════════
   Aviel's "style B": explain one technical idea to a smart 15-year-old through
   a single sustained sports analogy. Visually separated so a reader who already
   understands can skip it, and a reader who doesn't can live in it. */
.coach {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(22px, 3vw, 34px); margin-top: 2.4em;
}
.coach-k { display: flex; align-items: center; gap: 10px; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: .95rem; color: var(--turqdk); }
.coach-k svg { width: 21px; height: 21px; }
.coach-h { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); color: var(--ink); margin-top: 10px; line-height: 1.3; }
.coach p { font-size: 1.05rem; line-height: 1.75; color: #2C3A4D; margin-top: 12px; }
.coach p strong { color: var(--ink); }
.coach-viz { margin-top: 18px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.coach-viz svg { display: block; width: 100%; height: auto; }
.coach-map { display: grid; gap: 8px; margin-top: 18px; }
@media (min-width: 640px) { .coach-map { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.coach-row { display: flex; align-items: baseline; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; font-size: .98rem; }
.coach-row b { font-family: 'Rubik', sans-serif; color: var(--turqdk); flex: none; }
.coach-row span { color: var(--slate); }

/* ══ 3 · ACTION RAIL ══════════════════════════════════════════════ */
/* Desktop only. On mobile the section list sits inline after the intro and the
   action list lives in the closing card — a second bottom-fixed element would
   collide with #wa-float. */
.rail { display: none; }
@media (min-width: 1080px) {
  .rail { display: block; position: sticky; top: 92px; }
}
.rail-h { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--slate); }
.rail-nav { margin-top: 14px; border-inline-start: 2px solid var(--line); }
.rail-nav a {
  display: block; padding: 7px 0 7px 14px; padding-inline-start: 14px;
  font-size: .96rem; line-height: 1.4; color: var(--slate);
  border-inline-start: 2px solid transparent; margin-inline-start: -2px;
  transition: color .18s ease, border-color .18s ease;
}
.rail-nav a:hover { color: var(--ink); }
.rail-nav a.on { color: var(--ink); font-weight: 600; border-inline-start-color: var(--turq); }

.rail-acts { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.rail-acts .rail-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-count { font-family: 'Rubik', sans-serif; font-weight: 700; color: var(--turqdk); direction: ltr; }
.rail-list { margin-top: 12px; display: grid; gap: 9px; }
.rail-item { display: flex; gap: 9px; align-items: flex-start; font-size: .93rem; line-height: 1.45; color: var(--slate); cursor: pointer; }
.rail-item input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--turqdk); }
.rail-item.done span { color: var(--ink); }

/* ── closing CTA card (holds the one lead form on the page) ──────── */
.ar-cta { margin-top: clamp(40px, 5vw, 64px); background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 3.4vw, 40px); }
.ar-cta-h { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); color: var(--ink); line-height: 1.25; }
.ar-cta-sub { color: var(--slate); margin-top: 10px; }
.ar-acts-m { margin-top: 22px; padding: 16px 18px; background: var(--panel); border-radius: 14px; }
.ar-acts-m .rail-h { color: var(--slate); }
.ar-acts-m .rail-list { margin-top: 10px; }
@media (min-width: 1080px) { .ar-acts-m { display: none; } }

/* mobile-only inline section list */
.ar-toc { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-top: 2em; background: #fff; }
.ar-toc ol { margin-top: 10px; padding-inline-start: 1.2em; }
.ar-toc li { font-size: 1rem; line-height: 1.5; }
.ar-toc li + li { margin-top: 7px; }
.ar-toc a { color: var(--slate); }
@media (min-width: 1080px) { .ar-toc { display: none; } }

/* ── listing page ────────────────────────────────────────────────── */
.post-grid { display: grid; gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 760px)  { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-c { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.post-c:hover { transform: translateY(-3px); border-color: rgba(25, 211, 197, .5); }
.post-b { padding: 20px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; }
/* the cover sits INSIDE the padded link, so it's pulled back out to bleed to the
   card edges. Offsets mirror .post-b's padding — change both together. */
.post-c img {
  display: block; aspect-ratio: 16 / 9; object-fit: cover;
  width: calc(100% + 44px); max-width: none; margin: -20px -22px 16px;
}
.post-t { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.35; color: var(--ink); margin-top: 8px; }
.post-s { font-size: 1rem; line-height: 1.55; color: var(--slate); margin-top: 8px; flex-grow: 1; }
.post-m { font-size: .9rem; color: var(--slate); margin-top: 16px; direction: ltr; text-align: start; }

/* TheMarker credibility strip — real bylines, so they carry weight up top */
.tm-strip { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(18px, 2.4vw, 26px); margin-top: clamp(28px, 4vw, 44px); }
.tm-list { display: grid; gap: 10px; margin-top: 14px; }
.tm-row { display: flex; gap: 12px; align-items: baseline; font-size: 1rem; line-height: 1.5; }
.tm-row .tm-d { flex: none; font-size: .88rem; color: var(--slate); direction: ltr; min-width: 4.2em; }

/* ── reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .proc-anim .proc-step { opacity: 1; transform: none; transition: none; }
  .post-c:hover { transform: none; }
}