/* ── IL public site ─────────────────────────────────────────────────────────
   The header, footer, title bands, auth cards and the landing/about skins every
   anonymous visitor to michraziya.co.il sees. Loaded after style.css and scoped
   to `body.il-pub` (the marketing pages) so the signed-in app and the free
   search site are untouched.

   Design system: the UK public site (docs/concept-public-site on the uk
   branch, live as uk-public.css + lp3.css). Night ground for the header, the
   footer, the hero and the close; paper between. The brand's seal blue and
   construction orange; mint for anything live. The night stays night in both
   themes — light mode is not "all white", dark mode deepens the night a step
   so the layering survives. Every paper colour is a token, so the free site's
   dark swap (html[data-ps-theme="dark"] body.il-pub) carries the whole page.

   Display face: Heebo 800 with tight tracking — the Hebrew counterpart of the
   UK's Sora. Secular One stays the wordmark's face and nothing else's. */

body.il-pub {
  --pub-night: #0F1A21; --pub-night-2: #152430; --pub-night-line: rgba(255,255,255,.09);
  --pub-night-ink: #E7EDF1; --pub-night-soft: #9DAFBA; --pub-seal-hi: #7CB7DE;
  --pub-mint: #5DD39E; --pub-accent-hi: #F5A15C; --pub-accent-ink: #B14A05;
  --pub-accent-wash: #FCEFE4; --pub-seal-wash: #EEF5FA;
  --pub-display: "Heebo", system-ui, sans-serif;
  --pub-shadow: 0 1px 2px rgb(28 43 51 / .06), 0 8px 24px rgb(28 43 51 / .08);
  --pub-ease: cubic-bezier(.2,.8,.2,1);
}
/* Dark: the night goes one step deeper than the dark paper (#111A20) so the
   header, hero and footer still read as bands rather than merging with the
   page; the washes turn to their dark answers. */
html[data-ps-theme="dark"] body.il-pub {
  --pub-night: #0B1319; --pub-night-2: #0F1A21; --pub-night-line: rgba(255,255,255,.08);
  --pub-accent-ink: #F19A55; --pub-accent-wash: #33241A; --pub-seal-wash: #1B2E3B;
  --pub-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
}

/* ── header ─────────────────────────────────────────────────────────────── */
body.il-pub .topbar { position: sticky; top: 0; z-index: 50; background: var(--pub-night);
  border-bottom: 1px solid var(--pub-night-line); box-shadow: none; }
body.il-pub .topbar-inner { min-height: 64px; }
body.il-pub .brand { color: #fff; font-family: var(--font-display); }
body.il-pub .brand .mark { filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35)); }
body.il-pub .nav .nav-pub-link { color: var(--pub-night-soft); font-family: var(--pub-display);
  font-weight: 500; font-size: 14px; padding: 6px 2px; }
body.il-pub .nav .nav-pub-link::after { inset-inline: 0; bottom: 0; background: var(--accent);
  opacity: 1; transform: scaleX(0); transform-origin: right; }
body.il-pub .nav .nav-pub-link:hover { color: #fff; background: none; }
body.il-pub .nav .nav-pub-link:hover::after { transform: scaleX(1); }
body.il-pub .nav-pub-links { gap: 18px; }
/* The theme switch, on the night bar. */
body.il-pub .ps-theme { color: var(--pub-night-soft); border-color: rgba(255,255,255,.22); background: none; }
body.il-pub .ps-theme:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.06); }
/* Log in outlined in white, Sign up in the brand orange: two actions, read as a pair. */
body.il-pub .nav .nav-pub-login { color: #fff; font-family: var(--pub-display); font-weight: 500; font-size: 14px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 9px; padding: 9px 14px;
  transition: border-color .2s, background .2s; }
body.il-pub .nav .nav-pub-login:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
body.il-pub .nav .nav-signup, body.il-pub .btn-primary.nav-signup { font-family: var(--pub-display); font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 9px; background: #E8650D; color: #fff; border: 0;
  box-shadow: 0 6px 18px rgb(232 101 13 / .28); }
