/* EchoAI Answer Layer · the GUIDE page (2.97.0 design).
   Edited by hand since 3.1: this file is the source. It was first ported from the approved prototype; the
   port (tests/design-port/port-guide-css.cjs and its plugin layer) is retired (PLAN-3.2 E-1, 05.10.2026) and
   kept in git history only, because one run of it would erase every guide ruling made here since owner round
   101. The gate check a-stylesheet-a-retired-port-would-overwrite keeps it out of the tree.
   Loaded only on a guide page (src/guide-page.php). Every rule sits under :is(#echoai-scope,.ea-gs), the
   wrapper the renderer prints: nothing here can reach a page of the client's. Colours are contract roles
   only; sizes are the fluid engine's roles (assets/fluid-engine.css, printed inline before this file). */
/* ======================= ea-blocks (ported) ======================= */
:is(#echoai-scope,.ea-gs) .ea-art, :is(#echoai-scope,.ea-gs) .ea-art[data-ea-intensity="vivid"] {
  --cb-marker: var(--ea-accent);
  --cb-duo: var(--ea-spark);
  --cb-chip-bg: var(--ea-accent-fill);
  --cb-chip-fg: var(--ea-on-accent);
  --cb-num: var(--ea-accent-text);
}
:is(#echoai-scope,.ea-gs) .ea-art[data-ea-intensity="balanced"] { --cb-duo: var(--ea-spark); }
:is(#echoai-scope,.ea-gs) .ea-art[data-ea-intensity="quiet"] {
  --cb-marker: var(--ea-ink-mute);
  --cb-duo: var(--ea-accent);
  --cb-chip-bg: var(--ea-tint-strong);
  --cb-chip-fg: var(--ea-accent-ink);
}
:is(#echoai-scope,.ea-gs) .ea-art {
  --cb-r: var(--ea-radius);
  --cb-ease: cubic-bezier(.16, 1, .3, 1);
  --cb-end: 270deg;
  --cb-x0: 100%;
  --cb-line: linear-gradient(var(--cb-end), var(--ea-accent), var(--cb-duo));
  --cb-rule: linear-gradient(var(--ea-line), var(--ea-line)) 0 0 / 100% 1px no-repeat;
  --cb-gap: var(--eaf-s-xl);
  color: var(--ea-ink);
  font-family: var(--ea-font);
  font-size: var(--eaf-fs-body);
  line-height: var(--eaf-lh-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
:is(#echoai-scope,.ea-gs) .ea-art:dir(ltr), :is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-art { --cb-end: 90deg; --cb-x0: 0%; }
:is(#echoai-scope,.ea-gs) .ea-art, :is(#echoai-scope,.ea-gs) .ea-art *, :is(#echoai-scope,.ea-gs) .ea-art ::before, :is(#echoai-scope,.ea-gs) .ea-art ::after { box-sizing: border-box; }
:is(#echoai-scope,.ea-gs) .ea-art :is(p:not([class]), p.echoai-post__p) { margin: var(--eaf-s-sm) 0 0; font-size: inherit; line-height: inherit; color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art p.echoai-post__lead { margin: var(--eaf-s-sm) 0 0; font-size: var(--eaf-fs-lead); line-height: var(--eaf-lh-body); font-weight: 500; color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art :where([lang="en"]) { font-family: var(--ea-font-en); }
:is(#echoai-scope,.ea-gs) .ea-art :where(strong, b) { font-weight: 700; color: inherit; }
:is(#echoai-scope,.ea-gs) .ea-art ::selection { background: var(--ea-selection); color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art :focus-visible { outline: 2px solid var(--ea-focus); outline-offset: 3px; border-radius: 6px; }
:is(#echoai-scope,.ea-gs) .ea-art .ea-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(h2.ea-h2, h2.echoai-post__h2, h2:not([class])) {
  position: relative; margin: var(--eaf-s-3xl) 0 0; padding-block: var(--eaf-s-sm) 0; padding-inline-start: 0;
  font-size: var(--eaf-fs-h2); line-height: var(--eaf-lh-head); font-weight: 700; font-style: normal;
  color: var(--ea-ink); letter-spacing: -.005em; scroll-margin-top: 96px;
}
/* No coloured bar over a heading (owner round 101, guide:remove-12; round 1: "fewer boxes, set apart by space, one
   thin rule and typography"): a chapter is set apart by its size and the space above it. The brand gradient is kept
   for the two framed blocks only, the answer box and the bottom line. Gate: `a-coloured-bar-over-a-heading`. */
:is(#echoai-scope,.ea-gs) .ea-art :is(h3.ea-h3, h3.echoai-post__h3, h3:not([class])) {
  margin: var(--eaf-s-2xl) 0 0; font-size: var(--eaf-fs-h3); line-height: var(--eaf-lh-head); font-weight: 700; font-style: normal;
  color: var(--ea-ink); scroll-margin-top: 96px;
}
:is(#echoai-scope,.ea-gs) .ea-art a:is(:not([class]), .echoai-post__inline-link, [data-link-injection]):is(:link, :visited) {
  color: var(--ea-ink);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--ea-link-underline);
  text-decoration-thickness: max(1.5px, .09em);
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  background-color: transparent;
  background-image: linear-gradient(var(--ea-mark), var(--ea-mark));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: 2px;
  transition: background-size .35s var(--cb-ease), text-decoration-thickness .2s ease;
}
:is(#echoai-scope,.ea-gs) .ea-art a:is(:not([class]), .echoai-post__inline-link, [data-link-injection]):is(:link, :visited):hover {
  color: var(--ea-ink); background-size: 100% 100%; text-decoration-thickness: 3px;
}
:is(#echoai-scope,.ea-gs) .ea-art mark:not([class]) {
  color: inherit;
  background: linear-gradient(to top, var(--ea-mark) 0 46%, transparent 46%);
  padding: 0 .14em; margin: 0 -.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-term { font-family: var(--ea-font-en); font-weight: 600; font-size: .94em; color: var(--ea-accent-text); unicode-bidi: isolate; }
:is(#echoai-scope,.ea-gs) .ea-art :is(ul.ea-list, ul:not([class]):not([data-ea-check])) {
  list-style: none; margin: var(--eaf-s-md) 0 0; padding: 0; display: grid; gap: var(--eaf-s-2xs);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ul.ea-list, ul:not([class]):not([data-ea-check])) > li {
  position: relative; margin: 0; padding-inline-start: 30px; border: 0;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ul.ea-list, ul:not([class]):not([data-ea-check])) > li::before {
  content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: calc(.9em - 5px);
  width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg);
  background: var(--cb-marker);
}
:is(#echoai-scope,.ea-gs) .ea-art ol:not([class]):not([data-ea-check]):not([data-block]) { margin: var(--eaf-s-md) 0 0; padding: 0; padding-inline-start: 1.6em; list-style: decimal; display: grid; gap: var(--eaf-s-2xs); }
:is(#echoai-scope,.ea-gs) .ea-art ol:not([class]):not([data-ea-check]):not([data-block]) > li { margin: 0; padding-inline-start: 6px; }
:is(#echoai-scope,.ea-gs) .ea-art ol:not([class]):not([data-ea-check]):not([data-block]) > li::marker { color: var(--ea-accent-text); font-weight: 700; font-family: var(--ea-font-en); }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout) {
  position: relative; isolation: auto; overflow: visible;
  margin: var(--cb-gap) 0 0; margin-block-end: var(--cb-gap);
  padding: var(--eaf-s-md) 0 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--cb-rule);
  color: var(--ea-ink);
  font-size: var(--eaf-fs-body); line-height: var(--eaf-lh-body);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout)::before, :is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout)::after { content: none; }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout) > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout) > p + p { margin-top: var(--eaf-s-xs); }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout) + :is(.ea-callout, .echoai-post__callout) { margin-top: 0; }
/* a callout: ONE quiet hairline over it, no coloured segment (round 101, guide:remove-12: the segment made every
   callout look like a chapter break that had lost its heading) */
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout[data-tone="accent"], .ea-callout[data-tone="inverse"], .echoai-post__callout:not([class*="--"]), .echoai-post__callout--dark) {
  background: var(--cb-rule);
  font-size: var(--eaf-fs-large); font-weight: 500; line-height: var(--eaf-lh-body);
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-callout[data-tone="inverse"] > p.ea-callout__key,
:is(#echoai-scope,.ea-gs) .ea-art .echoai-post__callout--dark > p > strong:last-child {
  display: block; margin-top: var(--eaf-s-2xs);
  font-size: var(--eaf-fs-h3); line-height: var(--eaf-lh-head); font-weight: 700; letter-spacing: -.005em; text-wrap: balance; color: var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout[data-tone="inverse"], .echoai-post__callout--dark) :is(p, strong) { color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout[data-tone="neutral"], .echoai-post__callout--sage) {
  background: var(--cb-rule);
  padding-inline-start: 28px;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout[data-tone="neutral"], .echoai-post__callout--sage)::before {
  content: ""; position: absolute; inset-inline-start: 0;
  inset-block-start: calc(var(--eaf-s-md) + (var(--eaf-lh-body) * 1em - 16px) / 2);
  width: 16px; height: 16px; background: var(--ea-spark-fill);
  -webkit-mask: var(--cb-note) center / contain no-repeat; mask: var(--cb-note) center / contain no-repeat;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip {
  position: relative; margin: var(--cb-gap) 0 0; margin-block-end: var(--cb-gap);
  padding: var(--eaf-s-md) 0 0; max-inline-size: min(100%, var(--ea-measure-text));
  background: var(--cb-rule); border: 0; border-radius: 0; box-shadow: none;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip h3.ea-tip__h {
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  font-size: var(--eaf-fs-h3); line-height: var(--eaf-lh-head); font-weight: 600; color: var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip h3.ea-tip__h::before, :is(#echoai-scope,.ea-gs) .ea-art .ea-tip h3.ea-tip__h::after { content: none; }
/* the label is the page's own word (round 101, GC-02): «טיפ מקצועי» in the page's font with no tracking on a Hebrew page,
   "PRO TIP" in capitals only where it is English */
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__label {
  display: flex; inline-size: fit-content; align-items: center; gap: 6px; margin-block-end: var(--eaf-s-3xs);
  unicode-bidi: isolate;
  font-family: var(--ea-font); font-size: var(--eaf-fs-read-label); line-height: var(--eaf-lh-ui);
  font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ea-accent-text);
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__label:lang(en) { font-family: var(--ea-font-en); letter-spacing: .08em; text-transform: uppercase; }
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__label::before {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--ea-graphic);
  -webkit-mask: var(--cb-bulb) center / contain no-repeat; mask: var(--cb-bulb) center / contain no-repeat;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__body { margin-top: var(--eaf-s-2xs); }
/* the tip's advice at the article's own size (round 101, GC-02: at 15px/500 it was the smallest text in the guide) */
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__body > p { margin: 0; font-size: inherit; line-height: var(--eaf-lh-body); font-weight: 400; color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__body > p + p { margin-top: var(--eaf-s-2xs); }
/* the body's own media never push the page sideways (3.2, E-7; the reader audit's B1: on Twenty Twenty-Five, a theme with no
   image limit, a 1200px image in the body pushed the phone 848px sideways and the first screen opened blank). The writer's
   images, videos and embeds keep the text lane, their shape kept; ours (an ea- class) keep their own sizing. The question
   page has held its body media since tower wave 3 (W6 B1, assets/question.css) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-body :is(img,video):not([class^="ea-"]):not([class*=" ea-"]) { max-width: 100%; height: auto; }
:is(#echoai-scope,.ea-gs) .ea-g .ea-body :is(iframe,embed,object):not([class^="ea-"]):not([class*=" ea-"]) { max-width: 100%; }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap) {
  position: relative; margin: var(--cb-gap) 0 0; margin-block-end: var(--eaf-s-lg);
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 0; border-radius: 0; background: none; padding: 0; box-shadow: none;
  scrollbar-width: thin; scrollbar-color: var(--ea-line) transparent;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap):focus-visible { outline: 2px solid var(--ea-focus); outline-offset: 3px; }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap)[data-ea-fits][data-ea-tall] { overflow: visible; }
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) {
  position: relative; width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: transparent;
  font-size: var(--eaf-fs-ui); line-height: var(--eaf-lh-ui); font-variant-numeric: tabular-nums;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > caption.ea-sr { caption-side: top; }
:is(#echoai-scope,.ea-gs) .ea-art > table:not([class]) { margin-top: var(--cb-gap); }
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > thead > tr > th:nth-child(n) {
  padding: 0 var(--eaf-s-sm) var(--eaf-s-xs); border: 0; border-block-end: 2px solid var(--ea-ink);
  background: var(--ea-surface); color: var(--ea-ink);
  text-align: start; vertical-align: bottom; font-size: var(--eaf-fs-ui); line-height: var(--eaf-lh-head); font-weight: 700;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > tbody > tr:nth-child(n) > :is(td, th) {
  padding: var(--eaf-s-xs) var(--eaf-s-sm); border: 0; border-block-end: 1px solid var(--ea-line);
  background: var(--ea-surface); color: var(--ea-ink); text-align: start; vertical-align: top;
  font-size: var(--eaf-fs-ui); line-height: var(--eaf-lh-ui); font-weight: 400;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > :is(thead, tbody) > tr > :first-child:nth-child(n) { padding-inline-start: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > :is(thead, tbody) > tr > :last-child:nth-child(n) { padding-inline-end: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > tbody > tr:nth-child(n) > :first-child:not(:only-child) { font-weight: 700; min-width: 118px; }
:is(#echoai-scope,.ea-gs) .ea-art [data-ea-fits][data-ea-tall] :is(table.ea-t, table.echoai-post__table, table:not([class])) > thead > tr > th:nth-child(n) {
  position: sticky; inset-block-start: var(--eax-toc-offset, 0px); z-index: 2;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap)[data-ea-scroll] {
  -webkit-mask-image: linear-gradient(var(--cb-end), #000 calc(100% - 48px), rgb(0 0 0 / var(--cb-edge)));
          mask-image: linear-gradient(var(--cb-end), #000 calc(100% - 48px), rgb(0 0 0 / var(--cb-edge)));
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ol.ea-qlist, ol.echoai-post__question-list, ol[data-ea-check], ul[data-ea-check]) {
  list-style: none; counter-reset: cbq; margin: var(--eaf-s-lg) 0 0; padding: 0; display: block;
  border-block-end: 1px solid var(--ea-line);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ol.ea-qlist, ol.echoai-post__question-list, ol[data-ea-check], ul[data-ea-check]) > li {
  counter-increment: cbq; position: relative; margin: 0; min-height: 0; display: block;
  padding: var(--eaf-s-sm) 0; padding-inline-start: 44px;
  background: none; border: 0; border-block-start: 1px solid var(--ea-line); border-radius: 0; box-shadow: none;
  font-size: var(--eaf-fs-large); line-height: var(--eaf-lh-ui); font-weight: 500; color: var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ol.ea-qlist, ol.echoai-post__question-list, ol[data-ea-check]) > li::before {
  content: counter(cbq, decimal-leading-zero); position: absolute; inset-inline-start: 0;
  inset-block-start: var(--eaf-s-sm); translate: none; width: auto; height: auto; background: none; border-radius: 0;
  line-height: calc(var(--eaf-fs-large) * var(--eaf-lh-ui)); font-family: var(--ea-font-en); font-size: var(--eaf-fs-meta); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--cb-num);
}
:is(#echoai-scope,.ea-gs) .ea-art ul[data-ea-check] > li::before { content: none; }
:is(#echoai-scope,.ea-gs) .ea-art ul[data-ea-check] > li { padding-inline-start: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] > li { padding: 0; padding-inline-start: 44px; }
:is(#echoai-scope,.ea-gs) .ea-art ul[data-ea-check] > li { padding-inline-start: 0; }
:is(#echoai-scope,.ea-gs) .ea-art ul[data-ea-check] input[type="checkbox"] { order: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] > li > label {
  display: flex; align-items: flex-start; gap: var(--eaf-s-sm); margin: 0; padding: var(--eaf-s-sm) 0;
  cursor: pointer; font: inherit; line-height: inherit; color: inherit;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] > li > label > span { flex: 1; }
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] input[type="checkbox"] {
  order: 2; flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  margin-block-start: calc((var(--eaf-fs-large) * var(--eaf-lh-ui) - 22px) / 2);
  width: 22px; height: 22px; border-radius: min(var(--cb-r), 6px);
  background: var(--ea-surface); border: 2px solid var(--ea-control-edge);
  display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] input[type="checkbox"]::after {
  content: ""; width: 6px; height: 11px; border: solid var(--ea-on-accent); border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg) scale(0); transition: transform .2s var(--cb-ease);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] input[type="checkbox"]:checked { background: var(--ea-accent-fill); border-color: var(--ea-control-edge); }
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
:is(#echoai-scope,.ea-gs) .ea-art :is(ol, ul)[data-ea-check] input[type="checkbox"]:focus-visible { outline: 2px solid var(--ea-focus); outline-offset: 2px; }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq, .echoai-post__faq) { display: block; margin: var(--eaf-s-lg) 0 0; padding: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq__item, .echoai-post__faq-item) {
  position: relative; margin: 0; padding: var(--eaf-s-md) 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq__item, .echoai-post__faq-item) + :is(.ea-faq__item, .echoai-post__faq-item) { border-block-start: 1px solid var(--ea-line); }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq__item, .echoai-post__faq-item):first-child { padding-block-start: 0; }
/* the question at h3 size, the answer under it at body size (round 101, GC-08: the question was 18px over a 19px answer,
   so a reader scanning the questions scanned the smaller text) */
:is(#echoai-scope,.ea-gs) .ea-art :is(h3.ea-faq__q, :is(h3,h4).echoai-post__faq-q) {
  margin: 0; padding: 0; font-size: var(--eaf-fs-h3); line-height: var(--eaf-lh-head); font-weight: 700; font-style: normal;
  color: var(--ea-ink); scroll-margin-top: 96px; transition: color .2s ease;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq__item, .echoai-post__faq-item):is(:target, :has(:target)) :is(h3.ea-faq__q, :is(h3,h4).echoai-post__faq-q) { color: var(--ea-accent-text); }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq__a, .echoai-post__faq-a) { margin: var(--eaf-s-2xs) 0 0; font-size: var(--eaf-fs-body); line-height: var(--eaf-lh-body); color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-faq__a, .echoai-post__faq-a) > p { margin: 0; }
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-quote, blockquote:not([class])) {
  position: relative; margin: var(--cb-gap) 0 0; margin-block-end: var(--cb-gap); padding: var(--eaf-s-md) 0 0;
  border: 0; background: var(--cb-rule); quotes: none;
  font-size: var(--eaf-fs-large); line-height: var(--eaf-lh-body); font-weight: 500; font-style: normal; color: var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-quote, blockquote:not([class]))::before, :is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-quote, blockquote:not([class]))::after { content: none; }
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-quote, blockquote:not([class])) > p { margin: 0; font-style: normal; }
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-quote, blockquote:not([class])) cite { display: block; margin-top: var(--eaf-s-2xs); font-size: var(--eaf-fs-small); font-style: normal; font-weight: 400; color: var(--ea-ink-mute); }
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-pull, figure.ea-pull) {
  position: relative; margin: var(--eaf-s-xl) 0; padding: var(--eaf-s-md) 0 0; border: 0; background: none; quotes: none;
  font-family: var(--ea-font); font-size: var(--eaf-fs-h2); line-height: var(--eaf-lh-head); font-weight: 600; font-style: normal;
  letter-spacing: -.01em; color: var(--ea-ink); text-wrap: balance;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-pull, figure.ea-pull)::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 64px; height: 2px;
  background: var(--ea-accent); -webkit-mask: none; mask: none;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-pull, figure.ea-pull)::after { content: none; }
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-pull, figure.ea-pull) :is(p, blockquote) {
  margin: 0; padding: 0; border: 0; background: none; quotes: none; font: inherit; letter-spacing: inherit; color: inherit;
}
:is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-pull, figure.ea-pull) blockquote::before, :is(#echoai-scope,.ea-gs) .ea-art :is(blockquote.ea-pull, figure.ea-pull) blockquote::after { content: none; }
:is(#echoai-scope,.ea-gs) .ea-art .ea-pull .ea-pull__turn { color: var(--ea-accent-text); }
:is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps { list-style: none; counter-reset: cbs; margin: var(--eaf-s-lg) 0 0; margin-block-end: var(--eaf-s-sm); padding: 0; }
:is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li {
  counter-increment: cbs; position: relative; margin: 0; padding-inline-start: 56px; padding-block-end: var(--eaf-s-lg);
  background: none; border: 0;
}
:is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li:last-child { padding-block-end: 0; }
:is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li::before {
  content: counter(cbs); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: min(var(--cb-r), 50%);
  background: var(--cb-chip-bg); color: var(--cb-chip-fg);
  font-family: var(--ea-font-en); font-size: var(--eaf-fs-ui); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
:is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li::after {
  content: ""; position: absolute; inset-inline-start: 17px; inset-block: 44px 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--ea-accent), var(--cb-duo)); opacity: .45;
}
:is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li:last-child::after { display: none; }
:is(#echoai-scope,.ea-gs) .ea-art .ea-steps__t { display: block; padding-top: calc((36px - var(--eaf-fs-read-large) * var(--eaf-lh-ui)) / 2); font-size: var(--eaf-fs-read-large); line-height: var(--eaf-lh-ui); font-weight: 700; color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-steps__d { display: block; margin-top: var(--eaf-s-3xs); font-size: var(--eaf-fs-body); line-height: var(--eaf-lh-body); color: var(--ea-ink); }
/* the copy button's room at a heading's end (40px). Every heading rule sets only its BLOCK padding and its start: a whole
   padding shorthand at a heavier selector took this room, and on a phone the button sat on the chapter's last word
   (QA2 fixer 29.09 on h3 chapters; design gate run 2, 04.10, on every bare h2: «...לצמיחה עסקית»). */
:is(#echoai-scope,.ea-gs) .ea-art [data-ea-copyhead] { padding-inline-end: 40px; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy {
  float: inline-end; flex: none; position: relative; z-index: 1; display: inline-grid; place-items: center;
  inline-size: 32px; block-size: 32px; margin: 0; padding: 0; border: 0; border-radius: min(var(--ea-radius), 50%);
  background: transparent; color: var(--ea-ink-mute); cursor: pointer; box-shadow: none;
  font: 700 var(--eaf-fs-label) / 1 var(--ea-font); letter-spacing: normal; text-transform: none;
  opacity: 0; transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}
:is(#echoai-scope,.ea-gs) .ea-art [data-ea-copyhead]:hover + button.ea-copy, :is(#echoai-scope,.ea-gs) .ea-art button.ea-copy:is(:hover, :focus-visible, [data-copied]) { opacity: 1; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy:hover { color: var(--ea-accent-text); background: var(--ea-tint-faint); }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy:focus-visible { outline: 2px solid var(--ea-focus); outline-offset: 2px; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy svg { display: block; width: 16px; height: 16px; grid-area: 1 / 1; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy .ea-copy__ok { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--cb-ease, ease); }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy .ea-copy__i { transition: opacity .2s; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy[data-copied] { color: var(--ea-accent-text); }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy[data-copied] .ea-copy__i { opacity: 0; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy[data-copied] .ea-copy__ok { opacity: 1; transform: none; }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy .ea-copy__done {
  position: absolute; inset-inline-end: calc(100% + 4px); inset-block-start: 50%; translate: 0 -50%;
  padding: 3px 9px; border-radius: 999px; background: var(--ea-ink); color: var(--ea-surface); white-space: nowrap;
  font-size: var(--eaf-fs-label); line-height: var(--eaf-lh-head); font-weight: 700; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy[data-copied] .ea-copy__done { opacity: 1; }
@media (hover: none) { :is(#echoai-scope,.ea-gs) .ea-art button.ea-copy { opacity: .8; } }
:is(#echoai-scope,.ea-gs) .ea-copy-status { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  :is(#echoai-scope,.ea-gs) .ea-art *, :is(#echoai-scope,.ea-gs) .ea-art *::before, :is(#echoai-scope,.ea-gs) .ea-art *::after { transition: none !important; animation: none !important; }
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-example.ea-example {
  position: relative; margin: var(--cb-gap) 0 0; margin-block-end: var(--cb-gap); padding: var(--eaf-s-md) 0 0;
  background: var(--cb-rule); border: 0; border-radius: 0; box-shadow: none;
}
:is(#echoai-scope,.ea-gs) .ea-art h3.ea-example__h {
  position: relative; margin: 0 0 var(--eaf-s-3xs); padding-inline-start: 28px;
  font-size: var(--eaf-fs-h3); line-height: var(--eaf-lh-head); font-weight: 700; color: var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-art h3.ea-example__h::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc((var(--eaf-lh-head) * 1em - 18px) / 2);
  width: 18px; height: 18px; background: var(--ea-graphic);
  -webkit-mask: var(--cb-scene) center / contain no-repeat; mask: var(--cb-scene) center / contain no-repeat;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-example > p { margin: var(--eaf-s-xs) 0 0; }
:is(#echoai-scope,.ea-gs) .ea-art ul.ea-paths { list-style: none; margin: var(--eaf-s-sm) 0 0; padding: 0; display: block; }
:is(#echoai-scope,.ea-gs) .ea-art ul.ea-paths > li {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.25fr); align-items: center; gap: var(--eaf-s-xs);
  margin: 0; padding: var(--eaf-s-xs) 0; border-block-start: 1px solid var(--ea-line); background: none;
  font-size: var(--eaf-fs-ui); line-height: var(--eaf-lh-ui);
}
:is(#echoai-scope,.ea-gs) .ea-art ul.ea-paths > li:last-child { border-block-end: 1px solid var(--ea-line); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-paths__if { color: var(--ea-ink-mute); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-paths__then { font-weight: 700; color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-paths__arrow {
  width: 22px; height: 22px; background: var(--ea-accent);
  -webkit-mask: var(--cb-arrow) center / contain no-repeat; mask: var(--cb-arrow) center / contain no-repeat;
}
:is(#echoai-scope,.ea-gs) .ea-art:dir(ltr) .ea-paths__arrow, :is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-art .ea-paths__arrow { transform: scaleX(-1); }
:is(#echoai-scope,.ea-gs) .ea-art p.ea-example__close { font-weight: 700; }
:is(#echoai-scope,.ea-gs) .ea-art section.ea-terms {
  margin: var(--cb-gap) 0 0; margin-block-end: var(--cb-gap); padding: var(--eaf-s-md) 0 0;
  background: var(--cb-rule); border: 0; border-radius: 0; overflow: visible;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-terms h3.ea-terms__title { margin: 0; padding: 0; line-height: var(--eaf-lh-ui); font-size: var(--eaf-fs-label); letter-spacing: .04em; font-weight: 700; color: var(--ea-accent-text); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-terms dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--eaf-s-2xs) 0 0; padding: 0; gap: var(--eaf-s-sm) var(--eaf-s-lg); }
:is(#echoai-scope,.ea-gs) .ea-art .ea-terms dl > div { padding: 0; }
:is(#echoai-scope,.ea-gs) .ea-art .ea-terms dt {
  margin: 0; font-size: var(--eaf-fs-body); line-height: var(--eaf-lh-head); font-weight: 700; color: var(--ea-ink);
  display: flex; align-items: center; gap: 10px;
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-terms dt::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
  background: var(--ea-accent);
}
:is(#echoai-scope,.ea-gs) .ea-art .ea-terms dd { margin: var(--eaf-s-3xs) 0 0; font-size: var(--eaf-fs-ui); line-height: var(--eaf-lh-body); color: var(--ea-ink); }
:is(#echoai-scope,.ea-gs) .ea-art p.ea-check__lead { margin: var(--eaf-s-sm) 0 0; font-weight: 700; }
@property --cb-edge { syntax: "<number>"; inherits: false; initial-value: .45; }
@media (max-width: 749px) {
  /* one table behaviour with the question page (R113 Q19, 3.2): columns x 9em, never a fixed 560px (src/guide-page.php
     writes --eag-cols); a 2-column table fits a phone and wraps, a wide one scrolls with its first column pinned */
  :is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) { min-width: max(100%, calc(var(--eag-cols, 4) * 9em)); }
  :is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap):not([data-ea-fits]) {
    -webkit-mask-image: linear-gradient(var(--cb-end), #000 calc(100% - 48px), rgb(0 0 0 / var(--cb-edge)));
            mask-image: linear-gradient(var(--cb-end), #000 calc(100% - 48px), rgb(0 0 0 / var(--cb-edge)));
  }
  :is(#echoai-scope,.ea-gs) .ea-art > table:not([class]) { display: block; overflow-x: auto; max-width: 100%; }
  :is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > :is(thead, tbody) > tr > :first-child:not(:only-child):nth-child(n) {
    position: sticky; inset-inline-start: 0; z-index: 1; min-width: 104px; max-width: 128px;
    padding-inline-end: var(--eaf-s-xs);
    box-shadow: inset 1px 0 0 var(--ea-line);
  }
  :is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > :is(thead, tbody) > tr > :first-child:not(:only-child):nth-child(n) { box-shadow: inset -1px 0 0 var(--ea-line); }
  :is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) > thead > tr > th:first-child { z-index: 2; }

  :is(#echoai-scope,.ea-gs) .ea-art :is(ol.ea-qlist, ol.echoai-post__question-list, ol[data-ea-check]) > li { padding-inline-start: 36px; }
  :is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li { padding-inline-start: 50px; }
  :is(#echoai-scope,.ea-gs) .ea-art ul.ea-paths > li { grid-template-columns: 1fr; gap: 2px; }
  :is(#echoai-scope,.ea-gs) .ea-art .ea-paths__arrow { display: none; }
  :is(#echoai-scope,.ea-gs) .ea-art .ea-paths__then::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; vertical-align: -1px;
    background: var(--ea-accent); -webkit-mask: var(--cb-arrow) center / contain no-repeat; mask: var(--cb-arrow) center / contain no-repeat; }
  :is(#echoai-scope,.ea-gs) .ea-art .ea-terms dl { grid-template-columns: 1fr; }
}
/* THE WRITER'S PRO TIP AS IT ARRIVES THROUGH THE DOOR (worker flag GEO_PROTIP_ENABLED, ON since 30.09 09:48 UTC; decisions/qa-3.0.1/
   template-flags/NOTES.md). The ingest door strips every style attribute and the svg (lib/sanitize.php), so the block lands as a bare
   skeleton, <div class="geo-protip"><div><div><span></span><span>טיפ מקצועי</span><span>TIP</span></div><div>the tip</div></div></div>,
   and printed "טיפ מקצועיTIP" run together with no frame. Dressed here like the guide's own tip note (round 101 GC-02): one hairline
   above, the bulb drawn on the empty first span, the label in the page's font at the label role in accent text, the tip at the
   article's own size. The third span is the writer's English "TIP" marker: furniture, removed from view and from the accessibility
   tree. Only the header frame is ever sent (the payload carries no protip_template). No !important: nothing inline arrives.
   Gate: a-pro-tip-printed-bare; tests/qa-protip-door.cjs renders the STRIPPED shape (the specimen with styles never arrives). */
:is(#echoai-scope,.ea-gs) .ea-art .geo-protip{margin:var(--eaf-s-xl,36px) 0;padding:var(--eaf-s-md,22px) 0 0;border:0;background:linear-gradient(var(--ea-line),var(--ea-line)) 0 0/100% 1px no-repeat;color:var(--ea-ink);}
:is(#echoai-scope,.ea-gs) .ea-art .geo-protip > div{margin:0;padding:0;border:0;background:none;}
/* the label at the read role, 15 (owner round 123, "15 ללחיצה, 14 למבט": the door shape carries no class, so its head row is read text; L10c, 03.10) */
:is(#echoai-scope,.ea-gs) .ea-art .geo-protip > div > div:first-child{display:flex;align-items:center;gap:6px;margin:0 0 var(--eaf-s-2xs,10px);padding:0;border:0;background:none;font-family:var(--ea-font);font-size:var(--eaf-fs-read,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ea-accent-text);}
:is(#echoai-scope,.ea-gs) .ea-art .geo-protip > div > div:first-child > span:first-child:empty{flex:none;inline-size:14px;block-size:14px;background:var(--ea-graphic);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;}
:is(#echoai-scope,.ea-gs) .ea-art .geo-protip > div > div:first-child > span:nth-child(3){display:none;}
:is(#echoai-scope,.ea-gs) .ea-art .geo-protip > div > div:last-child:not(:first-child){margin:0;padding:0;font-size:inherit;line-height:var(--eaf-lh-body,1.8);font-weight:400;color:var(--ea-ink);}
@supports (animation-timeline: scroll()) {
  :is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap)[data-ea-scroll] { animation: cb-edge linear both; animation-timeline: scroll(self inline); }
  @media (max-width: 749px) {
    :is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap, .echoai-post__table-wrap):not([data-ea-fits]) { animation: cb-edge linear both; animation-timeline: scroll(self inline); }
  }
  @keyframes cb-edge { 0%, 85% { --cb-edge: .2; } 100% { --cb-edge: 1; } }
}
@media (forced-colors: active) {
  :is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout, .echoai-post__callout, .ea-tip, .ea-example, .ea-terms, blockquote.ea-quote, blockquote:not([class])) { border-block-start: 1px solid CanvasText; }
  :is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout[data-tone="neutral"], .echoai-post__callout--sage)::before, :is(#echoai-scope,.ea-gs) .ea-art .ea-tip .ea-tip__label::before { forced-color-adjust: none; background: CanvasText; }
  :is(#echoai-scope,.ea-gs) .ea-art ol.ea-steps > li::before { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  :is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t, table.echoai-post__table, table:not([class])) :is(th, td) { border: 1px solid CanvasText; }
}
@media print {
  :is(#echoai-scope,.ea-gs) .ea-art:is(#echoai-scope, .ea-art) :is(.ea-callout, .echoai-post__callout, .ea-tip, .ea-example, .ea-terms, .ea-faq__item, .echoai-post__faq-item, ol.echoai-post__question-list > li, ol.ea-steps > li) { break-inside: avoid; }
  :is(#echoai-scope,.ea-gs) .ea-art:is(#echoai-scope, .ea-art) :is(.ea-table__wrap, .echoai-post__table-wrap) { overflow: visible; -webkit-mask-image: none; mask-image: none; animation: none; }
  :is(#echoai-scope,.ea-gs) .ea-art:is(#echoai-scope, .ea-art) :is(table.ea-t, table.echoai-post__table, table:not([class])) { min-width: 0; font-size: 11pt; }
  :is(#echoai-scope,.ea-gs) .ea-art:is(#echoai-scope, .ea-art) :is(table.ea-t, table.echoai-post__table, table:not([class])) :is(th, td) { position: static; box-shadow: none; }
  :is(#echoai-scope,.ea-gs) .ea-art:is(#echoai-scope, .ea-art) a::after { content: none; }
  :is(#echoai-scope,.ea-gs) :is(#echoai-scope, .ea-art, .ea-ans) button.ea-copy { display: none; }
}
:is(#echoai-scope,.ea-gs) .ea-art {
  --cb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cb-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --cb-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");
  --cb-scene: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M8.5 11h5M11 8.5v5'/%3E%3C/svg%3E");
  --cb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}
:is(#echoai-scope,.ea-gs) .ea-art button.ea-tmore.ea-tmore, :is(#echoai-scope,.ea-gs) .ea-art button.ea-tmore.ea-tmore:hover, :is(#echoai-scope,.ea-gs) .ea-art button.ea-tmore.ea-tmore:focus, :is(#echoai-scope,.ea-gs) .ea-art button.ea-tmore.ea-tmore:active {
  display: inline-flex; align-items: center; min-height: 44px; margin: var(--eaf-s-xs) 0 0; padding: 0 var(--eaf-s-sm);
  border: 0; border-radius: var(--ea-btn-radius); background: transparent; box-shadow: inset 0 0 0 1px var(--ea-control-edge);
  color: var(--ea-ink); font: 600 var(--eaf-fs-small)/var(--eaf-lh-ui) var(--ea-font); text-transform: none; letter-spacing: 0; cursor: pointer;
}
@media (hover:hover) { :is(#echoai-scope,.ea-gs) .ea-art button.ea-tmore.ea-tmore:hover { background: var(--ea-surface-2); } }
:is(#echoai-scope,.ea-gs) .ea-art button.ea-tmore.ea-tmore:focus-visible { outline: 2px solid var(--ea-focus); outline-offset: 2px; }
@media print { :is(#echoai-scope,.ea-gs) .ea-art .ea-tmore { display: none; } }

/* ======================= ea-guide-top (ported) ======================= */
:is(#echoai-scope,.ea-gs) .ea-g{
  --eag-font-lat:var(--ea-font-en);
  --eag-gut:calc(var(--eaf-u,1px) * 16);
  --eag-off:calc(var(--eax-toc-offset,94px) + 24px);
  --eag-rhy:1;
  font-family:var(--ea-font);color:var(--ea-ink);
  font-size:var(--eaf-fs-body,17px);line-height:var(--eaf-lh-body,1.8);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
:is(#echoai-scope,.ea-gs) .ea-g *,:is(#echoai-scope,.ea-gs) .ea-g *::before,:is(#echoai-scope,.ea-gs) .ea-g *::after{box-sizing:border-box}
/* a word with no place to break (an address, a code, 60 Latin letters) breaks at the column's edge instead of pushing the page
   sideways (QA2 judge S10: 253px of sideways scroll at 390). break-word, not anywhere: a table keeps its own width and scroll. */
:is(#echoai-scope,.ea-gs) :is(.ea-g,.ea-end){overflow-wrap:break-word}
/* a contents row (the closed row's list, the rail, the phone sheet) is a flex line, number then title, and break-word never
   shrinks a flex item below its longest word: a long chapter name ran past its row at 390 and was cut (round-101 final QA) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__t{min-width:0;overflow-wrap:anywhere}
:is(#echoai-scope,.ea-gs) .ea-g ::selection{background:var(--ea-selection);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g :focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px;border-radius:6px}
:is(#echoai-scope,.ea-gs) .ea-g svg{display:block;flex:none}
:is(#echoai-scope,.ea-gs) .ea-g [lang="en"]{font-family:var(--eag-font-lat)}
:is(#echoai-scope,.ea-gs) .ea-float{display:contents}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-rhythm="airy"]{--eag-rhy:1.25}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-rhythm="bold"]{--eag-rhy:.88}
:is(#echoai-scope,.ea-gs) .ea-g,:is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="vivid"]{
  --st-bg:var(--ea-band);--st-ink:var(--ea-on-band);--st-mute:var(--ea-on-band-muted);
  --st-line:color-mix(in srgb,var(--ea-on-band) 16%,transparent);--st-chip:color-mix(in srgb,var(--ea-on-band) 8%,transparent);
  --st-chip-line:color-mix(in srgb,var(--ea-on-band) 18%,transparent);--st-chip-hover:color-mix(in srgb,var(--ea-on-band) 15%,transparent);
  --st-ico:var(--ea-accent-on-band);--st-tile:var(--ea-accent-on-band);--st-on-tile:var(--ea-on-accent-on-band);
  --st-num:var(--ea-accent-on-band-text);--st-focus:var(--ea-focus-on-band);--st-ring:var(--ea-band);
  --st-glow-a:var(--ea-glow-a-dark);--st-glow-b:var(--ea-glow-b-dark);--st-blend:plus-lighter;--st-glow-on:1;
  --st-media-ring:color-mix(in srgb,var(--ea-on-band) 10%,transparent);
  --st-pad:calc(var(--eaf-u390,0px) * 20 + var(--eaf-u1440,1px) * 56);--st-radius:calc(var(--ea-radius) * 1.4);
  --sum-bg:var(--ea-tint);--sum-ring:var(--ea-line-on-tint);   /* one flat ground, no gradient (R129 Q2, 3.2: see «בקצרה» KEEPS ITS BOX below) */
  --bl-bg:var(--ea-band);--bl-fg:var(--ea-on-band);--bl-mute:var(--ea-on-band-muted);
  --bl-a:var(--ea-accent-on-band);--bl-b:var(--ea-spark-on-band);--bl-ico-bg:color-mix(in srgb,var(--ea-on-band) 10%,transparent);--bl-ico:var(--ea-accent-on-band-text);
  --bl-glow-a:var(--ea-glow-a-dark);--bl-glow-b:var(--ea-glow-b-dark);--bl-blend:plus-lighter;--bl-lineglow:.65;--bl-ring:transparent;
  --line-a:var(--ea-accent);--line-b:var(--ea-spark);
}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="balanced"]{
  --st-bg:var(--ea-tint);--st-ink:var(--ea-ink);--st-mute:var(--ea-ink-mute-on-tint);
  --st-line:var(--ea-line-on-tint);--st-chip:var(--ea-surface);--st-chip-line:var(--ea-line);--st-chip-hover:var(--ea-tint-strong);
  --st-ico:var(--ea-graphic);--st-tile:var(--ea-accent-fill);--st-on-tile:var(--ea-on-accent);
  --st-num:var(--ea-accent-text);--st-focus:var(--ea-focus);--st-ring:var(--ea-surface);
  --st-glow-a:var(--ea-glow-a);--st-glow-b:var(--ea-glow-b);--st-blend:normal;
  --st-media-ring:transparent;
  --sum-bg:var(--ea-tint);
  --bl-bg:var(--ea-tint-strong);--bl-fg:var(--ea-ink);--bl-mute:var(--ea-ink-mute-on-tint-strong);
  --bl-a:var(--ea-accent);--bl-b:var(--ea-spark);--bl-ico-bg:var(--ea-accent-fill);--bl-ico:var(--ea-on-accent);
  --bl-glow-a:var(--ea-glow-b);--bl-glow-b:transparent;--bl-blend:normal;--bl-lineglow:0;--bl-p:var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="quiet"]{
  --st-bg:var(--ea-surface);--st-ink:var(--ea-ink);--st-mute:var(--ea-ink-mute);
  --st-line:var(--ea-line);--st-chip:var(--ea-surface);--st-chip-line:var(--ea-line);--st-chip-hover:var(--ea-surface-2);
  --st-ico:var(--ea-graphic);--st-tile:var(--ea-accent-fill);--st-on-tile:var(--ea-on-accent);
  --st-num:var(--ea-accent-text);--st-focus:var(--ea-focus);--st-ring:var(--ea-surface);
  --st-glow-on:0;--st-media-ring:transparent;--st-pad:0px;--st-radius:0px;
  --sum-bg:var(--ea-surface-2);--sum-ring:var(--ea-line);
  --bl-bg:var(--ea-surface-2);--bl-fg:var(--ea-ink);--bl-mute:var(--ea-ink-mute);
  --bl-a:var(--ea-accent);--bl-b:var(--ea-spark);--bl-ico-bg:var(--ea-tint-strong);--bl-ico:var(--ea-accent-ink);
  --bl-glow-a:transparent;--bl-glow-b:transparent;--bl-blend:normal;--bl-lineglow:0;--bl-ring:var(--ea-line);--bl-p:var(--ea-ink);
}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero{position:relative;isolation:isolate;overflow:hidden;
  width:min(var(--ea-stage),100% - 2 * var(--eag-gut));margin:var(--eaf-s-sm,18px) auto 0;
  padding:calc(var(--eaf-s-lg,28px) * var(--eag-rhy)) var(--st-pad) 0;border-radius:var(--st-radius);
  background:var(--st-bg);color:var(--st-ink)}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="quiet"] .ea-hero{padding-top:var(--eaf-s-3xs,4px);overflow:visible}
/* a plain or cover opening has no glow, no padding and no radius to clip (the glow is hidden and the picture clips itself), so from
   750 its edge no longer cuts a focus ring either: the crumbs, the listening button, the contents' summary and rows sit on that
   edge, and their ring lost its outer side in branded and magazine (QA2 judge S1; tests/qa-focus-ring.cjs). The phone keeps the
   clip: its picture bleeds to the page edge through a negative margin. Quiet luxury already opened it (above). */
@media (min-width:750px){:is(#echoai-scope,.ea-gs) :is(.ea-g[data-ea-hero="plain"],.ea-g[data-ea-hero="cover"],[data-ea-hero="plain"] .ea-g,[data-ea-hero="cover"] .ea-g) .ea-hero{overflow:visible}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__glow{position:absolute;z-index:-1;pointer-events:none;inset-block-start:0;inset-inline-end:0;width:60%;height:46%;
  opacity:var(--st-glow-on);mix-blend-mode:var(--st-blend);
  background:radial-gradient(60% 70% at 40% 30%,var(--st-glow-a),transparent 70%),radial-gradient(50% 55% at 15% 85%,var(--st-glow-b),transparent 72%);
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 42%),linear-gradient(to top,transparent 0,#000 45%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,transparent 0,#000 42%),linear-gradient(to top,transparent 0,#000 45%);mask-composite:intersect}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-hero__glow,:is(#echoai-scope,.ea-gs) .ea-g[dir="ltr"] .ea-hero__glow{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to top,transparent 0,#000 45%);
  mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to top,transparent 0,#000 45%)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb{font-size:var(--eaf-fs-read,15px);line-height:var(--eaf-lh-ui,1.5);color:var(--st-mute);margin:0 0 calc(var(--eaf-s-md,22px) * var(--eag-rhy))}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb ol{display:flex;flex-wrap:wrap;gap:var(--eaf-s-3xs,4px) var(--eaf-s-2xs,10px);align-items:center;list-style:none;margin:0;padding:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb li{display:flex;align-items:center;gap:var(--eaf-s-2xs,10px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb a{color:inherit;text-decoration:none;border-radius:4px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb a:hover{color:var(--st-ink);text-decoration:underline;text-underline-offset:4px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-crumb [aria-current]{color:var(--st-ink);font-weight:500}

:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__text{min-width:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__h1.ea-hero__h1{margin:0;max-width:none;font-weight:800;font-size:var(--eaf-fs-display,44px);line-height:var(--eaf-lh-head,1.25);
  letter-spacing:-.012em;color:var(--st-ink);text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__stand{margin:calc(var(--eaf-s-xs,14px) * var(--eag-rhy)) 0 0;max-width:38em;font-size:var(--eaf-fs-lead,20px);line-height:var(--eaf-lh-ui,1.5);color:var(--st-mute);text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eaf-s-xs,14px) var(--eaf-s-sm,18px);margin-top:calc(var(--eaf-s-lg,28px) * var(--eag-rhy))}
/* EXPERT-CARD (owner 06.10: «לפחות שיהיה עיגול נעים ברור בעין»): the monogram is the stage's own tile, the accent's fill on a
   light stage and the accent's light on the band, the initials crisp on it, a 2px gap in the stage's ground and a hairline of
   the tile around it. It was painted with the band's BUTTON role on a vivid page (below), which is white for a brand whose
   accent is under 3:1 on the band: a white circle on a white page, the initials floating alone beside the name. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__mono{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--st-tile);color:var(--st-on-tile);font-weight:700;font-size:var(--eaf-fs-small,14.5px);line-height:1;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  box-shadow:0 0 0 2px var(--st-ring),0 0 0 3px color-mix(in srgb,var(--st-tile) 32%,var(--st-ring))}
@media (forced-colors:active){:is(#echoai-scope,.ea-gs) .ea-g .ea-by__mono{border:2px solid CanvasText}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__who{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5em;min-width:0;
  font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);color:var(--st-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__name{font-weight:700;color:var(--st-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__sep{opacity:.7}
:is(#echoai-scope,.ea-gs) .ea-by__mono::before{content:attr(data-ea-mono);display:contents}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by time,:is(#echoai-scope,.ea-gs) .ea-g .ea-by__read{font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__tools{display:flex;align-items:center;gap:var(--eaf-s-2xs,10px);margin-inline-start:auto}
:is(#echoai-scope,.ea-gs) .ea-g a.ea-lang{font-size:var(--eaf-fs-read,15px);font-weight:600;color:var(--st-mute);text-decoration:underline;text-decoration-color:var(--st-line);
  text-underline-offset:4px;border-radius:4px;white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea-g a.ea-lang:hover{color:var(--st-ink);text-decoration-color:var(--st-ico)}
:is(#echoai-scope,.ea-gs) .ea-g a.ea-lang:focus-visible{outline:2px solid var(--st-focus);outline-offset:2px}
/* share (owner round 101 Q3): one button and its menu, styled by lib/reader-tools.php's own sheet (assets/reader-tools.css) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-kf{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--eaf-u,1px) * 170),1fr));gap:var(--eaf-s-sm,18px) var(--eaf-s-xl,36px);
  margin:calc(var(--eaf-s-lg,28px) * var(--eag-rhy)) 0 0;padding:calc(var(--eaf-s-md,22px) * var(--eag-rhy)) 0 0;list-style:none;border-top:1px solid var(--st-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-kf li{display:flex;flex-direction:column;gap:var(--eaf-s-3xs,4px);margin:0;min-width:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-kf__n{font-size:var(--eaf-fs-h2,29px);line-height:1;font-weight:800;font-variant-numeric:tabular-nums;color:var(--st-num);letter-spacing:-.01em}
:is(#echoai-scope,.ea-gs) .ea-g .ea-kf__t{font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);color:var(--st-mute);text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__media{margin:calc(var(--eaf-s-2xl,44px) * var(--eag-rhy)) 0 0;position:relative;border-radius:var(--ea-radius);overflow:hidden;aspect-ratio:16/9;
  background:var(--ea-band);box-shadow:0 0 0 1px var(--st-media-ring),0 22px 50px -22px rgba(var(--ea-shadow-rgb),.5)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
:is(#echoai-scope,.ea-gs) .ea-g .ea-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--eaf-s-2xs,10px);
  padding:var(--eaf-s-xl,36px);color:var(--ea-on-band);background:var(--ea-band);overflow:hidden}
:is(#echoai-scope,.ea-gs) .ea-g .ea-face__m{position:relative;margin:0;font-size:var(--eaf-fs-small,14.5px);color:var(--ea-on-band-muted)}
/* NO STRIPES (D1; the owner's visual-gate approval of the guide head, 04.10): the face is the solid brand ground and the kind
   word, set like the catalogue's key on its face (assets/catalogue.css section 6), nothing drawn over it */
:is(#echoai-scope,.ea-gs) .ea-g .ea-face .ea-face__m:not(.ea-x){font-size:min(var(--eaf-fs-section,31px),max(1.9375rem,31px));line-height:1.13;font-weight:800;letter-spacing:-.02em;color:var(--ea-on-band)}
/* a word is never broken inside itself on a face (I-73): the guide's break-word stops at its face */
:is(#echoai-scope,.ea-gs) .ea-g .ea-face__m{overflow-wrap:normal;word-break:keep-all;-webkit-hyphens:none;hyphens:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__media[data-face="0"] .ea-face{display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__media[data-face="1"] img{display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc{position:relative;margin-top:calc(var(--eaf-s-lg,28px) * var(--eag-rhy));border-top:1px solid var(--st-line);padding:var(--eaf-s-2xs,10px) 0 var(--eaf-s-xs,14px)}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="quiet"] .ea-toc{border-bottom:1px solid var(--st-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--eaf-s-xs,14px);width:max-content;max-width:100%;min-height:52px;padding:var(--eaf-s-3xs,4px) 0;border-radius:12px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc summary::-webkit-details-marker{display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc summary:focus-visible{outline-color:var(--st-focus)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--st-tile);color:var(--st-on-tile)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__label{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em;line-height:var(--eaf-lh-head,1.25)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__label b{font-size:var(--eaf-fs-large,18px);font-weight:700;color:var(--st-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__label :is(.ea-toc__n,.ea-toc__sep){font-size:var(--eaf-fs-ui,15px);font-weight:500;color:var(--st-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__chev{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--st-chip);box-shadow:inset 0 0 0 1px var(--st-chip-line);color:var(--st-ink);transition:transform .35s var(--ea-ease),background .2s}
@media (hover:hover){:is(#echoai-scope,.ea-gs) .ea-g .ea-toc summary:hover .ea-toc__chev{background:var(--st-chip-hover)}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc details[open] .ea-toc__chev{transform:rotate(180deg)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__panel{display:block;padding:var(--eaf-s-3xs,4px) 0 var(--eaf-s-sm,18px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc ol{list-style:none;margin:0;padding:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__a{display:flex;gap:var(--eaf-s-2xs,10px);align-items:baseline;padding:6px 8px;margin-inline:-8px;border-radius:10px;
  color:var(--st-ink);text-decoration:none;font-size:var(--eaf-fs-read-ui,15px);line-height:var(--eaf-lh-ui,1.5);transition:background .18s}
@media (hover:hover){:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__a:hover{background:var(--st-chip-hover);color:var(--st-ink)}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__a:focus-visible{outline-color:var(--st-focus)}
/* the article's own contents list sits on the page, not on the band: it takes the page's focus colour back from the vivid
   default (3.4.8, NB 258, XRAY M4 / 12.10 F1: the white ring on white, 0 changed pixels; gate a-contents-ring-white-on-the-page) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-toc{--st-focus:var(--ea-focus)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-n{flex:none;min-width:22px;font-size:var(--eaf-fs-label,12px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ea-accent-text)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc .ea-n{color:var(--st-num)}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-hero="plain"] .ea-hero__h1.ea-hero__h1{font-weight:700;letter-spacing:-.02em;line-height:var(--eaf-lh-head,1.25)}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-hero="plain"] .ea-hero__glow{display:none}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-hero="plain"] .ea-hero__media{box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-hero="plain"] .ea-kf__n{font-weight:600}
:is(#echoai-scope,.ea-gs) .ea-g .ea-col{max-width:calc(var(--ea-col) + 2 * var(--eag-gut));margin:0 auto;padding-inline:var(--eag-gut)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-body h2:focus,:is(#echoai-scope,.ea-gs) .ea-g .ea-body h3:focus{outline:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-lit{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--ea-radius)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-lit::before,:is(#echoai-scope,.ea-gs) .ea-g .ea-lit::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:1;pointer-events:none;
  background:linear-gradient(to left,var(--la) 0,var(--lb) 55%,transparent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-lit::after{height:12px;filter:blur(10px);opacity:var(--lglow,0)}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-lit::before,:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-lit::after{background:linear-gradient(to right,var(--la) 0,var(--lb) 55%,transparent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair__head{display:flex;align-items:center;gap:var(--eaf-s-xs,14px);margin:0 0 var(--eaf-s-xs,14px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair__ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair :is(h2,h3).ea-pair__h{margin:0;letter-spacing:0;scroll-margin-top:var(--eag-off)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair__meta{margin-inline-start:auto;font-size:var(--eaf-fs-meta,13px);white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair__meta::after{content:attr(data-meta)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair p{margin:0 0 var(--eaf-s-xs,14px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum{--la:var(--line-a);--lb:var(--line-b);margin-top:var(--eaf-s-2xl,44px);
  padding:var(--eaf-s-lg,28px) var(--eaf-s-2xl,44px) var(--eaf-s-xl,36px);background:var(--sum-bg);box-shadow:inset 0 0 0 1px var(--sum-ring)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__ico{background:var(--ea-accent-fill);color:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum :is(h2,h3).ea-pair__h{font-size:var(--eaf-fs-h3,21px);line-height:var(--eaf-lh-head,1.25);font-weight:800;color:var(--ea-accent-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__meta{color:var(--ea-ink-mute-on-tint)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum p{color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__lead{font-size:var(--eaf-fs-read-lede,24px);line-height:var(--eaf-lh-ui,1.5);font-weight:600;letter-spacing:-.005em;text-wrap:pretty;margin-bottom:var(--eaf-s-sm,18px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl{margin-top:var(--eaf-s-4xl,70px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl__band{--la:var(--bl-a);--lb:var(--bl-b);--lglow:var(--bl-lineglow);
  padding:var(--eaf-s-2xl,44px) var(--eaf-s-2xl,44px) var(--eaf-s-xl,36px);color:var(--bl-fg);
  background:
    radial-gradient(55% 90% at 8% 0%,var(--bl-glow-b),transparent 70%),
    radial-gradient(45% 80% at 100% 100%,var(--bl-glow-a),transparent 70%),
    var(--bl-bg);
  box-shadow:inset 0 0 0 1px var(--bl-ring),0 30px 60px -34px rgba(var(--ea-shadow-rgb),.55)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl .ea-pair__ico{width:30px;height:30px;border-radius:9px;background:var(--bl-ico-bg);color:var(--bl-ico)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl :is(h2,h3).ea-pair__h{font-size:var(--eaf-fs-read-ui,15px);line-height:var(--eaf-lh-head,1.25);font-weight:700;letter-spacing:.01em;color:var(--bl-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl .ea-bl__thesis{margin:0 0 var(--eaf-s-sm,18px);font-size:var(--eaf-fs-thesis,38px);line-height:var(--eaf-lh-head,1.25);font-weight:800;letter-spacing:-.012em;text-wrap:balance;color:var(--bl-fg)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl__band p:not(.ea-bl__thesis){color:var(--bl-p,var(--bl-mute));margin:0;font-size:var(--eaf-fs-read-large,18px);line-height:var(--eaf-lh-body,1.8)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl__band ::selection{background:color-mix(in srgb,var(--ea-on-band) 28%,transparent);color:inherit}
/* PHRASE BOXES (row 162, 10.10.2026; src/guide-page.php echoai_al_g_phrases): on a phone the bottom line's label and big
   line, «בקצרה»'s label and the FAQ's title break only between their phrases, never mid-phrase (the design gate's check
   13), where that costs nothing. Each phrase is an inline box, so the line breaks between boxes, balanced where the
   browser can and greedily where it cannot (the boxes are the fallback); a phrase longer than its line wraps inside its
   own box. They are boxes only while the line carries data-ea-ph="on", which guide.js sets after laying the line out both
   ways (no more lines, no new line of one word, nothing past its box, no empty line; review r1 measured all four on the
   partner stand-in), so a page with no script draws 3.2.7's line. Only under 750, where the big line holds 8 to 9.4 of its
   own letters' widths: from 750 it holds 12.6 and more and a box only added a line. Never the cover's title (boxed, the
   partner stand-in's covers grew 4 to 6 lines), never the contents' rows (balanced, a row split «Employee / Voice» and
   grew 1px at 1440). The labels are balanced on a phone. From 750 nothing here changes a line. The space between two
   boxes has no line height of its own (.ea-ps): set in a fallback font it made every line of the big line 10px taller. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-ps{line-height:0}
@media (max-width:749px){:is(#echoai-scope,.ea-gs) .ea-g [data-ea-ph="on"] > .ea-ph{display:inline-block;max-width:100%}:is(#echoai-scope,.ea-gs) .ea-g .ea-pair :is(h2,h3).ea-pair__h{text-wrap:balance}}
/* THE BAND'S COPY LINK (row 162). guide.js floats it at the end of the big line's first line (32px, 44 to a finger), and a
   box never sits beside a float it does not fit beside: a first phrase as wide as the column dropped below the link and
   left the first line empty (measured at 390: «אסטרטגיית השקעות...» one line down, the big line 135px for 3 lines). So the
   first phrase leaves the link its width. And the link is taller than one line of the big line to a finger (44 against
   33.75 at 390), so it narrowed the second line too and a phrase too wide for what was left dropped 10px: its room in
   the flow is one line of the big line, and it still draws and answers at 44. Both only where the big line has boxes: a
   band whose first paragraph is not a big line keeps the link exactly as it was (measured: gann's band, 3.2.7 to the pixel). */
@media (max-width:749px){:is(#echoai-scope,.ea-gs) .ea-g .ea-bl .ea-pair__head + button.ea-copy + .ea-bl__thesis[data-ea-ph="on"] > .ea-ph:first-child{max-width:calc(100% - 32px)}}
@media (max-width:749px) and (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea-g .ea-bl .ea-pair__head + button.ea-copy + .ea-bl__thesis[data-ea-ph="on"] > .ea-ph:first-child{max-width:calc(100% - 44px)}}
@media (max-width:749px) and (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea-g .ea-bl .ea-pair__head + button.ea-copy:has(+ .ea-bl__thesis[data-ea-ph="on"]):not(.ea-x){margin-block-end:min(0px,var(--eaf-fs-thesis,38px) * var(--eaf-lh-head,1.25) - 44px)}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl__rest{padding:var(--eaf-s-lg,28px) 0 0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl__rest p{margin:0 0 var(--eaf-s-sm,18px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail{display:none}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-col{max-width:none;width:min(var(--ea-stage),100% - 2 * var(--eag-gut));margin-inline:auto;padding-inline:0}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-col>.ea-body{max-width:var(--ea-col);margin-inline:auto 0}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail{--rw:calc(var(--eaf-u,1px) * 300);
    display:flex;flex-direction:column;position:fixed;z-index:6;top:var(--eag-off);width:var(--rw);
    inset-inline-start:max(var(--eag-gut),50% - var(--ea-stage) / 2);
    max-height:calc(100vh - var(--eag-off) - 28px);
    padding:var(--eaf-s-sm,18px) var(--eaf-s-sm,18px) var(--eaf-s-xs,14px);border-radius:calc(var(--ea-radius) + 2px);
    background:color-mix(in srgb,var(--ea-surface) 90%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:inset 0 0 0 1px var(--ea-line),0 10px 24px -18px rgba(var(--ea-shadow-rgb),.4);
    opacity:0;visibility:hidden;transform:translateX(var(--eag-slide,16px));
    transition:opacity .45s var(--ea-ease),transform .45s var(--ea-ease),visibility 0s linear .45s}
  :is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-rail{--eag-slide:-16px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail[data-shown="1"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__scroll{display:none}
}
@media (min-width:1360px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__scroll{display:block}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__now,:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__all.ea-rail__all{display:none}
}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--eaf-s-2xs,10px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__t{font-size:var(--eaf-fs-small,14.5px);font-weight:800;color:var(--ea-ink);font-variant-numeric:tabular-nums}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__pct{font-size:var(--eaf-fs-meta,13px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ea-accent-text)}
/* the meter keeps its 6px in the rail's flex column whatever the list's length (3.2.3; the design gate of 07.10 measured 3px
   beside a 24-row list, 5 beside 9) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-meter{position:relative;flex-shrink:0;height:6px;margin:var(--eaf-s-2xs,10px) 0 6px;border-radius:6px;background:var(--ea-surface-2);box-shadow:inset 0 0 0 1px var(--ea-line);overflow:hidden}
:is(#echoai-scope,.ea-gs) .ea-g .ea-meter i{position:absolute;inset:0;border-radius:6px;transform:scaleX(var(--s,0));transform-origin:right center;transition:transform .3s var(--ea-ease)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-meter i{background:linear-gradient(to left,var(--ea-graphic),var(--ea-spark))}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-meter i{transform-origin:left center}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-meter i{background:linear-gradient(to right,var(--ea-graphic),var(--ea-spark))}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__left{font-size:var(--eaf-fs-meta,13px);color:var(--ea-ink-mute);font-variant-numeric:tabular-nums}
/* the time line under the bar: the minutes left at the start, the percent at the end (3.3.2; the heading stands alone) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__time{display:flex;align-items:baseline;justify-content:space-between;gap:var(--eaf-s-2xs,10px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__time .ea-rail__pct{margin-inline-start:auto;font-size:var(--eaf-fs-meta,13px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__now{margin:var(--eaf-s-2xs,10px) 0 2px;font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;color:var(--ea-ink);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__pins{display:flex;flex-wrap:wrap;gap:6px;margin:var(--eaf-s-xs,14px) 0 var(--eaf-s-2xs,10px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pin{flex:1 1 auto;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 10px;border-radius:10px;
  background:var(--ea-tint);color:var(--ea-accent-ink);font-size:var(--eaf-fs-read,15px);font-weight:700;text-decoration:none;transition:background .18s}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pin:hover{background:var(--ea-tint-strong);color:var(--ea-accent-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pin[aria-current="location"]{background:var(--ea-accent-fill);color:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__all.ea-rail__all,:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__all.ea-rail__all:hover,:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__all.ea-rail__all:focus,:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__all.ea-rail__all:active{
  all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:6px 10px;border-radius:10px;cursor:pointer;
  font-family:var(--ea-font);font-size:var(--eaf-fs-read,15px);font-weight:700;color:var(--ea-ink);box-shadow:inset 0 0 0 1px var(--ea-line);background:var(--ea-surface)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__all.ea-rail__all:hover{background:var(--ea-surface-2)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__all.ea-rail__all:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail__scroll{overflow-y:auto;overscroll-behavior:contain;margin-inline:-6px;padding-inline:6px;scrollbar-width:thin;scrollbar-color:var(--ea-line) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 14px),transparent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail ol,:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet ol{list-style:none;margin:0;padding:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a{position:relative;display:flex;gap:8px;align-items:baseline;margin:1px 0;padding:6px 8px;border-radius:10px;font-size:var(--eaf-fs-read,15px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute);text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a::before{content:"";position:absolute;inset-inline-start:calc(var(--rl-x) + var(--rl-w) / 2 - var(--rd) / 2 - var(--rl-pad));top:13px;width:var(--rd);height:var(--rd);border-radius:50%;
  background:var(--ea-surface);box-shadow:0 0 0 2px var(--ea-line);transition:background .25s,box-shadow .25s,transform .3s var(--ea-ease);transform:scale(.8)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a:hover{color:var(--ea-ink);background:var(--ea-surface-2)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a[data-past="1"]::before{background:var(--ea-graphic);box-shadow:0 0 0 2px var(--ea-graphic)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a[aria-current="location"]{background:var(--ea-tint-strong);color:var(--ea-accent-ink);font-weight:700}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a[aria-current="location"]::before{transform:scale(1.25);background:var(--ea-surface);box-shadow:0 0 0 3px var(--ea-graphic)}
/* at the page's end the last section is current AND read: its ring is filled like every dot above it (the design director's verdict, 06.10) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a[aria-current="location"][data-past="1"]::before{background:var(--ea-graphic)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a[aria-current="location"] .ea-n{color:var(--ea-accent-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-sub{padding-inline-start:30px;font-size:var(--eaf-fs-read,15px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet{position:fixed;z-index:100000;inset:var(--eag-sheet-top,0px) 0 0 0;width:100%;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;overscroll-behavior:contain;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet:not([open]){display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet::backdrop{background:transparent}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__scrim{position:absolute;inset:0;background:rgba(var(--ea-shadow-rgb),.42);opacity:0;touch-action:none;transition:opacity .22s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet[data-open="1"] .ea-sheet__scrim{opacity:1}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__panel{position:absolute;inset-inline:0;bottom:0;max-height:min(calc(100% - 12px),calc(var(--eaf-u,1px) * 720));display:flex;flex-direction:column;
  background:var(--ea-surface);border-radius:24px 24px 0 0;padding:0 var(--eaf-s-sm,18px) calc(var(--eaf-s-sm,18px) + env(safe-area-inset-bottom,0px));
  opacity:0;transform:translateY(48px);transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1);box-shadow:0 -20px 50px -20px rgba(var(--ea-shadow-rgb),.4)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet[data-open="1"] .ea-sheet__panel{opacity:1;transform:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__panel::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--ea-line);margin:10px auto 6px}
@media (min-width:960px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__panel{inset-block:0;inset-inline-start:0;inset-inline-end:auto;width:min(calc(var(--eaf-u,1px) * 420),100% - 40px);max-height:none;border-radius:0;padding-top:var(--eaf-s-sm,18px);transform:translateX(48px)}
  :is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-sheet__panel{transform:translateX(-48px)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__panel::before{display:none}
}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__head{display:flex;align-items:center;gap:var(--eaf-s-xs,14px);padding:6px 0 4px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__head b{font-size:var(--eaf-fs-large,18px);font-weight:800}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-x.ea-x,:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-x.ea-x:hover,:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-x.ea-x:focus,:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-x.ea-x:active{
  all:unset;box-sizing:border-box;margin-inline-start:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--ea-surface-2);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-x.ea-x:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-rail__pins{margin:var(--eaf-s-2xs,10px) 0 6px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__scroll{overflow-y:auto;overscroll-behavior:contain;padding:4px 0 8px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-toc__a{display:flex;gap:var(--eaf-s-2xs,10px);align-items:center;padding:10px;min-height:44px;border-radius:10px;font-size:var(--eaf-fs-read-ui,15px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink);text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-toc__a:hover{background:var(--ea-surface-2);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-toc__a[aria-current="location"]{background:var(--ea-tint-strong);color:var(--ea-accent-ink);font-weight:700}
body[data-ea-lock="1"]{overflow:hidden}
@media (max-width:959px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero__glow{width:100%;height:40%;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 70%);mask-image:linear-gradient(to top,transparent 0,#000 70%)}
  :is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="balanced"] .ea-hero__glow{display:none}
}
@media (max-width:749px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero{width:100%;margin-top:0;border-radius:0;padding-inline:calc(var(--st-pad) + var(--eag-gut))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero__media{margin-inline:calc(-1 * (var(--st-pad) + var(--eag-gut)));border-radius:0;box-shadow:none}
}
@supports (width:1cqw){
  @media (max-width:749px){
    :is(#echoai-scope,.ea-gs) .ea-g .ea-hero{width:calc(var(--eaf-page,100%) - var(--eag-sbw,0px));margin-inline:calc(50% - (var(--eaf-page,100%) - var(--eag-sbw,0px)) / 2)}
  }
}
@media (max-width:749px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__name{order:1}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__who > .ea-by__sep:nth-child(2){display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__sep{order:2}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__read{order:3}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__role{order:4;flex-basis:100%}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__tools{grid-column:1 / -1;margin-inline-start:0;justify-content:space-between}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-kf{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-toc summary{width:100%}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-toc summary .ea-toc__chev{margin-inline-start:auto}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-pair__meta{display:none}
}
@media (prefers-reduced-motion:reduce){
  :is(#echoai-scope,.ea-gs) .ea-g *,:is(#echoai-scope,.ea-gs) .ea-g *::before,:is(#echoai-scope,.ea-gs) .ea-g *::after{transition:none !important;animation:none !important}
  html:has(.ea-gs){scroll-behavior:auto}
}
@media (forced-colors:active){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-lit,:is(#echoai-scope,.ea-gs) .ea-g .ea-hero,:is(#echoai-scope,.ea-gs) .ea-g .ea-rail{border:1px solid CanvasText}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-lit::before{background:Highlight}
}
@media print{
  :is(#echoai-scope,.ea-gs) .ea-g:is(#echoai-scope,.ea-g) :is(.ea-rail,.ea-fab,.ea-sheet,.ea-jumps,.ea-toc__chev,.ea-hero__teaser,.ea-hero__glow,.ea-by__tools){display:none}
  :is(#echoai-scope,.ea-gs) .ea-g:is(#echoai-scope,.ea-g) .ea-hero{background:none;color:var(--ea-ink);padding-inline:0;width:100%}
  :is(#echoai-scope,.ea-gs) .ea-g:is(#echoai-scope,.ea-g) .ea-hero *{color:var(--ea-ink)}
  :is(#echoai-scope,.ea-gs) .ea-g:is(#echoai-scope,.ea-g) .ea-lit{background:none;color:var(--ea-ink);border:1px solid var(--ea-line)}
  :is(#echoai-scope,.ea-gs) .ea-g:is(#echoai-scope,.ea-g) .ea-lit p{color:var(--ea-ink)}
}

/* ======================= ea-cta (ported) ======================= */
:is(#echoai-scope,.ea-gs) :where(.ea){ --eag-wide-max:1040px; --eag-gutter:var(--eaf-gutter, 24px);
  --eag-to-end:to left; --eag-to-start:to right; --eag-fwd:-1; --eag-sweep:245deg; --eag-sweep-2:212deg;
  --eag-x-end:0%; --eag-x-start:100%; --eag-x-end-15:15%; --eag-x-end-20:20%; --eag-x-end-45:45%; --eag-x-end-70:70%;
  --eag-aur-a:30%; --eag-aur-b:26%; --eag-beam:22%; --eag-ring:17%;
  --eag-band-aur-a:58%; --eag-band-aur-b:62%; --eag-band-grid:10%;
  --eag-topline:6px;
  --eag-q-bg:linear-gradient(165deg, var(--ea-tint), color-mix(in oklab, var(--ea-tint) 38%, var(--ea-surface)));
  --eag-q-line:color-mix(in oklab, var(--ea-accent) 18%, var(--ea-line));
  --eag-chip-bg:var(--ea-accent-fill); --eag-chip-fg:var(--ea-on-accent);
  --eag-hub-bg:linear-gradient(160deg, var(--ea-tint), color-mix(in oklab, var(--ea-tint) 42%, var(--ea-surface)));
  --eag-breathe-bg:var(--ea-tint); --eag-breathe-mute:var(--ea-ink-mute-on-tint);
}
:is(#echoai-scope,.ea-gs) .ea:dir(ltr), :is(#echoai-scope,.ea-gs) [dir="ltr"] .ea{
  --eag-to-end:to right; --eag-to-start:to left; --eag-fwd:1; --eag-sweep:115deg; --eag-sweep-2:148deg;
  --eag-x-end:100%; --eag-x-start:0%; --eag-x-end-15:85%; --eag-x-end-20:80%; --eag-x-end-45:55%; --eag-x-end-70:30%;
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="balanced"]{
  --eag-aur-a:17%; --eag-aur-b:13%; --eag-beam:13%; --eag-ring:12%;
  --eag-band-aur-a:38%; --eag-band-aur-b:40%; --eag-band-grid:7%;
  --eag-topline:5px;
  --eag-q-bg:var(--ea-surface-2); --eag-q-line:var(--ea-line);
  --eag-hub-bg:var(--ea-tint);
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="quiet"]{
  --eag-aur-a:0%; --eag-aur-b:0%; --eag-beam:0%; --eag-ring:9%;
  --eag-band-aur-a:0%; --eag-band-aur-b:0%; --eag-band-grid:6%;
  --eag-topline:4px;
  --eag-q-bg:var(--ea-surface-2); --eag-q-line:var(--ea-line);
  --eag-chip-bg:var(--ea-tint-strong); --eag-chip-fg:var(--ea-accent-ink);
  --eag-hub-bg:var(--ea-surface-2);
}
:is(#echoai-scope,.ea-gs) .ea ::selection{background:color-mix(in oklab, var(--ea-accent) 30%, transparent);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea .ea-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:is(#echoai-scope,.ea-gs) .ea-end{display:block;box-sizing:border-box;inline-size:100%;margin:0;padding:0;text-align:start}
:is(#echoai-scope,.ea-gs) .ea-end > *{box-sizing:border-box}
:is(#echoai-scope,.ea-gs) .ea .ea-col{inline-size:min(var(--ea-col), 100% - 2 * var(--eag-gutter));margin-inline:auto}
:is(#echoai-scope,.ea-gs) .ea .ea-wide{inline-size:min(var(--eag-wide-max), 100% - 2 * var(--eag-gutter));margin-inline:auto}
:is(#echoai-scope,.ea-gs) .ea a.ea-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--eaf-s-2xs, 10px);box-sizing:border-box;
  min-height:calc(var(--eaf-u390, 0px) * 50 + var(--eaf-u1440, 1px) * 54);max-inline-size:100%;min-inline-size:0;margin:0;
  padding-block:var(--eaf-s-xs, 14px);padding-inline:var(--eaf-s-lg, 28px) var(--eaf-s-md, 22px);
  border:0;border-radius:var(--ea-btn-radius);
  background:var(--ea-accent-fill);color:var(--ea-on-accent);
  font:700 var(--eaf-fs-small, 14.5px)/var(--eaf-lh-head, 1.25) var(--ea-font);letter-spacing:0;text-align:center;
  text-decoration:none;white-space:normal;text-wrap:balance;overflow-wrap:anywhere;
  box-shadow:0 12px 26px -12px color-mix(in oklab, var(--ea-accent-fill) 75%, transparent), inset 0 1px 0 color-mix(in oklab, var(--ea-on-accent) 16%, transparent);
  transition:background-color .18s ease, box-shadow .18s ease, translate .18s cubic-bezier(.2,.8,.2,1);
}
:is(#echoai-scope,.ea-gs) .ea a.ea-btn:hover{background:var(--ea-accent-hover);color:var(--ea-on-accent);text-decoration:none;translate:0 -1px;box-shadow:0 16px 30px -12px color-mix(in oklab, var(--ea-accent-fill) 85%, transparent), inset 0 1px 0 color-mix(in oklab, var(--ea-on-accent) 16%, transparent)}
:is(#echoai-scope,.ea-gs) .ea a.ea-btn:active{translate:0 0}
:is(#echoai-scope,.ea-gs) .ea a.ea-btn:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px}
:is(#echoai-scope,.ea-gs) .ea .ea-ico{flex:none;width:1.25em;height:1.25em;transition:translate .22s cubic-bezier(.2,.8,.2,1)}
:is(#echoai-scope,.ea-gs) .ea:dir(ltr) .ea-ico-fwd{scale:-1 1}
:is(#echoai-scope,.ea-gs) .ea a:hover .ea-ico-fwd{translate:calc(var(--eag-fwd) * 4px) 0}
:is(#echoai-scope,.ea-gs) .ea a.ea-btn--sm{min-height:calc(var(--eaf-u390, 0px) * 46 + var(--eaf-u1440, 1px) * 48);padding-block:var(--eaf-s-2xs, 10px);padding-inline:var(--eaf-s-md, 22px) var(--eaf-s-sm, 18px);gap:var(--eaf-s-2xs, 10px);max-inline-size:17em}
:is(#echoai-scope,.ea-gs) .ea .ea-cta{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;margin-block:var(--eaf-s-4xl, 70px) 0;font-family:var(--ea-font);text-align:start}
:is(#echoai-scope,.ea-gs) .ea .ea-cta *,:is(#echoai-scope,.ea-gs) .ea .ea-cta *::before,:is(#echoai-scope,.ea-gs) .ea .ea-cta *::after{box-sizing:border-box}
:is(#echoai-scope,.ea-gs) .ea .ea-cta::before{
  content:"";position:absolute;z-index:3;inset-block-start:0;inset-inline:0;height:var(--eag-topline);
  background:linear-gradient(var(--eag-to-end), var(--ea-accent), var(--ea-spark) 58%, color-mix(in oklab, var(--ea-spark) 8%, transparent));
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="quiet"] .ea-cta::before{background:var(--ea-accent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__art{position:absolute;z-index:0;inset-block:0;inset-inline-end:0;width:min(64%, 640px);pointer-events:none;
  -webkit-mask-image:linear-gradient(var(--eag-to-start), #000 30%, transparent 96%);mask-image:linear-gradient(var(--eag-to-start), #000 30%, transparent 96%)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__art{
  background:
    linear-gradient(var(--eag-sweep), transparent 30%, color-mix(in oklab, var(--ea-accent) var(--eag-beam), transparent) 46%, transparent 62%),
    linear-gradient(var(--eag-sweep-2), transparent 44%, color-mix(in oklab, var(--ea-spark) var(--eag-beam), transparent) 60%, transparent 76%),
    radial-gradient(circle 320px at var(--eag-x-end-15) 20%, color-mix(in oklab, var(--ea-accent) var(--eag-aur-b), transparent), transparent);
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-art="signal"] .ea-cta--sig .ea-cta__art{
  background:
    radial-gradient(circle 300px at var(--eag-x-end-15) 42%, color-mix(in oklab, var(--ea-accent) var(--eag-aur-a), transparent), transparent),
    radial-gradient(circle 260px at var(--eag-x-end-45) 108%, color-mix(in oklab, var(--ea-spark) var(--eag-aur-b), transparent), transparent);
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-art="signal"] .ea-cta--sig .ea-cta__art::before{
  content:"";position:absolute;width:680px;aspect-ratio:1;border-radius:50%;
  inset-block-start:50%;inset-inline-end:-250px;translate:0 -50%;
  background:repeating-radial-gradient(circle, transparent 0 41px, color-mix(in oklab, var(--ea-accent) var(--eag-ring), transparent) 41px 42.5px);
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent);mask-image:radial-gradient(closest-side, #000 30%, transparent);
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-art="signal"] .ea-cta--sig .ea-cta__art::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  inset-block-start:calc(50% - 7px);inset-inline-end:83px;background:var(--ea-accent);
  box-shadow:0 0 0 9px color-mix(in oklab, var(--ea-accent) 16%, transparent), 0 0 0 20px color-mix(in oklab, var(--ea-accent) 7%, transparent);
}
:is(#echoai-scope,.ea-gs) .ea[data-ea-art="none"] .ea-cta--sig .ea-cta__art{display:none}

:is(#echoai-scope,.ea-gs) .ea .ea-cta__body{position:relative;z-index:1;max-width:calc(var(--eaf-u, 1px) * 780);padding-block:var(--eaf-s-3xl, 58px);padding-inline:var(--eaf-s-4xl, 70px)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__eyebrow{display:flex;align-items:center;gap:var(--eaf-s-2xs, 10px);margin:0 0 var(--eaf-s-xs, 14px);padding:0;font-size:var(--eaf-fs-label, 12px);line-height:var(--eaf-lh-ui, 1.5);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ea-accent-text)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__eyebrow::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--ea-accent)}
/* Hebrew is never letter-spaced (3.4.8, NB 258, XRAY L1 / 12.10 C1; the catalogue's reset, catalogue.css): the class doubled and
   :not(.ea-x) (1,5,0) so the reset outweighs the airy rhythm's later :is() rule (1,4,0); gate a-hebrew-eyebrow-letter-spaced */
:is(#echoai-scope,.ea-gs) .ea .ea-cta__eyebrow.ea-cta__eyebrow:lang(he):not(.ea-x){letter-spacing:0}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__h{margin:0;padding:0;font-size:var(--eaf-fs-section, 31px);line-height:var(--eaf-lh-head, 1.25);font-weight:800;letter-spacing:-.012em;color:inherit;text-wrap:balance}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__lead{margin:var(--eaf-s-sm, 18px) 0 0;padding:0;font-size:var(--eaf-fs-large, 18px);line-height:var(--eaf-lh-ui, 1.5);font-weight:600;color:inherit}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__p{margin:var(--eaf-s-2xs, 10px) 0 0;padding:0;max-width:var(--ea-measure-text, 31em);font-size:var(--eaf-fs-body, 17px);line-height:var(--eaf-lh-body, 1.8);font-weight:400;color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eaf-s-xs, 14px) var(--eaf-s-md, 22px);margin:var(--eaf-s-lg, 28px) 0 0}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--sig{
  background:var(--ea-surface);color:var(--ea-ink);
  border:1px solid color-mix(in oklab, var(--ea-accent) 22%, var(--ea-line));
  border-radius:var(--ea-radius);
  box-shadow:0 1px 2px rgba(var(--ea-shadow-rgb),.05), 0 26px 52px -18px rgba(var(--ea-shadow-rgb),.2);
}
/* ⛔ THE END CARD ON THE BRAND'S GROUND ON EVERY WIDTH (ONE-CTA-PER-SCREEN, the owner's poll of 04.10, «גם בטלפון: הכרטיס בסוף
   על צבע המותג»; the desktop band's own ground, «פס הפנייה בסוף בצבע המותג, לא לבן»): the card variant's white surface becomes
   the brand's light ground, the band's lighter end, flat: the card's words stand top to bottom, and on the tint itself the
   demo's eyebrow read 4.32:1 (measured at 390); on this ground every word and the button read 4.5:1 or more on the demo, a
   light brand and a dark one (the band from 1200 runs the tint across, below) */
:is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > .ea-cta.ea-cta--sig{background:color-mix(in oklab,var(--ea-tint) 70%,var(--ea-surface))}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band{
  background:var(--ea-band-live);color:var(--ea-on-band);border:0;border-radius:var(--ea-radius);
  box-shadow:0 30px 60px -24px rgba(var(--ea-shadow-rgb),.45);
}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band .ea-cta__art{
  width:min(72%, 700px);
  background:
    linear-gradient(var(--eag-sweep), transparent 44%, color-mix(in oklab, var(--ea-glow-2) var(--eag-band-aur-b), transparent) 50.5%, transparent 57%),
    radial-gradient(ellipse 380px 300px at var(--eag-x-end-15) 18%, color-mix(in oklab, var(--ea-glow) var(--eag-band-aur-a), transparent), transparent);
}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band .ea-cta__eyebrow{color:var(--ea-on-band-muted)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band .ea-cta__eyebrow::before{background:var(--ea-band-button)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band .ea-cta__p{color:var(--ea-on-band-muted)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band a.ea-btn{background:var(--ea-band-button);color:var(--ea-on-band-button);box-shadow:0 12px 24px -12px rgba(var(--ea-shadow-rgb),.55), inset 0 1px 0 color-mix(in oklab, var(--ea-on-band-button) 10%, transparent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band a.ea-btn:hover{background:var(--ea-band-button-hover);color:var(--ea-on-band-button)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band{--ea-focus:var(--ea-focus-on-band)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta.ea-cta--slim{
  margin-block:var(--eaf-s-3xl, 58px);
  border:0;border-radius:0;background:none;box-shadow:none;color:var(--ea-ink);overflow:visible;
}
:is(#echoai-scope,.ea-gs) .ea .ea-cta.ea-cta--slim::before{display:block;content:"";position:absolute;z-index:0;inset-block-start:0;inset-inline:0;height:3px;border-radius:0;
  background:linear-gradient(var(--eag-to-end), var(--ea-accent) 0, var(--ea-spark) 55%, transparent)}
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="quiet"] .ea-cta.ea-cta--slim::before{background:var(--ea-accent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__slim-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--eaf-s-xs, 14px) var(--eaf-s-lg, 28px);
  padding-block:calc(3px + var(--eaf-s-md, 22px)) 0;padding-inline:0}
:is(#echoai-scope,.ea-gs) .ea .ea-cta__slim-h{flex:1 1 18em;min-width:0;margin:0;padding:0;font-size:var(--eaf-fs-large, 18px);line-height:var(--eaf-lh-ui, 1.5);font-weight:700;color:var(--ea-ink);text-wrap:balance}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim a.ea-btn{flex:none;box-shadow:0 1px 2px rgba(var(--ea-shadow-rgb),.12), 0 6px 14px -8px rgba(var(--ea-shadow-rgb),.45)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs{margin-block:var(--eaf-s-5xl, 90px) 0;font-family:var(--ea-font)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs[hidden]{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__h,:is(#echoai-scope,.ea-gs) .ea .ea-gmore__h{margin:0;padding:0;font-size:var(--eaf-fs-section, 31px);line-height:var(--eaf-lh-head, 1.25);font-weight:800;letter-spacing:-.01em;color:var(--ea-ink);text-wrap:balance}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__grid{list-style:none;margin:var(--eaf-s-lg, 28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--eaf-s-xs, 14px)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__grid > li[hidden]{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-q{
  position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;
  padding:var(--eaf-s-md, 22px);
  border-radius:var(--eaf-radius-lg, 16px);background:var(--eag-q-bg);border:1px solid var(--eag-q-line);
  color:var(--ea-ink);
  transition:translate .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
:is(#echoai-scope,.ea-gs) .ea .ea-q:is(:hover,:focus-within){background:var(--eag-breathe-bg);translate:0 -3px;border-color:color-mix(in oklab, var(--ea-accent) 45%, var(--ea-line));box-shadow:0 18px 34px -18px rgba(var(--ea-shadow-rgb),.28)}
:is(#echoai-scope,.ea-gs) .ea .ea-q:is(:hover,:focus-within) .ea-q__x{color:var(--eag-breathe-mute)}
:is(#echoai-scope,.ea-gs) .ea .ea-q:focus-within{outline:2px solid var(--ea-focus);outline-offset:3px}
:is(#echoai-scope,.ea-gs) .ea .ea-q__t{margin:0;padding:0;font-size:var(--eaf-fs-read-large, 18px);line-height:var(--eaf-lh-ui, 1.5);font-weight:700;color:var(--ea-ink);letter-spacing:0;text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea .ea-q__a{color:var(--ea-ink);text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea .ea-q__a:hover{color:var(--ea-ink);text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea .ea-q__a:focus-visible{outline:none}
:is(#echoai-scope,.ea-gs) .ea .ea-q__a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
:is(#echoai-scope,.ea-gs) .ea .ea-q__x{margin:var(--eaf-s-2xs, 10px) 0 0;padding:0;font-size:var(--eaf-fs-small, 14.5px);line-height:var(--eaf-lh-ui, 1.5);color:var(--ea-ink-mute);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;transition:color .2s ease}
/* WHOLE WORDS UNDER A CLAMP (LEAN 3.1 L7, NO-CUT X1). A clamp that runs out of room drops LETTERS to fit its "…"
   ("ובונה תרבו…", measured in round 102); an inline box is hidden whole instead (CSS Overflow 3, the same in Chromium,
   WebKit and Firefox), so the words of every ruled clamp are boxes of their own (echoai_al_whole_words(), lib/config.php;
   words() in guide.js) and the clamp ends on a whole word. The spaces stay text between the boxes, so lines still break
   there; a box wider than its line wraps inside itself. */
:is(#echoai-scope,.ea-gs) :is(.ea-q__x,.ea-toc__t,.ea-rail__now,.ea-topbar__c) .ea-w{display:inline-block;max-width:100%;overflow-wrap:anywhere}
/* On a FILLED card (balanced and quiet intensity paint the question card surface-2) the teaser reads the grey made
   for a filled surface. ink-mute on #efeee9 was 4.34:1 in the magazine (WCAG 1.4.3 asks 4.5; integration pass 1,
   15 nodes at 1440 and 390); ink-mute-on-tint is 5.95:1 there, the grey the hover already used. */
:is(#echoai-scope,.ea-gs) .ea:is([data-ea-intensity="balanced"],[data-ea-intensity="quiet"]) .ea-q__x{color:var(--ea-ink-mute-on-tint,var(--ea-ink-mute))}
:is(#echoai-scope,.ea-gs) .ea .ea-qs--compact .ea-q__t{font-size:var(--eaf-fs-read-large, 18px)}
:is(#echoai-scope,.ea-gs) .ea .ea-q[data-ea-new]{animation:ea-q-in .25s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--eag-i, 0) * 30ms)}
@keyframes ea-q-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more,
:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more:hover,
:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more:focus,
:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more:active{
  display:flex;align-items:center;justify-content:center;gap:var(--eaf-s-2xs, 10px);box-sizing:border-box;
  inline-size:max-content;max-inline-size:100%;min-height:calc(var(--eaf-u390, 0px) * 46 + var(--eaf-u1440, 1px) * 48);
  margin:var(--eaf-s-lg, 28px) auto 0;padding-block:var(--eaf-s-2xs, 10px);padding-inline:var(--eaf-s-lg, 28px);
  border:1.5px solid var(--ea-ink);border-radius:var(--ea-btn-radius);background:var(--ea-surface);color:var(--ea-ink);
  font:700 var(--eaf-fs-small, 14.5px)/var(--eaf-lh-head, 1.25) var(--ea-font);letter-spacing:0;text-transform:none;white-space:normal;
  cursor:pointer;box-shadow:none;transition:background-color .18s ease, color .18s ease, translate .18s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more:hover{background:var(--ea-ink);color:var(--ea-surface);translate:0 -1px}}
:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px}
:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more[hidden]{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__more .ea-ico{width:1.15em;height:1.15em}
@media (hover:hover){:is(#echoai-scope,.ea-gs) .ea .ea-qs__more:hover .ea-ico{translate:0 2px}}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__more[aria-expanded="true"] .ea-ico{rotate:180deg}
:is(#echoai-scope,.ea-gs) .ea .ea-gmore{margin-block:var(--eaf-s-5xl, 90px) 0;padding-block:var(--eaf-s-2xl, 44px) 0;padding-inline:0;border-top:1px solid var(--ea-line);font-family:var(--ea-font)}
:is(#echoai-scope,.ea-gs) .ea .ea-gmore__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--eaf-s-sm, 18px);flex-wrap:wrap}
:is(#echoai-scope,.ea-gs) .ea a.ea-gmore__all{display:inline-flex;align-items:center;gap:6px;font-size:var(--eaf-fs-ui, 15px);font-weight:700;color:var(--ea-accent-text);text-decoration:underline;text-decoration-thickness:max(1.5px,.09em);text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--ea-accent-text) 40%, transparent);text-decoration-skip-ink:none}
:is(#echoai-scope,.ea-gs) .ea a.ea-gmore__all:hover{color:var(--ea-accent-ink);text-decoration-color:currentColor;text-decoration-thickness:3px}
:is(#echoai-scope,.ea-gs) .ea a.ea-gmore__all:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px;border-radius:4px}
:is(#echoai-scope,.ea-gs) .ea a.ea-gmore__all .ea-ico{width:1.05em;height:1.05em}
:is(#echoai-scope,.ea-gs) .ea .ea-gmore__grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--eaf-s-sm, 18px);margin:var(--eaf-s-lg, 28px) 0 0}
:is(#echoai-scope,.ea-gs) .ea .ea-mg{position:relative;display:flex;flex-direction:column;margin:0;border-radius:var(--ea-radius);overflow:hidden;background:var(--ea-surface);border:1px solid var(--ea-line);transition:translate .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within){translate:0 -3px;border-color:color-mix(in oklab, var(--ea-accent) 40%, var(--ea-line));box-shadow:0 20px 38px -20px rgba(var(--ea-shadow-rgb),.3)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:focus-within{outline:2px solid var(--ea-focus);outline-offset:3px}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:calc(var(--eaf-u390, 0px) * 128 + var(--eaf-u1440, 1px) * 156);
  padding-block:calc(var(--eaf-u390, 0px) * 64 + var(--eaf-u1440, 1px) * 72) var(--eaf-s-md, 22px);padding-inline:var(--eaf-s-md, 22px);background:var(--ea-band-live);color:var(--ea-on-band);
}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face::before,:is(#echoai-scope,.ea-gs) .ea .ea-mg__face::after{content:"";position:absolute;z-index:-1;pointer-events:none}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face::before{inset:0;transform-origin:var(--eag-x-end) 0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within) .ea-mg__face::before{transform:scale(1.1)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__name{position:relative;font-size:var(--eaf-fs-h3, 21px);line-height:var(--eaf-lh-head, 1.25);font-weight:800;letter-spacing:-.01em;text-wrap:balance}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__body{display:flex;flex-direction:column;flex:1;padding:var(--eaf-s-md, 22px);transition:background-color .2s ease}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within) .ea-mg__body{background:var(--eag-breathe-bg)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within) .ea-mg__x{color:var(--eag-breathe-mute)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__t{margin:0;padding:0;font-size:var(--eaf-fs-read-large, 18px);line-height:var(--eaf-lh-ui, 1.5);font-weight:700;color:var(--ea-ink);letter-spacing:0;text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea a.ea-mg__link{color:inherit;text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea a.ea-mg__link:hover{color:inherit;text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea a.ea-mg__link:focus-visible{outline:none}
:is(#echoai-scope,.ea-gs) .ea a.ea-mg__link::after{content:"";position:absolute;inset:0;z-index:2}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__x{margin:var(--eaf-s-2xs, 10px) 0 0;padding:0;font-size:var(--eaf-fs-small, 14.5px);line-height:var(--eaf-lh-ui, 1.5);color:var(--ea-ink-mute);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;transition:color .2s ease}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--eaf-s-sm, 18px);font-size:var(--eaf-fs-small, 14.5px);font-weight:700;color:var(--ea-accent-text)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__go .ea-ico{width:1.1em;height:1.1em}
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="quiet"] .ea-mg__face{background:var(--ea-surface-2);color:var(--ea-ink);box-shadow:inset 0 4px 0 var(--ea-accent)}
@media (max-width:699px){
  :is(#echoai-scope,.ea-gs) .ea .ea-qs__grid{grid-template-columns:minmax(0,1fr)}
  :is(#echoai-scope,.ea-gs) .ea .ea-gmore__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%, 330px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-block-end:10px;scrollbar-width:thin;scrollbar-color:color-mix(in oklab, var(--ea-accent) 45%, transparent) transparent}
  :is(#echoai-scope,.ea-gs) .ea .ea-mg{scroll-snap-align:start}
}
@media (max-width:599px){
  :is(#echoai-scope,.ea-gs) .ea .ea-cta__body{padding-block:var(--eaf-s-2xl, 44px) var(--eaf-s-lg, 28px);padding-inline:var(--eaf-s-md, 22px)}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta:not(.ea-cta--slim) a.ea-btn{width:100%}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta__art{width:100%;-webkit-mask-image:linear-gradient(to bottom, #000 0, transparent 46%);mask-image:linear-gradient(to bottom, #000 0, transparent 46%)}
  :is(#echoai-scope,.ea-gs) .ea[data-ea-art="signal"] .ea-cta--sig .ea-cta__art::before{width:420px;inset-block-start:-170px;inset-inline-end:-190px;translate:none}
  :is(#echoai-scope,.ea-gs) .ea[data-ea-art="signal"] .ea-cta--sig .ea-cta__art::after{inset-block-start:33px;inset-inline-end:23px}
}
@media (max-width:539px){
  :is(#echoai-scope,.ea-gs) .ea .ea-cta__slim-in{flex-direction:column;align-items:flex-start}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta__slim-h{flex:none}
}
@media (prefers-reduced-motion:reduce){
  :is(#echoai-scope,.ea-gs) .ea a.ea-btn,:is(#echoai-scope,.ea-gs) .ea .ea-q,:is(#echoai-scope,.ea-gs) .ea .ea-mg,:is(#echoai-scope,.ea-gs) .ea .ea-ico,:is(#echoai-scope,.ea-gs) .ea .ea-mg__face::before,:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more{transition:none}
  :is(#echoai-scope,.ea-gs) .ea a.ea-btn:hover,:is(#echoai-scope,.ea-gs) .ea .ea-q:is(:hover,:focus-within),:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within),:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more:hover{translate:none}
  :is(#echoai-scope,.ea-gs) .ea a:hover .ea-ico-fwd,:is(#echoai-scope,.ea-gs) .ea .ea-qs__more:hover .ea-ico{translate:none}
  :is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within) .ea-mg__face::before{transform:none}
  :is(#echoai-scope,.ea-gs) .ea .ea-q[data-ea-new]{animation:ea-more-fade .25s ease both}
}
@media (forced-colors:active){
  :is(#echoai-scope,.ea-gs) .ea .ea-cta:not(.ea-cta--slim),:is(#echoai-scope,.ea-gs) .ea .ea-q,:is(#echoai-scope,.ea-gs) .ea .ea-mg{border:1px solid CanvasText}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta.ea-cta--slim::before{background:CanvasText}
  :is(#echoai-scope,.ea-gs) .ea a.ea-btn,:is(#echoai-scope,.ea-gs) .ea .ea-qs button.ea-qs__more.ea-qs__more{border:1px solid ButtonText}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta__art,:is(#echoai-scope,.ea-gs) .ea .ea-cta__glow{display:none}
}
@media print{
  :is(#echoai-scope,.ea-gs) .ea .ea-cta__art,:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim,:is(#echoai-scope,.ea-gs) .ea .ea-qs__more{display:none}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta--band,:is(#echoai-scope,.ea-gs) .ea .ea-mg__face{background:none;color:var(--ea-ink);border:1px solid var(--ea-line)}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta--band .ea-cta__p,:is(#echoai-scope,.ea-gs) .ea .ea-cta--band .ea-cta__eyebrow{color:var(--ea-ink-mute)}
}

/* ======================= ea-unify (ported) ======================= */
:is(#echoai-scope,.ea-gs) :where(.ea-g,.ea) :where(p,li,td,dd,blockquote){line-height:var(--eaf-lh-body)}
:is(#echoai-scope,.ea-gs) :where(.ea-g,.ea) :where(h1,h2,h3,h4,.ea-cta__h,.ea-gcard__title,.ea-q__t,.ea-mg__t,.ea-qrow__t){line-height:var(--eaf-lh-head)}
:is(#echoai-scope,.ea-gs) :where(.ea-g,.ea) :where(button,label,summary,th,time,.ea-pin,.ea-toc__a,.ea-crumb,.ea-ans-crumb,.ea-facts,.ea-count,.ea-btn){line-height:var(--eaf-lh-ui)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art{font-size:var(--ea-fs-body);line-height:var(--ea-lh-body)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(p:not([class]),p.echoai-post__p){margin-top:var(--ea-sp-p);text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art p.echoai-post__lead{font-size:var(--ea-fs-lead);line-height:var(--eaf-lh-body)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(h2.ea-h2,h2.echoai-post__h2,h2:not([class])){
  margin-top:var(--ea-sp-chapter);font-size:var(--ea-fs-h2);line-height:var(--eaf-lh-head);font-weight:800;letter-spacing:-.008em;
  text-wrap:balance;scroll-margin-top:var(--eag-off)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(h3.ea-h3,h3.echoai-post__h3,h3:not([class]),:is(h3,h4).echoai-post__faq-q){scroll-margin-top:var(--eag-off)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(h3.ea-h3,h3.echoai-post__h3,h3:not([class])):not(:has(+ :is(.echoai-post__callout,.ea-callout))){font-size:var(--ea-fs-h3)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(.ea-callout,.echoai-post__callout,.echoai-post__table-wrap,.ea-table__wrap,.echoai-post__faq){margin-top:var(--ea-sp-block)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair :is(h2,h3).ea-pair__h{scroll-margin-top:var(--eag-off)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__lead{font-size:var(--ea-fs-lede);line-height:var(--eaf-lh-ui)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-pair{margin-top:var(--ea-sp-block)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-bl{margin-top:calc(var(--ea-sp-chapter) + 8px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__h1.ea-hero__h1{font-size:var(--ea-fs-h1)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__stand{font-size:var(--ea-fs-stand)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ::target-text{background:var(--ea-mark);color:var(--ea-ink);text-decoration:underline 2px var(--ea-accent-text);text-underline-offset:4px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol.echoai-post__question-list[data-ea-check]{counter-reset:cbq ea-done}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol.echoai-post__question-list[data-ea-check]>li:has(input:checked){counter-increment:cbq ea-done}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art p.ea-chk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 0;font-size:var(--eaf-fs-ui);line-height:var(--eaf-lh-ui);color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-chk__n::before{content:counter(ea-done);font-weight:800;color:var(--ea-ink);font-variant-numeric:tabular-nums}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-chk__dots{display:flex;gap:5px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-chk__dots i{width:22px;height:6px;border-radius:3px;background:var(--ea-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(1) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(1),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(2) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(2),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(3) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(3),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(4) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(4),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(5) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(5),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(6) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(6),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(7) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(7),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(8) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(8),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(9) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(9),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(10) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(10),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(11) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(11),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:has(>li:nth-child(12) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(12){background:var(--ea-graphic)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-chk__done{display:none;font-weight:700;color:var(--ea-accent-ink);background:var(--ea-tint);padding:4px 12px;border-radius:999px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check]:not(:has(input:not(:checked)))+.ea-chk__foot .ea-chk__done{display:inline-flex}
@supports not selector(:has(*)){:is(#echoai-scope,.ea-gs) .ea-g .ea-art p.ea-chk__foot{display:none}}
@media print{:is(#echoai-scope,.ea-gs) .ea-g .ea-art p.ea-chk__foot{display:none}:is(#echoai-scope,.ea-gs) .ea-g .ea-art ol[data-ea-check] input{border-color:CanvasText}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-slim-slot{margin-top:var(--ea-sp-block)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-slim-slot .ea-cta--slim{margin-block:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-slim-slot+:is(h2){margin-top:calc(var(--ea-sp-chapter) - 8px)}
:is(#echoai-scope,.ea-gs) .ea-ans .ea-end>*{--eag-gutter:0px}
:is(#echoai-scope,.ea-gs) .ea-ans .ea-end .ea-cta{margin-block-start:var(--ea-sp-chapter)}
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end{--eag-end-above:calc(var(--eaf-u,1px) * 48);--eag-end-ask:calc(var(--eaf-u,1px) * 32);--eag-end-foot:calc(var(--eaf-u,1px) * 56);padding-block-end:var(--eag-end-foot)}
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>*{--eag-gutter:16px}
:is(#echoai-scope,.ea-gs) .ea:not([data-ea-intensity="balanced"]):not([data-ea-intensity="quiet"]){
  --eag-q-bg:var(--ea-surface);--eag-q-hover-bg:var(--ea-surface);--eag-q-line:var(--ea-line);
  --eag-hub-bg:var(--ea-surface);--eag-slim-bg:var(--ea-surface)}
:is(#echoai-scope,.ea-gs) .ea a.ea-gmore__all{padding:8px 16px 8px 14px;border-radius:999px;background:var(--ea-ink);color:var(--ea-surface);text-decoration:none}
:is(#echoai-scope,.ea-gs) .ea a.ea-gmore__all:hover{background:var(--ea-ink);color:var(--ea-surface);text-decoration:none;translate:0 -1px}
:is(#echoai-scope,.ea-gs) .ea-art .ea-from strong{color:var(--ea-accent-text);margin-inline-end:.3em}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim{position:relative;overflow:hidden;border-color:var(--ea-line)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim::before{display:block;content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(to left,var(--ea-accent) 0,var(--ea-spark) 55%,transparent)}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea .ea-cta--slim::before{background:linear-gradient(to right,var(--ea-accent) 0,var(--ea-spark) 55%,transparent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim a.ea-btn,:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim a.ea-btn:hover{box-shadow:0 1px 2px rgba(var(--ea-shadow-rgb),.12),0 6px 14px -8px rgba(var(--ea-shadow-rgb),.45)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim .ea-cta__glow{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face[data-ea-face="streak"]::before{
  background:linear-gradient(90deg,var(--ea-accent-on-band),var(--ea-spark-on-band) 30%,var(--ea-accent-on-band) 60%,var(--ea-spark-on-band));
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 7px,#000 7px 8px,transparent 8px 15px),radial-gradient(90% 120% at 12% 0%,#000 0,rgba(0,0,0,.5) 40%,transparent 75%);
  -webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 7px,#000 7px 8px,transparent 8px 15px),radial-gradient(90% 120% at 12% 0%,#000 0,rgba(0,0,0,.5) 40%,transparent 75%);
  mask-composite:intersect}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:nth-child(2) .ea-mg__face[data-ea-face="streak"]::before{background-position:40% 0;background-size:200% 100%}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:nth-child(3) .ea-mg__face[data-ea-face="streak"]::before{background-position:80% 0;background-size:200% 100%}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face[data-ea-face="streak"]::after{content:none}
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="quiet"] .ea-mg__face[data-ea-face="streak"]::before{background:linear-gradient(90deg,var(--ea-accent),var(--ea-accent-ui))}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__scroll{display:block}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__all.ea-rail__all{display:none}
  :is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-wide{--eag-wide-max:var(--eaf-measure-page)}
  :is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-col{margin-inline:auto calc((100cqi - min(var(--eaf-measure-page),100cqi - 32px)) / 2)}
}
/* THE DOTS ON THE LINE, EXACTLY (3.2, the owner's WhatsApp of 06.10 15:45, item 10: «נראה שהנקודות העיגולים לא ישבים בדיוק
   במרכוז נכון אל מול הקו ... לדייק»): the line's place and stroke and the dot's size are one set of numbers, and the dot's
   place is computed from them (the line's start plus half its stroke, less half the dot, less the row's indent), so its
   centre is the line's centre at every size: it sat 1px off (a fixed -14px against a line centred at 9px). Its scale for the
   unread, read and current states keeps that centre. Gate a-rail-dot-off-its-line; tests/qa-rail-dot-centre-browser.cjs. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail{--rl-x:8px;--rl-w:2px;--rl-pad:18px;--rd:8px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat{position:relative;list-style:none;margin:0;padding:0;padding-inline-start:var(--rl-pad)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat::before,:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat::after{content:"";position:absolute;inset-block:14px;inset-inline-start:var(--rl-x);width:var(--rl-w);border-radius:2px;background:var(--ea-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat::after{background:linear-gradient(to bottom,var(--ea-graphic),var(--ea-accent-ui));transform:scaleY(var(--fs,0));transform-origin:top center;transition:transform .12s linear}
/* the rail's chapter names (wave 6 CB-07; LEAN 3.1 L7, NO-CUT item 3): every name whole up to three lines, only a
   fourth clamps, on a whole word (each word its own box, .ea-w, src/guide-page.php), and the whole name shows on hover
   and on keyboard focus. Was one line with "…" for every row but the current one and its neighbours. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-toc__t{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-toc__a:is(:hover,:focus-visible) .ea-toc__t{-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-toc__a::before{z-index:1}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-pin[aria-current="location"]{background:var(--ea-accent-fill);color:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__panel{display:block}
/* owner round 101 (M1): the contents open as ONE column in the reading lane; two balanced columns moved rows the reader
   had already seen (TOC-05) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__panel .ea-flat{max-inline-size:var(--ea-col,772px);margin:0;padding:6px 0 4px;list-style:none}
/* the motion is CSS only (TOC-04): height and fade on the native disclosure's content, about 250ms to open and 200ms to
   close. Under reduced motion there is no height motion, only the fade. A browser without ::details-content drops these
   rules and opens at once, never broken; the page serves the row closed, so no script decides any of it. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc details{interpolate-size:allow-keywords}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size .2s var(--ea-ease),opacity .2s var(--ea-ease),content-visibility .2s allow-discrete}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc details[open]::details-content{block-size:auto;opacity:1;transition-duration:.25s}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea-g .ea-toc details::details-content{transition-property:opacity,content-visibility}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc .ea-un .ea-n::before,:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-un .ea-n::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--st-ico,var(--ea-accent))}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-flat{list-style:none;margin:0;padding:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail[data-shown="0"] *{visibility:hidden}
html:has(.ea-gs){scroll-padding-block:calc(var(--eax-toc-offset,94px) + 16px) 24px}
:is(#echoai-scope,.ea-gs) :where(.ea-g,.ea-ans,.ea-end) :is(a,button,input,summary){scroll-margin-block:calc(var(--eax-toc-offset,94px) + 16px) 24px}
:is(#echoai-scope,.ea-gs) .ea-g:not([data-ea-intensity="balanced"]):not([data-ea-intensity="quiet"]) .ea-hero{--ea-focus:var(--ea-focus-on-band)}
/* the bottom line sits on the band in the vivid intensity (--bl-bg above): its ring takes the band's focus by TOKEN, so the
   copy button's heavier focus rule reads it too (QA2 judge B2) */
:is(#echoai-scope,.ea-gs) .ea-g:not([data-ea-intensity="balanced"]):not([data-ea-intensity="quiet"]) .ea-bl__band{--ea-focus:var(--ea-focus-on-band)}
@media (max-width:749px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-face__m{color:var(--ea-on-band)}
}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar{display:none}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-rail{display:none}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g{--eag-off:calc(var(--eax-toc-offset,94px) + 48px + 16px)}
html[data-ea-nav="bar"]:has(#ea-guide){scroll-padding-block-start:calc(var(--eax-toc-offset,94px) + 48px + 16px)}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar,html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar:hover,html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar:focus,html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar:active{
  all:unset;box-sizing:border-box;position:fixed;z-index:29;inset-inline:0;top:var(--eax-toc-offset,0px);
  display:flex;align-items:center;gap:12px;min-height:48px;padding:5px 16px 7px;cursor:pointer;
  background:color-mix(in srgb,var(--ea-surface) 95%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ea-ink);font-family:var(--ea-font);box-shadow:0 10px 20px -16px rgba(var(--ea-shadow-rgb),.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s cubic-bezier(.22,.61,.36,1),transform .22s cubic-bezier(.22,.61,.36,1),visibility 0s linear .22s}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar[data-shown="1"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar:focus-visible{outline:2px solid var(--ea-focus);outline-offset:-4px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:var(--eaf-lh-head)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__k{font-size:var(--eaf-fs-read);font-weight:700;color:var(--ea-accent-text);font-variant-numeric:tabular-nums}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__c{font-size:var(--eaf-fs-read);font-weight:700;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__pct{font-size:var(--eaf-fs-meta);font-weight:700;color:var(--ea-ink-mute);font-variant-numeric:tabular-nums}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__chev{color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--ea-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__bar i{position:absolute;inset:0;transform:scaleX(var(--s,0));transform-origin:right center;transition:transform .3s var(--ea-ease);
  background:linear-gradient(to left,var(--ea-accent),var(--ea-spark))}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-topbar__bar i{transform-origin:left center;background:linear-gradient(to right,var(--ea-accent),var(--ea-spark))}
:is(#echoai-scope,.ea-gs) .ea-nw{white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(.ea-callout,.echoai-post__callout)>p:first-child{margin-top:0}
:is(#echoai-scope,.ea-gs) .ea:not([data-ea-intensity="balanced"]):not([data-ea-intensity="quiet"]) .ea-mg__face{background:var(--ea-band)}
@media (min-width:1200px) and (max-width:1359px){:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-n{display:none}}
@media (min-width:1200px){
  /* two lines kept, and never shrunk under them by the rail's flex column (the list below is the part that scrolls) */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__now{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;flex:none;height:calc(2em * var(--eaf-lh-ui,1.5));margin:8px 0 0;overflow:hidden;
    font-size:var(--eaf-fs-read);line-height:var(--eaf-lh-ui);font-weight:600;color:var(--ea-ink-mute)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__now:not(:empty)::before{content:"";display:inline-block;vertical-align:middle;width:10px;height:2px;margin-inline-end:7px;border-radius:2px;background:var(--ea-graphic)}
}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a,:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-toc__a{transition:background-color .2s var(--ea-ease),color .2s var(--ea-ease)}
:is(#echoai-scope,.ea-gs) .ea .ea-q,:is(#echoai-scope,.ea-gs) .ea .ea-mg{
  transition:translate .2s var(--ea-ease),box-shadow .2s var(--ea-ease),border-color .2s var(--ea-ease),background-color .2s var(--ea-ease),opacity .4s var(--ea-ease),transform .4s var(--ea-ease)}
:is(#echoai-scope,.ea-gs) .ea .ea-q:is(:hover,:focus-within),:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within){
  translate:0 -3px;transform:none;box-shadow:0 18px 36px -18px rgba(var(--ea-shadow-rgb),.28);
  border-color:var(--ea-tint-line);background-color:var(--eag-breathe-bg,var(--ea-tint-faint))}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea .ea-q:is(:hover,:focus-within),:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within){translate:none}}
:is(#echoai-scope,.ea-gs) .ea-copied{position:fixed;z-index:60;padding:6px 12px;border-radius:999px;background:var(--ea-ink);color:var(--ea-surface);
  font:700 var(--eaf-fs-meta)/var(--eaf-lh-ui) var(--ea-font);pointer-events:none;opacity:0;translate:0 4px;transition:opacity .15s var(--ea-ease),translate .15s var(--ea-ease)}
:is(#echoai-scope,.ea-gs) .ea-copied[data-on]{opacity:1;translate:0 0}
:is(#echoai-scope,.ea-gs) .ea-copied:empty{display:none}
:is(#echoai-scope,.ea-gs) :is(.ea-g,.ea) [lang="en"]{font-family:var(--ea-font-en)}
:is(#echoai-scope,.ea-gs) .ea-g :is(.ea-crumb a,.ea-ans-crumb a,a.ea-byline,a.ea-by__link){display:inline-block;box-sizing:border-box;min-height:24px;padding-block:max(0px,calc((24px - 1lh) / 2))}
:is(#echoai-scope,.ea-gs) .ea-print-src{display:none}
@media print{
  :is(#echoai-scope,.ea-gs) :is(.ea-gv,#ea-float) :is(.ea-end .ea-cta,.ea-slim-slot,.ea-qs,.ea-gmore,.ea-gmap,.ea-toc,.ea-crumb,.ea-ans-crumb,.ea-copy,.ea-share,[data-ea-share],.ea-lang,.ea-pn,.ea-prevnext,.ea-progress,.ea-qrail,[data-ea-qtoc],.ea-rail,.ea-topbar,.ea-sheet){display:none}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-print-src{display:block;margin:0 0 16px;padding:0 0 8px;border-bottom:1px solid var(--ea-line);font:600 11pt/1.5 var(--ea-font);color:var(--ea-ink)}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-print-src--end{margin:24px 0 0;padding:8px 0 0;border-bottom:0;border-top:1px solid var(--ea-line)}
  :is(#echoai-scope,.ea-gs) .ea-gv :is(.echoai-post__table-wrap,.ea-table__wrap){overflow:visible}
  :is(#echoai-scope,.ea-gs) .ea-gv :is(tr,figure,img,.echoai-post__callout,.ea-callout,.ea-pair){break-inside:avoid}
  :is(#echoai-scope,.ea-gs) .ea-gv thead{display:table-header-group}
  :is(#echoai-scope,.ea-gs) .ea-gv :is(h2,h3){break-after:avoid}
}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-bleed]{--eag-bleed-w:min(var(--eaf-measure-page) + calc(var(--eaf-u) * 64),var(--eaf-page) - var(--eag-sbw,0px));
    box-sizing:border-box;width:var(--eag-bleed-w);max-width:none;margin-inline:calc((100% - var(--eag-bleed-w)) / 2)}
}
:is(#echoai-scope,.ea-gs) .ea-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:is(#echoai-scope,.ea-gs) a.ea-skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(#echoai-scope,.ea-gs) a.ea-skip:focus{position:fixed;z-index:100001;top:calc(var(--eax-toc-offset,0px) + 8px);inset-inline-start:8px;width:auto;height:auto;clip-path:none;
  padding:12px 18px;border-radius:var(--ea-btn-radius);background:var(--ea-ink);color:var(--ea-surface);font:700 var(--eaf-fs-ui)/var(--eaf-lh-ui) var(--ea-font);text-decoration:none;
  outline:2px solid var(--ea-focus);outline-offset:2px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero{--tl-bg:var(--st-chip);--tl-line:var(--st-chip-line);--tl-ink:var(--st-ink);--tl-hover:var(--st-chip-hover);--tl-focus:var(--st-focus);--tl-on:var(--st-ink);--tl-on-ink:var(--st-bg)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__tools{flex-wrap:wrap;row-gap:8px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-listen{display:inline-flex;align-items:center;gap:4px}
:is(#echoai-scope,.ea-gs) .ea-g button:is(.ea-listen__b,.ea-listen__stop):hover{background:var(--tl-hover)}
:is(#echoai-scope,.ea-gs) .ea-g button.ea-listen__stop:is(*,:hover,:focus,:active){padding:0}
:is(#echoai-scope,.ea-gs) .ea-g button.ea-listen__stop[hidden]{display:none}
@media print{:is(#echoai-scope,.ea-gs) a.ea-skip{display:none}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--eaf-s-sm,18px);row-gap:var(--eaf-s-xs,14px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__who{display:flex;flex-direction:column;gap:2px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__g{display:block}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__g > .ea-by__sep{margin-inline:.4em}
:is(#echoai-scope,.ea-gs) .ea-g .ea-by__tools{margin-inline-start:0;justify-self:end}
@media (max-width:1199.98px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by{grid-template-columns:auto minmax(0,1fr)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__tools{grid-column:1 / -1;justify-self:stretch;justify-content:flex-start}
}
:is(#echoai-scope,.ea-gs) .ea-g .ea-kf{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1200px){:is(#echoai-scope,.ea-gs) .ea-g .ea-kf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:750px){:is(#echoai-scope,.ea-gs) .ea-g .ea-kf:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:749px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero{display:flex;flex-direction:column}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__text{display:contents}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-crumb{order:1}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__h1{order:2}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__stand{order:3}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media{order:4;margin-block-start:calc(var(--eaf-s-lg,24px) * var(--eag-rhy,1))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by{order:5}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-toc{order:7}
  /* a guide under four chapters has no contents list here, so the byline row is the opening's last line, on the edge
     that clips (overflow:hidden, every intensity but quiet): room for the tools' 4px focus ring, which lost its bottom
     once the tools became 28px pills (independent review 30.09, tests/qa-focus-ring.cjs; at 390 and at 1280 zoomed 200%) */
  :is(#echoai-scope,.ea-gs) .ea-g:not([data-ea-intensity="quiet"]) .ea-hero{padding-block-end:4px}
}
/* the end's author line (p.ea-author) is gone since 3.3.2 (NIGHT-BACKLOG 237: the byline is the one), and its rules with it */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art p.ea-ai{margin:var(--eaf-s-xs,14px) 0 0;font-size:var(--eaf-fs-read);line-height:var(--eaf-lh-ui);color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta{position:fixed;z-index:28;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-inline-size:560px;margin-inline:auto;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;padding:8px;padding-inline-start:16px;border-radius:min(var(--ea-radius),16px);
  background:color-mix(in srgb,var(--ea-surface) 96%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--ea-line),0 16px 36px -14px rgba(var(--ea-shadow-rgb),.42);font-family:var(--ea-font);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s cubic-bezier(.22,.61,.36,1),transform .22s cubic-bezier(.22,.61,.36,1),visibility 0s linear .22s}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-shown="1"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__t{flex:1;min-width:0;margin:0;font-size:var(--eaf-fs-small);line-height:var(--eaf-lh-head);font-weight:700;color:var(--ea-ink);white-space:nowrap}
/* one text line and one button (round 32): the line only when it fits whole beside the button (guide.js measures it),
   else the bar is the button and the close (wave 2 qc-14). Never a sentence cut with "…" (LEAN 3.1 L7, NO-CUT item 9). */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-line="0"] .ea-fcta__t{display:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-line="0"] a.ea-fcta__btn{flex:1 1 auto;justify-content:center}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn{flex:none;min-height:40px;padding-block:8px;padding-inline:18px;box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:is(*,:hover,:focus,:active){all:unset;box-sizing:border-box;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--ea-btn-radius,50%);cursor:pointer;color:var(--ea-ink-mute);background:transparent}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:hover{background:var(--ea-surface-2);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:focus-visible{outline:2px solid var(--ea-focus);outline-offset:1px}
@media (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:is(*,:hover,:focus,:active){width:44px;height:44px}:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea.ea-fcta{transition:none;transform:none}}
@media print{:is(#echoai-scope,.ea-gs) .ea.ea-fcta{display:none}}
/* ONE PHONE BAR (R120 Q2, 30.09, «פס אחד למטה»; 3.2): on a phone the bar carries the reader's place, «פרק 6 מתוך 16»,
   which opens the chapter list, beside the contact button; the business-name line steps aside for it. A tablet and a
   computer never show it (the top bar and the rail keep the place there). assets/guide.js keeps the top bar away on a
   phone and shows this bar once the opening's chapter list leaves the screen. Gate a-phone-bar-without-its-place. */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__pos{display:none}
/* R122 Q3 (3.2): the site's own fixed header shows a contact button: ours steps aside (assets/guide.js hostContact) */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-host-contact] a.ea-fcta__btn{display:none}
/* shown where the script says the bar carries the place (data-ea-place: a phone under 768, or a short window, E-3) */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos:is(*,:hover,:focus,:active){all:unset;box-sizing:border-box;flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:2px;font-family:var(--ea-font);font-size:var(--eaf-fs-small);line-height:var(--eaf-lh-head);font-weight:700;color:var(--ea-ink);white-space:nowrap;cursor:pointer}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px;border-radius:6px}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos .ea-fcta__chev{flex:none;color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] .ea-fcta__t{display:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] a.ea-fcta__btn{flex:none}
/* ---- A READER WHO LANDS MID-GUIDE (owner round 123 Q2, 3.2 B21): one quiet row at the bottom of the screen, in the
   contact bar's lane and right above it when it shows (--eag-land-up, assets/guide.js), «מתוך המדריך: <name> · לתשובה
   בקצרה ↑». The surface, one hairline, the page's small text; shown by the script on a landing, gone after two scrolls. ---- */
:is(#echoai-scope,.ea-gs) .ea-land{position:fixed;z-index:27;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--eag-land-up,0px));
  max-inline-size:560px;margin-inline:auto;box-sizing:border-box;padding:2px 14px;border:1px solid var(--ea-line);border-radius:min(var(--ea-radius),16px);
  background:var(--ea-surface);color:var(--ea-ink-mute);box-shadow:0 6px 18px -10px rgba(var(--ea-shadow-rgb,0,0,0),.35);font-family:var(--ea-font)}
:is(#echoai-scope,.ea-gs) .ea-land[hidden]{display:none}
:is(#echoai-scope,.ea-gs) .ea-land .ea-land__t{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;margin:0;
  font-size:var(--eaf-fs-small,15px);line-height:var(--eaf-lh-ui,1.5);text-align:center}
:is(#echoai-scope,.ea-gs) .ea-land .ea-land__g{font-weight:600;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-land .ea-land__sep{opacity:.7}
:is(#echoai-scope,.ea-gs) .ea-land a.ea-land__a:is(#echoai-scope,a){display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700;color:var(--ea-ink);
  text-decoration:underline;text-decoration-color:var(--ea-link-underline,currentColor);text-underline-offset:4px}
:is(#echoai-scope,.ea-gs) .ea-land a.ea-land__a svg{transform:rotate(180deg);flex:none}
:is(#echoai-scope,.ea-gs) .ea-land a.ea-land__a:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px;border-radius:2px}
@media (max-width:599px){:is(#echoai-scope,.ea-gs) .ea-land .ea-land__sep{display:none}}   /* two lines on a phone: no dot left at a line's end */
@media print{:is(#echoai-scope,.ea-gs) .ea-land{display:none}}
/* ---- IN-GUIDE SEARCH, 12 QUESTIONS OR MORE (owner round 104's engineering, WAVE2-TOWER M2; 3.2 B24): one field above the
   list, the page's own field look (one hairline, the reading size, 44px), a quiet status line; while it searches the
   matches show whatever the fold of 8, the rest are hidden, «עוד» steps aside. ---- */
:is(#echoai-scope,.ea-gs) .ea .ea-qs__find{margin:var(--eaf-s-sm,18px) 0 0}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__find[hidden]{display:none}
:is(#echoai-scope,.ea-gs) .ea input.ea-qs__in[type="search"]{display:block;box-sizing:border-box;inline-size:100%;max-inline-size:32rem;min-height:44px;margin:0;padding:8px 14px;
  border:1px solid var(--ea-line);border-radius:min(var(--ea-radius),12px);background:var(--ea-surface);color:var(--ea-ink);
  font:inherit;font-size:max(16px,var(--eaf-fs-read,17px));line-height:var(--eaf-lh-ui,1.5);box-shadow:none;text-align:start}
:is(#echoai-scope,.ea-gs) .ea input.ea-qs__in[type="search"]::placeholder{color:var(--ea-ink-mute);opacity:1}
:is(#echoai-scope,.ea-gs) .ea input.ea-qs__in[type="search"]:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__st{margin:var(--eaf-s-3xs,6px) 0 0;font-size:var(--eaf-fs-small,15px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__st:empty{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__none{margin:var(--eaf-s-xs,14px) 0 0}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__none[hidden]{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__nm{margin:0;font-size:var(--eaf-fs-read,17px);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__ch{margin:var(--eaf-s-xs,14px) 0 0;font-size:var(--eaf-fs-small,15px);font-weight:700;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__close ul{margin:var(--eaf-s-3xs,6px) 0 0;padding:0;list-style:none}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__close li{margin:0;padding:0}
:is(#echoai-scope,.ea-gs) .ea .ea-qs__close a:is(#echoai-scope,a){display:inline-flex;align-items:center;min-height:44px;font-size:var(--eaf-fs-read,17px);font-weight:600;color:var(--ea-ink);
  text-decoration:underline;text-decoration-color:var(--ea-link-underline,currentColor);text-underline-offset:4px}
/* the matches are the gallery's cards (row 199, 11.10): a card the search does not match is [hidden] (assets/gallery.css) */
@media print{:is(#echoai-scope,.ea-gs) .ea .ea-qs__find{display:none}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__nav{display:contents}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__scroll{min-height:0;flex:0 1 auto}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail a.ea-rail__cta{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;margin-block-start:var(--eaf-s-xs,14px);min-height:40px;padding:8px 14px;
  border-radius:var(--ea-btn-radius);background:var(--ea-accent-fill);color:var(--ea-on-accent);font:700 var(--eaf-fs-small)/var(--eaf-lh-ui) var(--ea-font);text-decoration:none;
  transition:background-color .2s var(--ea-ease)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail a.ea-rail__cta:hover{background:var(--ea-accent-hover);color:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail a.ea-rail__cta:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px}
:is(#echoai-scope,.ea-gs) [dir="ltr"] .ea-g .ea-rail a.ea-rail__cta svg{scale:-1 1}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar[data-shown="1"][data-hide="1"]{transform:translateY(calc(-100% + 3px));box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-g .ea-topbar.ea-topbar[data-hide="1"] > :not(.ea-topbar__bar){opacity:0;transition:opacity .2s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea-g.ea-float[data-ea-intensity]{--st-focus:var(--ea-focus);--st-ink:var(--ea-ink);--st-mute:var(--ea-ink-mute);--st-num:var(--ea-accent-text);--st-ico:var(--ea-graphic);
  --st-chip:var(--ea-surface);--st-chip-line:var(--ea-line);--st-chip-hover:var(--ea-surface-2)}
:is(#echoai-scope,.ea-gs) .ea-float :is(.ea-toc__a,.ea-pin):focus-visible{outline:2px solid var(--ea-focus);outline-offset:1px}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-col{margin-inline:auto calc((100% - min(var(--eaf-measure-page), 100% - 2 * var(--eaf-u) * 16)) / 2)}
}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__x{-webkit-line-clamp:2;line-clamp:2;min-height:calc(2 * 1lh)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-start:auto;padding-block-start:var(--eaf-s-sm,18px)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__foot .ea-mg__go{margin-block-start:0;padding-block-start:0}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__foot .ea-count{margin-inline-start:auto}
@media (max-width:720px){:is(#echoai-scope,.ea-gs) .ea-ans .ea-rel .ea-qs__grid{scroll-snap-type:x proximity}}
:is(#echoai-scope,.ea-gs) .ea .ea-gmore__grid.ea-gmore__grid{scroll-snap-type:x proximity}
@media (prefers-contrast:more){
  :is(#echoai-scope,.ea-gs){--ea-tint:var(--ea-surface);--ea-tint-faint:var(--ea-surface);--ea-tint-strong:var(--ea-surface);--ea-surface-2:var(--ea-surface);
    --ea-ink-mute:var(--ea-ink);--ea-ink-mute-on-tint:var(--ea-ink);--ea-ink-mute-on-tint-strong:var(--ea-ink);--ea-on-band-muted:var(--ea-on-band);
    --ea-line:color-mix(in srgb,var(--ea-ink) 62%,var(--ea-surface));--ea-line-on-tint:color-mix(in srgb,var(--ea-ink) 62%,var(--ea-surface));--ea-tint-line:color-mix(in srgb,var(--ea-ink) 62%,var(--ea-surface));
    --ea-glow-a:transparent;--ea-glow-b:transparent;--ea-glow-a-dark:transparent;--ea-glow-b-dark:transparent;--eag-breathe-bg:var(--ea-surface)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero__glow,:is(#echoai-scope,.ea-gs) .ea .ea-cta__art{display:none}
}

/* ======================= ea-directions (ported) ======================= */
:is(#echoai-scope,.ea-gs) :is([data-ea-radius="0"],[data-ea-radius="12"]) :is(
  .ea .ea-cta--slim, .ea .ea-mg, .ea .ea-q, .ea a.ea-next__q, .ea-g .ea-goals li, .ea-g .ea-hero__teaser,
  .ea-g .ea-fab.ea-fab, .ea-gmap){border-radius:var(--ea-radius)}
:is(#echoai-scope,.ea-gs) :is([data-ea-radius="0"],[data-ea-radius="12"]) :is(
  .ea-g .ea-toc summary, .ea-g .ea-toc__ico, .ea-gmap__thumb, .ea-g .ea-toc__a, .ea-g .ea-pair__ico, .ea-g .ea-bl .ea-pair__ico,
  .ea-g .ea-pin, .ea-g .ea-rail__all.ea-rail__all, .ea-g .ea-rail .ea-part__btn.ea-part__btn, .ea-g .ea-rail .ea-toc__a, .ea-g .ea-sheet .ea-toc__a,
  .ea-qrow__n, .ea .ea-cta__mark, .ea-g .ea-fab__ico,
  .ea-g .ea-art ol.echoai-post__question-list[data-ea-check] input[type=checkbox]
){border-radius:calc(var(--ea-radius) * .5)}
:is(#echoai-scope,.ea-gs) :is([data-ea-radius="0"],[data-ea-radius="12"]) .ea-art h3.ea-example__h::before,:is(#echoai-scope,.ea-gs) :is([data-ea-radius="0"],[data-ea-radius="12"]) .ea-art ol.ea-steps > li::before,:is(#echoai-scope,.ea-gs) :is([data-ea-radius="0"],[data-ea-radius="12"]) .ea-art ul.ea-check > li::before{border-radius:calc(var(--ea-radius) * .5)}
:is(#echoai-scope,.ea-gs) [data-ea-radius="0"] .ea-g summary{border-radius:0}
:is(#echoai-scope,.ea-gs) [data-ea-radius="0"] .ea-g .ea-sheet__panel{border-radius:0}
:is(#echoai-scope,.ea-gs) [data-ea-radius="0"] :is(.ea-g,.ea-art,.ea) :focus-visible{border-radius:0}
:is(#echoai-scope,.ea-gs) [data-ea-btn="0"] :is(.ea,.ea-g) :is(a.ea-btn, button, [role="button"]):focus-visible{outline-offset:2px}
:is(#echoai-scope,.ea-gs) :is([data-ea-btn="0"],[data-ea-btn="6"]) :is(
  .ea-g .ea-facts li, .ea-g .ea-jump, .ea-ans .ea-search input[type="search"], .ea-ans .ea-chips button.ea-chip[type="button"],
  .ea-ans .ea-cat__empty button[type="button"], .ea-count, .ea-ans[data-ea-intensity] [data-section="summary"] > h3,
  .ea-g .ea-art .ea-chk__done, .ea a.ea-gmore__all){border-radius:var(--ea-btn-radius)}
:is(#echoai-scope,.ea-gs) :is(.ea-g[data-ea-hero="plain"],.ea-g[data-ea-hero="cover"],[data-ea-hero="plain"] .ea-g,[data-ea-hero="cover"] .ea-g) .ea-hero{
  --st-bg:var(--ea-surface);--st-ink:var(--ea-ink);--st-mute:var(--ea-ink-mute);
  --st-line:var(--ea-line);--st-chip:var(--ea-surface);--st-chip-line:var(--ea-line);--st-chip-hover:var(--ea-surface-2);
  --st-ico:var(--ea-graphic);--st-tile:var(--ea-accent-fill);--st-on-tile:var(--ea-on-accent);
  --st-num:var(--ea-accent-text);--st-ring:var(--ea-surface);--st-glow-on:0;--st-media-ring:transparent;
  --ea-focus:inherit;--st-focus:var(--ea-focus)}
:is(#echoai-scope,.ea-gs) :is(.ea-g[data-ea-hero="plain"],[data-ea-hero="plain"] .ea-g) .ea-hero{--st-pad:0px;--st-radius:0px}
:is(#echoai-scope,.ea-gs) :is(.ea-g[data-ea-hero="plain"],.ea-g[data-ea-hero="cover"],[data-ea-hero="plain"] .ea-g,[data-ea-hero="cover"] .ea-g) .ea-hero__glow{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid{background:var(--ea-accent-fill);color:var(--ea-on-accent);border:0;border-radius:var(--ea-radius);box-shadow:none;
  --ea-focus:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid::before,:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid .ea-cta__art,:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid .ea-cta__glow{display:none}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid :is(.ea-cta__eyebrow,.ea-cta__h,.ea-cta__lead,.ea-cta__p){color:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid .ea-cta__eyebrow::before{background:var(--ea-on-accent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid a:not(.ea-btn){color:inherit;text-decoration-color:currentColor}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid a.ea-btn{background:var(--ea-on-accent);color:var(--ea-accent-fill);box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid a.ea-btn:hover{background:var(--ea-on-accent);color:var(--ea-accent-hover);box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid :focus-visible,:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid a.ea-btn:focus-visible{outline:2px solid var(--ea-on-accent);outline-offset:3px}
@media (forced-colors:active){:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid{border:1px solid CanvasText}}
@media print{:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid,:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid :is(.ea-cta__eyebrow,.ea-cta__h,.ea-cta__lead,.ea-cta__p){background:none;color:CanvasText}:is(#echoai-scope,.ea-gs) .ea .ea-cta--solid{border:1px solid GrayText}}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="bold"] .ea-g .ea-art :is(h2.ea-h2,h2.echoai-post__h2,h2:not([class])){font-weight:900;letter-spacing:-.015em}
:is(#echoai-scope,.ea-gs) .ea-gk:not([data-ea-rhythm="bold"]) .ea-art :is(blockquote.ea-pull,figure.ea-pull){display:none}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="bold"] .ea-art :is(blockquote.ea-pull,figure.ea-pull){padding-block:4px;padding-inline-start:var(--eaf-s-lg,28px);
  max-inline-size:20em;margin-block:calc(var(--eaf-u390) * 44 + var(--eaf-u1440) * 96);
  font-size:var(--eaf-fs-pull,48px);font-weight:800;line-height:var(--eaf-lh-head,1.25);letter-spacing:-.018em}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="bold"] .ea-art :is(blockquote.ea-pull,figure.ea-pull)::before{inset-block:0;width:4px;height:auto;border-radius:0;background:var(--ea-accent)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-art :is(blockquote.ea-pull,figure.ea-pull){padding-block-start:var(--eaf-s-lg,28px);padding-inline-start:0;font-weight:500;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-art :is(blockquote.ea-pull,figure.ea-pull)::before{inset-inline:0;inset-block-start:0;width:auto;height:1px;background:var(--ea-line)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-art .ea-pull .ea-pull__turn{color:var(--ea-ink);font-weight:700}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-hero__h1.ea-hero__h1{font-weight:600;font-size:calc(var(--ea-fs-h1) * 1.1);letter-spacing:-.02em}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-art :is(h2.ea-h2,h2.echoai-post__h2,h2:not([class])){font-weight:700;letter-spacing:-.004em;padding-block-start:var(--eaf-s-md,22px);border-block-start:1px solid var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-art :is(h2.ea-h2,h2.echoai-post__h2,h2:not([class]))::before{display:none}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] :is(.ea-cta__eyebrow,.ea-g .ea-pair__h,.ea-g .ea-grp__h,.ea-g .ea-rail__t,.ea-g .ea-toc__label b,.ea-ans .ea-rel .ea-qs__h){font-weight:500;letter-spacing:.06em}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-kf__n{font-weight:300;font-size:calc(var(--eaf-fs-h2) * 1.5)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-sum .ea-pair__lead{font-weight:500;font-size:calc(var(--ea-fs-lede) * 1.08)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"]{--ea-surface-2:var(--ea-tint-faint)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-art{--ea-accent:var(--ea-ink);--ea-accent-text:var(--ea-ink);--ea-accent-ink:var(--ea-ink);--ea-accent-fill:var(--ea-ink);--ea-accent-hover:var(--ea-ink);
  --ea-on-accent:var(--ea-surface);--ea-graphic:var(--ea-ink-mute);--ea-spark:var(--ea-ink-mute);--cb-duo:var(--ea-ink-mute);--cb-marker:var(--ea-ink-mute);
  --cb-chip-bg:var(--ea-surface);--cb-chip-fg:var(--ea-ink);--cb-num:var(--ea-ink);--ea-control-edge:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-n{color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-toc__ico{background:transparent;color:var(--ea-ink);box-shadow:inset 0 0 0 1px var(--ea-line)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-rail__pct{color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-rail a.ea-rail__cta{background:transparent;color:var(--ea-ink);box-shadow:inset 0 0 0 1px var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-rail a.ea-rail__cta:hover{background:var(--ea-surface-2);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-art ol.ea-steps > li::before{box-shadow:inset 0 0 0 1px var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g :is(.ea-sum,.ea-bl__band){background:var(--ea-surface);box-shadow:none;border-block:1px solid var(--ea-ink);border-radius:0}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-lit::before,:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-lit::after{display:none}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-pair__ico{background:transparent;color:var(--ea-ink);box-shadow:inset 0 0 0 1px var(--ea-line)}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea .ea-cta::before{display:none}
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea .ea-cta--band{box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail{border-radius:var(--ea-radius)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-rail{background:var(--ea-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;
  border-inline-end:1px solid var(--ea-line);padding-inline-start:0}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-rail .ea-pin{background:transparent;color:var(--ea-ink);padding-inline:0;justify-content:flex-start;text-decoration:underline;text-decoration-color:var(--ea-line);text-underline-offset:4px}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-rail .ea-pin[aria-current="location"]{background:transparent;color:var(--ea-accent-text);text-decoration-color:var(--ea-accent)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-rail .ea-toc__a[aria-current="location"]{background:transparent;color:var(--ea-accent-text);box-shadow:inset 2px 0 0 var(--ea-accent)}
:is(#echoai-scope,.ea-gs) [dir="rtl"] [data-ea-rhythm="airy"] .ea-g .ea-rail .ea-toc__a[aria-current="location"],:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"][dir="rtl"] .ea-g .ea-rail .ea-toc__a[aria-current="location"]{box-shadow:inset -2px 0 0 var(--ea-accent)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="bold"] .ea-g .ea-rail{box-shadow:inset 0 0 0 1px var(--ea-line)}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid) .ea-cta__body{max-width:none;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
    column-gap:var(--eaf-s-3xl,58px);align-items:start;padding-block:var(--eaf-s-2xl,44px)}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid) .ea-cta__eyebrow{grid-column:1;grid-row:1}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid) .ea-cta__h{grid-column:1;grid-row:2 / span 3}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid) .ea-cta__lead{grid-column:2;grid-row:2;margin-block-start:0}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid) .ea-cta__p{grid-column:2;grid-row:3}
  :is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid) .ea-cta__actions{grid-column:2;grid-row:4}
}
:is(#echoai-scope,.ea-gs) .ea-gv .ea-end .ea-cta:is(.ea-cta--band,.ea-cta--solid){box-shadow:none}

/* ======================= plugin layer ======================= */
/* What the plugin adds over the ported prototype. Each block names the ruling or the host fact it answers. */

/* ---- the magazine opening (owner round 30, the ruled one of four): a BIG title (the bold rhythm's x1.1) and its
   standfirst, then the picture at the full width of the stage, BELOW the words. Nothing is ever set on the picture
   (the title-over-image cover was rejected). The byline, the facts and the contents follow the picture, the order
   every direction keeps on a phone (round 16). ---- */
:is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero{--st-pad:0px;--st-radius:0px}
:is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero__h1.ea-hero__h1{font-weight:900;letter-spacing:-.022em;max-width:none}
:is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero__stand{font-size:calc(var(--ea-fs-stand) * 1.06)}
:is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero__media{box-shadow:none}
@media (min-width:750px){
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero__media{border-radius:var(--ea-radius)}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero{display:flex;flex-direction:column}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-hero__text{display:contents}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-crumb{order:1}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-hero__h1{order:2}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-hero__stand{order:3}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-hero__media{order:4;margin-block-start:calc(var(--eaf-s-2xl,44px) * var(--eag-rhy,1))}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-by{order:5}
  :is(#echoai-scope,.ea-gs) [data-ea-hero="cover"] .ea-g .ea-hero .ea-toc{order:7}
}

/* ---- no person chosen in "מי מפרסם" (owner round 20): the business name, no monogram; the row keeps its tools ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-by.ea-by--plain{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:1199.98px){:is(#echoai-scope,.ea-gs) .ea-g .ea-by.ea-by--plain{grid-template-columns:minmax(0,1fr)}}

/* ---- the contact bar rises above a consent banner or a chat bubble on the same edge (assets/guide.js measures it) ---- */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta{bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--eag-fcta-lift,0px))}

/* ---- more guides: a guide with its own picture shows it; the motif is the fallback; the count is the catalogue's ---- */
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face[data-ea-face="image"]{padding:0;min-height:0;aspect-ratio:16 / 9;background:var(--ea-band)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face[data-ea-face="image"]::before{content:none}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__face .ea-mg__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;border:0;border-radius:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within) .ea-mg__img{transform:scale(1.05)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__x--empty{min-height:calc(2 * 1.5em)}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__count{margin-inline-start:auto;padding:4px 10px;border-radius:var(--ea-btn-radius,999px);background:var(--ea-tint);color:var(--ea-accent-ink);
  font-size:var(--eaf-fs-meta);line-height:var(--eaf-lh-ui);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea .ea-mg__count--zero{background:transparent;box-shadow:inset 0 0 0 1px var(--ea-line);color:var(--ea-ink-mute);font-weight:600}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea .ea-mg__face .ea-mg__img{transition:none}:is(#echoai-scope,.ea-gs) .ea .ea-mg:is(:hover,:focus-within) .ea-mg__img{transform:none}}

/* ---- the FAQ heading the FAQ field prints (lib/faq.php) is a chapter like any other ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art h2.echoai-post__faq-title{position:relative;margin:var(--ea-sp-chapter) 0 0;padding-block:var(--eaf-s-sm) 0;padding-inline-start:0;
  font-size:var(--ea-fs-h2);line-height:var(--eaf-lh-head);font-weight:800;letter-spacing:-.008em;color:var(--ea-ink);text-wrap:balance;scroll-margin-top:var(--eag-off)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art section.echoai-post__faq{margin:0;padding:0;border:0;background:none}

/* ---- a guide whose sections open on an h3 (queue item 20): those h3 are its chapters. The renderer marks each one
   data-ea-chapter (src/guide-page.php, echoai_al_g_chapters); it keeps its level, and takes the h2 chapter's look:
   the space before a chapter, the chapter size and weight, the rule above it, the rhythm's variants. The extra
   :not() matches the specificity of the ported h3 size rule, which this comes after. Only its BLOCK padding is set: the
   whole shorthand also zeroed the 40px the copy button keeps at the heading's end ([data-ea-copyhead]), and on a phone the
   button sat on the chapter's words (QA2 fixer, 29.09, tests/qa-focus-ring.cjs). ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art h3[data-ea-chapter]:not(.ea-x){position:relative;margin:var(--ea-sp-chapter) 0 0;padding-block:var(--eaf-s-sm) 0;
  font-size:var(--ea-fs-h2);line-height:var(--eaf-lh-head);font-weight:800;letter-spacing:-.008em;color:var(--ea-ink);text-wrap:balance;scroll-margin-top:var(--eag-off)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-slim-slot+h3[data-ea-chapter]:not(.ea-x){margin-top:calc(var(--ea-sp-chapter) - 8px)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="bold"] .ea-g .ea-art h3[data-ea-chapter]:not(.ea-x){font-weight:900;letter-spacing:-.015em}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-art h3[data-ea-chapter]:not(.ea-x){font-weight:700;letter-spacing:-.004em;padding-block-start:var(--eaf-s-md,22px);border-block-start:1px solid var(--ea-ink)}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-art h3[data-ea-chapter]:not(.ea-x)::before{display:none}

/* ---- reading content on the READING channel (queue item 21, IS 5568 / WCAG 1.4.4): a table's cells and a question
   list's rows are read, so inside them the engine's two frame roles they are drawn with are the reading roles
   (assets/foundation.css --ea-fs-cell, --ea-fs-row). Re-pointing the role, not each rule, reaches every cell, header
   and row the ported rules size, and nothing outside the table or the list moves. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(table.ea-t,table.echoai-post__table,table:not([class])){--eaf-fs-ui:var(--ea-fs-cell)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol.ea-qlist,ol.echoai-post__question-list,ol[data-ea-check],ul[data-ea-check]){--eaf-fs-large:var(--ea-fs-row)}

/* ---- a LIGHT opening keeps the page's own focus ring (A-028, queue item 19; found by tests/a11y/audit.mjs 29.09) ----
   The prototype turns the ring white on a vivid opening, because its vivid opening was the dark glow. Since 3.0.0 the
   branded preset opens light (plain), and the white ring sat on white: 1.00:1 on the crumb link and the text-size
   buttons. On a plain or cover opening the ring is the page's own role again, whatever the intensity. Two :not() beat
   the vivid rule's specificity. ---- */
:is(#echoai-scope,.ea-gs) :is(.ea-g[data-ea-hero="plain"],.ea-g[data-ea-hero="cover"],[data-ea-hero="plain"] .ea-g,[data-ea-hero="cover"] .ea-g) .ea-hero:not(.ea-x):not(.ea-y){--ea-focus:inherit;--st-focus:var(--ea-focus)}

/* ---- the answer box's own paragraphs: the lead carries the class, the others are plain ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-sum__body > p:last-child{margin-bottom:0}

/* ---- the wrappers the renderer prints carry no box of their own ---- */
:is(#echoai-scope,.ea-gs) .ea-gk:not(.ea-gv){display:block;margin:0;padding:0}
/* ---- the guide paints its own reading surface, as the question page's root does: on a DARK host with no
   dark role set the chapters' ink sat on the host's ground at 1.06:1 (QA 29.09, finding 1). A painted dark set turns
   --ea-surface and --ea-ink together, so the pair never splits. Gate: a-guide-that-paints-no-surface-of-its-own. ---- */
:is(#echoai-scope,.ea-gs) .ea-gv{background:var(--ea-surface);color:var(--ea-ink)}
/* ---- the question card's excerpt at balanced (the magazine) sits on surface-2, a tinted fill: it reads the muted role
   made for a tint, as the same card already does on hover. ink-mute on the surface-2 a site paints before its brand
   arrives read 4.34:1 (independent review 29.09); a delivered brand paints the two greys the same (contracts/brand-roles.json;
   so do the backend's roles 4.1 replies), so nothing moves there. Gate: a-muted-excerpt-under-4-5-on-its-card. ---- */
:is(#echoai-scope,.ea-gs) .ea[data-ea-intensity="balanced"] .ea-q__x{color:var(--ea-ink-mute-on-tint)}

/* ---- a checklist the writer marked (round 11) counts like the design's question list: the tally, the dots, the
   "all checked" chip. The prototype keyed these on the live question list's class only; the writer's block is an
   ol or a ul carrying data-block="checklist", which the renderer marks data-ea-check. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]{counter-reset:ea-done}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]>li:has(input:checked){counter-increment:ea-done}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(1) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(1),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(2) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(2),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(3) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(3),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(4) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(4),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(5) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(5),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(6) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(6),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(7) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(7),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(8) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(8),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(9) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(9),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(10) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(10),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(11) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(11),
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:has(>li:nth-child(12) input:checked)+.ea-chk__foot .ea-chk__dots i:nth-child(12){background:var(--ea-graphic)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol,ul)[data-ea-check]:not(:has(input:not(:checked)))+.ea-chk__foot .ea-chk__done{display:inline-flex}

/* ---- a ruled list (the content's question list, a writer's checklist) is ONE block on the text lane (round 30): its
   rows and its closing rule share one width. The lane rule caps each li on its own, at 34em of the row's larger type,
   while the list's closing rule ran the whole column: seven short rules and one long one under them on the partner's
   real guide, 612px against 772px at 1440 (review 29.09). The list takes the lane; its rows fill the list. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol.ea-qlist, ol.echoai-post__question-list, ol[data-ea-check], ul[data-ea-check]){max-inline-size:var(--ea-measure-text)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(ol.ea-qlist, ol.echoai-post__question-list, ol[data-ea-check], ul[data-ea-check]) > li{max-inline-size:none}

/* ---- a FAQ written as <details> (generated and imported guides) reads like the FAQ the design draws: every answer
   open (owner round 4, the renderer opens each one), the question in the FAQ's type, no disclosure marker. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details{display:block;margin:0;padding:var(--eaf-s-md) 0;border:0;border-radius:0;background:none;box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details + details{border-block-start:1px solid var(--ea-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details > summary{display:block;list-style:none;margin:0;padding:0;cursor:default;
  font-size:var(--eaf-fs-large);line-height:var(--eaf-lh-ui);font-weight:700;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details > summary::-webkit-details-marker{display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details > summary::marker{content:""}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details > :not(summary){margin-block-start:var(--eaf-s-2xs)}

/* ---- share (owner round 201): «שיתוף» beside the byline on EVERY width; at the end, since 3.4.0 (NB 315, «T»), the end row's
   one «שיתוף» under the card (lib/end-row.php), still the `end` place ---- */
/* the question card without its number square (owner round 101 Q4): the room the square took is given back */
:is(#echoai-scope,.ea-gs) .ea .ea-q{padding:var(--eaf-s-md, 22px)}
/* ---- THE LEAN END (owner round 101 Q4). After the bottom line: one quiet strip, the contact banner, the questions,
   one link to every guide. ---- */
/* the strip of round 101 Q4 (the author's line and «האם המדריך עזר?» under one hairline, data-ea-credit) is gone since
   3.3.2: no author line ends the article (NIGHT-BACKLOG 237), and the question sits in the share row's card (row 191),
   or, with the share row off, opens the end zone under its own hairline. Gate an-end-strip-of-two-rules. */
/* one quiet link, in place of the three «מדריכים נוספים» cards: its own row under the questions, a hairline above it,
   the words and the arrow in the accent, 44px tall to a finger */
:is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > p.ea-allg{margin-block:var(--eaf-s-2xl,44px) 0;padding-block:var(--eaf-s-md,22px) 0;border-block-start:1px solid var(--ea-line);text-align:start}
:is(#echoai-scope,.ea-gs) .ea a.ea-allg__a{display:inline-flex;align-items:center;gap:6px;min-block-size:32px;font-size:var(--eaf-fs-ui, 15px);font-weight:700;line-height:var(--eaf-lh-ui,1.5);
  color:var(--ea-accent-text);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--ea-accent-text) 35%,transparent);text-decoration-thickness:2px;text-underline-offset:5px}
:is(#echoai-scope,.ea-gs) .ea a.ea-allg__a:hover{color:var(--ea-accent-ink,var(--ea-accent-text));text-decoration-color:currentColor}
:is(#echoai-scope,.ea-gs) .ea a.ea-allg__a:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px;border-radius:4px}
:is(#echoai-scope,.ea-gs) .ea a.ea-allg__a .ea-ico{flex:none;width:1.05em;height:1.05em}
@media (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea a.ea-allg__a{min-block-size:44px}}
@media print{:is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > p.ea-allg{display:none}}

/* ---- the crumb is the way back only (owner round 101, guide:remove-14): the page's own title is no longer its last
   step, so the rules that cut that step with an ellipsis went with it (LEAN 3.1 L7, NO-CUT item 6) ---- */

/* ---- quiet luxury's title is the SAME SIZE as branded (the scaling study the owner ruled: "type is identical to
   branded; the airy rhythm spaces blocks and does not change size"); only the magazine's is 10% larger. The
   prototype's airy x1.1 on the opening's title predates that ruling; the lighter weight and tracking stay. ---- */
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-hero__h1.ea-hero__h1{font-size:var(--ea-fs-h1)}

/* =====================================================================================================================
   3.0.1 WIDE WINDOWS · ONE MEASURE (owner feedback 30.09: "המדריך קטן מדי, המבנה צר מדי, הטקסטים לא מתפרסים תקין";
   decisions/qa-3.0.1/MEASURE.md). Shared by the three design variants; what differs between them is the frame
   around the column (the block after this one).
   RC-1 · The article column IS the text lane: 31em of the running text (55ch in Latin, foundation.css section 3), so
   the summary box, every H2 and its rule, the table and the picture end on the same edge as the paragraphs. 3.0.0
   left 183-361px of the 772-965px column empty beside every paragraph.
   RC-2 · The column is sized by the TEXT, never by the frame, so the frame's growth above 1440 (--eaf-grow) can only
   widen the margins, the rail and the gaps; it can no longer open a hole inside the article.
   A phone never reaches 31em (527px at 17px), so 390 is untouched.
   ===================================================================================================================== */
:is(#echoai-scope,.ea-gs) .ea-gv{--eav-m:calc(var(--ea-fs-body) * 31)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-col>.ea-body{max-width:min(var(--ea-measure-text),var(--eav-m,100%),100%);margin-inline:auto}
/* the end zone's own columns (was it helpful, the questions) take the same measure */
:is(#echoai-scope,.ea-gs) .ea-gv :is(.ea,.ea-g,.ea-gk,[data-ea-direction]){--ea-col:var(--eav-m)}
/* RC-3 · the answer's lede: 1.14 x the body (fluid-engine.css) and a lighter weight, so the summary reads as the answer, not
   as a louder voice than the article it opens (3.0.0: 24.4px at 600 over 19.3px at 400). The phone keeps its weight. */
@media (min-width:750px){:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__lead{font-weight:500}}

/* OWNER ROUND 105 · THE PICTURE AT COLUMN WIDTH (reopens rounds 2 and 30, "wide image"): from 750 the opening (crumbs,
   title, byline, the picture and the contents row) is exactly as wide as the article column, so the picture ends on the
   paragraphs' edge instead of standing 117px wider than the text under it (3.0.0 at 1024: 768 over 651). A phone keeps
   its full-bleed opening (below 750 the opening already spans the page and the column is the page less its gutters). */
@media (min-width:750px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero{width:min(var(--eav-m),100% - 2 * var(--eag-gut))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-kf{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* in the column the byline's tools take their own row, so the date never breaks from its label */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by{grid-template-columns:auto minmax(0,1fr)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-by__tools{grid-column:1 / -1;justify-self:start}
}
/* OWNER ROUND 105 · ONE COLUMN, FOUR SIZES NO MORE: the writer's emphasis callout ("מניסיוננו ...") is read at the
   running text's size (it was the large role, 0.946 x body: 19.87px beside 21px paragraphs). Its weight stays. */
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-callout[data-tone="accent"], .ea-callout[data-tone="inverse"], .echoai-post__callout:not([class*="--"]), .echoai-post__callout--dark){font-size:var(--eaf-fs-body)}

/* ---------------------------------------------------------------------------------------------------------------------
   VARIANT 2 · EDITORIAL, TWO COLUMNS (design/301-wide-v2-editorial)
   From 1200 the page is two real columns from its first line: the contents on the start side, the article on the
   other. The opening (crumbs, title, byline, picture) belongs to the article column; the contents column starts level
   with the crumbs and stays (the rail, now shown from the top instead of after the list at the top leaves).
   OWNER ROUND 105 (30.09 10:40 UTC) took this variant WITH the critic's change, so it matches round 101: the top of the
   article column keeps round 101's closed one-line contents row, NEVER hidden by CSS (a script-delay plugin holds our
   script back and a sidebar theme refuses the rail; hiding the row there left a reader with no contents at all,
   decisions/qa-3.0.1/variants/critic/probe2.out), and in rail mode the rail is shown from the top of the page
   (assets/guide.js tick()). RC-6 · rows at the small role, whole titles (up to three lines), the number kept.
   --------------------------------------------------------------------------------------------------------------------- */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv{--eav-rail:calc(var(--eaf-u,1px) * 340);--eav-gap:calc(var(--eaf-u,1px) * 72);
    --eav-pair:calc(var(--eav-rail) + var(--eav-gap) + var(--eav-m))}
  :is(#echoai-scope,.ea-gs) .ea-gv :is(.ea,.ea-g,.ea-gk,[data-ea-direction]){--ea-stage:var(--eav-pair)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-col>.ea-body{margin-inline:auto 0}
  /* the opening sits in the article column, on the article's own edge, in every navigation mode (a sidebar theme, a held
     script and no script included), so the row at the top and the paragraphs share one edge */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero{margin-inline:auto calc((100% - min(var(--eav-pair),100% - 2 * var(--eag-gut))) / 2)}
  /* the side column: level with the opening at the top of the page, then held under the host's header */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail{--rw:var(--eav-rail);top:max(var(--eag-off),var(--eav-rail-top,0px));max-height:calc(100vh - max(var(--eag-off),var(--eav-rail-top,0px)) - 28px)}
  :is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-wide{--eag-wide-max:var(--eav-pair)}
  :is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-col{margin-inline:auto calc((100% - min(var(--eav-pair), 100% - 2 * var(--eaf-u) * 16)) / 2)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a{font-size:var(--eaf-fs-small);color:var(--ea-ink)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-toc__t{-webkit-line-clamp:3}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-n{display:inline}
}

/* ---- what the theme lab found on Hello and Astra at the 2.97.0 integration (29.09.2026) ---- */
/* the skip link owns its colours in every state (theme lab, 2.97.0 integration: the Hello pink and the Astra link blue reached it at rest, on hover and on press) */
:is(#echoai-scope,.ea-gs) a.ea-skip{background:var(--ea-ink);color:var(--ea-surface)}
/* A focus ring is ours alone: Hello Elementor adds a 4px white halo (box-shadow) to every a:focus-visible, which our
   rings never asked for ("differs between themes" on every link below). */
:is(#echoai-scope,.ea-gs) :is(a.ea-skip,a.ea-toc__a,a.ea-q__a,a.ea-pin,a.ea-mg__link,a.ea-gmore__all,a.ea-allg__a,a.ea-lang,.ea-crumb a):focus-visible{box-shadow:none}
/* Astra draws a 30px shadow around every image and figure of a single post (.ast-article-single img, figure); ours have none */
:is(#echoai-scope,.ea-gs) :is(img,figure){box-shadow:none}

/* round 101 (M2): ONE show-more behaviour (assets/more.js). A folded row is hidden only under data-ea-more-on, which the
   script that reveals it sets on its own root, and only on screen: without the script, or on paper, every row shows. */
@media screen{:is(#echoai-scope,.ea-gs) [data-ea-more-on] [data-ea-more-x]{display:none}}
:is(#echoai-scope,.ea-gs) .ea-art .ea-table__wrap tbody tr[data-ea-new]{animation:ea-more-fade .25s ease both}
@keyframes ea-more-fade{from{opacity:0}to{opacity:1}}
:is(#echoai-scope,.ea-gs) .ea-more-st{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- THE GAP IS THE WORD'S OWN (L10, the release candidate: "עושים …"; echoai_al_whole_words(), lib/config.php, and
   words() in assets/guide.js). The clamp hides a word that does not fit beside "…", but a space printed between two words
   belonged to neither, so it stayed and "…" followed a space. The space between two units has no width of its own
   (.ea-s), every unit opens with the gap (it hides with its unit), and a box holding units is shifted out by one gap, so
   every line still starts at the edge (tests/no-cut/rules.cjs, gap-outside-the-word). Only a box that holds units moves. */
:is(#echoai-scope,.ea-gs) :is(.ea-q__x,.ea-toc__t,.ea-rail__now,.ea-topbar__c) .ea-s{font-size:0}
:is(#echoai-scope,.ea-gs) :is(.ea-q__x,.ea-toc__t,.ea-rail__now,.ea-topbar__c) :is(.ea-w,.ea-u){padding-inline-start:.25em}
:is(#echoai-scope,.ea-gs) :is(.ea-q__x,.ea-toc__t,.ea-rail__now,.ea-topbar__c) .ea-u{-webkit-box-decoration-break:clone;box-decoration-break:clone}
:is(#echoai-scope,.ea-gs) .ea .ea-q__x:has(> .ea-w,> .ea-l),:is(#echoai-scope,.ea-gs) .ea-g .ea-toc__t:has(> .ea-w,> .ea-l),
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__now:has(> .ea-w,> .ea-l),:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__c:has(> .ea-w,> .ea-l){margin-inline-start:-.25em}
/* the rail's "now" line opens on a short dash: it stays where it was, the words after it keep their gap */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__now:has(> .ea-w,> .ea-l)::before{margin-inline-start:.25em;margin-inline-end:calc(7px - .25em)}

/* =====================================================================================================================
   ONE MEASURE (owner round 105, moved into 3.1 by round 171 Q2, 02.10; the owner's screenshot 16; docs/INCIDENTS.md I-55)
   From 1024 the article column IS the running text's lane (31em, 55ch in Latin: foundation.css section 3, round 30), so
   the summary box, every H2 and H3 with its rule, the table, the tip and the bottom line start and end on the paragraphs'
   two edges. 3.0.0 gave them the 772-965px column and the paragraphs 576-605px: a band of 113-361px beside every paragraph.
   The lane is read on the article itself, so its em, its ch, its language and the reader's text step are the text's own.
   The article shrinks about its own middle, so the opening above it and the end zone below keep their places and the
   page keeps its balance (in a host narrower than 3.0.0's column the half is what is left, never a margin that squeezes
   the text); from 1200 the rail follows by the same half, so the gap between them stays 3.0.0's. The rail is
   not in the article, so it reads the same lane at the body size times the reader's step (--ea-measure-k, foundation.css
   section 4). In 3.1.0 only this measure was built; 3.1.1 (owner round 182 Q1) brings the rest of round 105, the block
   "3.0.1 WIDE WINDOWS" above: the side column from the top, the opening at the column's width from 750 and the 21px
   body. Inside that variant --ea-col IS the measure, so the halves below are 0 and this block keeps the same edges.
   Gate: a-column-wider-than-its-text; tests/qa-one-measure-browser.cjs.
   ===================================================================================================================== */
@media (min-width:1024px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-col>.ea-body{max-width:min(var(--ea-col),var(--ea-measure-text));margin-inline:auto}
}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-col>.ea-body{margin-inline:auto max(0px,min((var(--ea-col) - min(var(--ea-col),var(--ea-measure-text))) / 2,(100% - min(var(--ea-col),var(--ea-measure-text))) / 2))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail{inset-inline-start:calc(max(var(--eag-gut),50% - var(--ea-stage) / 2) + (var(--ea-col) - min(var(--ea-col),var(--ea-measure-text) * var(--ea-measure-k,1))) / 2)}
}

/* =====================================================================================================================
   FONT-ONE (owner W10 Q2, 03.10: the site's heading font on the three page types, «באג חמור»; docs/INCIDENTS.md I-67)
   A heading of ours declares no family (the ported h2, h3 and FAQ rules lost theirs), so the site's own heading rule reaches
   it, as it reaches the question's and the catalogue's; where the site has none, it reads the page's font. The weight is
   one token per direction (foundation.css section 8), read by the h1 and every chapter heading. Running text takes our
   font on every one of the three pages: a theme's rule on `.entry-content p` (Twenty Twenty-One prints 'Arial Hebrew'
   on a Hebrew site) reached the guide and the question, never the catalogue. A text that names its language keeps it.
   ===================================================================================================================== */
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__h1.ea-hero__h1:not(.ea-x){font-weight:var(--ea-fw-h1,800)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(h2.ea-h2,h2.echoai-post__h2,h2:not([class])):not(.ea-x){font-weight:var(--ea-fw-h2,800)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(h3[data-ea-chapter],h2.echoai-post__faq-title):not(.ea-x):not(.ea-y){font-weight:var(--ea-fw-h2,800)}
:is(#echoai-scope,.ea-gs) :is(.ea-g,.ea) :is(p,ol,ul,li,dl,dt,dd,cite,figcaption,blockquote,td,th):not([lang]){font-family:var(--ea-font)}


/* =====================================================================================================================
   3.1.1 DESIGN FIX · THE OPENING (the design audit of 03.10, HB-1 to HB-5; the owner's look rulings D3 and D5; his circled
   screenshot of 04.10, «ועוד באג לייאאוט, בחירה שגויה»; docs/INCIDENTS.md I-68)
   The head is the title, the standfirst, ONE meta row, then the picture: the byline, the date and the reading time on one
   row from the title's start edge, the reader's tools at the far end of the SAME row (they wrap under it only when the
   row cannot hold them), and ONE hairline, the byline's own (HB-2), under it. Three groups in the rhythm (HB-3): the title
   and its standfirst close, the byline close to the standfirst, then the line. The key facts follow the picture (D5), so
   the picture is in the first screen of a desktop. On a phone (D3) the byline and the date sit right under the title,
   above the picture, the name and the date each starting at the start edge (HB-1: the column kept the row's baseline
   alignment and the name ended 72px short of the edge), the tools in one row under them, no hairline (the picture
   that follows is the edge); then the contents, then the facts. The magazine's cover keeps round 30's order from 750
   (the byline after the picture). Gate a-guide-head-out-of-its-rulings; release gate entry byline-not-one-row.
   ===================================================================================================================== */
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by:not(.ea-x){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:var(--eaf-s-2xs,10px) var(--eaf-s-sm,18px);margin:calc(var(--eaf-s-sm,18px) * var(--eag-rhy,1)) 0 0;
  padding-block-end:calc(var(--eaf-s-lg,28px) * var(--eag-rhy,1));border-block-end:1px solid var(--st-line)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__who:not(.ea-x){display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;
  gap:0 .4em;flex:0 1 auto;min-width:0;margin:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__g:not(.ea-x){display:inline}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__sep--g:not(.ea-x){display:inline;margin:0;opacity:.7}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__tools:not(.ea-x){margin-inline-start:auto;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end;justify-self:auto;grid-column:auto}
/* the blocks after the byline in the head draw no line of their own (HB-2) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media:not(.ea-x){margin-top:calc(var(--eaf-s-lg,28px) * var(--eag-rhy,1))}
/* ⛔ KEY-FACTS PLACEMENT (the owner's poll of 04.10, «אחרי «בקצרה», לפני הפרקים» + «גם במחשב, אותו סדר»): the writer's key
   facts left the opening; they stand in the article after the «בקצרה» box and before the contents, on every width
   (src/guide-page.php echoai_al_g_facts). On the article's own ground: its ink, its line, the accent's text colour for the
   numbers (the opening's stage tokens were the band's). Four facts on one row from 750 (HB-4), three on one row as before.
   Gate a-guide-head-out-of-its-rulings; tests/qa-guide-page.php, tests/qa-design-fix-browser.cjs. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-kf:not(.ea-x){--st-num:var(--ea-accent-text);--st-mute:var(--ea-ink-mute);--st-line:var(--ea-line);
  margin:var(--ea-sp-block,28px) 0 0;padding:calc(var(--eaf-s-md,22px) * var(--eag-rhy,1)) 0 0;border-top:1px solid var(--st-line);list-style:none}
@media (min-width:750px){:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-kf:not(.ea-x):has(> li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:749px){
  /* ⛔ THE PHONE BYLINE (owner round 201, the design gate's run 6 PASS): the three circles END the author's line, centred on it,
     and the date line runs whole under them, 8px below; a person's monogram keeps its column at the start, beside the name.
     The author block lends its two lines to the byline's grid (display:contents: the name, then the date, in the order the
     page prints them; only the circles are focusable, and they come after both). A long name breaks between words in
     balanced lines, a person's line at its «·» (the role whole). The byline stays two lines with the fleet's longest name
     (42 characters) at 360 and 390. */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by:not(.ea-x){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;
    border-block-end:0;padding-block-end:0}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by:not(.ea-x):has(> .ea-by__mono){grid-template-columns:auto minmax(0,1fr) auto}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__mono:not(.ea-x){grid-row:1 / span 2;grid-column:1;align-self:start;margin-inline-end:4px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__who:not(.ea-x){display:contents}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__who > .ea-by__g:not(.ea-by__g--2):not(.ea-x){display:block;grid-row:1;grid-column:-3 / -2;min-width:0;text-wrap:balance}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__who > .ea-by__g--2:not(.ea-x){display:block;grid-row:2;grid-column:-3 / -1}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__role:not(.ea-x){display:inline-block}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__sep--g:not(.ea-x){display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__tools:not(.ea-x){grid-row:1;grid-column:-2 / -1;flex:none;margin-inline-start:0;justify-content:flex-end}
  /* D3: the byline above the picture, the facts last (the contents left the opening: PHONE-ORDER, 04.10) */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by:not(.ea-x){order:4}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media:not(.ea-x){order:5}
}

/* ---- THE CONTENTS IN THE PAGE (owner 03.10 21:52 UTC, the board's TOC ruling): a compact anchor list in two columns, open,
   right after «בקצרה» from 750 (the body copy) and right after the picture under 750 (the opening's copy); one shows at a
   time. Every row is at least 44px tall to a finger (#22). ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc.ea-toc--c:not(.ea-x){position:static;margin:var(--ea-sp-block,28px) 0 0;padding:var(--eaf-s-sm,18px) 0 0;border:0;border-block-start:1px solid var(--ea-line);background:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-toc.ea-toc--c:not(.ea-x){margin:calc(var(--eaf-s-lg,24px) * var(--eag-rhy,1)) 0 0;padding:0;border:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-toc__head{margin:0 0 var(--eaf-s-2xs,10px);padding:0;font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-toc__head b{font-weight:700;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c ol.ea-flat{columns:2;column-gap:var(--eaf-s-xl,36px);margin:0;padding:0;list-style:none;max-inline-size:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c ol.ea-flat > li{break-inside:avoid;margin:0;padding:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-toc__a:not(.ea-x){display:flex;gap:8px;align-items:baseline;margin:0;padding:4px 0;border-radius:4px;background:none;
  color:var(--ea-ink);text-decoration:none;font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);font-weight:500}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-toc__a:not(.ea-x):hover{color:var(--ea-accent-text);background:none;text-decoration:underline;text-underline-offset:3px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-toc__a[aria-current="location"]{font-weight:700}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-n{color:var(--ea-accent-text)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-un .ea-n::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ea-graphic)}
@media (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c .ea-toc__a:not(.ea-x){min-block-size:44px;align-items:center;padding-block:2px}}
@media (max-width:749.98px){:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--body{display:none}}
/* ONE LIST ON A WIDE DESKTOP (3.3.2, the owner's poll of 12.10 17:00:47, his 🗼; it changes the 03.10 ruling knowingly): where
   the side rail is the live contents, the article's own list steps aside. Keyed to html[data-ea-nav="rail"], which only a
   script sets (the prepaint before the first paint, guide.js fit() after): a sidebar theme, a short window, a script-delay
   host or no script keep the article's list (round 105's critic, gate a-contents-row-hidden-where-the-rail-lives) */
html[data-ea-nav="rail"] :is(#echoai-scope,.ea-gs) .ea-g .ea-toc--body{display:none}
/* PHONE-ORDER (the owner's ruling of 04.10; it supersedes the phone line above: «the contents right after the picture»):
   under 750 the picture is followed by «בקצרה», and the contents follow it FOLDED to one line, «מה יש במדריך · N פרקים»,
   a native disclosure closed in the HTML (no script decides it, nothing moves while the page loads), 48px tall to a
   finger; a tap opens the same two-column list. From 750 the article's open copy shows and this one does not. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold,:is(#echoai-scope,.ea-gs) .ea-g .ea-art nav.ea-toc--fold{display:none}
@media (max-width:749.98px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc.ea-toc--fold:not(.ea-x){display:block;margin:var(--ea-sp-block,28px) 0 0;padding:0;border:0;border-block:1px solid var(--ea-line);background:none}
  /* six chapters or fewer: the same list, open (his poll's addition), as the article's copy draws it */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art nav.ea-toc.ea-toc--fold:not(.ea-x){display:block}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold > summary.ea-toc__head{display:block;position:relative;box-sizing:border-box;min-block-size:48px;margin:0;
    padding-block:12px;padding-inline:0 28px;list-style:none;cursor:pointer;font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);-webkit-tap-highlight-color:transparent}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold > summary.ea-toc__head::-webkit-details-marker{display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold > summary .ea-ico{position:absolute;inset-inline-end:0;inset-block-start:calc(50% - 9px);width:18px;height:18px;
    color:var(--ea-accent-text);transition:transform .2s var(--ea-ease,ease)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold[open] > summary .ea-ico{transform:rotate(180deg)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold > summary:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px;border-radius:4px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold[open] > ol.ea-flat{padding-block-end:var(--eaf-s-sm,18px)}
}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-toc--fold > summary .ea-ico{transition:none}}
/* PHONE-LEAD-B (the owner's poll of 04.10, alternative B, after «למה ישר בלוק בקצרה?! זה לא חכם ככה»): under 750, after the
   picture, «בקצרה» is a plain lead paragraph: its heading a small label in the accent's text colour, no box (no ground, no
   ring, no lit line on top), no icon tile; the folded contents follow it (PHONE-ORDER). ⛔ Under 640, not 750: a 1280 window
   at 200% zoom IS a 640 page, and there the heading must keep 1.9x its size (owner round 60; the small label gave 1.43x,
   tests/qa-zoom-every-role.cjs); so from 640 the box and its heading are unchanged.
   decisions/qa-3.1.1/phone-opening-alts/ (the four phones he chose from); tests/qa-phone-lead-browser.cjs. */
@media (max-width:639.98px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum:not(.ea-x){margin-top:var(--eaf-s-lg,28px);padding:0;background:none;box-shadow:none;border:0;border-radius:0;overflow:visible}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum:not(.ea-x)::before,:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum:not(.ea-x)::after{content:none;display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__ico:not(.ea-x){display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__head:not(.ea-x){margin:0 0 6px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum :is(h2,h3).ea-pair__h:not(.ea-x){font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;color:var(--ea-accent-text)}
}
@media print{:is(#echoai-scope,.ea-gs) .ea-g .ea-toc--c{display:none}}

/* ---- THE RAIL IS THE CONTENTS, WHOLE FROM THE FIRST SCREEN (owner 03.10 21:43-21:52 UTC, ruled a BUG): one list from
   chapter 01, the FAQ and the bottom line as unnumbered rows, no tabs, no "now" slot, no fade: not at rest (the list's
   edge mask) and not on load (the first show does not fade in: guide.js sets data-ea-ready after it). From 1200 the list
   shows at every width, its numbers too. Release gate entry rail-not-whole-at-load. ---- */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__scroll:not(.ea-x){display:block;-webkit-mask-image:none;mask-image:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__all.ea-rail__all{display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-n:not(.ea-x){display:inline}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail:not([data-ea-ready]){transition:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__left{margin-block-end:var(--eaf-s-2xs,10px)}
}
/* the rail's rows close enough that a guide of 16 chapters and its two closing rows fit a 900px window whole */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-toc__a:not(.ea-x){margin:0;padding:4px 8px;line-height:1.4}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat .ea-toc__a:not(.ea-x)::before{top:calc(4px + .7em - 4px)}
}

/* ---- D7 (owner look round 03.10 21:42 UTC, tower): ONE SOLID LINE IN THE BRAND COLOUR on the framed boxes, instead of the
   gradient strip that faded out along them («מסגרת חצי טעונה», the design audit #21): the answer box, the bottom line (the
   band's own brand colour), the end banner and the slim line. Same height and place; quiet luxury keeps its rules.
   Gate a-gradient-strip-on-a-box. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-lit.ea-lit::before,:is(#echoai-scope,.ea-gs) .ea-g .ea-lit.ea-lit::after{background:var(--la)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta.ea-cta::before{background:var(--ea-accent)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--band.ea-cta--band::before{background:var(--ea-accent-on-band)}
:is(#echoai-scope,.ea-gs) .ea .ea-cta--slim.ea-cta--slim::before{background:var(--ea-accent)}

/* ---- the design audit's small fixes (3.1.1) ----
   #22: every control of ours a finger meets is at least 44px tall on a touch screen: the copy-link button beside a heading
   was 32px (the tools beside the byline and the contact bar already are). #23: «בקצרה» opens at the article's calm weight on
   a phone too (500, as from 750, RC-3): at 600 a long opening paragraph read as ten bold lines. */
@media (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea-art button.ea-copy:not(.ea-x){inline-size:44px;block-size:44px}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__lead:not(.ea-x){font-weight:500}
/* ---- the opening's one meta row, measured on the agency stand-in at 1440 (the owner's wanted head, 04.10): «<a business name> · עודכן 3
   באוקטובר 2026 · 18-23 דק׳ קריאה» (391px) and the three tools (288px) did not share the 651px column, so the tools went
   under it. From 750, in the opening only, the tools are the compact pills (the same 28px height, tighter sides and gaps,
   the small type of the byline itself) and the row's gaps are the byline's own, so a business name and the tools share one
   row; a name or a role longer than that still wraps the tools under the row, at its far end. A touch screen keeps its
   44px pills (foundation.css, reader-tools.css, listen.css). ---- */
@media (min-width:750px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by:not(.ea-x){column-gap:10px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__who:not(.ea-x){column-gap:.3em}
}
/* ⛔ THE TOOLS ARE CIRCLES (owner round 201): the group of 44px boxes that touch (10px between the circles they draw), its last
   circle's visible edge on the column's end edge (the boxes keep 5px past it), on one line, on every width */
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-by__tools:not(.ea-x){gap:0;flex-wrap:nowrap;margin-inline-end:-5px}

/* ---- D4 (owner look round 03.10 21:54 UTC, tower): OUR PAGE TAKES THE SITE'S GROUND. No white sheet of our own where the
   ground under the guide is proven readable for our ink and our muted ink (the foundation script's data-ea-ground="host",
   lib/design-direction.php): the page paints nothing and the site's own content ground shows; the cards, the boxes and
   the bars keep their own fills, a tone off it. A dark host, a ground too close to our ink, or a held script keep our
   surface (the rule above, QA 29.09 finding 1). The width follows: with nothing painted, the wide stage leaves no white
   step beside a narrower theme box (Astra's 1200 under our 1244). Gate a-sheet-of-our-own-on-the-site's-ground. ---- */
:is(#echoai-scope,.ea-gs) .ea-gv[data-ea-ground="host"]{background:transparent}

/* =====================================================================================================================
   THE FINALE: THE END ZONE TAKES THE PAGE ONCE THE ARTICLE ENDS (the owner's circled laptop screenshot, 04.10: «מי האשם בכל
   החלל הריק והמיותר הזה? מי לא תכנן נכון את המבנה במחשב»; docs/INCIDENTS.md I-71). Cause: the end zone kept the reading
   column's width after the rail ended: its sections carried .ea-col and stood 651px wide at the article's edge, beside the
   rail's column, empty there because the rail steps aside before the end zone. From 1200 every part of the end zone spans
   the whole stage, the rail's column included, and its content sits in one lane of about 1040px in the middle: «האם המדריך
   עזר», the contact card, the guide's questions, «כל המדריכים», the accessibility line. A phone and a tablet are unchanged
   (no rail there). The bottom line stays the article's close: the FAQ follows it as the appendix (END ORDER), inside the
   reading column. Release gate entry end-zone-beside-an-empty-rail; gate a-finale-in-the-reading-column.
   ===================================================================================================================== */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv > .ea-end{--eav-fin:calc(var(--eaf-u,1px) * 1040)}
  :is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > :not(script):not(style):not(.ea-x){inline-size:auto;max-inline-size:none;margin-inline:0;
    padding-inline:max(var(--eag-gut,16px),(100% - var(--eav-fin)) / 2)}
}

/* ---- THE TITLE IN TWO LINES (GUIDE-HEAD-SPLIT, the owner's look poll of 04.10): a title with «: » prints the part before
   it as the big line and the rest as a smaller line under it, both inside the one h1 (src/guide-page.php
   echoai_al_g_hero). The colon is in the text and not drawn: an inline piece at size 0, so the listen tool and a screen
   reader still read «A: B» word for word, with no break of their own inside it. The smaller line is a block, which ends
   the big line; it is the ink of the title at a calm weight, so it reads as the title's second half and the muted
   standfirst under it stays the next step down. Never balanced (owner screenshot 15, I-46). Gate a-guide-title-not-split-at-its-colon. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__h1 > .ea-hero__h1-c:not(.ea-x){font-size:0;letter-spacing:0;clip-path:inset(50%)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hero__h1 > .ea-hero__h1-b:not(.ea-x){display:block;margin-block-start:.32em;font-size:max(.48em,var(--eaf-fs-lead,18px));font-weight:500;line-height:var(--eaf-lh-ui,1.45);letter-spacing:0;text-wrap:pretty}

/* ---- THE FAQ IS AN ACCORDION AT EVERY WIDTH, THE FIRST OPEN (3.2.3, the owner's bug report of 07.10 19:02 Israel: «השאלות
   הנפוצות אמורות להיות אינטראקטיביות עם מצב סגור/פתוח ולא סתם ככה, זה נראה חצי קלאץ'»; it widens FAQ-FOLD-PHONE, the look
   poll of 04.10 «כן, נפתחות בלחיצה, הראשונה פתוחה», from the phone to every width, and lifts its «במחשב הכול פתוח»). Each
   answer is in a details of its own, OPEN in the HTML, after its question, which stays a heading (src/guide-page.php,
   echoai_al_g_faq_fold); guide.js folds all but the first, once. The toggle is the details' summary, named by the question
   (a native disclosure: a button with its open state to a screen reader, Enter and Space): a tinted round «+» / «−» on the
   column's end edge, centred on the whole question (guide.js gives each item --eag-fq-h, the question's height; the design
   gate of 07.10, #1 and #3), a 44px target; a folded question is one whole target. The answers stay in the HTML and
   in FAQPage; with no script and in a print they all show. Gates a-faq-that-does-not-fold-on-a-phone (re-aimed), a-faq-toggle-off-its-question. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold{display:block;margin:0;padding:0;border:0;background:none}
@media all{
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item){--eag-fq-pt:var(--eaf-s-md,22px)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):first-child{--eag-fq-pt:0px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] :is(h3,h4):is(.echoai-post__faq-q,.ea-faq__q){padding-inline-end:52px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold > summary.ea-faq__tg{display:block;position:absolute;z-index:1;inset-block-start:calc(var(--eag-fq-pt) + var(--eag-fq-h,24px) / 2 - 22px);inset-inline-end:0;
    inline-size:44px;block-size:44px;margin:0;padding:0;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold > summary.ea-faq__tg::-webkit-details-marker{display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold > summary.ea-faq__tg::marker{content:""}
  /* folded: the whole question is the target; the round sign stays where it was */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold:not([open]) > summary.ea-faq__tg{inset:0;inline-size:auto;block-size:auto}
  /* the «+» tile's corner is the button knob (3.4.1, NB 351 S1): round in branded, 6px in the magazine, square in quiet */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-faq__ic{position:absolute;inset-block-start:6px;inset-inline-end:0;inline-size:32px;block-size:32px;border-radius:var(--ea-btn-radius,50%);background:var(--ea-tint-strong,var(--ea-surface-2))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold:not([open]) .ea-faq__ic{inset-block-start:calc(var(--eag-fq-pt) + var(--eag-fq-h,24px) / 2 - 16px)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-faq__ic::before,:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-faq__ic::after{content:"";position:absolute;top:50%;left:50%;
    inline-size:12px;block-size:2px;translate:-50% -50%;border-radius:2px;background:var(--ea-accent-ink,var(--ea-ink))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold:not([open]) .ea-faq__ic::after{transform:rotate(90deg)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold[open] .ea-faq__ic::after{display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art summary.ea-faq__tg:focus-visible{outline:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art summary.ea-faq__tg:focus-visible .ea-faq__ic{outline:2px solid var(--ea-focus);outline-offset:2px}
}
@media print{
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold::details-content{display:block;content-visibility:visible}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold > summary.ea-faq__tg{display:none}
}

/* ---- THE GUIDE'S QUESTIONS: ROWS-SYSTEM's numbered rows (the owner's look poll of 04.10) were retired by the design pass of
   11.10 (row 199): the guide's questions are the question page's gallery, one component (assets/gallery.css). Gate
   a-question-list-not-in-numbered-rows (re-aimed). ---- */

/* =====================================================================================================================
   THE DESKTOP STRUCTURE: TWO ZONES (the owner's ruling of 04.10, his polls after the layout inquiry
   decisions/research/desktop-layout-inquiry-1004: «א · שני טורים» with the runner-up's graft «טבלה רחבה נפרשת על כל
   הרוחב»; docs/INCIDENTS.md I-74; and his poll after the two-zone mock the same day: «שני אזורים: הצד נגמר עם המאמר»,
   which replaced «עד הסוף»: «למה שהוא ימשיך עד הסוף? הרי תוכן העניינים נגמר לפני הסקשן של שאלות מתוך המדריך»). It SUPERSEDES round 105's narrow lane as the page's structure (the variant block above
   shrank every block AND the frame to the text, so the hole moved outside the column: 83% of the site width used while
   reading, 57% at the end). It does NOT touch round 30's measure (the running text stays at 31em: 651px at 21px, 64 Hebrew
   characters a line) nor D4 (the stage stays inside the site's own width and paints no ground).
   From 1200, where the stage has room for both (data-ea-two, decided before the first paint: lib/speed.php):
   · the stage is the site's width: the theme's own content box, never wider than the theme's wide size or our cap;
   · column one is the article at the measure, on the start side (the inquiry's structure A, the shot the owner chose);
   · ZONE 1: column two is the REST of that width, from the opening to the ARTICLE's end (the bottom line and the FAQ
     appendix included: END ORDER): the contents (the rail, whole, from chapter 1, the list only) and one contact card under
     it, in one box that stays in view and ends with the article (sticky inside its own grid row, never past it);
   · ZONE 2, the finale: after the article, across the whole stage, each section with a layout of its own so no line runs
     long: «האם המדריך עזר» as one centred line, the end card as a band (the client's own closing words and button; with no
     words, the eyebrow and the button), the guide's questions as numbered rows in two columns, «כל המדריכים» centred;
   · a table that does not fit the article spans both columns and pushes the side box past it: above it while it comes,
     under it once it has passed, so no hole stays beside the text before or after it (assets/guide.js);
   · on a short window (under 800px) the card is folded to its button, so the contents keep their room.
   A phone and a tablet are unchanged; so is a stage with no room (a theme with a sidebar): one column, the top bar.
   Gates a-column-wider-than-its-text, a-finale-in-the-reading-column, a-side-column-past-the-article; release gate
   entries empty-screen (GATE-EMPTY-SCREEN), side-column-past-the-article and finale-narrower-than-the-stage;
   tests/qa-desktop-structure-browser.cjs.
   ===================================================================================================================== */
:is(#echoai-scope,.ea-gs) .ea-scard-slot{display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-rail__left{min-block-size:calc(1em * var(--eaf-lh-ui,1.5))}
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two]{
    --eav-gap:calc(var(--eaf-u,1px) * 56);
    --eag-cap:min(var(--eaf-measure-page) + calc(var(--eaf-u,1px) * 64),var(--eaf-page,100vw) - var(--eag-sbw,0px));
    --eag-two-w:min(var(--eag-cap),var(--wp--style--global--wide-size,var(--responsive--alignwide-width,var(--eag-cap))));
    display:grid;grid-template-columns:minmax(0,var(--eav-m)) minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--eav-gap);align-items:start;
    box-sizing:border-box;inline-size:min(100%,var(--eag-cap));max-inline-size:none;margin-inline:auto}
  /* where the theme's box is narrower than two columns (a block theme's content size), the stage takes the theme's wide size */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two][data-ea-bleed]{inline-size:var(--eag-two-w);margin-inline:calc((100% - var(--eag-two-w)) / 2)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > *{grid-column:1;min-inline-size:0}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g{grid-row:1}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end{grid-row:2}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-gside{grid-column:2;grid-row:1;align-self:stretch;min-block-size:100%}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-gside > .ea-gk{display:flow-root;block-size:100%}
  /* column one: the opening and the article on the column's own edges */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-hero{inline-size:auto;margin-inline:0}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-col{inline-size:auto;max-inline-size:none;margin-inline:0;padding-inline:0}
  /* ⛔ THE OPENING ACROSS THE STAGE (OPENING-3ZONES, the owner's poll of 04.10 after the opening mock, built at the 280px
     picture he picked): three zones, not two. The opening (the crumb, the title and the standfirst, the one meta row with
     the reader's tools at its far end, the picture) spans the whole stage; the picture is a LOW band, 240 of the fluid unit
     tall, across it; zone 1 (the article and the side column) starts under it, the side column WITH the article, beside
     «בקצרה»; zone 2 (the finale) is unchanged. «בקצרה» is on the first screen of a 1440x900 window (the mock: 754px). 3.2 (06.10): on a real Astra page its first line ended
     at 941px, under the fold, so the band is 240 of the fluid unit and the gap under the opening 24 (872-885px on five
     guides); tests/qa-first-screen-summary-browser.cjs.
     No markup moves: the guide's section takes the stage's own two columns and its rows (subgrid), so the opening is the
     section's first row and the article its second; a browser with no subgrid keeps the opening in column one (the build
     before), nothing missing. The key facts stay where D5 put them, after the picture (his "do not move the key facts yet").
     Gate a-guide-opening-not-across-the-stage; tests/qa-desktop-structure-browser.cjs. */
  @supports (grid-template-rows:subgrid){
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g{grid-column:1 / -1;grid-row:1 / span 3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;align-items:start}
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g > *{grid-column:1;min-inline-size:0}
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g > .ea-hero{grid-column:1 / -1;grid-row:1;margin-block-end:calc(var(--eaf-u,1px) * 24)}
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g > .ea-col{grid-row:2}
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-gside{grid-row:2}
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end:not(.ea-x){grid-row:4}   /* after the zone-2 rule's row 2: the opening is a row of its own */
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g > .ea-hero .ea-hero__media{inline-size:auto;max-inline-size:none;margin-inline:0;
      block-size:calc(var(--eaf-u,1px) * 240);aspect-ratio:auto}
    :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-g > .ea-hero .ea-hero__media img{inline-size:100%;block-size:100%;max-block-size:none;aspect-ratio:auto;object-fit:cover}
  }
  /* column two: one box that stays in view to the end of the page; the rail in it is the contents, shown by the stylesheet
     (no script decides it: a host that holds our scripts back still has its contents) */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick{position:sticky;inset-block-start:var(--eag-off);z-index:2;display:flex;flex-direction:column;gap:var(--eaf-s-sm,18px);
    box-sizing:border-box;max-block-size:calc(100vh - var(--eag-box-top,var(--eag-off)) - 24px);margin-block-start:var(--eaf-s-sm,18px)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-rail{position:relative;inset:auto;z-index:auto;inline-size:auto;max-block-size:none;flex:0 1 auto;min-block-size:0;
    opacity:1;visibility:visible;transform:none;transition:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-rail[data-shown] *{visibility:inherit}
  html[data-ea-nav="bar"] :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-rail{display:flex}
  /* the card: the end card's own rules (.ea .ea-cta, its variant and art), sized for the column */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot{display:block;flex:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot .ea-cta{margin:0;inline-size:100%}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot .ea-cta__body{max-inline-size:none;padding:var(--eaf-s-md,22px) var(--eaf-s-lg,28px) var(--eaf-s-lg,28px)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot .ea-cta__eyebrow{margin-block-end:var(--eaf-s-2xs,10px)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot .ea-cta__h{font-size:var(--eaf-fs-large,20px)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot .ea-cta__actions{margin-block-start:var(--eaf-s-md,22px)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard-slot .ea-cta__art{inline-size:100%}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard :is(.ea-cta__lead,.ea-cta__p){display:none}
  /* a table that does not fit the article spans both columns (the runner-up's graft); it pushes the side box (assets/guide.js) */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-art :is(.ea-table__wrap,.echoai-post__table-wrap)[data-ea-wide]{position:relative;z-index:3;
    inline-size:var(--eag-span,100%);max-inline-size:none;margin-inline-end:calc(100% - var(--eag-span,100%))}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-art :is(.ea-table__wrap,.echoai-post__table-wrap)[data-ea-wide] table{inline-size:100%;max-inline-size:none}
  /* ZONE 2 · THE FINALE: after the article, across the whole stage, under one hairline; each section has its own layout,
     so no line runs longer than the measure: the helpful line centred, the end card a band (its words at the card's own
     780px body), the questions in two columns of rows, «כל המדריכים» centred */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end{grid-column:1 / -1;grid-row:2;margin-block-start:calc(var(--eaf-u,1px) * 64);
    padding-block:calc(var(--eaf-u,1px) * 48) var(--eag-end-foot,var(--eaf-s-sm,18px));border-block-start:1px solid var(--ea-line)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > :not(script):not(style):not(.ea-x){inline-size:auto;max-inline-size:none;margin-inline:0;padding-inline:0}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-talk{margin-block:0;padding-block-start:0;border-block-start:0;text-align:center}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-talk .ea-talk__row{justify-content:center}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-talk :is(.ea-talk__note,.ea-talk__st){margin-inline:auto}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-cta{margin-block:calc(var(--eaf-u,1px) * 40) 0}
  /* the band in the brand's colour, not white (the owner's poll of 04.10: «פס הפנייה בסוף בצבע המותג, לא לבן»): the card
     variant's white surface becomes the brand's own light ground across the whole band: its tint role, the ground the
     «בקצרה» box reads in (a mix of the accent darkened the muted words to 3.4:1 on a dark brand), the rings kept; words
     and button keep their colours (measured at 4.5:1 or more on the demo, a light brand and a dark one:
     tests/qa-desktop-structure-browser.cjs). The band and solid variants are the brand's colour already */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-cta.ea-cta--sig{
    background:linear-gradient(90deg,var(--ea-tint),color-mix(in oklab,var(--ea-tint) 70%,var(--ea-surface)))}
  /* the words start at the lighter end in either direction (on the tint itself the demo's eyebrow reads 4.32:1) */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end[dir="ltr"] > .ea-cta.ea-cta--sig{
    background:linear-gradient(270deg,var(--ea-tint),color-mix(in oklab,var(--ea-tint) 70%,var(--ea-surface)))}
  /* ⛔ ONE CONTACT ON EVERY SCREEN (ONE-CTA-PER-SCREEN, the owner's poll of 04.10: «כרטיס הצד נעלם כשהפס מופיע, כפתור אחד
     בכל מסך»): while the band is on screen the side column's card steps aside (assets/guide.js sets data-ea-aside), in place:
     hidden, out of the Tab order, its place kept so nothing moves; a short fade, none with reduced motion. With no script
     nothing is hidden. Gate a-second-contact-on-the-screen; tests/qa-desktop-structure-browser.cjs «ONE-CTA». Since the design
     pass of 11.10 (row 187) the card's slot closes with it and the contents take the room: «THE ANSWER-PAGE DESIGN PASS» below. */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-qs{margin-block-start:var(--eag-end-above,calc(var(--eaf-u,1px) * 56))}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > p.ea-allg{text-align:center}
}
/* a short window: the card is its button, the contents keep their room (the adversary's refinement) */
@media (min-width:1200px) and (max-height:799.98px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard :is(.ea-cta__eyebrow,.ea-cta__h,.ea-cta__art){display:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard .ea-cta__body{padding:0}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard{background:none;border:0;box-shadow:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard::before{display:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard .ea-cta__actions{margin:0}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-scard a.ea-btn{inline-size:100%;justify-content:center}
}
@media print{:is(#echoai-scope,.ea-gs) .ea-gside{display:none}}

/* ---- «בקצרה» KEEPS ITS BOX, CLEANED; THE TWO LABELS ARE QUIET (3.2, B27: R129 Q2, owner 30.09 20:23 UTC «KEEP THE BOX. Only
   the excess shadow and gradient are cleaned»; LBL-1: R158 Q3-Q4, 01.10 «דוגמה מהחיים: a SMALL QUIET label», «בקצרה: a
   QUIET label, kept, small and grey»). The box: one flat ground (the tint, never the gradient that faded to white), no
   ring drawn as a shadow, no blurred glow layer; its corners and its one solid brand line on top (D7) stay. From 640 its
   heading is a small grey label at the read role (15px, it grows with the body: the zoom law holds from 640), its mark in
   the same grey on no tile. Under 640 the box is the owner's plain phone lead (PHONE-LEAD-B, 04.10), untouched. Quiet
   luxury keeps its own rules (its surface and two ink rules). «דוגמה מהחיים»: the label part of a heading prints as a
   small grey line above the example's title (src/reading-ui.php echoai_al_example_labels), a heading that is only the
   label, and the hand-built block's heading, are small and grey; every word stays. Gates a-loud-answer-box,
   a-loud-example-label; tests/qa-quiet-labels-browser.cjs. ---- */
:is(#echoai-scope,.ea-gs) .ea-g{--sum-label:var(--ea-ink-mute-on-tint)}
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="quiet"]{--sum-label:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum.ea-sum{background:var(--sum-bg);box-shadow:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sum.ea-sum::after{content:none;display:none}
@media (min-width:640px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__head:not(.ea-x){gap:8px;margin:0 0 var(--eaf-s-2xs,10px)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__ico:not(.ea-x){width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--sum-label)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-sum .ea-pair__ico:not(.ea-x) svg{width:18px;height:18px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-sum :is(h2,h3).ea-pair__h:not(.ea-x){font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:600;letter-spacing:.01em;color:var(--sum-label)}
}
:is(#echoai-scope,.ea-gs) .ea-art :is(h2,h3,h4) > .ea-hlabel{display:block;margin:0 0 4px;font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:600;letter-spacing:.01em;color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea-art :is(h2,h3,h4) > .ea-hlabel > .ea-hlabel__c{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:is(#echoai-scope,.ea-gs) .ea-art :is(h2,h3,h4).ea-hlabel-only.ea-hlabel-only,:is(#echoai-scope,.ea-gs) .ea-art h3.ea-example__h.ea-example__h{font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:600;letter-spacing:.01em;color:var(--ea-ink-mute)}
:is(#echoai-scope,.ea-gs) .ea-art h3.ea-example__h.ea-example__h::before{width:16px;height:16px;inset-block-start:calc((var(--eaf-lh-ui,1.5) * 1em - 16px) / 2);background:var(--ea-ink-mute)}

/* ---- THE TABLE'S TITLE (3.2, B36: R123 Q4, owner 30.09 19:17 UTC, TOWER: «The writer titles every table. The ingest sanitiser
   lets <caption> through, and it prints above the table as a short bold title»). The writer's own caption (never our
   screen-reader name, .ea-sr) prints above the first row at the table's start edge, bold, at the large read role; it names the
   table. Gate a-table-title-the-door-drops; tests/qa-table-caption-browser.cjs. ---- */
:is(#echoai-scope,.ea-gs) .ea-art table > caption:not(.ea-sr){caption-side:top;text-align:start;margin:0;padding:0 0 var(--eaf-s-2xs,10px);
  font-size:var(--eaf-fs-large,17px);line-height:var(--eaf-lh-head,1.25);font-weight:700;color:var(--ea-ink);background:none;border:0;white-space:normal}

/* ---- THE QUIET-LUXURY CONTACT BUTTON IS FILLED IN THE INK (3.2, B40: R130 Q4, owner 30.09 21:11 UTC, TOWER «QUIET-LUXURY CTA:
   Filled in the ink colour with the surface text; the square corners stay»). Every contact button of ours in the quiet
   direction (the end card, the side card, the slim line, the phone bar, the old rail's button) was the brand's accent fill
   or an ink outline: the one loud colour in a direction of ink and paper. Now: the page's ink, its words in the surface's
   colour; on the direction's dark band, whose ink is its light text, the band's ink and the band's own colour (an ink
   button on an ink band would not be seen). The corners are the direction's (0). Gate a-quiet-button-in-the-brand-colour;
   tests/qa-quiet-cta-browser.cjs. ---- */
:is(#echoai-scope,.ea-gs) :is([data-ea-intensity="quiet"] .ea,.ea[data-ea-intensity="quiet"]) a.ea-btn:not(.ea-x),
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-rail a.ea-rail__cta:not(.ea-x){background:var(--ea-ink);color:var(--ea-surface);box-shadow:none}
:is(#echoai-scope,.ea-gs) :is([data-ea-intensity="quiet"] .ea,.ea[data-ea-intensity="quiet"]) a.ea-btn:not(.ea-x):hover,
:is(#echoai-scope,.ea-gs) [data-ea-intensity="quiet"] .ea-g .ea-rail a.ea-rail__cta:not(.ea-x):hover{background:color-mix(in srgb,var(--ea-ink) 84%,var(--ea-surface));color:var(--ea-surface)}
:is(#echoai-scope,.ea-gs) :is([data-ea-intensity="quiet"] .ea,.ea[data-ea-intensity="quiet"]) .ea-cta--band a.ea-btn:not(.ea-x){background:var(--ea-on-band);color:var(--ea-band)}
:is(#echoai-scope,.ea-gs) :is([data-ea-intensity="quiet"] .ea,.ea[data-ea-intensity="quiet"]) .ea-cta--band a.ea-btn:not(.ea-x):hover{background:color-mix(in srgb,var(--ea-on-band) 86%,var(--ea-band));color:var(--ea-band)}

/* ---- THE END CARD IS SHORT ON A PHONE (3.2, B33: R119 Q1, owner 30.09 18:19 UTC «SHORT ON PHONE ONLY. Below the phone width the
   long paragraph goes and the padding is tightened, to about 300px. Desktop stays as rounds 2/11/32. The client's words are
   unchanged»). Under 600 (the card's own phone width), a card that keeps the client's title or lead does not show its long
   paragraph (it stays in the page, word for word); a card whose only words are that paragraph keeps it. The padding and the
   button's gap tighten. A tablet and a computer are unchanged. Gate a-long-banner-on-a-phone; tests/qa-short-banner-browser.cjs. ---- */
@media (max-width:599.98px){
  :is(#echoai-scope,.ea-gs) .ea .ea-cta:not(.ea-cta--slim):has(.ea-cta__h,.ea-cta__lead) .ea-cta__p:not(.ea-x){display:none}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta:not(.ea-cta--slim) .ea-cta__body:not(.ea-x){padding-block-end:var(--eaf-s-md,22px)}   /* the top stays: the eyebrow keeps clear of the card's art (4.5:1) */
  :is(#echoai-scope,.ea-gs) .ea .ea-cta:not(.ea-cta--slim) .ea-cta__actions:not(.ea-x){margin-block-start:var(--eaf-s-md,22px)}
  /* the card is shorter, so its two auroras (placed at 42% and 108% of its height) would climb under the eyebrow (4.21:1
     measured, 4.52:1 on the full card): they stay where they stood on the full card, 130px and 333px down */
  :is(#echoai-scope,.ea-gs) .ea[data-ea-art="signal"] .ea-cta--sig:has(.ea-cta__h,.ea-cta__lead) .ea-cta__art:not(.ea-x){
    background:radial-gradient(circle 300px at var(--eag-x-end-15) 130px, color-mix(in oklab, var(--ea-accent) var(--eag-aur-a), transparent), transparent),
      radial-gradient(circle 260px at var(--eag-x-end-45) 333px, color-mix(in oklab, var(--ea-spark) var(--eag-aur-b), transparent), transparent)}
}

/* ---- A PHONE ON ITS SIDE (3.2, B30: R127 Q2, owner 30.09 20:06 UTC, TOWER «PHONE LANDSCAPE: On short windows, on touch only,
   the H1 does not grow past the portrait phone size and the answer box sits directly under the title. Desktop zoom is
   unchanged, and the zoom law holds»). A phone turned on its side is a wide, short page: the fluid type read it as a
   computer (H1 48.6px at 844x390) and the picture stood between the title and «בקצרה» (it began at 727px of a 390px screen).
   Only where the window is short (500px or less), in landscape, under a coarse pointer (a finger): the H1 is held at the
   upright phone's size (the display role at 390, 31.06px, times the direction's head factor) and the picture (or the
   typographic cover) is not shown, so «בקצרה» follows the title block. A computer, zoomed or short, has a fine pointer and
   is untouched. Gate a-phone-on-its-side-like-a-computer; tests/qa-phone-landscape-browser.cjs. ---- */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero__h1.ea-hero__h1:not(.ea-x){font-size:min(var(--ea-fs-h1),calc(max(1.94125rem,31.06px) * var(--ea-k-head,1)))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media:not(.ea-x){display:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum:not(.ea-x){margin-top:var(--eaf-s-xs,14px)}   /* directly under: the title block, then the box */
}

/* ---- A TABLET BY ITS ORIENTATION (3.2, B31: R114, owner 30.09 16:42 UTC, ROUND 114, the guide's opening: «TABLET: by
   orientation (tower): portrait like the phone, landscape like the desktop»; its no-picture half is superseded by the cover
   rulings). A tablet had one opening in both orientations: the picture in a rounded 16:9 frame inside the column, so on its
   side (1024x768) «בקצרה» began below the first screen (797px). Under a finger, from 750 to the desktop structure's 1200:
   upright, the picture is the phone's, edge to edge of the screen, square, no frame; on its side (and taller than a phone on
   its side, B30), the desktop's low band, 280 of the fluid unit, so «בקצרה» is on the first screen as on the desktop. The
   later rulings hold (PHONE-LEAD-B: the box from 640; PHONE-ORDER: the contents open from 750); a computer (a fine
   pointer, zoomed or not) is untouched. Gate a-tablet-that-ignores-its-orientation; tests/qa-tablet-orientation-browser.cjs. ---- */
@media (min-width:750px) and (max-width:1199.98px) and (orientation:portrait) and (pointer:coarse){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media:not(.ea-x){inline-size:calc(var(--eaf-page,100vw) - var(--eag-sbw,0px));max-inline-size:none;
    margin-inline:calc(50% - (var(--eaf-page,100vw) - var(--eag-sbw,0px)) / 2);border-radius:0;box-shadow:none}
}
@media (min-width:750px) and (max-width:1199.98px) and (orientation:landscape) and (min-height:500.02px) and (pointer:coarse){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media:not(.ea-x){block-size:calc(var(--eaf-u,1px) * 280);aspect-ratio:auto}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-hero .ea-hero__media:not(.ea-x) img{inline-size:100%;block-size:100%;max-block-size:none;aspect-ratio:auto;object-fit:cover}
}

/* ---- NO ENTRY OR EXIT ANIMATION ON THE GUIDE (3.2, PLUGIN-3.2-ANIM-OFF; the owner's WhatsApp of 06.10, 12:42: «להסיר את
   אנימציה כניסה ויציאה כי כשגוללים למטה או ממש בהתחלה רואים שפוט איזור גדול וריק»). The empty area was OURS: the contents
   rail faded and slid in (opacity 0 to 1 and a 16px slide, .45s) once the reader passed the opening and faded out when the
   article's end passed a third of the screen, so its column stood empty at the top and at the end of his page; the top bar
   slid in (.25s) and its words faded as it tucked away on the way down; the bar at the bottom slid in (.3s); the side card
   faded aside for the end band; the questions «more» adds rose in. Nothing fades or slides in or out any more, on every
   host and not only under reduced motion: each appears and leaves at once (whether and when it shows is unchanged). The
   foundation's scroll reveal (every tip, card and banner at opacity 0 until it scrolled into view) is gone with them:
   assets/foundation.css section 7, lib/design-direction.php. The progress meters and the current chapter's dot still move
   with the reading: they are not an entry or an exit. Gate a-guide-that-fades-in-or-out;
   tests/qa-no-entry-animation-browser.cjs. ---- */
/* 3.3.3 (NB 311, the owner's WhatsApp of 13.10 20:34 and 20:37: «הכרטיס הזה נעלם כמו הבזק ולא בצורה עדינה ונעימה לעין», «קופץ
   בצורה לא נעימה... פשוט הבזק»): the cure of 06.10 made every bar appear and vanish in one frame, a flash. The contents rail
   keeps it (its empty column was the 06.10 cause and it is whole from the first screen since 3.1.1); the top bar, the bottom
   bar, the sheet and the side card move again by THE MOTION STANDARD below, short (180-240ms), on an ease-out, never on the
   first screen's empty column. Gates a-guide-that-fades-in-or-out (re-aimed) and a-flash-on-scroll-or-click. */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail.ea-rail{transition:none;transform:none}
:is(#echoai-scope,.ea-gs) .ea .ea-q.ea-q[data-ea-new]{animation:ea-more-fade .2s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(min(var(--eag-i,0),8) * 30ms)}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea .ea-q.ea-q[data-ea-new]{animation:none}}

/* ---- THE SIDE COLUMN NARROWER, THE BODY AS WIDE AS THE HUB, THE TEXT AS WIDE AS THE BODY (3.2 C2-NARROW, the owner 06.10
   15:22; 3.3.2, the owner 12.10 18:07 and 13.10). From 1200, where the stage is two columns: the side column is 380 of the fluid
   unit, never over 400px, its names balanced; the stage is the hub's width (--eaf-measure-page), leaving a theme's box only where
   that box paints nothing (data-ea-span) and never past a block theme's wide size (data-ea-bleed); the article's track takes the
   rest, and beside the side column the running text, the lists, the headings and every block take the whole track (I-55). A
   phone and a tablet are untouched. The rulings, the measurements and what each one superseded: docs/GUIDE-PAGE.md («The side
   column narrower», 3.3.2). Gates a-side-column-wider-than-the-guide-needs, a-guide-body-narrower-than-the-hub. ---- */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two]{
    --eag-side-w:min(calc(var(--eaf-u,1px) * 380),400px);
    --eav-m:calc(var(--ea-fs-body) * 31 * var(--ea-measure-k,1));
    --eag-stage:var(--eaf-measure-page,1180px);
    grid-template-columns:minmax(min(var(--eav-m),100% - var(--eav-gap) - 300px),1fr) minmax(0,var(--eag-side-w));
    inline-size:min(100%,var(--eag-cap),var(--eag-stage));justify-content:center}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two][data-ea-bleed]{--eag-bleed-w:min(var(--eag-two-w),var(--eag-stage));
    inline-size:var(--eag-bleed-w);margin-inline:calc((100% - var(--eag-bleed-w)) / 2)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two][data-ea-span]{
    --eag-span-w:min(1600px,var(--eaf-page,100vw) - var(--eag-sbw,0px) - 32px,var(--eag-stage));
    inline-size:var(--eag-span-w);max-inline-size:none;margin-inline:calc((100% - var(--eag-span-w)) / 2)}
  /* the article takes the whole track, and so do its running text, its list text and its headings (13.10: «שיותר מילים
     ופסקאות יכנסו בפחות שורות»); a Latin page the same */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-col>.ea-body{max-width:none;margin-inline:0}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-art :where(h2,h3,h4,h5,h6){max-inline-size:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-art :where(p,li,blockquote){max-inline-size:none}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-art .ea-tip{max-inline-size:none}
  /* the chapter names whole, never cut (the owner's approval of 15:49: «👍 ככה טוב», names in full even on two lines): no
     clamp in the side column, the line breaks balanced */
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-g .ea-rail .ea-flat .ea-toc__t.ea-toc__t{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible;text-overflow:clip;text-wrap:balance}
}


/* =====================================================================================================================
   THE BRIDGE (3.2.1, I-86; the polish lane's design gate, run 1 #6, 07.10; owner W62). The journey layer's bridge to the
   next guide (section data-section="decision-bridge", class echoai-post__journey; locked 31.08: an injected category asset,
   before the CTA) is not a chapter: src/guide-page.php keeps it out of the contents, the rail and the count, and
   assets/guide.js gives it no copy-link button. Its h2 still took the PART's look (23px/800 at 390, 36.8px/800 at 1440)
   after the share row, so at the end of a polished guide it read as a sixth part. It reads at the chapter size and weight
   (an h3's), with no rhythm rule above it. The two :not() outrank the rhythm and FONT-ONE rules on the same h2.
   Gate a-bridge-heading-at-part-size.
   ===================================================================================================================== */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(.echoai-post__journey,[data-section="decision-bridge"]) :is(h2,h3):not(.ea-x):not(.ea-y){font-size:var(--ea-fs-h3);font-weight:700;letter-spacing:normal;padding-block-start:0;border-block-start:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(.echoai-post__journey,[data-section="decision-bridge"]) :is(h2,h3):not(.ea-x):not(.ea-y)::before{display:none}

/* =====================================================================================================================
   THE ANSWER-PAGE DESIGN PASS OF 11.10 (NIGHT-BACKLOG rows 187-199; the owner's WhatsApp 14:03-14:33 on a live partner's guide:
   «פרימיום ומלוטש», soft natural motion, exact spacing, one structure for every input). docs/GUIDE-PAGE.md «THE DESIGN PASS».
   ===================================================================================================================== */

/* ---- 190 · «בקצרה» STAYS LIGHT, WITH THE BOTTOM LINE'S CRAFT (the owner, 14:08: «הבקצרה עדיין לא מספיק פרימיום ולא מלוטש
   מספיק. זה נראה בסיסי מידי. אפשר להשאיר אותו בהיר בנתיים אבל צריכים לקחת השראה עיצובית מהשורה התחתונה»). It lifts the quiet
   label of R158 LBL-1 and the flat ground of R129 Q2: from 640 the box is the brand's light ground with two soft glows of its
   own light glow roles (the band's two glows, in their light pair), the lit line on top with its glow, a hairline ring and a
   long soft shadow; the label sits beside a 30px tile in the accent (the bottom line's label row); the first sentence is
   the box's short headline line (src/guide-page.php echoai_al_g_answer_box, the bottom line's own split) and the rest reads
   at the article's own body size under it (the ruled text sizes do not move). Under 640 the box stays PHONE-LEAD-B's plain lead (the owner's poll of 04.10), and its
   headline line is the same structure at the phone's size. Every text on the ground is ink or the accent's ink: measured
   by tests/qa-design-pass-browser.cjs against what is really behind it, 4.5:1 or more. ---- */
@media (min-width:640px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum.ea-sum.ea-sum{--lglow:.38;
    padding:var(--eaf-s-xl,36px) var(--eaf-s-2xl,44px) var(--eaf-s-xl,36px);
    background:
      radial-gradient(60% 110% at 6% 0%,var(--ea-glow-b,transparent),transparent 70%),
      radial-gradient(48% 90% at 100% 100%,var(--ea-glow-a,transparent),transparent 72%),
      var(--sum-bg);
    box-shadow:inset 0 0 0 1px var(--sum-ring,var(--ea-line-on-tint)),0 28px 56px -40px rgba(var(--ea-shadow-rgb,20,10,30),.42)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum.ea-sum.ea-sum::after{content:"";display:block}
  /* quiet luxury keeps its own flat «בקצרה» (3.4.1, NB 351 S1, Q-6): the branded glows, the lit line's blurred glow and the long
     shadow above are not its language; its flat ground and the ink rules above and below stay, as on its question page and its phone */
  :is(#echoai-scope,.ea-gs) .ea-g[data-ea-intensity="quiet"] .ea-art .ea-sum.ea-sum.ea-sum{--lglow:0;background:var(--sum-bg);box-shadow:none}
  /* the box's air under it (the owner, 11.10 18:00: «יש תקלה של ריווח מתחת לכרטיס הוא צמוד מידי לטקסט של המשך גוף התוכן»):
     the text after it starts a full step below, the space the box keeps above its own words */
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum.ea-sum.ea-sum{margin-block-end:var(--eaf-s-xl,36px)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__head.ea-pair__head{gap:10px;margin:0 0 var(--eaf-s-sm,18px)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__ico.ea-pair__ico{width:30px;height:30px;border-radius:9px;background:var(--ea-accent-fill);color:var(--ea-on-accent);
    box-shadow:0 6px 14px -8px rgba(var(--ea-shadow-rgb,20,10,30),.5)}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__ico.ea-pair__ico svg{width:16px;height:16px}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum :is(h2,h3).ea-pair__h.ea-pair__h{font-size:var(--eaf-fs-read-ui,15px);line-height:var(--eaf-lh-head,1.25);font-weight:700;letter-spacing:.01em;color:var(--ea-accent-ink,var(--ea-ink))}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__lead.ea-pair__lead,
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-sum__body > p{font-size:var(--eaf-fs-body,18px);line-height:var(--eaf-lh-body,1.75);font-weight:400;letter-spacing:0;color:var(--ea-ink)}
}
/* the headline line: the first sentence, one structure on every guide and every width (row 197: «לא ברור למה» big or bold) */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-sum__head{display:block;margin:0 0 var(--eaf-s-xs,12px);
  font-size:calc(var(--eaf-fs-read-large,18px) * 1.42);line-height:var(--eaf-lh-head,1.3);font-weight:800;letter-spacing:-.01em;text-wrap:balance;color:var(--ea-ink)}
@media (max-width:639.98px){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-sum__head{font-size:calc(var(--eaf-fs-read-large,18px) * 1.2);font-weight:700}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-sum .ea-pair__lead.ea-pair__lead{font-weight:400}
}

/* ---- 191 · SHARE AND «האם המדריך עזר?» ARE ONE CARD: assets/reader-tools.css draws it, on the guide and the question alike ---- */

/* ---- 199 + 192 · THE GUIDE'S QUESTIONS ARE THE QUESTION PAGE'S GALLERY (assets/gallery.css draws it on both pages; here only
   the guide's own head: «N מדריכים נוספים» beside the heading, the count beside the arrows). ---- */
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg{margin-block-start:var(--eag-end-above,var(--eaf-s-4xl,70px))}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__head{grid-template-columns:minmax(0,1fr) auto auto}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__h:is(#echoai-scope,h2){grid-column:1;font-size:var(--ea-fs-h3,21px);letter-spacing:-.01em;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__of{grid-column:2}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__arrows{grid-column:3}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg p.ea-allg--top{grid-column:1 / -1;grid-row:2;margin:-6px 0 0;padding:0;border:0;text-align:start}
@media (min-width:1024px){
  :is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__head{grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:var(--eaf-s-sm,18px)}
  :is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg p.ea-allg--top{grid-column:2;grid-row:1;margin:0;justify-self:start}
  :is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__of{grid-column:3}
  :is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__arrows{grid-column:4}
}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__h + p.ea-allg--top a.ea-allg__a{min-block-size:32px;font-size:var(--eaf-fs-read,15px)}
@media (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__h + p.ea-allg--top a.ea-allg__a{min-block-size:44px}}
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qs__find{margin:0 0 var(--eaf-s-sm,18px)}
/* the «חדשה» tag on a card's title, as it stood on the row's */
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg .ea-qg__t .ea-new{margin-inline-start:6px;vertical-align:.1em}
/* the end zone's lane on a computer holds the three cards (the question page's own three-up) */
@media (min-width:1200px){:is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] > .ea-end > .ea-qs.ea-qg{margin-block-start:var(--eag-end-above)}}

/* ---- 193 · «לא מצאתם את השאלה שלכם?» closes the questions' section as a card on their lane (assets/readers.css draws it) ---- */
:is(#echoai-scope,.ea-gs) .ea .ea-qs.ea-qg > .ea-ask{margin-block:var(--eag-end-ask,32px) 0}

/* ---- 187 · THE SIDE CARD HANDS OVER, ITS SLOT NEVER EMPTY (the owner, 14:03: «לפעמים שגוללים למטה הבאנר הזה נעלם», on two
   screenshots: the side column's card gone and a hole under the contents while the finale's band was on screen). ONE-CTA-
   PER-SCREEN of 04.10 stays (one contact on every screen): while the band is on screen the card steps aside, but now its
   slot closes with it and the contents take the room, so the column never shows a hole; the box keeps its height (assets/
   guide.js holds it), so nothing beside the article moves. The card fades and its slot closes in 320ms on an ease-out, and
   both come back the same way when the band leaves; under reduced motion it is instant. With no script nothing is hidden.
   PART 17 (3.3.2, NIGHT-BACKLOG 239, the owner's vote 3AA81D00FAA77D0ECC20): the box no longer keeps its height and the
   contents box no longer stretches into the room (that stretch was the «קוביה לבנה ריקה», 181px of white under the last
   row): the box ends at its list. The card's frame and shadow are untouched. ---- */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick > .ea-scard-slot.ea-scard-slot{display:grid;grid-template-rows:1fr;margin-block-start:0;translate:0 0;
    transition:grid-template-rows .24s cubic-bezier(.22,.61,.36,1),opacity .22s cubic-bezier(.22,.61,.36,1),translate .22s cubic-bezier(.22,.61,.36,1),margin-block-start .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick > .ea-scard-slot > .ea-cta{min-block-size:0;overflow:hidden}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick > .ea-scard-slot.ea-scard-slot[data-ea-aside]{grid-template-rows:0fr;opacity:0;visibility:hidden;translate:0 8px;
    margin-block-start:calc(-1 * var(--eaf-s-sm,18px));
    transition:grid-template-rows .24s cubic-bezier(.22,.61,.36,1),opacity .18s cubic-bezier(.22,.61,.36,1),translate .18s cubic-bezier(.22,.61,.36,1),margin-block-start .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s}
}
@media (min-width:1200px) and (prefers-reduced-motion:reduce){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick > .ea-scard-slot.ea-scard-slot:is(*,[data-ea-aside]){transition:none}
}

/* ---- 188 · NATURAL MOTION (the owner, 14:05: «פתיחה וסיגרה של שאלות בלי אפקטים כניסה יציאה נעימים לעין! להוסיף אנימציות
   נעימות טבעיות»; 14:06: «מעברים של כפתורים בלחיצה בלי אנימציית מעבר. פשוט הבזקים»). The FAQ's answers grow open and close
   (assets/guide.js, 280ms on an ease-out, the page under them moving with them, never a jump); the round sign turns from «+»
   to «−» as it does; its circle and every toggle ease between their states. Under reduced motion all of it is instant. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-faq__ic{transition:background-color .2s cubic-bezier(.2,.7,.2,1),scale .14s ease-out}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art .ea-faq__ic::after{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold[open] .ea-faq__ic::after{display:block;transform:rotate(0deg)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold:not([open]) .ea-faq__ic::after{transform:rotate(90deg)}
@media (hover:hover){:is(#echoai-scope,.ea-gs) .ea-g .ea-art summary.ea-faq__tg:hover .ea-faq__ic{background:color-mix(in oklab,var(--ea-tint-strong,var(--ea-surface-2)) 82%,var(--ea-accent))}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art summary.ea-faq__tg:active .ea-faq__ic{scale:.92}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art details.ea-faq__fold[data-ea-moving]{overflow:clip}
@media (prefers-reduced-motion:reduce){
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art :is(.ea-faq__ic,.ea-faq__ic::after){transition:none}
  :is(#echoai-scope,.ea-gs) .ea-g .ea-art summary.ea-faq__tg:active .ea-faq__ic{scale:none}
}

/* ---- 197 · THE BYLINE'S CIRCLE IS THE QUESTION PAGE'S (the owner, 14:30: «העיגול של הנכתב עי צריך להיות כהה כמו spoke ולתקן את
   הרקע עיגול של המדריך»): the band's dark ground, its light initials, and the page's ring with the accent's thin ring around it,
   on a guide whose opening stands on the page (plain); a guide whose opening is the band keeps the tile it stands out on. ---- */
:is(#echoai-scope,.ea-gs) .ea-g[data-ea-hero="plain"] .ea-by__mono.ea-by__mono{background:var(--ea-band);color:var(--ea-on-band);font-weight:800;
  box-shadow:0 0 0 2px var(--ea-surface),0 0 0 4px var(--ea-accent)}

/* ---- 197 follow-up · «בקצרה» AND THE SIDE COLUMN START ON ONE LINE (the owner, 11.10 18:04, on the question page: «הכרטיס של
   בקצרה מתחיל נמוך מידי ביחס לסקשן של תוכן העניינים מצד שמאל. תוודא שהם יתחילו באותו גובה שיראה מושלם»). On two columns the
   box (the article's first block) and the contents' box keep ONE top margin, so their top edges meet one line: measured by
   tests/qa-design-pass-browser.cjs at 1280 and 1440, within 1px. ---- */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-col > .ea-art > .ea-sum:first-child:is(#echoai-scope,section){margin-block-start:var(--eaf-s-lg,28px)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-gside .ea-stick:is(#echoai-scope,div){margin-block-start:var(--eaf-s-lg,28px)}
}

/* ---- A JUMP FROM THE CONTENTS ARRIVES GENTLY (the owner, 11.10 18:07: «חייבים חוויה שלמה ונעימה וברורה»): assets/guide.js
   glides to the chapter at any distance and marks the heading it reached; the heading glows once in the accent's faint tint
   and fades (1.6s). Never under reduced motion (no mark is set there). ---- */
@media (prefers-reduced-motion:no-preference){
  :is(#echoai-scope,.ea-gs) .ea-g [data-ea-arrived]:is(#echoai-scope,h2,h3,h4){border-radius:10px;animation:ea-arrive 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ea-arrive{0%,18%{background-color:color-mix(in oklab,var(--ea-accent) 13%,transparent);box-shadow:0 0 0 8px color-mix(in oklab,var(--ea-accent) 13%,transparent)}
    100%{background-color:transparent;box-shadow:0 0 0 8px transparent}}
}

/* ---- THE GUIDE'S CONTENTS FLOW WITH THE PAGE (the row 198 ruling, brought to the guide on 11.10): no height cap and no list that
   scrolls inside the box; a box taller than the window scrolls with the page and holds at its end (assets/guide.js boxFit,
   --eag-stick-top). One case keeps the box and its inner scroll: a table across both columns in the box's reach (--eag-cap,
   --eag-nav-flex, --eag-nav-of). ---- */
@media (min-width:1200px){
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick:is(#echoai-scope,div){max-block-size:var(--eag-cap,none);inset-block-start:var(--eag-stick-top,var(--eag-off))}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick .ea-rail:is(#echoai-scope,aside,nav,div){flex:var(--eag-nav-flex,none)}
  :is(#echoai-scope,.ea-gs) .ea-gv[data-ea-two] .ea-stick .ea-rail .ea-rail__scroll:is(#echoai-scope,div){flex:var(--eag-nav-flex,none);overflow-y:var(--eag-nav-of,visible)}
}

/* ---- 3.3.3 · THE GUIDE UNDER A FLOATING HEADER, CALMER BARS, ONE SELECTED LOOK (the owner's WhatsApp of 13.10, 20:22-20:34,
   NB 308-311). The side box is held under the host's bars and its list scrolls inside it when it must (assets/guide.js
   boxFit: the rules above read --eag-cap, --eag-nav-flex and --eag-nav-of); the phone sheet opens under the site's header
   (guide.js openSheet, --eag-sheet-top). Here:
   · THE SELECTED ROW (his 20:26: «המסגרת של הרקע מכוערת ולא יושבת נכון וריבועי ומוזר צריך להגיש בצורה נעימה יותר בui עם
     מרווחים נכונים וצל עדין אולי»): the current chapter, in the side column and in the sheet, is a soft card: rounded
     corners whatever the site's corner setting, room around its words, the brand's faint tint and a gentle shadow, never the
     square block of colour. The question gallery's current card speaks the same language (assets/gallery.css).
   · THE BOTTOM BAR (his 20:30: «צריך אייקון שיהיה ברור שעוברים בלחיצה לדף אחר... להקטין את הדבר הזה זה קצת יותר מידי בולט
     בעין»): one slim pill line; the contact is a soft tinted pill with the side card's «to another page» mark, not the
     page's loudest block; the place is a named control (the list's mark, «תוכן עניינים» over «פרק 6 מתוך 16», a chevron that
     turns). When the line cannot hold all of it the contact keeps its mark and its name for a screen reader (data-ea-tight).
   · «×» closes the contact half only (the place stays): back on the next page, off for the visit after a second close (the
     owner's board, 13.10 22:18; assets/guide.js fctaClose).
   · The top bar on a tablet ends in the same named pill. ---- */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-toc__a[aria-current="location"],
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-toc__a[aria-current="location"]{border-radius:var(--ea-soft-radius);background:var(--ea-soft-ground-current);color:var(--ea-soft-ink-current);
  box-shadow:var(--ea-soft-shadow)}   /* the soft card's source, now read from the one layer (assets/reading-ui.css, with the brand roles, 3.4.0) */
/* the mark that slides (assets/guide.js hlMove, the owner's 20:54): the same soft card, one per list, behind the rows; the row
   itself goes clear while the mark is there. 240ms on an ease-out, at once under reduced motion */
:is(#echoai-scope,.ea-gs) .ea-g [data-ea-hl]{position:relative}
:is(#echoai-scope,.ea-gs) .ea-g [data-ea-hl] > .ea-flat{position:relative;z-index:1}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hl{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:var(--ea-soft-radius);pointer-events:none;opacity:0;
  background:var(--ea-soft-ground-current);
  box-shadow:var(--ea-soft-shadow);
  transition:transform .24s cubic-bezier(.22,.61,.36,1),width .24s cubic-bezier(.22,.61,.36,1),height .24s cubic-bezier(.22,.61,.36,1),opacity .18s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-hl[data-on]{opacity:1}
:is(#echoai-scope,.ea-gs) .ea-g [data-ea-hl] .ea-toc__a[aria-current="location"]{background:transparent;box-shadow:none}
:is(#echoai-scope,.ea-gs) [data-ea-rhythm="airy"] .ea-g .ea-hl{display:none}   /* the airy rhythm keeps its own thin edge on the row */
:is(#echoai-scope,.ea-gs) .ea-g .ea-rail .ea-flat::after{transition:transform .2s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea-g .ea-hl{transition:none}}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-toc__a{border-radius:12px;padding:10px 12px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet__scroll{padding:6px 6px 12px;margin-inline:-6px;scroll-padding-block:12px}
:is(#echoai-scope,.ea-gs) .ea-g .ea-sheet .ea-meter{margin-block-start:var(--eaf-s-2xs,10px)}

/* the bottom bar: one slim line, its corners the direction's button knob (3.4.1, NB 351 S1, M-8/Q-5: a pill in branded, 6px in the
   magazine, square in quiet luxury; the button, the place and the × inside it the same) */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta{gap:4px;padding:4px;padding-inline-start:4px;border-radius:var(--ea-btn-radius,999px);
  background:color-mix(in srgb,var(--ea-surface) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ea-line) 80%,transparent),0 10px 26px -18px rgba(var(--ea-shadow-rgb),.4)}
/* the contact half closed on this page (3.3.3, guide.js fctaClose): the place is the bar */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-nocta] :is(.ea-fcta__t,a.ea-fcta__btn.ea-fcta__btn,button.ea-fcta__x){display:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-nocta][data-ea-place]{inset-inline-end:auto}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta:not([data-ea-place]){padding-inline-start:16px}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn.ea-fcta__btn{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding-block:6px;padding-inline:12px 9px;border-radius:var(--ea-btn-radius,999px);
  font-size:var(--eaf-fs-small,14.5px);background:color-mix(in srgb,var(--ea-tint) 80%,var(--ea-surface));color:var(--ea-accent-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ea-tint-line,var(--ea-line)) 40%,transparent);translate:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn.ea-fcta__btn:hover{background:var(--ea-tint-strong,var(--ea-tint));color:var(--ea-accent-ink);translate:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ea-tint-line,var(--ea-line)) 60%,transparent)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn .ea-ico{flex:none;inline-size:16px;block-size:16px}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:is(*,:hover,:focus,:active){width:36px;height:36px}
@media (pointer:coarse){:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn.ea-fcta__btn{min-height:44px}:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:is(*,:hover,:focus,:active){width:44px;height:44px}}
/* the place: the contents' control, a soft pill that says what it opens. Its two lines at the read floor, 15px (3.3.3: the
   release gate's floor read them at 14, the glance size, and neither is a glance word); the room for the extra pixel comes out
   of the spacing (the pill's and the button's side padding, the gaps), never out of the words, so the bar keeps one row and both
   lines at 390 and 375 holds what it held. */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos:is(*,:hover,:focus,:active){gap:4px;padding-inline:8px 5px;border-radius:var(--ea-btn-radius,999px);background:var(--ea-surface-2);
  box-shadow:inset 0 0 0 1px var(--ea-line);line-height:1.15;transition:background-color .18s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos:hover{background:color-mix(in srgb,var(--ea-surface-2) 70%,var(--ea-line))}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__ico{display:inline-grid;place-items:center;flex:none;color:var(--ea-accent-text)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__pl{display:flex;flex-direction:column;min-width:0}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__lab{font-size:var(--eaf-fs-read,15px);line-height:1.1;font-weight:600;color:var(--ea-ink);white-space:nowrap}   /* the ink: the mute read 4.34:1 on the pill (the design gate of 13.10), under 4.5 */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__k{font-size:var(--eaf-fs-read,15px);line-height:1.15;font-weight:800;color:var(--ea-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos .ea-fcta__chev{margin-inline-start:auto;transition:rotate .22s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__pos[aria-expanded="true"] .ea-fcta__chev{rotate:180deg}
@media (max-width:399.98px){:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__ico{display:none}}
/* the line cannot hold all of it (guide.js fctaLine): first the place's second line steps aside, then the contact keeps its
   mark with its name for a screen reader */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-tight] .ea-fcta__pl [data-ea-pos]{display:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-tight] .ea-fcta__lab{font-weight:700;color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-tight="2"] .ea-fcta__bl{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-tight="2"] a.ea-fcta__btn.ea-fcta__btn{flex:none;inline-size:44px;padding:0;justify-content:center}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea.ea-fcta .ea-fcta__chev{transition:none}}

/* the top bar on a tablet ends in the same named pill, its chevron turning while the sheet is open */
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__open{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding-inline:10px 8px;border-radius:999px;
  background:var(--ea-surface-2);box-shadow:inset 0 0 0 1px var(--ea-line);color:var(--ea-ink)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__lab{font-size:var(--eaf-fs-glance,14px);font-weight:700}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__open .ea-ico{color:var(--ea-accent-text)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar__open .ea-topbar__chev{transition:rotate .22s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-topbar[aria-expanded="true"] .ea-topbar__chev{rotate:180deg}

/* ---- 3.3.3 · THE READING LINE ON THE GUIDE (the owner's 13.10 20:57: «הפס הזה של התקדמות לא מופיע בעוד עמודים שלנו»): the
   question page's 2px line, brand into spark, on the bottom edge of the host's bars, filled by the guide's reading progress
   (assets/guide.js tick, the meter's own value), easing between its frames; hidden while the tablet's top bar, which has its
   own line, is on screen. In print, nothing. ---- */
:is(#echoai-scope,.ea-gs) .ea-gprog{position:fixed;z-index:50;inset-block-start:var(--eax-toc-offset,0px);inset-inline:0;block-size:2px;pointer-events:none;
  transition:opacity .2s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea-gprog i{position:absolute;inset:0;background:linear-gradient(to left,var(--ea-accent),var(--ea-spark));transform:scaleX(var(--s,0));transform-origin:right center;
  transition:transform .2s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) .ea-gprog[dir="ltr"] i{background:linear-gradient(to right,var(--ea-accent),var(--ea-spark));transform-origin:left center}
html[data-ea-nav="bar"]:has(.ea-topbar[data-shown="1"]) :is(#echoai-scope,.ea-gs) .ea-gprog{opacity:0}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea-gprog,:is(#echoai-scope,.ea-gs) .ea-gprog i{transition:none}}
@media print{:is(#echoai-scope,.ea-gs) .ea-gprog{display:none}}
/* the site's own contact on screen (R122 Q3; 3.3.3 a corner bubble too, guide.js hostContact): the contact half steps aside whole,
   its line and «×» with it, and the bar is the place alone */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-host-contact] :is(.ea-fcta__t,a.ea-fcta__btn.ea-fcta__btn,button.ea-fcta__x){display:none}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-host-contact][data-ea-place]{inset-inline-end:auto}

/* ---- 3.3.3 · A PICTURE THAT ARRIVES, AND THE LANDING ROW (NB 311; the motion audit of 13.10, P1 and P2): a picture still on its
   way when the script runs fades in as it arrives (guide.js data-ea-img; its room is the same, nothing moves); the quiet row a
   reader who lands mid-guide sees rises in over 240ms (its entry, @starting-style; it leaves at once). None under reduced
   motion. ---- */
:is(#echoai-scope,.ea-gs) img[data-ea-img]{transition:opacity .25s cubic-bezier(.22,.61,.36,1)}
:is(#echoai-scope,.ea-gs) img[data-ea-img="wait"]{opacity:0}
@media print{:is(#echoai-scope,.ea-gs) img[data-ea-img][data-ea-img]{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  :is(#echoai-scope,.ea-gs) .ea-land:not([hidden]){transition:opacity .24s cubic-bezier(.22,.61,.36,1),translate .24s cubic-bezier(.22,.61,.36,1)}
  @starting-style{:is(#echoai-scope,.ea-gs) .ea-land:not([hidden]){opacity:0;translate:0 8px}}
  /* 3.8.3 #5: it leaves as it came */
  :is(#echoai-scope,.ea-gs) .ea-land[hidden]{opacity:0;translate:0 8px;transition:opacity .16s var(--ea-ease-in,ease-in),translate .16s var(--ea-ease-in,ease-in),display .16s allow-discrete}
}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) img[data-ea-img]{transition:none}:is(#echoai-scope,.ea-gs) img[data-ea-img="wait"]{opacity:1}}

/* ---------------------------------------------------------------- THE SOFT CARD ON THE GUIDE (3.4.0; NB 324 rows 1 and 3, the
   owner's 14.10 02:32: «תרחיב את זה לעוד רכיבים וגם לשאר התצוגות»). Phone, tablet and desktop alike; every value is the one
   layer's (assets/reading-ui.css, docs/SOFT-CARD.md), none restated. Gate a-soft-card-off-the-shared-layer.

   A · THE FAQ: the open question is the soft card. Every question keeps the same room, open or closed, so opening only fades
   the ground and the lift in (no padding moves; guide.js measures the question as before); the hairlines between closed
   questions sit inside the text column and step aside around the open card. The first question, flush with the heading,
   takes its room ABOVE itself, so nothing under it moves. The open «−» is the surface with the ring only (the design
   director, VERDICT-pair-1-r1 #6: its 1px lift was a halo). */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):is(*,:first-child){
  margin-inline:calc(-1 * var(--ea-soft-room));padding-inline:var(--ea-soft-room);border-block-start-color:transparent;border-radius:var(--ea-soft-radius-lg);background:transparent;box-shadow:none;
  transition:background-color var(--ea-soft-ease),box-shadow var(--ea-soft-ease)}
/* ⛔ THE FAQ'S ROOMS, ONE SCALE (3.4.0, the owner's WhatsApp of 14.10 15:40, 3B2BEB5A5D036C77BAAA, on the built pair: «יש עוד מקום
   לשפר ולדייק ריווחים נכונים ומדויקים בתוך הסקשן שאלות נפוצות»). Measured on 3.4.0 before (research/bottom-build-1410): the
   open card's room above its question 15px on the first question and 18 on the others, 23.6 under its answer; the heading 7.8px
   over the first card's edge; two open cards touching, their rings one line. Now, phone and laptop alike, on the page's scale:
   every question the same room above and below (--eaf-s-md, the first one too: the toggle reads it, --eag-fq-pt); the answer's
   last line trimmed of its half-leading, so an open card's room under its words equals the room over its question; one gap
   between two questions (--eaf-s-2xs), the hairline in its middle, so two open cards never touch, and half of it under an open
   card, where the card's edge is the line (the director of 14.10: 24 over a closed question against 20 under it); the heading one step
   (--eaf-s-2xs) over the first card's edge. Opening still moves no padding. Gate a-faq-room-off-the-scale;
   tests/qa-faq-rooms-browser.cjs (each room measured from the words' ink at 390 and 1440). */
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):is(*,:first-child){--eag-fq-pt:var(--eaf-s-md,20px);padding-block:var(--eaf-s-md,20px);border-block-start-width:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):first-child{margin-block-start:calc(var(--eaf-s-2xs,8px) - var(--eaf-s-md,20px))}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item) + :is(.echoai-post__faq-item,.ea-faq__item){margin-block-start:var(--eaf-s-2xs,8px)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):has(> details[open]) + :is(.echoai-post__faq-item,.ea-faq__item):not(:has(> details[open])){margin-block-start:calc(var(--eaf-s-2xs,8px) / 2)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] details.ea-faq__fold[open] > :not(summary):last-child{margin-block-end:calc((1em - 1lh) / 2)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item)::before{content:"";position:absolute;inset-inline:var(--ea-soft-room);inset-block-start:calc(var(--eaf-s-2xs,8px) / -2 - .5px);
  block-size:1px;background:var(--ea-line);transition:opacity .2s cubic-bezier(.2,.7,.2,1);pointer-events:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):first-child::before{display:none}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):has(> details[open])::before,
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):has(> details[open]) + :is(.echoai-post__faq-item,.ea-faq__item)::before{opacity:0}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):is(*,:first-child):has(> details[open]){
  background:var(--ea-soft-ground-current);box-shadow:var(--ea-soft-shadow)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):has(> details[open]) :is(h3,h4):is(.echoai-post__faq-q,.ea-faq__q){color:var(--ea-soft-ink-current)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] details.ea-faq__fold[open] > summary.ea-faq__tg{inset-inline-end:var(--ea-soft-room)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] details.ea-faq__fold:not([open]) .ea-faq__ic{inset-inline-end:var(--ea-soft-room)}
:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] details.ea-faq__fold[open] .ea-faq__ic{background:var(--ea-soft-ground);box-shadow:var(--ea-soft-ring)}
@media (prefers-reduced-motion:reduce){:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item):is(*,:first-child){transition:none}}
@media print{:is(#echoai-scope,.ea-gs) .ea-g .ea-art [data-ea-faq-fold] > :is(.echoai-post__faq-item,.ea-faq__item)::before{opacity:1}}

/* C · A TABLE IS A CALM CARD: the layer's ring as its border, its lift, its large radius, the current ground on its heading
   row and the layer's room at both ends of every row. On a phone the pinned first column and the soft fade at the far edge
   stay (R113 Q19: «a visible hint»), inside the card, so a column cut by the edge reads as «there is more», never as a broken
   page; the fade no longer cuts the card's own lift (mask-clip). Layout-neutral: the ring's 1px is taken back from the first
   and the last row, so nothing under the table moves. */
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap,.echoai-post__table-wrap):is(*,[data-ea-scroll],[data-ea-fits]){
  border:1px solid var(--ea-soft-ring-color);border-radius:var(--ea-soft-radius-lg);background:var(--ea-soft-ground);box-shadow:var(--ea-soft-lift);mask-clip:no-clip}
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t,table.echoai-post__table,table:not([class])) > :is(thead,tbody) > tr > :is(td,th):nth-child(n):is(*,:first-child,:last-child){
  padding-inline:var(--ea-soft-room)}
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t,table.echoai-post__table,table:not([class])) > thead > tr > th:nth-child(n),
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t,table.echoai-post__table,table:not([class])) > tbody > tr:first-child > th[scope="col"]:nth-child(n){
  padding-block:calc(var(--eaf-s-xs) - 1px) var(--eaf-s-xs);background:var(--ea-soft-ground-current);color:var(--ea-soft-ink-current);font-weight:700;
  border:0;border-block-end:1px solid var(--ea-soft-ring-color)}
:is(#echoai-scope,.ea-gs) .ea-art :is(table.ea-t,table.echoai-post__table,table:not([class])) > tbody > tr:last-child > :is(td,th):nth-child(n){
  padding-block-end:calc(var(--eaf-s-xs) - 1px);border-block-end-color:transparent}

/* =====================================================================================================================
   THE END OF A GUIDE, «T» (3.4.0, NIGHT-BACKLOG 315; the owner, 13.10 22:55: «זה גם התחתית לסוף המדריך»; approved 14.10 16:01).
   The end card in the client's own closing words (lifted from the article: lib/cta-content.php), the end row under it
   (lib/end-row.php), then the questions. Card to row --eaf-s-sm (the row's own margin), row to the questions --eaf-s-lg.
   ===================================================================================================================== */
:is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > .ea-endrow-lane:is(#echoai-scope,.ea-col){margin-block:0;padding-block:0}
/* the client's words never end on a lone word (the director of 14.10: «קיימא.» alone, «בת קיימא» split); the title balances */
:is(#echoai-scope,.ea-gs) .ea .ea-cta :is(.ea-cta__lead,.ea-cta__p):is(#echoai-scope,p){text-wrap:pretty}
:is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > .ea-endrow-lane + .ea-qs:is(#echoai-scope,.ea-qs){margin-block-start:var(--eaf-s-lg,24px)}
@media (max-width:599.98px){
  :is(#echoai-scope,.ea-gs) .ea .ea-cta.ea-cta--p-on-phone .ea-cta__lead:is(#echoai-scope,.ea-cta__lead){display:none}
  :is(#echoai-scope,.ea-gs) .ea .ea-cta.ea-cta--p-on-phone:not(.ea-cta--slim) .ea-cta__p:is(#echoai-scope,.ea-cta__p){display:block;margin-block-start:var(--eaf-s-sm,16px);
    font-size:var(--eaf-fs-large,17px);line-height:var(--eaf-lh-ui,1.5);font-weight:600;color:inherit}
}
/* ⛔ CALM ON A LARGE SCREEN (the owner's WhatsApp of 14.10 02:32: «הכרטיס באנר גם במסכים גדולים עדיין בולט מדי»): the end card
   keeps R193's rings, gradient line and button; its ground is the soft card's current ground, flat (it was the tint run
   across as a gradient), its edge the layer's ring and its lift the layer's gentle one, its art at about half the strength */
@media (min-width:1000px){
  :is(#echoai-scope,.ea-gs) .ea-gv > .ea-end.ea{--eag-aur-a:15%;--eag-aur-b:12%;--eag-beam:10%;--eag-ring:10%}
  :is(#echoai-scope,.ea-gs) .ea-gv > .ea-end.ea[data-ea-intensity="balanced"]{--eag-aur-a:9%;--eag-aur-b:7%;--eag-beam:7%;--eag-ring:8%}
  :is(#echoai-scope,.ea-gs) .ea-gv > .ea-end > .ea-cta.ea-cta--sig:is(#echoai-scope,.ea-cta){background:var(--ea-soft-ground-current,var(--ea-surface));
    border-color:var(--ea-soft-ring-color,var(--ea-line));box-shadow:var(--ea-soft-lift,none)}
}

/* ⛔ THE PHONE'S FLOATING BAR, FINAL (3.4.0; the owner's WhatsApp of 14.10 15:40, 3B2BEB5A5D036C77BAAA, on the built pair: «כנ"ל גם
   במובייל לבאנר הצף עדיין לא מספיק מלוטש לרמה סופית»). Measured on 3.4.0 before (research/bottom-build-1410/measure): the place's
   words 8px from its pill's edge and the button's 12, the × a bare glyph 19px of air from the button against 4 between the two
   pills, a drop shadow of its own. Now one room for the whole bar: 4px from its edge to every part and between every two parts,
   12px from the screen's three edges; the three parts one language (a 44px shape with the line's ring: the place, the button,
   the ×), the words of both pills 14px from their start edge; the bar's lift is the soft-card layer's. Gate
   a-floating-bar-off-its-room; tests/qa-floating-bar-browser.cjs (the guide's and the question's, at 390 and 375). */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta{gap:4px;padding:4px;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--eag-fcta-lift,0px));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ea-line) 80%,transparent),var(--ea-soft-lift);
  background:color-mix(in srgb,var(--ea-surface) 94%,transparent)}   /* the glass stays, its ground denser: where a browser paints no blur, the words under it read as letters through 80% (the director of 14.10: «אי» between the pills) */
:is(#echoai-scope,.ea-gs) .ea.ea-fcta[data-ea-place] button.ea-fcta__pos:is(*,:hover,:focus,:active){padding-inline:14px 12px}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta a.ea-fcta__btn.ea-fcta__btn{padding-inline:14px 12px}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:is(*,:hover,:focus,:active){background:var(--ea-surface-2);box-shadow:inset 0 0 0 1px var(--ea-line)}
:is(#echoai-scope,.ea-gs) .ea.ea-fcta button.ea-fcta__x:hover{background:color-mix(in srgb,var(--ea-surface-2) 70%,var(--ea-line));color:var(--ea-ink)}

/* TABLE-SPACE A (3.4.9, the owner's board notes of 21.10 and his ruling of 21.10 04:41 «הצעה א טובה רק תדייק קצת שהמספר יהיה
   במרווח שווה בתוך התאים», docs/TABLE-SPACE.md): a short-key first column hugs its content, the number centred with the SAME
   room on both sides (the soft card's 14px), at every width, and on a phone claims no 9em; from 1000px the end card is one
   strip, eyebrow and title then the button. Gate: a-table-column-mostly-empty */
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap,.echoai-post__table-wrap)[data-ea-key="short"] :is(table.ea-t,table.echoai-post__table,table:not([class]))>:is(thead,tbody)>tr>:first-child:not(:only-child):nth-child(n){width:1%;min-width:0;max-width:none;white-space:nowrap;text-align:center;padding-inline:var(--ea-soft-room,14px)}
/* phone: the pin's 1px divider is drawn inside the cell's end side, so the start side gives that 1px back (docs/TABLE-SPACE.md) */
@media (max-width:749px){:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap,.echoai-post__table-wrap)[data-ea-key="short"] :is(table.ea-t,table.echoai-post__table,table:not([class])){min-width:max(100%,calc((var(--eag-cols,4) - 1)*9em + 2em))}
:is(#echoai-scope,.ea-gs) .ea-art :is(.ea-table__wrap,.echoai-post__table-wrap)[data-ea-key="short"] :is(table.ea-t,table.echoai-post__table,table:not([class]))>:is(thead,tbody)>tr>:first-child:not(:only-child):nth-child(n){padding-inline-start:calc(var(--ea-soft-room,14px) - 1px)}}
@media (min-width:1000px){
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-cta:not(.ea-cta--slim) .ea-cta__body:not(.ea-x){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--eaf-s-xl,36px);max-width:none;padding:var(--eaf-s-md,22px) var(--eaf-s-xl,36px)}
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-cta:not(.ea-cta--slim) .ea-cta__eyebrow:not(.ea-x){grid-column:1;grid-row:auto;margin-block-end:var(--eaf-s-3xs,6px)}
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-cta:not(.ea-cta--slim) .ea-cta__h:not(.ea-x){grid-column:1;grid-row:auto;font-size:var(--eaf-fs-large,20px)}
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-cta:not(.ea-cta--slim) :is(.ea-cta__lead,.ea-cta__p):not(.ea-x){display:none}
:is(#echoai-scope,.ea-gs) .ea-gv>.ea-end>.ea-cta:not(.ea-cta--slim) .ea-cta__actions:not(.ea-x){grid-column:2;grid-row:1/span 2;margin:0}
}

/* 3.8.3 #6 (NB 318): what a search brings back fades in, only after the first search (guide.js data-ea-searched); docs/GUIDE-PAGE.md */
@media (prefers-reduced-motion:no-preference){
  :is(#echoai-scope,.ea-gs) .ea .ea-qs[data-ea-searched] .ea-qg__card:not([hidden]){animation:ea-more-fade .15s cubic-bezier(.22,.61,.36,1) both}
  :is(#echoai-scope,.ea-gs) .ea .ea-qs__none:not([hidden]){animation:ea-more-fade .12s cubic-bezier(.22,.61,.36,1) both}
}