body.il-pub .nav .nav-signup:hover { background: #F07520; text-decoration: none; }
body.il-pub .nav-pub-menu > summary { color: var(--pub-night-ink); }
body.il-pub .nav-pub-menu .nav-dropdown-menu { background: #152430; border-color: var(--pub-night-line); }
body.il-pub .nav-pub-menu .nav-dropdown-menu a { color: var(--pub-night-ink); }
body.il-pub .nav-pub-menu .nav-dropdown-menu a:hover { background: rgba(255,255,255,.06); }

/* The narrow-screen sizes style.css gives the bar (≤480 / ≤400 / ≤340px) are
   written at lower specificity than the night rules above and would lose to
   them — the bar then cannot fit a phone and the viewport widens past it.
   Restated here at the winning specificity. */
@media (max-width: 480px) {
  body.il-pub .nav .nav-auth .nav-pub-login { padding: 7px 10px; }
  body.il-pub .nav .nav-auth .nav-signup { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 400px) {
  body.il-pub .brand { font-size: 19px; }
  body.il-pub .nav .nav-auth .nav-pub-login,
  body.il-pub .nav .nav-auth .nav-signup { padding: 7px 9px; font-size: 13px; }
  body.il-pub .ps-theme { padding: 6px; }
  /* Ten pixels, measured: the switch's margin, the menu's padding and the
     brand's gap were what kept a 375px phone from fitting the five items. */
  body.il-pub .nav-auth .ps-theme { margin-inline-end: 4px; }
  body.il-pub .nav-pub-menu > summary { padding: 4px 6px; }
  body.il-pub .brand { gap: 6px; }
  body.il-pub .topbar-inner { gap: 6px; }
}

/* ── footer ─────────────────────────────────────────────────────────────── */
body.il-pub .pub-foot { background: var(--pub-night); color: var(--pub-night-soft);
  border-top: 1px solid var(--pub-night-line); padding: 56px 0 28px; font-size: 14px; }
body.il-pub .pub-foot-inner { max-width: calc(1160px + var(--grow)); margin: 0 auto; padding: 0 24px; }
body.il-pub .pub-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; align-items: start; }
body.il-pub .pub-foot-brand .brand { font-size: 22px; }
body.il-pub .pub-foot-brand p { margin: 16px 0 0; max-width: 42ch; line-height: 1.6; }
body.il-pub .pub-foot-badges { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.il-pub .pub-foot-badges li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px;
  border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--pub-night-line);
  font-family: var(--pub-display); font-weight: 600; font-size: 12px; color: #fff; }
body.il-pub .pub-foot-badges svg { width: 15px; height: 15px; color: var(--pub-seal-hi); flex: none; }
body.il-pub .pub-foot-col { display: flex; flex-direction: column; gap: 10px; }
body.il-pub .pub-foot-col h4 { margin: 0 0 4px; font-family: var(--pub-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; color: #fff; }
body.il-pub .pub-foot-col a { color: var(--pub-night-soft); text-decoration: none; transition: color .2s; }
body.il-pub .pub-foot-col a:hover { color: #fff; text-decoration: none; }
body.il-pub .pub-foot-bar { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--pub-night-line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--pub-night-soft); }
body.il-pub .pub-foot-bar span:last-child { max-width: 64ch; }
@media (max-width: 960px) { body.il-pub .pub-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.il-pub .pub-foot-grid { grid-template-columns: 1fr; } }

/* ── document pages: the title band (legal, contact, blog) ─────────────── */
/* Rendered from the page's `topbanner` block, before <main>: a plain
   full-width block. (Pulling it full-bleed from inside main with 100vw and a
   negative margin over-constrains the box in a right-to-left layout and pushed
   the whole page sideways.) */
body.il-pub .pub-doc-head { position: relative; overflow: hidden; isolation: isolate;
  padding: 44px 0 40px; background: var(--pub-night); color: var(--pub-night-ink); }
body.il-pub .pub-doc-head + main.container { padding-top: var(--s5); }
body.il-pub .pub-doc-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
body.il-pub .pub-doc-head .crumbs { color: var(--pub-night-soft); margin-bottom: 18px; font-size: 13px; }
body.il-pub .pub-doc-head .crumbs a { color: var(--pub-night-soft); }
body.il-pub .pub-doc-head .crumbs a:hover { color: #fff; }
body.il-pub .pub-kicker { display: inline-block; font: 700 12px/1 var(--pub-display); letter-spacing: .04em; color: var(--pub-accent-hi); }
body.il-pub .pub-doc-h1, body.il-pub .pub-doc-head h1 { font: 800 clamp(30px, 3.4vw, 42px)/1.12 var(--pub-display);
  letter-spacing: -.02em; color: #fff; margin: 12px 0 0; max-width: 24ch; text-wrap: balance; }
body.il-pub .pub-doc-sub, body.il-pub .pub-doc-head .blg-sub { margin: 12px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--pub-night-soft); max-width: 58ch; }
body.il-pub .pub-doc-meta { margin: 12px 0 0; font-size: 13px; color: var(--pub-night-soft); }
/* the legal hub: one row of pills, the current page filled */
body.il-pub .legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
body.il-pub .legal-nav a { border: 1px solid rgba(255,255,255,.2); color: var(--pub-night-ink); background: rgba(255,255,255,.04);
  font: 600 13px var(--pub-display); padding: 7px 12px; border-radius: 999px; text-decoration: none; transition: border-color .2s, color .2s; }
body.il-pub .legal-nav a:hover { border-color: #fff; color: #fff; }
body.il-pub .legal-nav a.is-active { background: #E8650D; border-color: #E8650D; color: #fff; }
/* the body: an editorial measure, display headings, the "last updated" note stepped back */
body.il-pub .legal-doc { max-width: 820px; }
body.il-pub .legal-doc .blog-body { font-size: 16.5px; line-height: 1.7; }
body.il-pub .blog-body h2 { font-family: var(--pub-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; margin: 36px 0 10px; }
body.il-pub .blog-body h3 { font-family: var(--pub-display); font-weight: 700; font-size: 17px; margin: 22px 0 6px; }
body.il-pub .blog-body a { color: var(--seal); font-weight: 600; }
body.il-pub .legal-doc .blog-article-meta { background: none; border-radius: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); opacity: .85;
  padding: 0 0 16px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
body.il-pub .blog-back { margin: 36px 0 0; font-size: 14px; }
body.il-pub .blog-back a { color: var(--ink-soft); font-weight: 500; }
/* blog: the listing's head rides in the band; the cards keep their styles */
body.il-pub .pub-doc-head .blg-head { margin: 0; text-align: start; }
body.il-pub .pub-doc-head .blg-head h1 { color: #fff; font-family: var(--pub-display); font-weight: 800; letter-spacing: -.02em; }
body.il-pub .blg-feat, body.il-pub .blg-card { border-radius: 16px; }
body.il-pub .pub-doc-head .blog-article-meta { margin: 12px 0 0; color: var(--pub-night-soft); background: none; padding: 0; font-size: 13px; }
body.il-pub .blog-article > .blog-article-hero { margin-top: 0; }

/* ── contact: one card ────────────────────────────────────────────────── */
body.il-pub .ct-page { max-width: 720px; margin: 0 auto; }
body.il-pub .ct-page .blog-body > p:first-child { text-align: center; color: var(--ink-soft); margin-bottom: 22px; }
body.il-pub .ct-grid { display: block; }
body.il-pub .ct-form { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 28px 24px; box-shadow: var(--pub-shadow); }
body.il-pub .ct-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--seal), #E8650D); }
body.il-pub .ct-form .field > span { font: 600 13px var(--pub-display); color: var(--ink); }
body.il-pub .ct-form input, body.il-pub .ct-form textarea, body.il-pub .ct-form select { width: 100%; font-size: 15.5px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); transition: box-shadow .2s, border-color .2s; }
body.il-pub .ct-form input:focus, body.il-pub .ct-form textarea:focus, body.il-pub .ct-form select:focus { outline: 0; border-color: var(--seal); box-shadow: 0 0 0 4px rgba(22,85,122,.14); }
body.il-pub .ct-form textarea { min-height: 120px; resize: vertical; }
body.il-pub .ct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.il-pub .ct-form .btn-primary { margin-top: 6px; font-family: var(--pub-display); font-weight: 700; border-radius: 10px; }
/* the topic note moves under the form as a quiet line, not a side column */
body.il-pub .ct-info { margin-top: 14px; }
body.il-pub .ct-info-inner { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; color: var(--ink-soft); transition: opacity .15s; }
body.il-pub .ct-info-inner.is-switching { opacity: 0; }
body.il-pub .ct-info-kicker { font: 700 12px var(--pub-display); color: var(--pub-accent-ink); }
body.il-pub .ct-info-desc, body.il-pub .ct-info-note { margin: 0; }
body.il-pub .ct-info-note { flex-basis: 100%; opacity: .8; }
body.il-pub .ct-page .blog-body > p.muted:last-child { text-align: center; margin-top: 22px; font-size: 13px; }
body.il-pub .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) { body.il-pub .ct-pair { grid-template-columns: 1fr; } body.il-pub .ct-form { padding: 22px 18px; } }

/* ── auth pages: one card on the night ground ─────────────────────────── */
body.il-pub .auth-wrap { background: var(--pub-night); min-height: calc(100vh - 64px); display: grid; align-content: center; justify-items: center; gap: 18px;
  padding: 56px 24px 72px; position: relative; overflow: hidden; isolation: isolate; }
body.il-pub .auth-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 22% 30%, rgba(22,85,122,.62), transparent 60%), radial-gradient(38% 38% at 82% 95%, rgba(232,101,13,.16), transparent 60%); }
body.il-pub .auth-card { max-width: 440px; border: 0; border-radius: 18px; padding: 30px 30px 26px; box-shadow: 0 30px 60px rgb(0 0 0 / .35);
  position: relative; overflow: hidden; background: var(--surface); }
body.il-pub .auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--seal), #E8650D); }
body.il-pub .auth-card h1 { font: 800 26px/1.15 var(--pub-display); letter-spacing: -.02em; margin-bottom: 6px; color: var(--ink); }
body.il-pub .pub-auth-lead { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; }
body.il-pub .auth-card .field > span { font: 600 13px var(--pub-display); }
body.il-pub .auth-card input:not([type=checkbox]) { border-radius: 10px; }
body.il-pub .auth-card .btn-primary { font-family: var(--pub-display); font-weight: 700; border-radius: 10px; }
body.il-pub .pub-auth-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; list-style: none; padding: 0; font-size: 13px; color: var(--pub-night-soft); }
body.il-pub .pub-auth-facts li::before { content: "✓"; color: var(--pub-mint); font-weight: 700; margin-inline-end: 6px; }

/* ── the landing (/product) and About, on the same system ─────────────── */
/* Shared: night sections, the kicker, the display headings, section rhythm. */
.lp4, .ab-il { --n-ink: #E7EDF1; --n-soft: #9DAFBA; --n-line: rgba(255,255,255,.09); --n-seal: #7CB7DE; --n-mint: #5DD39E; --n-acc: #F5A15C; }
.lp4 .lp-h1, .lp4 .lp-h2, .lp4 .st-h, .lp4 h3, .ab-il h1, .ab-il h2, .ab-il h3 { font-family: var(--pub-display, "Heebo", system-ui, sans-serif); font-weight: 800; letter-spacing: -.02em; }
.lp4 .st-h { font-weight: 800; }
.lp4 .st-kx, .lp4 .st-ev b, .lp4 .lpm-title, .lp4 .lpm-ring-num b { font-family: var(--pub-display, "Heebo", system-ui, sans-serif); }
.lp4 .st-ev b { font-weight: 800; }
.lp4-night { background: var(--pub-night, #0F1A21); color: var(--n-ink); }
.lp4-kicker, .lp4 .lp-kicker, .ab-il .lp-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--pub-display, "Heebo", system-ui, sans-serif);
  letter-spacing: .04em; color: var(--pub-accent-ink, #B14A05); text-transform: none; }
.lp4 .lp-kicker::before, .ab-il .lp-kicker::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.lp4-night .lp4-kicker, .lp4-night .lp-kicker { color: var(--n-acc); }
.lp4 .btn, .ab-il .btn { font-family: var(--pub-display, "Heebo", system-ui, sans-serif); font-weight: 700; border-radius: 10px;
  transition: transform .2s var(--pub-ease, ease), box-shadow .2s, background .2s; }
.lp4 .btn:hover, .ab-il .btn:hover { transform: translateY(-2px); text-decoration: none; }
.lp4 .btn-primary, .ab-il .btn-primary { background: #E8650D; color: #fff; border: 0; box-shadow: 0 6px 18px rgb(232 101 13 / .28); }
.lp4 .btn-primary:hover, .ab-il .btn-primary:hover { background: #F07520; box-shadow: 0 10px 26px rgb(232 101 13 / .36); }
body.il-pub .lp4 .btn-lg, body.il-pub .ab-il .btn-lg { font-size: 15px; padding: 12px 22px; }
.lp4-btn-ghost { background: transparent; color: var(--lp-ink, var(--ink)); border: 1px solid var(--lp-line, var(--line)); }
.lp4-night .lp4-btn-ghost { color: var(--n-ink); border-color: rgba(255,255,255,.22); }
.lp4-night .lp4-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.05); }

/* ── hero (night) ── */
.lp4 .lp-hero { position: relative; overflow: hidden; isolation: isolate; padding: 72px 0 0;
  background: var(--pub-night, #0F1A21); color: var(--n-ink); }
.lp4-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at var(--mx, 24%) var(--my, 30%), rgba(22,85,122,.62), transparent 60%),
              radial-gradient(38% 38% at 84% 95%, rgba(232,101,13,.16), transparent 60%); }
.lp4-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 60% at 40% 40%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 40% 40%, #000, transparent 80%); }
.lp4 .lp-hero-inner { padding-bottom: 60px; }
.lp4 .lp-h1 { color: #fff; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; margin: 14px 0 16px; }
.lp4 .lp-mark { color: var(--n-acc); }
.lp4 .lp-lead { color: var(--n-soft); font-size: 18px; max-width: 52ch; }
.lp4 .lp-cta-row { margin: 26px 0 16px; }
/* The hero has no buttons (the header carries sign-up): the checks sit a
   short step under the lead. */
.lp4 .lp-trustline { color: var(--n-soft); font-size: 13.5px; gap: 6px 18px; margin-top: 22px; }
.lp4 .lp-trustline li { background: none; border: 0; padding: 0; color: inherit; font-weight: 400; }
.lp4 .lp-trustline svg { color: var(--n-mint); }
.lp4-coverage { margin: 18px 0 0; font-size: 13px; color: var(--n-soft); opacity: .8; max-width: 52ch; }
/* the panel: what lands in the morning, framed on the night */
.lp4-panel-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px;
  font: 700 11.5px var(--pub-display, "Heebo", system-ui, sans-serif); letter-spacing: .04em; color: var(--n-soft); }
.lp4-live { display: inline-flex; align-items: center; gap: 6px; color: var(--n-mint); }
.lp4-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-mint); box-shadow: 0 0 0 0 rgba(93,211,158,.7); animation: lp4-pulse 1.8s infinite; }
@keyframes lp4-pulse { 70% { box-shadow: 0 0 0 9px rgba(93,211,158,0); } 100% { box-shadow: 0 0 0 0 rgba(93,211,158,0); } }
.lp4 .lp-window { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 60px rgb(0 0 0 / .35), inset 0 1px 0 rgba(255,255,255,.06); transform: none; }
.lp4 .lp-window:hover { transform: none; }
.lp4 .lp-float { box-shadow: 0 20px 40px rgb(0 0 0 / .35); }
/* the live strip: four facts, counted from the corpus */
.lp4-strip { position: relative; border-top: 1px solid var(--n-line); background: rgba(255,255,255,.03); }
.lp4-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.lp4-strip-grid.is-three { grid-template-columns: repeat(3, 1fr); }
.lp4-strip-grid.is-two { grid-template-columns: repeat(2, 1fr); }
.lp4-stat { display: block; padding: 22px 18px; border-inline-end: 1px solid var(--n-line); text-align: start; color: inherit; text-decoration: none; }
.lp4-strip-grid > :last-child { border-inline-end: 0; }
.lp4-stat b { display: block; font: 800 30px/1 var(--pub-display, "Heebo", system-ui, sans-serif); color: #fff; letter-spacing: -.02em; }
.lp4-stat span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--n-soft); }
.lp4-stat.is-week b { color: var(--n-mint); }

/* ── sources strip (quiet) ── */
.lp4-sources { padding: 18px 0; background: var(--lp-surface, var(--surface)); border-bottom: 1px solid var(--lp-line, var(--line)); }
.lp4-sources-row { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 13px; color: var(--lp-soft, var(--ink-soft)); }
.lp4-sources-lbl { font: 700 11.5px var(--pub-display, "Heebo", system-ui, sans-serif); letter-spacing: .04em; color: var(--lp-ink, var(--ink)); }
.lp4-source::before { content: "⬢"; color: var(--lp-seal, var(--seal)); margin-inline-end: 6px; font-size: 10px; vertical-align: 1px; }
.lp4-sources-explore { margin-inline-start: auto; }
.lp4-sources-explore a { color: var(--lp-seal, var(--seal)); font-weight: 600; text-decoration: none; }
.lp4-sources-explore a:hover { text-decoration: underline; }

/* ── section rhythm ── */
.lp4 .lp-section { padding: 88px 0; }
.lp4 .lp-story { padding-block: 40px 56px; }
.lp4 .lp-head { text-align: start; margin: 0 0 44px; max-width: 720px; }
.lp4 .lp-h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 12px; }
.lp4 .lp-sub { margin-top: 14px; font-size: 17px; }
.lp4 .st-card { border-radius: 18px; box-shadow: var(--pub-shadow, 0 1px 2px rgb(28 43 51 / .06), 0 8px 24px rgb(28 43 51 / .08)); }
.lp4 .st-ch { scroll-margin-top: 80px; }

/* ── 06 with the tender forecast on (il_forecast): the app's forecast rows,
   drawn with the landing's own tokens. The app's (--seal, --ink, --check)
   are not defined on the landing, and an undefined var() fails silently, so
   every colour here is --lp-* / --pub-* with a literal fallback. ── */
.lp4 .st-more { margin-top: 10px; }
.lp4 .st-fc-mark { --g-ln: var(--lp-seal, #16557A); --g-hot: var(--lp-accent, #E8650D);
  --g-hot-wash: var(--pub-accent-wash, #FCEFE4);
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: color-mix(in srgb, var(--lp-seal, #16557A) 10%, transparent); }
.lp4 .st-fc-mark .p4-glyph { display: block; }
[dir="rtl"] .lp4 .st-fc-mark .p4-glyph { transform: scaleX(-1); }
.lp4 .st-fc-src { margin: 16px 0 0; display: grid; gap: 10px; }
.lp4 .st-fc-src > div { display: grid; gap: 2px; }
.lp4 .st-fc-src dt { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--lp-ink, #1C2B33); }
.lp4 .st-fc-src dd { margin: 0; padding-inline-start: 16px; font-size: 14.5px; line-height: 1.55; color: var(--lp-soft, #5A6B73); }
.lp4 .st-fc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-soft, #5A6B73); }
.lp4 .st-fc-dot.is-now { background: var(--lp-accent, #E8650D); }
.lp4 .st-fc-dot.is-est { background: #B7791F; }
.lp4 .st-fc-dot.is-open { background: transparent; box-shadow: inset 0 0 0 2px var(--lp-soft, #5A6B73); }

.lp4 .st-fc { --fc-track: color-mix(in srgb, var(--lp-ink, #1C2B33) 9%, transparent); padding-bottom: 12px; }
.lp4 .st-fc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 0; }
.lp4 .st-fc-row + .st-fc-row { border-top: 1px solid var(--lp-line, #E3E5DE); }
/* The app's ring (il-forecast.css .fc-ring): the arc is how near the date is,
   the centre the time left. */
.lp4 .st-fc-ring { --p: 0; --c: var(--lp-soft, #5A6B73); position: relative; flex: none; width: 46px; height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lp4 .st-fc-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--fc-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.lp4 .st-fc-ring > * { position: relative; }
.lp4 .st-fc-ring b { font-size: 14px; font-weight: 800; color: var(--lp-ink, #1C2B33); }
.lp4 .st-fc-ring i { margin-top: 2px; font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--lp-soft, #5A6B73); }
.lp4 .st-fc-ring.is-now { --c: var(--lp-accent, #E8650D); }
.lp4 .st-fc-ring.is-now b { color: var(--pub-accent-ink, #B14A05); }
.lp4 .st-fc-ring.is-soon { --c: #B7791F; }
.lp4 .st-fc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp4 .st-fc-main b { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--lp-ink, #1C2B33);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp4 .st-fc-main small { font-size: 12px; line-height: 1.6; color: var(--lp-soft, #5A6B73); }
.lp4 .st-fc-tag { display: inline-block; margin-inline-end: 4px; padding: 0 7px; border-radius: 999px; font-style: normal;
  font-size: 11px; font-weight: 700; line-height: 18px; }
.lp4 .st-fc-tag.is-intent { background: #E3F4EB; color: #1E7A4E; }
.lp4 .st-fc-tag.is-round { background: var(--pub-seal-wash, #EEF5FA); color: var(--lp-seal, #16557A); }
.lp4 .st-fc-tag.is-annual { background: var(--pub-accent-wash, #FCEFE4); color: var(--pub-accent-ink, #B14A05); }
.lp4 .st-fc-tag.is-contract { background: #F7EEDC; color: #8A5A12; }
.lp4 .st-fc-when { display: flex; flex-direction: column; gap: 1px; text-align: end; }
.lp4 .st-fc-when b { font-size: 13px; font-weight: 700; color: var(--lp-seal, #16557A); white-space: nowrap; }
.lp4 .st-fc-when b.is-live { color: #1E7A4E; }
.lp4 .st-fc-when small { max-width: 10em; font-size: 11px; line-height: 1.4; color: var(--lp-soft, #5A6B73); }
.lp4 .st-fc-cap { margin: 10px 0 0; font-size: 12px; color: var(--lp-soft, #5A6B73); text-align: center; }
@media (max-width: 560px) {
  /* The date goes under the title: three columns leave a phone's title no room. */
  .lp4 .st-fc-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .lp4 .st-fc-when { grid-column: 2; flex-direction: row; align-items: baseline; gap: 6px; text-align: start; }
  .lp4 .st-fc-when small { max-width: none; }
}
html[data-ps-theme="dark"] body.il-pub .st-fc-ring.is-soon { --c: #E9C27C; }
html[data-ps-theme="dark"] body.il-pub .st-fc-dot.is-est { background: #E9C27C; }
html[data-ps-theme="dark"] body.il-pub .st-fc-tag.is-intent { background: color-mix(in srgb, #1E8E5A 22%, transparent); color: #7FD3A6; }
html[data-ps-theme="dark"] body.il-pub .st-fc-tag.is-contract { background: color-mix(in srgb, #B7791F 22%, transparent); color: #E9C27C; }
html[data-ps-theme="dark"] body.il-pub .st-fc-when b.is-live { color: #7FD3A6; }

/* ── pricing: the offer in prose beside the card ── */
.lp4 .lp-pricing { background: var(--lp-surface, var(--surface)); border-top: 1px solid var(--lp-line, var(--line)); }
.lp4-price-grid { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 684px); gap: 44px; align-items: center; justify-content: center; }
.lp4 .lp-pricing .lp-head { margin: 0; max-width: none; }
.lp4 .lp-pricing .lp-price-wrap { margin: 0; width: 100%; max-width: none; }
.lp4 .lp-price-card { border-radius: 18px; }
/* The pricing card in UK's night navy, not the orange gradient ring — the
   card's edge and its ribbon one colour — and the ribbon with an orange dot,
   not an orange pill. (Dark theme keeps its own line colour below.) */
.lp4 .lp-price-card { border: 1.5px solid #0F1A21; }
.lp4 .lp-price-card::before { display: none; }
.lp4 .lp-price-ribbon { background: #0F1A21; color: #fff; box-shadow: none; font-weight: 600; gap: 7px; }
.lp4 .lp-price-ribbon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F07520; flex: none; }
/* On the dark card the navy pill needs an edge to stand off it. */
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-price-ribbon { box-shadow: 0 0 0 1px var(--line); }
.lp4-no-tier { margin-top: 22px; padding: 16px 18px; border-inline-start: 3px solid #E8650D; background: var(--pub-accent-wash, #FCEFE4);
  border-radius: 10px 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--lp-ink, var(--ink)); }
[dir="rtl"] .lp4-no-tier { border-radius: 0 10px 10px 0; }
@media (max-width: 960px) { .lp4-price-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── FAQ ── */
.lp4 .lp-faq { border-top: 1px solid var(--lp-line, var(--line)); }
.lp4 .lp-q { border-radius: 14px; }
.lp4 .lp-q summary { font-family: var(--pub-display, "Heebo", system-ui, sans-serif); font-weight: 700; }

/* ── the close (night) ── */
.lp4-final { background: var(--pub-night, #0F1A21) !important; color: var(--n-ink) !important; padding: 110px 0 120px; --seal: var(--n-seal); }
.lp4-final .lp-h2 { color: #fff !important; font-size: clamp(30px, 4vw, 48px); max-width: 20ch; margin: 0 auto; }
.lp4-final .lp-sub { color: var(--n-soft) !important; }
.lp4-final .lp-cta-fine { color: var(--n-soft) !important; }
.lp4-final::before { content: ""; position: absolute; inset: auto -10% -60%; height: 120%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(22,85,122,.55), transparent 65%); }
.lp4-final .lp-cta-inner { position: relative; z-index: 1; }
.lp4-final-ctas { justify-content: center; margin: 30px 0 0; }
/* The disclaimer closes the page on the night, between the close and the
   footer — a paper strip there read as a seam. */
.lp4 > .disclaimer { max-width: none; margin: 0; padding: 0 24px 28px; border: 0; text-align: center;
  background: var(--pub-night, #0F1A21); color: var(--n-soft); font-size: 12px; }

/* ── About ── */
.ab-il .ab-hero { position: relative; overflow: hidden; isolation: isolate; padding: 80px 0 72px; background: var(--pub-night, #0F1A21); color: var(--n-ink); }
.ab-il .ab-crumbs { color: var(--n-soft); margin: 0 0 18px; font-size: 13px; }
.ab-il .ab-crumbs a { color: var(--n-soft); }
.ab-il .ab-crumbs a:hover { color: #fff; }
.ab-il .ab-h1 { max-width: 20ch; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.12; color: #fff; margin: 14px 0 16px; text-wrap: balance; }
.ab-il .ab-sub { max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--n-soft); margin: 0; }
.ab-il .ab-sub strong { color: #fff; }
.ab-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
.ab-fact { border: 1px solid var(--n-line); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,.04); }
.ab-fact b { display: block; font: 800 26px/1 var(--pub-display, "Heebo", system-ui, sans-serif); color: #fff; letter-spacing: -.02em; }
.ab-fact span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--n-soft); line-height: 1.4; }
.ab-il .ab-sec { padding: 88px 0; }
.ab-il .ab-sec-head { max-width: 720px; margin-bottom: 44px; }
.ab-il .ab-sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 12px; line-height: 1.12; }
.ab-il .ab-sec-head p { margin: 14px 0 0; font-size: 17px; color: var(--ink-soft); max-width: 62ch; line-height: 1.6; }
/* follow one tender: four steps on one line, connected */
.ab-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.ab-steps::before { content: ""; position: absolute; inset-inline: 8%; top: 22px; height: 2px; background: #E8650D; opacity: .55; z-index: 0; }
.ab-step { position: relative; z-index: 1; }
.ab-node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--pub-display, "Heebo", system-ui, sans-serif);
  color: #fff; background: #E8650D; box-shadow: 0 0 0 6px var(--paper); margin-bottom: 18px; }
.ab-when { font: 700 11.5px var(--pub-display, "Heebo", system-ui, sans-serif); letter-spacing: .04em; color: var(--pub-accent-ink, #B14A05); }
.ab-step h3 { font-size: 20px; margin-top: 8px; }
.ab-step p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* principles: four quiet cards, each a promise and its proof */
.ab-principles-sec { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ab-principle { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 26px 24px; box-shadow: var(--pub-shadow);
  transition: transform .3s var(--pub-ease), box-shadow .3s; }
.ab-principle:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgb(28 43 51 / .12); }
.ab-principle h3 { font-size: 21px; }
.ab-principle p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.ab-ex { display: inline-block; margin-top: 14px; font: 600 13px var(--pub-display, "Heebo", system-ui, sans-serif); color: var(--seal);
  background: var(--pub-seal-wash, #EEF5FA); padding: 6px 10px; border-radius: 7px; }
/* the team note */
.ab-team { padding: 88px 0; background: var(--paper); }
.ab-team-inner { max-width: 760px; margin: 0 auto; }
.ab-team-rule { display: block; width: 56px; height: 3px; background: #E8650D; border-radius: 2px; margin: 0 0 22px; }
.ab-team h2 { font-size: 28px; line-height: 1.2; }
.ab-team p { margin: 14px 0 0; font-size: 16.5px; color: var(--ink-soft); line-height: 1.65; }
.ab-team p a { color: var(--seal); font-weight: 600; }
.ab-team-sign { margin-top: 18px; font: 700 14px var(--pub-display, "Heebo", system-ui, sans-serif); color: var(--ink); }
.ab-fine { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
/* the close */
.ab-final { position: relative; overflow: hidden; background: var(--pub-night, #0F1A21); color: var(--n-ink); padding: 110px 0 120px; text-align: center; --seal: var(--n-seal); }
.ab-final-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.ab-final h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; max-width: 20ch; margin: 0 auto; }
.ab-final-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
/* the band is night in both themes, so its outline button is light in both (it was ink on night in light mode) */
.ab-final .lp4-btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.ab-final .lp4-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; }
.ab-final .ab-trust { margin-top: 16px; font-size: 13.5px; color: var(--n-soft); }
.ab-contact { margin-top: 26px; font-size: 15px; color: var(--n-soft); }
.ab-contact a { color: #fff; font-weight: 600; }
@media (max-width: 960px) { .ab-facts, .ab-steps, .ab-principles { grid-template-columns: 1fr 1fr; } .ab-steps::before { display: none; } }
@media (max-width: 560px) { .ab-facts, .ab-steps, .ab-principles { grid-template-columns: 1fr; } }

/* ── responsive ── */
@media (max-width: 960px) {
  .lp4-strip-grid, .lp4-strip-grid.is-three { grid-template-columns: repeat(2, 1fr); }
  .lp4-stat { border-bottom: 1px solid var(--n-line); }
  .lp4-sources-explore { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .lp4 .lp-hero { padding-top: 44px; }
  .lp4-strip-grid, .lp4-strip-grid.is-three { grid-template-columns: 1fr; }
  .lp4 .lp-section { padding: 64px 0; }
  .ab-il .ab-hero { padding: 56px 0 48px; }
}
@media (prefers-reduced-motion: reduce) { .lp4-live i { animation: none; } .lp4 .btn:hover, .ab-il .btn:hover, .ab-principle:hover { transform: none; } }

/* ── dark: the few literal light colours the skins carry ── */
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-window { border-color: var(--line); }
html[data-ps-theme="dark"] body.il-pub .lp4-sources { background: var(--surface); border-color: var(--line); }
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-pricing { background: var(--surface); border-color: var(--line); }
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-price-card,
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-q { background: var(--surface); border-color: var(--line); }
html[data-ps-theme="dark"] body.il-pub .ab-node { box-shadow: 0 0 0 6px var(--paper); }

/* ── the tender-life panel (hero): one beat at a time ───────────────────── */
.lp4-life { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--n-line); border-radius: 18px; padding: 22px 22px 20px;
  box-shadow: 0 30px 60px rgb(0 0 0 / .35), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; color: var(--n-ink); }
.lp4-life::before { content: ""; position: absolute; inset: -60% auto auto -60%; width: 120%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(93,211,158,.16) 92%, transparent 100%);
  animation: lp4-sweep 6s linear infinite; pointer-events: none; opacity: .7; }
@keyframes lp4-sweep { to { transform: rotate(360deg); } }
.lp4-life-head { display: flex; justify-content: space-between; align-items: center; position: relative;
  font: 700 11.5px var(--pub-display, "Heebo", system-ui, sans-serif); letter-spacing: .04em; color: var(--n-soft); }
.lp4-rail { position: relative; margin: 30px 8px 18px; height: 44px; }
.lp4-rail-track { position: absolute; inset-inline: 0; top: 10px; height: 3px; background: rgba(255,255,255,.14); border-radius: 2px; }
.lp4-rail-fill { position: absolute; inset-inline-start: 0; top: 10px; height: 3px; width: 0; border-radius: 2px;
  background: linear-gradient(270deg, #E8650D, var(--n-acc)); box-shadow: 0 0 12px rgba(232,101,13,.6); transition: width .7s var(--pub-ease, ease); }
.lp4-dot { position: absolute; top: 11.5px; transform: translate(50%, -50%); width: 12px; height: 12px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--pub-night, #0F1A21); border: 3px solid rgba(255,255,255,.35); transition: border-color .3s, background .3s, transform .3s var(--pub-ease, ease); }
.lp4-dot.is-done { border-color: #E8650D; background: #E8650D; }
.lp4-dot.is-on { border-color: #fff; background: #E8650D; transform: translate(50%, -50%) scale(1.45); box-shadow: 0 0 0 7px rgba(232,101,13,.2); }
.lp4-dot-lab { position: absolute; top: 26px; transform: translateX(50%); font: 700 10.5px var(--pub-display, "Heebo", system-ui, sans-serif);
  color: var(--n-soft); white-space: nowrap; cursor: pointer; transition: color .25s; }
.lp4-dot-lab.is-on { color: #fff; }
.lp4-dot-lab:hover { color: var(--n-acc); }
/* Both flags sit over the beat they mean, with a tick down to its dot. The
   "you" flag is start-anchored so it never clips out of the card. */
.lp4-rail-you, .lp4-rail-most { position: absolute; top: -28px; transform: translateX(50%); white-space: nowrap; padding: 3px 7px; border-radius: 5px;
  font: 700 10.5px var(--pub-display, "Heebo", system-ui, sans-serif); letter-spacing: .02em; }
.lp4-rail-you { inset-inline-start: 0; transform: none; color: #fff; background: #E8650D; }
.lp4-rail-most { inset-inline-start: 74%; color: var(--n-soft); border: 1px dashed rgba(255,255,255,.3); font-weight: 600; }
.lp4-rail-you::after, .lp4-rail-most::after { content: ""; position: absolute; inset-inline-start: 50%; bottom: -9px; width: 1px; height: 9px; background: currentColor; opacity: .7; }
.lp4-rail-you::after { inset-inline-start: 18px; background: #E8650D; opacity: 1; }
.lp4-stage { position: relative; min-height: 126px; }
/* Without JS every beat is listed in order; lp4.js stacks them and shows one. */
.lp4-beat { padding: 10px 0; border-top: 1px solid var(--n-line); }
.lp4-beat:first-child { border-top: 0; padding-top: 0; }
.lp4-life.is-stepping .lp4-beat { position: absolute; inset: 0; padding: 0; border: 0; opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.lp4-life.is-stepping .lp4-beat.is-on { opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .5s var(--pub-ease, ease) .18s, transform .5s var(--pub-ease, ease) .18s; }
.lp4-beat-when { font: 700 11.5px var(--pub-display, "Heebo", system-ui, sans-serif); letter-spacing: .02em; color: var(--n-acc); }
.lp4-beat h3 { font-size: 22px; font-weight: 800; color: #fff; margin-top: 6px; letter-spacing: -.01em; line-height: 1.2; }
.lp4-beat p { margin-top: 6px; color: var(--n-soft); font-size: 14.5px; max-width: 44ch; line-height: 1.55; }
.lp4-beat-chip { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 9px;
  background: rgba(93,211,158,.1); border: 1px solid rgba(93,211,158,.25); color: var(--n-ink); font-size: 13px; }
.lp4-beat-chip b { font: 800 18px/1 var(--pub-display, "Heebo", system-ui, sans-serif); color: var(--n-mint); }
.lp4-beat.is-late .lp4-beat-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.lp4-beat.is-late .lp4-beat-chip b { color: var(--n-soft); }
.lp4-life-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--n-line); font-size: 12.5px; color: var(--n-soft); }
.lp4-life-foot[hidden] { display: none; }
.lp4-life-btn { font: 700 13px var(--pub-display, "Heebo", system-ui, sans-serif); color: var(--n-ink); background: rgba(255,255,255,.06); border: 1px solid var(--n-line);
  border-radius: 7px; padding: 5px 10px; cursor: pointer; transition: background .2s; }
.lp4-life-btn:hover { background: rgba(255,255,255,.12); }
.lp4-life-btn.is-nudge { animation: lp4-nudge 1.6s ease-in-out infinite; }
@keyframes lp4-nudge { 0%,100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(93,211,158,0); } 50% { transform: translateX(-3px); box-shadow: 0 0 0 6px rgba(93,211,158,.18); } }
.lp4-bar { flex: 1; height: 2px; background: rgba(255,255,255,.1); border-radius: 1px; overflow: hidden; }
.lp4-bar i { display: block; height: 100%; width: 0; background: var(--n-mint); transition: width .5s var(--pub-ease, ease); }
.lp4-life-caption { margin-top: 12px; font-size: 12.5px; color: var(--n-soft); text-align: center; }
@media (max-width: 560px) {
  .lp4-beat h3 { font-size: 19px; }
  .lp4-rail-most, .lp4-dot-lab { display: none; }
  .lp4-rail { height: 22px; }
  .lp4-life-foot #lp4-stage-hint { display: none; }
  .lp4-life { padding: 18px 16px 16px; }
}

/* ── crossing a section: the seam line drawn as its edge arrives ─────────── */
.lp4-seam { position: absolute; inset-inline: 0; top: 0; height: 1.5px; pointer-events: none; z-index: 2; }
.lp4-seam i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--pub-ease, ease);
  background: linear-gradient(270deg, rgba(232,101,13,.45), rgba(22,85,122,.45) 22%, rgba(22,85,122,.25) 55%, transparent 80%); }
.lp4-seam.is-in i { transform: scaleX(1); }
/* Section heads arrive with a wipe when story.js has motion on (it reveals [data-rv]). */
@media (prefers-reduced-motion: no-preference) {
  html.st-rv-on .lp4 .lp-head[data-rv] .lp-h2 { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path .8s var(--pub-ease, ease), transform .8s var(--pub-ease, ease); }
  html.st-rv-on .lp4 .lp-head[data-rv].is-in .lp-h2 { clip-path: inset(-4px 0 0 0); transform: none; }
}

/* ── footer: the ask, the columns with a line of meaning each ────────────── */
body.il-pub .pub-foot-cta { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center;
  padding: 0 0 40px; margin-bottom: 44px; border-bottom: 1px solid var(--pub-night-line); }
body.il-pub .pub-foot-cta-k { display: inline-block; font: 700 12px/1 var(--pub-display); letter-spacing: .04em; color: var(--pub-accent-hi); }
body.il-pub .pub-foot-cta h3 { margin: 10px 0 0; font: 800 clamp(22px, 2.6vw, 30px)/1.15 var(--pub-display); letter-spacing: -.02em; color: #fff; }
body.il-pub .pub-foot-cta p { margin: 10px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--pub-night-soft); }
body.il-pub .pub-foot-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
body.il-pub .pub-foot .btn { font-family: var(--pub-display); font-weight: 700; border-radius: 10px; }
body.il-pub .pub-foot .btn-primary { background: #E8650D; color: #fff; border: 0; box-shadow: 0 6px 18px rgb(232 101 13 / .28); }
body.il-pub .pub-foot .btn-primary:hover { background: #F07520; text-decoration: none; }
body.il-pub .pub-foot .btn-lg { font-size: 15px; padding: 12px 22px; }
body.il-pub .pub-foot-ghost { background: transparent; color: var(--pub-night-ink); border: 1px solid rgba(255,255,255,.22); }
body.il-pub .pub-foot-ghost:hover { border-color: #fff; background: rgba(255,255,255,.05); text-decoration: none; }
body.il-pub .pub-foot-sources { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--pub-night-soft); max-width: 46ch; }
body.il-pub .pub-foot-sources span { color: #fff; font-weight: 600; }
body.il-pub .pub-foot-col a small { display: block; font-size: 12px; color: var(--pub-night-soft); opacity: .8; margin-top: 1px; }
body.il-pub .pub-foot-col a:hover small { color: var(--pub-night-soft); }
body.il-pub .pub-foot-legal-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--pub-night-soft); opacity: .8; max-width: 26ch; }
@media (max-width: 760px) { body.il-pub .pub-foot-cta { grid-template-columns: 1fr; } }

/* ── the market intelligence grid (night) ───────────────────────────────── */
.lp4-edge { background: var(--pub-night-2, #152430); overflow: hidden; }
.lp4-night .lp-h2, .lp4-edge .lp-h2 { color: #fff; }
.lp4-night .lp-sub, .lp4-edge .lp-sub { color: var(--n-soft); }
.lp4-edge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp4-edge-item { border: 1px solid var(--n-line); border-top: 2px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px;
  background: rgba(255,255,255,.03); transition: transform .3s var(--pub-ease, ease), border-color .3s, background .3s; }
.lp4-edge-item:hover { transform: translateY(-3px); border-top-color: var(--n-acc); background: rgba(255,255,255,.05); }
.lp4-edge-item b { display: block; font: 800 17.5px/1.25 var(--pub-display, "Heebo", system-ui, sans-serif); color: #fff; letter-spacing: -.01em; }
.lp4-edge-item p { margin: 10px 0 0; font-size: 14.5px; color: var(--n-soft); line-height: 1.6; }
.lp4-edge-note { margin: 22px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--n-soft); opacity: .85; max-width: 72ch; }
@media (max-width: 960px) { .lp4-edge-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lp4-edge-item:hover { transform: none; } }

/* ── the side rail: the UK page's pill on the reading edge ───────────────── */
/* story.js builds it from the chapters; this is only its look. A dot per
   chapter, the current one lit orange and a little larger, the chapter's name
   on hover, all on a translucent night pill so it reads over paper and night
   alike. In Hebrew the reading edge is the left; inset-inline-end puts it there. */
body.il-pub .st-rail { inset-inline-end: 18px; gap: 12px; padding: 8px 6px; border-radius: 999px;
  background: rgba(15,26,33,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12); }
body.il-pub .st-raildot { width: 8px; height: 8px; background: rgba(255,255,255,.35);
  transition: transform .3s var(--pub-ease), background .3s; }
body.il-pub .st-raildot:hover { background: #fff; }
body.il-pub .st-raildot.is-on { height: 8px; background: #E8650D; transform: scale(1.5); box-shadow: 0 0 0 5px rgba(232,101,13,.22); }
body.il-pub .st-railtip { inset-inline-end: 20px; transform: translateY(-50%) translateX(-6px); border: 0;
  font: 700 11px var(--pub-display); letter-spacing: .02em; color: #fff; background: rgba(15,26,33,.9);
  padding: 5px 9px; border-radius: 6px; transition: opacity .2s, transform .2s var(--pub-ease); }
body.il-pub .st-raildot:hover .st-railtip, body.il-pub .st-raildot:focus-visible .st-railtip { transform: translateY(-50%); }

/* ── the phone menu, compact (owner 2026-09-29): it ran the width of the
   screen, one row per item. Two columns of tighter rows, never taller than
   the screen. ── */
@media (max-width: 860px) {
  body.il-pub .nav-pub-menu .nav-dropdown-menu {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; padding: 6px;
    max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  body.il-pub .nav-pub-menu .nav-dropdown-menu a { padding: 8px 10px; font-size: 14px; line-height: 1.3; }
}
/* the open menu's button stays readable on the dark bar (it went white, with
   faint night-coloured text) */
body.il-pub .nav-pub-menu[open] > summary { background: rgba(255, 255, 255, .1); color: #fff; }

/* The hero's "בוקר אחד עם מכרזיה" panel on a phone: the full width, as Bidvane
   does (owner 2026-09-29). Centred with auto margins inside the one-column
   grid, it shrank to its content — 274px of a 375px screen. */
@media (max-width: 920px) {
  body.il-pub .lp-hero-visual { width: 100%; justify-self: stretch; }
}

/* ── מוצרים / משאבים: UK's header menus (flag il_public_menus,
   _il_public_nav.html). The same panel as uk-public.css — frosted white glass,
   two columns of rows, each a 40px product mark, a bold name and one line;
   the row you are on turns to the night with an arrow sliding in — written
   for right-to-left and from tokens, so the dark swap
   (html[data-ps-theme="dark"] body.il-pub) carries it. Every rule names a
   menu class that exists only with the flag on. ── */
body.il-pub .nav .nav-products > summary { gap: 2px; }
body.il-pub .nav .nav-products[open] > summary { color: #fff; background: none; }
/* anchored to the button's right edge (inline-start in RTL), opening leftward */
body.il-pub .nav-prod-menu, body.il-pub .nav-res-menu {
  inset-inline-start: -14px; inset-inline-end: auto; top: calc(100% + 10px);
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1px; padding: 5px;
  min-width: 0; max-width: calc(100vw - 32px); border: 0; border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(15, 29, 38, .06), 0 18px 44px -14px rgba(8, 18, 26, .34); }
body.il-pub .nav-prod-menu { width: 680px; }
/* Resources: anchored and opening the same way as מוצרים (owner) */
body.il-pub .nav-res-menu { width: 620px; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.il-pub .nav-prod-menu, body.il-pub .nav-res-menu {
    /* a step more opaque than UK's .78: the IL hero is night under the
       panel, and at .78 its headline read through the blurbs */
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
}
/* the hover path from a menu's name to the menu: a bridge over the gap, so
   crossing it does not count as leaving */
body.il-pub .nav-prod-menu::before, body.il-pub .nav-res-menu::before {
  content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; }
body.il-pub .nav-prod-menu a.nav-prod, body.il-pub .nav-res-menu a.nav-res {
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 9px; padding-inline-end: 34px; border-radius: 8px;
  color: var(--ink); font-family: var(--font-body); text-decoration: none;
  transition: background-color .15s ease, color .15s ease; }
body.il-pub .nav-prod-menu a.nav-prod b, body.il-pub .nav-res-menu a.nav-res b {
  display: block; font-family: var(--pub-display); font-weight: 700; font-size: 15px; line-height: 1.35;
  margin-bottom: 2px; color: var(--ink); }
body.il-pub .nav-prod-menu a.nav-prod > span:not(.pg-tile) > span,
body.il-pub .nav-res-menu a.nav-res > span:not(.pg-tile) > span {
  display: block; font-size: 13.5px; line-height: 1.45; font-weight: 400; color: var(--ink-soft); }
/* the free search and the jobs board along the foot, under one hairline */
body.il-pub .nav-res-menu .nav-res-wide { grid-column: 1 / -1; margin-top: 4px; }
body.il-pub .nav-res-menu .nav-res-wide::before { content: ""; position: absolute; inset-inline: 10px; top: -3px;
  border-top: 1px solid var(--line); }
body.il-pub .nav-res-menu .nav-res-wide + .nav-res-wide { margin-top: 0; }
body.il-pub .nav-res-menu .nav-res-wide + .nav-res-wide::before { content: none; }
/* The product marks' tile, restated here so the menus never depend on the
   app's stylesheet for it: glass on glass, the theme's own seal and orange. */
body.il-pub .nav-prod-menu .pg-tile, body.il-pub .nav-res-menu .pg-tile {
  --g-ln: var(--seal); --g-hot: var(--accent); --g-hot-wash: color-mix(in srgb, var(--accent) 16%, transparent);
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--seal) 30%, transparent); }
body.il-pub .nav-prod-menu .pg-tile .p4-glyph, body.il-pub .nav-res-menu .pg-tile .p4-glyph { display: block; }
[dir="rtl"] body.il-pub .nav-prod-menu .pg-feed .p4-glyph,
[dir="rtl"] body.il-pub .nav-prod-menu .pg-pipeline .p4-glyph { transform: scaleX(-1); }
/* the row's arrow: points the reading way (left) and slides in from the right */
body.il-pub .nav-prod-menu a.nav-prod::after, body.il-pub .nav-res-menu a.nav-res::after {
  content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: #fff; opacity: 0; transform: translateX(6px) scaleX(-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .15s ease, transform .2s var(--pub-ease); }
/* the row you are on: a night card, white name, soft line, the mark on glass */
body.il-pub .nav-prod-menu a.nav-prod:hover, body.il-pub .nav-prod-menu a.nav-prod:focus-visible,
body.il-pub .nav-res-menu a.nav-res:hover, body.il-pub .nav-res-menu a.nav-res:focus-visible {
  outline: none; background: #16222B; text-decoration: none; }
body.il-pub .nav-prod-menu a.nav-prod:hover::after, body.il-pub .nav-prod-menu a.nav-prod:focus-visible::after,
body.il-pub .nav-res-menu a.nav-res:hover::after, body.il-pub .nav-res-menu a.nav-res:focus-visible::after {
  opacity: 1; transform: scaleX(-1); }
body.il-pub .nav-prod-menu a.nav-prod:hover b, body.il-pub .nav-prod-menu a.nav-prod:focus-visible b,
body.il-pub .nav-res-menu a.nav-res:hover b, body.il-pub .nav-res-menu a.nav-res:focus-visible b { color: #fff; }
body.il-pub .nav-prod-menu a.nav-prod:hover > span:not(.pg-tile) > span,
body.il-pub .nav-prod-menu a.nav-prod:focus-visible > span:not(.pg-tile) > span,
body.il-pub .nav-res-menu a.nav-res:hover > span:not(.pg-tile) > span,
body.il-pub .nav-res-menu a.nav-res:focus-visible > span:not(.pg-tile) > span { color: #9DAFBA; }
body.il-pub .nav-prod-menu a.nav-prod:hover .pg-tile, body.il-pub .nav-prod-menu a.nav-prod:focus-visible .pg-tile,
body.il-pub .nav-res-menu a.nav-res:hover .pg-tile, body.il-pub .nav-res-menu a.nav-res:focus-visible .pg-tile {
  --g-ln: #9CCDEB; --g-hot: #FF9A52; --g-hot-wash: rgba(255, 154, 82, .22);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
/* Dark: the glass is the dark surface with a faint light rim, and the row you
   are on steps UP from it (a night card would sink into the panel). */
html[data-ps-theme="dark"] body.il-pub .nav-prod-menu, html[data-ps-theme="dark"] body.il-pub .nav-res-menu {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 44px -14px rgba(0, 0, 0, .6); }
html[data-ps-theme="dark"] body.il-pub .nav-prod-menu a.nav-prod:hover,
html[data-ps-theme="dark"] body.il-pub .nav-prod-menu a.nav-prod:focus-visible,
html[data-ps-theme="dark"] body.il-pub .nav-res-menu a.nav-res:hover,
html[data-ps-theme="dark"] body.il-pub .nav-res-menu a.nav-res:focus-visible { background: #263744; }
@media (prefers-reduced-motion: reduce) {
  body.il-pub .nav-prod-menu a, body.il-pub .nav-res-menu a,
  body.il-pub .nav-prod-menu a::after, body.il-pub .nav-res-menu a::after { transition: none; }
}
/* Between the phone menu and a wide screen the panels shrink to the window
   rather than run off it: one column below 1000px. */
@media (max-width: 1000px) {
  body.il-pub .nav-prod-menu { width: 420px; grid-template-columns: 1fr; grid-auto-rows: auto; }
  body.il-pub .nav-res-menu { width: 380px; grid-template-columns: 1fr; grid-auto-rows: auto; }
}
/* The phone menu with the menus' structure: the labels, the dividers and the
   free search span both columns. */
body.il-pub .nav-pub-menu .nav-dropdown-label { color: var(--pub-night-soft); }
body.il-pub .nav-pub-menu .nav-dropdown-sep { background: var(--pub-night-line); }
@media (max-width: 860px) {
  body.il-pub .nav-pub-menu .nav-dropdown-label,
  body.il-pub .nav-pub-menu .nav-dropdown-sep,
  body.il-pub .nav-pub-menu .nav-pub-search { grid-column: 1 / -1; }
  body.il-pub .nav-pub-menu .nav-dropdown-label { padding: 6px 10px 2px; }
  body.il-pub .nav-pub-menu .nav-dropdown-sep { margin: 4px 0; }
}

/* ── צופית on the landing (flag il_assistant) — UK's Vane section (.lp3-vane,
   uk-public.css) in RTL on the landing's own tokens: copy beside a chat in
   the app's wording. Colours are --lp-* / --surface / --line, re-declared by
   body.il-pub in both themes; the card is the chapters' .st-card. ── */
.lp4 .lp4-tz { border-top: 1px solid var(--lp-line); scroll-margin-top: 70px; }
.lp4 .tz-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lp4 .tz-mark { display: flex; align-items: center; gap: 12px; }
.lp4 .tz-fox { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px var(--lp-line); }
.lp4 .tz-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.lp4 .tz-points li { display: grid; gap: 3px; padding-inline-start: 16px; border-inline-start: 2px solid var(--lp-seal); }
.lp4 .tz-points b { color: var(--lp-ink); font-weight: 700; font-size: 15.5px; }
.lp4 .tz-points span { color: var(--lp-soft); font-size: 14.5px; line-height: 1.55; }
.lp4 .tz-mock { margin: 0; width: 100%; max-width: 540px; justify-self: center; }
.lp4 .tz-card { padding: 0; overflow: hidden; }
.lp4 .tz-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--lp-line); }
.lp4 .tz-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.lp4 .tz-name { display: grid; gap: 3px; }
.lp4 .tz-name b { font-size: 16px; line-height: 1.1; color: var(--lp-ink); }
.lp4 .tz-name > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lp-soft); }
.lp4 .tz-live { width: 7px; height: 7px; border-radius: 50%; background: #1E8E5A; }
.lp4 .tz-log { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lp4 .tz-you { align-self: flex-start; max-width: 82%; margin: 0; padding: 8px 13px; border-radius: 14px 14px 14px 4px;
  background: var(--lp-seal); color: #fff; font-size: 14px; line-height: 1.45; }
.lp4 .tz-reply { display: flex; flex-direction: column; gap: 8px; }
.lp4 .tz-says { margin: 0; padding: 3px 0; font-size: 14px; line-height: 1.5; color: var(--lp-ink); }
.lp4 .tz-box { border-radius: 10px; background: color-mix(in srgb, var(--lp-seal) 6%, transparent); overflow: hidden; font-size: 13.5px; }
.lp4 .tz-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; margin: 4px 0 6px; }
.lp4 .tz-cmp th, .lp4 .tz-cmp td { padding: 6px 10px; text-align: start; vertical-align: top; }
.lp4 .tz-cmp thead th { border-bottom: 1px solid var(--lp-line); font-weight: 500; color: var(--lp-ink); line-height: 1.3; }
.lp4 .tz-cmp thead th i { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--lp-soft); }
.lp4 .tz-cmp thead th:first-child, .lp4 .tz-cmp tbody th { width: 24%; }
.lp4 .tz-cmp tbody th { color: var(--lp-ink); font-weight: 400; }
.lp4 .tz-cmp td { color: var(--lp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp4 .tz-cmp tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--lp-line) 60%, transparent); }
.lp4 .tz-cmp td.is-best { background: color-mix(in srgb, #1E8E5A 10%, transparent); }
.lp4 .tz-ok { margin-inline-start: 5px; color: #1E8E5A; font-weight: 700; }
.lp4 .tz-cmp td.is-prose { font-weight: 400; line-height: 1.4; }
.lp4 .tz-box-t { padding: 9px 12px 0; font-weight: 600; color: var(--lp-ink); line-height: 1.35; }
.lp4 .tz-pts { margin: 0; padding: 6px 28px 10px 12px; display: grid; gap: 4px; color: var(--lp-ink); line-height: 1.5; }
.lp4 .tz-why { margin: 0; padding: 4px 12px 10px; color: var(--lp-ink); line-height: 1.5; }
.lp4 .tz-mock figcaption { margin-top: 10px; font-size: 11.5px; color: var(--lp-soft); text-align: start; }
html[data-ps-theme="dark"] body.il-pub .lp4 .tz-live { background: #5DD39E; }
html[data-ps-theme="dark"] body.il-pub .lp4 .tz-ok { color: #7FD3A6; }
html[data-ps-theme="dark"] body.il-pub .lp4 .tz-cmp td.is-best { background: color-mix(in srgb, #5DD39E 14%, transparent); }
html[data-ps-theme="dark"] body.il-pub .lp4 .tz-you { background: #2D6E96; }
@media (max-width: 900px) {
  .lp4 .tz-two { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .lp4 .tz-cmp th, .lp4 .tz-cmp td { padding: 5px 7px; }
  .lp4 .tz-cmp thead th:first-child, .lp4 .tz-cmp tbody th { width: 22%; }
}

/* הרשמו, as UK's "Sign up" (always — no longer behind il_public_menus): a light
   button with a forward arrow — forward is LEFT in Hebrew, so the arrow points
   and slides left. Every property the orange rule above sets is restated. */
body.il-pub .nav .nav-signup.nav-signup-uk { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pub-display); font-weight: 600; font-size: 14px;
  padding: 9px 15px 9px 13px; border-radius: 10px; color: #0F1A21;
  background: #EDF1F4 linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / 0) 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 -1px 0 rgb(15 26 33 / .07), 0 1px 2px rgb(0 0 0 / .25), 0 8px 18px -10px rgb(0 0 0 / .6);
  transition: background-color .2s, box-shadow .2s; }
body.il-pub .nav .nav-signup.nav-signup-uk::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  opacity: .55; transform: scaleX(-1); transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%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 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
body.il-pub .nav .nav-signup.nav-signup-uk:hover { color: #0F1A21; background-color: #fff;
  background-image: linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / 0) 100%);
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 -1px 0 rgb(15 26 33 / .07), 0 1px 2px rgb(0 0 0 / .25), 0 12px 22px -10px rgb(0 0 0 / .7); }
body.il-pub .nav .nav-signup.nav-signup-uk:hover::after { transform: scaleX(-1) translateX(2px); opacity: .9; }
body.il-pub .nav .nav-signup.nav-signup-uk:active { background-color: #E3E9EE; background-image: none; }
body.il-pub .nav .nav-signup.nav-signup-uk:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
  /* a phone bar has no room for the arrow (it overflowed 375px by 15px) */
  body.il-pub .nav .nav-auth .nav-signup.nav-signup-uk { padding: 8px 11px; font-size: 13px; gap: 0; }
  body.il-pub .nav .nav-auth .nav-signup.nav-signup-uk::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.il-pub .nav .nav-signup.nav-signup-uk, body.il-pub .nav .nav-signup.nav-signup-uk::after { transition: none; }
  body.il-pub .nav .nav-signup.nav-signup-uk:hover::after { transform: scaleX(-1); }
}

/* ── כותב ההצעות on the landing (#bid-writer, its price card, the hero link) ──
   Renders only while Bid Writer is on for everyone (bid_credits.public_offer).
   Tokens only, so the dark swap carries it. */
/* The hero's announcement: the front door, so it is built for the night hero —
   a glassy capsule with a warm-to-seal hairline, a lit badge, the name in
   white and its line in the hero's soft ink, a round arrow. Still on hover. */
.lp4-bw-new { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 16px 0 4px;
  padding: 5px; padding-inline-end: 6px; border-radius: 999px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(36,54,68,.94), rgba(21,34,44,.94)) padding-box,
    linear-gradient(115deg, rgba(245,161,92,.85), rgba(124,183,222,.45) 55%, rgba(255,255,255,.12)) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07);
  color: var(--pub-night-ink); text-decoration: none; font-family: var(--pub-display);
  transition: background .2s var(--pub-ease), box-shadow .2s var(--pub-ease); }
.lp4-bw-new:hover { text-decoration: none; color: var(--pub-night-ink);
  background:
    linear-gradient(180deg, rgba(44,64,80,.96), rgba(26,41,53,.96)) padding-box,
    linear-gradient(115deg, rgba(245,161,92,1), rgba(124,183,222,.65) 55%, rgba(255,255,255,.2)) border-box;
  box-shadow: 0 12px 34px -14px rgba(232,101,13,.45), inset 0 1px 0 rgba(255,255,255,.09); }
.lp4-bw-new:focus-visible { outline: 2px solid var(--pub-accent-hi); outline-offset: 3px; }
.lp4-bw-new-badge { flex: none; padding: 5px 11px; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 800;
  background: linear-gradient(135deg, #F5A15C, #E8650D);
  box-shadow: 0 0 0 3px rgba(232,101,13,.18), 0 0 18px rgba(245,161,92,.40); }
.lp4-bw-new-text { display: inline-flex; align-items: center; min-width: 0; font-size: 14px; line-height: 1.3; }
.lp4-bw-new-text b { color: #fff; font-weight: 700; white-space: nowrap; }
.lp4-bw-new-text > span { display: inline-flex; align-items: center; color: var(--pub-night-soft); font-weight: 500; }
.lp4-bw-new-text > span::before { content: ""; flex: none; width: 1px; height: 14px; margin-inline: 11px;
  background: rgba(255,255,255,.22); }
.lp4-bw-new-go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.09); color: #fff; transition: background .2s var(--pub-ease); }
.lp4-bw-new:hover .lp4-bw-new-go { background: #E8650D; }
[dir="rtl"] .lp4-bw-new-go svg { transform: scaleX(-1); }
@media (max-width: 520px) {
  .lp4-bw-new { gap: 10px; }
  .lp4-bw-new-text { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13.5px; }
  .lp4-bw-new-text > span::before { display: none; }
  .lp4-bw-new-text > span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .lp4-bw-new, .lp4-bw-new-go { transition: none; } }

.lp4-bw { background: var(--paper); }
.lp4-bw-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.lp4-bw-copy .lp-h2 { margin: 10px 0 12px; text-wrap: balance; }
.lp4-bw-lead { margin: 0 0 22px; max-width: 58ch; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.lp4-bw-cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* The chapter's CTA in the pricing card's neutral: solid seal, no orange. */
.lp4-bw-btn-solid { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700;
  background: var(--seal); color: #fff; border: 1.5px solid var(--seal); box-shadow: none; text-decoration: none;
  transition: background .15s var(--pub-ease), border-color .15s var(--pub-ease); }
.lp4-bw-btn-solid:hover { background: color-mix(in srgb, var(--seal) 86%, #000); border-color: color-mix(in srgb, var(--seal) 86%, #000);
  color: #fff; text-decoration: none; }
html[data-ps-theme="dark"] body.il-pub .lp4-bw-btn-solid { background: var(--pub-seal-hi); border-color: var(--pub-seal-hi); color: var(--pub-night); }
html[data-ps-theme="dark"] body.il-pub .lp4-bw-btn-solid:hover { background: color-mix(in srgb, var(--pub-seal-hi) 86%, #fff); color: var(--pub-night); }
.lp4-bw-promo { margin: 16px 0 0; font-size: 14px; color: var(--ink); }
.lp4-bw-promo span { margin-inline-end: 6px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 700; }

/* The example: one section as the Bid Writer shows it. */
.lp4-bw-mock { margin: 0; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--pub-shadow); display: grid; gap: 12px; font-size: 14px; }
.lp4-bw-mock .bwm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp4-bw-mock .bwm-ref { padding: 2px 8px; border-radius: 6px; background: var(--wash); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; direction: ltr; }
.lp4-bw-mock .bwm-head b { font-size: 15px; }
.lp4-bw-mock .bwm-chips { display: flex; gap: 6px; margin-inline-start: auto; }
.lp4-bw-mock .bwm-chips span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.lp4-bw-mock .bwm-brief { padding: 12px 14px; border-radius: 12px; background: var(--pub-seal-wash); }
.lp4-bw-mock .bwm-brief-h { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--seal); }
.lp4-bw-mock .bwm-brief ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.lp4-bw-mock .bwm-brief li { display: flex; align-items: baseline; gap: 8px; line-height: 1.5; }
.lp4-bw-mock .bwm-brief i { flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--seal); transform: translateY(-1px); }
.lp4-bw-mock .bwm-brief i.is-act { background: var(--accent); }
.lp4-bw-mock .bwm-brief i.is-ok { background: var(--ok); }
.lp4-bw-mock .bwm-draft p { margin: 0; line-height: 1.75; color: var(--ink); }
.lp4-bw-mock mark { padding: 1px 4px; border-radius: 4px; background: var(--pub-accent-wash); color: var(--pub-accent-ink); }
.lp4-bw-mock .bwm-mark { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); }
.lp4-bw-mock .bwm-score { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-soft); direction: ltr; }
.lp4-bw-mock .bwm-score b { font-size: 24px; color: var(--ok); }
.lp4-bw-mock figcaption { font-size: 12px; color: var(--ink-soft); }

.lp4-bw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.lp4-bw-steps li { padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.lp4-bw-n { display: block; margin-bottom: 8px; font: 700 12px/1 var(--pub-display); color: var(--seal); }
.lp4-bw-steps b { display: block; margin-bottom: 6px; font-size: 16px; }
.lp4-bw-steps p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

/* What every draft is briefed on: a heading on a hairline, four columns in
   the step cards' type, hairlines between them. */
.lp4-bw-data { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.lp4-bw-data-h { margin: 0 0 16px; font: 700 16px/1.4 var(--pub-display); color: var(--ink); }
.lp4-bw-data dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 0; margin: 0; }
.lp4-bw-data dl > div { padding-inline: 18px; border-inline-start: 1px solid var(--line); }
.lp4-bw-data dl > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.lp4-bw-data dt { margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.lp4-bw-data dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 960px) {
  .lp4-bw-data dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp4-bw-data dl > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 520px) {
  .lp4-bw-data dl { grid-template-columns: 1fr; }
  .lp4-bw-data dl > div { padding-inline: 0; border-inline-start: 0; }
}
.lp4-bw-charge { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 22px; padding: 16px 20px;
  border-radius: 16px; background: var(--surface); border: 1px dashed var(--line-hover); }
.lp4-bw-charge > b { font-size: 15px; }
.lp4-bw-charge ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.lp4-bw-charge li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.lp4-bw-charge li b { color: var(--ink); }
.lp4-bw-tok { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 7px;
  background: var(--wash); color: var(--ink); font-size: 11.5px; font-weight: 700; }

/* Its price card, beside the platform card (UK's two-card pricing): the prose
   head goes on top and the two cards share a row, equal height. */
.lp4-price-grid.has-bw { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; max-width: 1180px;
  margin-inline: auto; gap: 28px 24px; }
.lp4-price-grid.has-bw > .lp-head { grid-column: 1 / -1; text-align: center; }
.lp4-price-grid.has-bw > .lp-head .lp-sub { margin-inline: auto; }
.lp4-price-grid.has-bw .lp-price-wrap, .lp4-bw-price-wrap { display: flex; }
.lp4-price-grid.has-bw .lp-price-card { flex: 1; }
.lp4-price-grid.has-bw .lp-price-cols { grid-template-columns: 1fr 1fr; }
.lp4-bw-price-card { flex: 1; padding: 24px 26px; border-radius: 18px; background: var(--surface);
  border: 1px solid #E3E5DE; box-shadow: var(--pub-shadow); display: flex; flex-direction: column; gap: 14px; }
html[data-ps-theme="dark"] body.il-pub .lp4-bw-price-card { border-color: var(--line); }
.lp4-bw-abil .lp-price-list { margin-top: 8px; }
.lp4-bw-price-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp4-bw-price-tag { padding: 3px 10px; border-radius: 999px; background: var(--wash); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
/* The free bids: the offer in the card's ink, the no-card reassurance quiet beside it. */
.lp4-bw-free { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.lp4-bw-free b { font: 800 20px/1.3 var(--pub-display); letter-spacing: -.01em; color: var(--ink); }
.lp4-bw-free-note { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink-soft); }
.lp4-bw-free-note svg { flex: none; color: var(--ok); }
/* The promotion as a coupon: the price on the main side, a perforation with
   two notches cut from the card, the per-bid price and the limit on the stub. */
.lp4-bw-deal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--pub-accent-wash), color-mix(in srgb, var(--pub-accent-wash) 35%, var(--surface))); }
.lp4-bw-deal-main { display: grid; gap: 6px; align-content: center; padding: 16px 20px; }
.lp4-bw-deal-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px;
  border-radius: 999px; background: linear-gradient(135deg, #F5A15C, #E8650D); color: #fff;
  font: 800 11.5px/1.2 var(--pub-display); box-shadow: 0 4px 12px -4px rgba(232,101,13,.55); }
.lp4-bw-deal-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; }
.lp4-bw-deal-price { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.lp4-bw-deal-price b { font: 800 42px/1 var(--pub-display); letter-spacing: -.02em; color: var(--pub-accent-ink); }
.lp4-bw-deal-price span { font-size: 16px; font-weight: 600; color: var(--ink); }
.lp4-bw-deal-stub { position: relative; display: grid; gap: 6px; align-content: center; padding: 16px 22px;
  border-inline-start: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent); }
/* the two notches, cut from the card at the perforation */
.lp4-bw-deal-stub::before, .lp4-bw-deal-stub::after { content: ""; position: absolute; inset-inline-start: -10px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); }
.lp4-bw-deal-stub::before { top: -10px; }
.lp4-bw-deal-stub::after { bottom: -10px; }
.lp4-bw-deal-per { margin: 0; font-size: 14px; color: var(--ink-soft); }
.lp4-bw-deal-per b { font: 800 24px/1 var(--pub-display); color: var(--ink); margin-inline-end: 2px; }
.lp4-bw-deal-lim { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.lp4-bw-deal-lim svg { flex: none; color: var(--seal); }
@media (max-width: 520px) {
  .lp4-bw-deal { grid-template-columns: 1fr; }
  .lp4-bw-deal-stub { border-inline-start: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent);
    grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .lp4-bw-deal-stub::before { top: -10px; inset-inline-start: -10px; }
  .lp4-bw-deal-stub::after { top: -10px; bottom: auto; inset-inline-start: auto; inset-inline-end: -10px; }
  .lp4-bw-deal-price b { font-size: 36px; }
}
.lp4-bw-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp4-bw-packs li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); }
.lp4-bw-packs li > span { font-weight: 600; }
.lp4-bw-packs b { font-size: 26px; font-weight: 800; }
.lp4-bw-packs small { font-size: 13px; color: var(--ink-soft); }
.lp4-bw-fine { margin: 0; font-size: 13px; color: var(--ink-soft); }
.lp4-bw-one summary { cursor: pointer; font-weight: 600; color: var(--seal); }
.lp4-bw-one p { margin: 8px 0 0; max-width: 90ch; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
/* The two cards' buttons as UK's: full width at each card's foot, the same
   height — the platform's solid seal (no orange line), Bid Writer's outlined
   in seal, filling on hover. Scoped to the two-card row (.has-bw). */
.lp4-price-grid.has-bw .lp-price-act .btn, .lp4-bw-btn-light { display: flex; width: 100%; height: 48px; padding-block: 0;
  align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; text-decoration: none; }
.lp4-price-grid.has-bw .lp-price-act .btn { background: var(--seal); color: #fff; box-shadow: none; }
.lp4-price-grid.has-bw .lp-price-act .btn:hover { background: color-mix(in srgb, var(--seal) 86%, #000); box-shadow: none; }
.lp4-bw-act { margin-top: auto; padding-top: 6px; padding-bottom: 14px; }
.lp4-bw-btn-light { background: transparent; color: var(--seal); border: 1.5px solid var(--seal); box-shadow: none;
  transition: background .15s var(--pub-ease), color .15s var(--pub-ease); }
.lp4-bw-btn-light:hover { background: var(--seal); color: #fff; text-decoration: none; }
html[data-ps-theme="dark"] body.il-pub .lp4-bw-btn-light { color: var(--pub-seal-hi); border-color: var(--pub-seal-hi); }
html[data-ps-theme="dark"] body.il-pub .lp4-bw-btn-light:hover { background: var(--pub-seal-hi); color: var(--pub-night); }

@media (max-width: 960px) {
  .lp4-price-grid.has-bw { grid-template-columns: 1fr; }
  .lp4-bw-top { grid-template-columns: 1fr; gap: 28px; }
  .lp4-bw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lp4-bw-steps, .lp4-bw-packs { grid-template-columns: 1fr; }
  .lp4-bw-mock .bwm-chips { margin-inline-start: 0; }
  .lp4-bw-price-card { padding: 18px; }
}

/* ── The ribbon ───────────────────────────────────────────────────────────────
   The landing's live figures and the sources line run at 80% of a wide
   screen while the sections keep their column (owner, 2026-10-15, as on
   Bidvane). No customer logos: the numbers and the official sources are the
   proof. Laptops (1440 and narrower) are untouched. */
@media (min-width: 1441px) {
  .lp-shell.lp4-strip-grid, .lp-shell.lp4-sources-row { max-width: max(calc(1140px + var(--grow)), 80vw); }
}
.lp4-stat b { font-size: clamp(30px, 1.65vw, 42px); }
.lp4-stat span { font-size: clamp(12.5px, .62vw, 15px); }
.lp4-stat { padding: clamp(22px, 1.4vw, 34px) clamp(18px, 1.4vw, 34px); }
@media (min-width: 1500px) {
  .lp4-strip-grid > :first-child { border-inline-start: 1px solid var(--n-line); }
  /* the sources line centred under the figures, not hard against one end */
  .lp-shell.lp4-sources-row { justify-content: center; }
  .lp-shell.lp4-sources-row .lp4-sources-explore { margin-inline-start: 0; }
}

/* ── Wide screens: the reading pages ──────────────────────────────────────────
   Legal pages, contact, /technology and blog posts keep their measure (820 /
   720 / 760) and sit on the centre line, the band's crumbs and title on the
   same column as the text — not hard against the start edge with the far side
   empty (owner, 2026-10-17). Laptops (1440 and narrower) are untouched. */
@media (min-width: 1441px) {
  /* …and the documents a footer reaches grow with the screen rather than
     standing at their measure in a 2560 window (owner, 2026-10-25, after the
     same fix in the board's own shell): פרטיות, תנאי שימוש, אבטחה and יצירת
     קשר all reach 950 at 1920 and up, the width a job page has there. A blog
     post keeps its 760: it is prose, and nothing beside it grew. */
  body.il-pub:has(main > .blog-article) { --doc-w: 760px; }
  body.il-pub:has(main > .legal-doc) { --doc-w: calc(820px + var(--grow) * .4815); }
  body.il-pub:has(main > .ct-page) { --doc-w: calc(720px + var(--grow) * .8519); }
  body.il-pub .legal-doc { max-width: calc(820px + var(--grow) * .4815); }
  body.il-pub .ct-page { max-width: calc(720px + var(--grow) * .8519); }
  body.il-pub main > :is(.blog-article, .legal-doc) { margin-inline: auto; }
  body.il-pub:has(main > .blog-article) main > .crumbs { max-width: var(--doc-w); margin-inline: auto; }
  body.il-pub:has(main > .blog-article) .pub-doc-inner { max-width: calc(var(--doc-w) + 2 * var(--s5)); }
}

/* ── The official site, phase 1 (2026-10-22): the first screen and touch ──
   Measured with the taste skill's inspector. The headline was a 12-word
   sentence on 4 lines at every width (52px at 1440, 34px at 390): it is now
   the title on two lines, larger where the column allows it, and the rest
   of the old sentence opens the lead in the ink. Buttons press down; the
   phone's side margin goes 14px -> 18px (text sat against the edge). */
.lp4 .lp-h1 { font-size: clamp(34px, 3.9vw, 66px); text-wrap: balance; }
.lp4 .lp-lead .lp4-lead-b { color: #fff; font-weight: 700; }
.lp4 .btn { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color .15s ease,
  border-color .15s ease, box-shadow .15s ease; }
.lp4 .btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .lp4 .btn:active { transform: none; } }
@media (max-width: 640px) { .lp4 .lp-shell { padding-left: 18px; padding-right: 18px; } }

/* ── Phase 2: readability ────────────────────────────────────────────────
   Running text was 14.5-15px and 41 readable labels sat under 13px. Reading
   text goes to 16-16.5px with a calmer line, notes to 13.5px, and no label
   meant to be read stays under 13px. The small UI fragments inside the story
   (chips, fields, pills) are pictures of the product and keep their size. */
.lp4 .lp4-edge-item p { font-size: 16px; line-height: 1.6; }
.lp4 .lp-faq p { font-size: 16.5px; line-height: 1.65; max-width: 68ch; }
.lp4 .lp-price-note { font-size: 15px; line-height: 1.55; }
.lp4 .lp-price-group li { font-size: 15px; }
.lp4 .lp4-beat p { font-size: 16px; line-height: 1.55; }
.lp4 .st-note, .lp4 .lp4-edge-note { font-size: 13.5px; line-height: 1.55; }
.lp4 .lp4-kicker, .lp4 .lp-kicker, .lp4 .lp4-beat-when, .lp4 .lp4-sources-lbl,
.lp4 .lp-price-gh, .lp4 .lp4-life-caption, .lp4 .lp4-life-head, .lp4 .lp4-dot-lab { font-size: 13px; }
.lp4 .st-p { max-width: 62ch; }

/* ── Buttons: the page's one simple button (owner, 2026-10-22) ────────────
   "Don't use the blue-orange button, use the simple one the page has": the
   sign-up buttons (pricing, the closing band) take the Bid Writer button's
   look, a flat seal fill with a same-colour edge, and in the dark theme the
   light seal with the night ink (the pricing one was white on light blue). */
.lp4 .btn-primary:not(.nav-signup) { background: var(--seal); color: #fff; border: 1.5px solid var(--seal);
  box-shadow: none; border-radius: 12px; font-weight: 700; }
.lp4 .btn-primary:not(.nav-signup):hover { background: color-mix(in srgb, var(--seal) 86%, #000);
  border-color: color-mix(in srgb, var(--seal) 86%, #000); color: #fff; }
html[data-ps-theme="dark"] body.il-pub .lp4 .btn-primary:not(.nav-signup) {
  background: var(--pub-seal-hi); border-color: var(--pub-seal-hi); color: var(--pub-night); }
html[data-ps-theme="dark"] body.il-pub .lp4 .btn-primary:not(.nav-signup):hover {
  background: color-mix(in srgb, var(--pub-seal-hi) 86%, #fff); color: var(--pub-night); }
.lp4 .lp4-final .btn-primary { background: var(--pub-seal-hi); border-color: var(--pub-seal-hi); color: var(--pub-night); }
.lp4 .lp4-final .btn-primary:hover { background: color-mix(in srgb, var(--pub-seal-hi) 86%, #fff); color: var(--pub-night); }

/* ── נתוני שוק, lighter (2026-10-22): the UK Intelligence Edge treatment ───
   The six capabilities were tinted, bordered boxes with a heavy top rule and
   a lift on hover. They now stand on the dark ground itself: no box, a short
   orange rule above each title that draws out on hover while the title warms.
   Same copy, grid and order; the dark band stays. Mirrored for RTL. */
.lp4-edge-grid { gap: clamp(36px, 3.6vw, 64px) 0; margin-top: clamp(36px, 3.4vw, 56px); }
.lp4-edge-item { border: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 0 clamp(20px, 2.4vw, 44px); position: relative; }
.lp4-edge-grid > .lp4-edge-item:nth-child(3n+1) { padding-inline-start: 0; }
.lp4-edge-item::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; margin-bottom: 18px;
  background: var(--n-acc); transform-origin: right center; transform: scaleX(.55);
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1); }
[dir="ltr"] .lp4-edge-item::before { transform-origin: left center; }
.lp4-edge-item b { font-size: clamp(19px, 1.3vw, 24px); line-height: 1.25; transition: color 200ms ease; }
.lp4 .lp4-edge-item p { max-width: 36ch; color: var(--n-soft); }
@media (hover: hover) and (pointer: fine) {
  .lp4-edge-item:hover { transform: none; background: none; }
  .lp4-edge-item:hover::before { transform: scaleX(1); }
  .lp4-edge-item:hover b { color: #ffd9bf; }
}
.lp4-edge .lp4-kicker { font-size: 15px; font-weight: 600; letter-spacing: 0; }
@media (max-width: 960px) {
  .lp4-edge-item, .lp4-edge-grid > .lp4-edge-item:nth-child(3n+1) { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .lp4-edge-item::before { transition: none; } }

/* ── Phase 3 (2026-10-22): the official site keeps growing past 1920px ────
   The column stopped at 1410px from 1920 up and no type grew, so a 2560
   screen showed the same block in a sea of margin. Past 1920 the column keeps
   growing (to ~1730px at 2560), pricing with it, and the reading text and the
   section headings step up, as the UK landing does. */
@media (min-width: 1921px) {
  .lp4 .lp-shell { max-width: calc(1140px + var(--grow) + min(320px, (100vw - 1920px) / 2)); }
  .lp4 .lp-pricing .lp-shell { max-width: calc(1180px + min(240px, (100vw - 1920px) / 2.5)); }
  .lp4 .lp-h1 { font-size: max(66px, min(3.3vw, 82px)); }
  .lp4 .lp-h2 { font-size: clamp(40px, 2.1vw, 54px); }
  .lp4 .st-h { font-size: clamp(30px, 1.6vw, 42px); }
  .lp4 .lp-lead, .lp4 .lp-sub { font-size: 20px; }
  .lp4 .st-p, .lp4 .lp-faq p { font-size: 19px; }
  .lp4 .lp4-edge-item p, .lp4 .lp4-beat p, .lp4 .lp-price-group li { font-size: 18px; }
  .lp4 .lp4-edge-item b { font-size: clamp(22px, 1.1vw, 28px); }
}
.lp4 .lp-h2 { text-wrap: balance; }

/* ── Phase 4a (2026-10-22): pricing without the heavy chrome ──────────────
   As the UK pricing: same cards, copy, prices and hooks. The cards lose the
   outlined edge and shadow and stand on a quiet tone step; the dark pill
   floating on the main card's top edge becomes a small orange tag inside it;
   the price columns lose their two hairlines for space; the column heads
   read at 15px; the free price is set large. The green ticks stay (they
   match the hero's). */
.lp4 .lp-price-card, .lp4 .lp4-bw-price-card { border: 0; box-shadow: none; border-radius: 20px;
  background: color-mix(in srgb, var(--ink) 3.5%, var(--surface)); }
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-price-card,
html[data-ps-theme="dark"] body.il-pub .lp4 .lp4-bw-price-card { border: 0; background: color-mix(in srgb, #fff 4.5%, var(--surface)); }
.lp4 .lp-price-ribbon, html[data-ps-theme="dark"] body.il-pub .lp4 .lp-price-ribbon {
  position: static; transform: none; display: inline-flex; align-items: center; margin: 0 0 16px;
  background: color-mix(in srgb, #E8650D 13%, transparent); color: #B14A05; box-shadow: none;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
html[data-ps-theme="dark"] body.il-pub .lp4 .lp-price-ribbon { color: var(--n-acc, #F5A15C); }
.lp4 .lp-price-ribbon::before { background: currentColor; width: 6px; height: 6px; }
.lp4 .lp-price-cols { border-top: 0; border-bottom: 0; padding: 10px 0 18px; }
.lp4 .lp-price-gh { font-size: 15px; letter-spacing: 0; text-transform: none; }
.lp4 .lp-price-free { font-size: clamp(48px, 3.6vw, 64px); letter-spacing: -.02em; }

/* ── Phase 4b (2026-10-22): the hero panel, lighter and explained once ────
   As the UK hero (taste + animate skills): the panel is a flat surface (no
   glass gradient, drop shadow or endless sweep). Motion, once, when it is
   first in view: the five dots arrive in reading order (right to left).
   Stepping (still never on a timer): the fill glides by transform, the beat
   enters from the side the reader stepped towards with a short blur bridge,
   each beat's count rises the first time it shows, and the "next" nudge
   pulses three times, not forever. Transform and opacity only, strong
   ease-out curves, under 300ms a step; reduced motion keeps plain fades. */
.lp4 { --e-out: cubic-bezier(.23, 1, .32, 1); --e-io: cubic-bezier(.77, 0, .175, 1); }
.lp4-life { background: rgba(255,255,255,.045); box-shadow: none; }
.lp4-life::before { display: none; animation: none; }
.lp4-life-head, .lp4-beat-when { letter-spacing: 0; }
.lp4-rail-fill { width: 100%; background: #E8650D; box-shadow: none; transform-origin: right center;
  transform: scaleX(0); transition: transform 480ms var(--e-io); }
.lp4-bar i { width: 100%; transform-origin: right center; transform: scaleX(0); transition: transform 480ms var(--e-io); }
[dir="ltr"] .lp4-rail-fill, [dir="ltr"] .lp4-bar i { transform-origin: left center; }
.lp4-life.is-stepping .lp4-beat { transition: opacity 180ms var(--e-out), transform 180ms var(--e-out), filter 180ms var(--e-out); }
.lp4-life.is-stepping .lp4-beat.is-on { transition: opacity 280ms var(--e-out) 70ms, transform 280ms var(--e-out) 70ms, filter 280ms var(--e-out) 70ms; }
.lp4-life-btn { transition: background-color .15s ease, transform 160ms var(--e-out); }
.lp4-life-btn:active { transform: scale(.96); }
.lp4-life-btn.is-nudge { animation-iteration-count: 3; }
.lp4-dot-lab { white-space: normal; width: 76px; text-align: center; line-height: 1.2; }
.lp4-rail { height: 52px; }
@media (prefers-reduced-motion: no-preference) {
  /* RTL: forward moves leftward, so the new beat comes in from the left */
  .lp4-life.is-stepping .lp4-beat { transform: translateX(calc(var(--dir, 1) * -16px)); filter: blur(2px); }
  .lp4-life.is-stepping .lp4-beat.is-on { transform: none; filter: none; }
  .lp4-life.is-stepping .lp4-beat.is-leaving { transform: translateX(calc(var(--dir, 1) * 16px)); }
  .lp4-life.is-arriving .lp4-dot, .lp4-life.is-arriving .lp4-dot-lab { opacity: 0; }
  .lp4-dot, .lp4-dot-lab { transition: opacity 320ms var(--e-out) calc(var(--i, 0) * 70ms + 150ms),
    border-color .3s, background .3s, transform .3s var(--e-out), color .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .lp4-rail-fill, .lp4-bar i { transition: none; }
  .lp4-life.is-stepping .lp4-beat, .lp4-life.is-stepping .lp4-beat.is-on { transform: none; filter: none; transition: opacity 200ms ease; }
}

/* The hero's kicker and the "new: Bid Writer" chip are both inline, so on a
   full screen (1920px and up) the column held them on one line (owner,
   2026-10-22): the kicker takes its own line at every width. */
.lp4 .lp-hero-copy > .lp4-kicker { display: flex; width: fit-content; }

/* ── /about, /contact, the blog: phases 1-3 (2026-10-22), as /product ─────
   Measured with the taste skill's inspector.
   Phase 1: the about headline (a 13-word statement, kept word for word) gets
   the measure for two lines on desktop instead of three; buttons press; the
   team band's text no longer touches a phone's edge (it had no side padding).
   Phase 2: running text 15-15.5px -> 16.5px (blog posts 17px), and no
   readable label under 13px (dates were 11.5px, kickers 12px).
   Phase 3: past 1920px the about column keeps growing and the text steps up. */
.ab-il .ab-h1 { max-width: 34ch; }
body.il-pub .btn { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color .15s ease, border-color .15s ease; }
body.il-pub .btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { body.il-pub .btn:active { transform: none; } }
@media (max-width: 640px) { .ab-il .ab-team, .ab-il .lp-shell { padding-left: 18px; padding-right: 18px; } }

.ab-il .ab-sec-head p, .ab-il .ab-principle p, .ab-il .ab-hero p, .ab-il .ab-contact { font-size: 16.5px; line-height: 1.65; }
.ab-il .ab-when, .ab-il .lp-kicker, .ab-il .lp4-kicker, .ab-il .lp4-sources-lbl, .ab-il .ab-fact span { font-size: 13px; letter-spacing: 0; }
.ab-il .ab-fine, .ab-il .ab-ex { font-size: 13.5px; }
body.il-pub .ct-info-kicker { font-size: 13px; }
body.il-pub .ct-info-desc { font-size: 16px; line-height: 1.6; }
body.il-pub .ct-info-note, body.il-pub .ct-info-inner .muted { font-size: 13.5px; }
body.il-pub .blg-card-excerpt { font-size: 16px; }
body.il-pub .blog-body p, body.il-pub .blog-body li { font-size: 17px; }
body.il-pub .blog-body table.cmp { font-size: 15.5px; }

@media (min-width: 1921px) {
  .ab-il .lp-shell { max-width: calc(1140px + var(--grow) + min(320px, (100vw - 1920px) / 2)); }
  .ab-il .ab-h1 { font-size: clamp(46px, 2.6vw, 64px); }
  .ab-il .ab-sec-head p, .ab-il .ab-principle p, .ab-il .ab-hero p { font-size: 19px; }
  body.il-pub .blog-body p, body.il-pub .blog-body li { font-size: 18.5px; }
  body.il-pub .blg-card-excerpt { font-size: 17.5px; }
}
.ab-il .ab-step p, .ab-il .ab-fact { font-size: 16px; line-height: 1.6; }
body.il-pub .ct-page .muted:last-child, body.il-pub main span.muted { font-size: 13px; }