/* ==========================================================================
   pages-site.css — phase 2 "site" pages: services (+ the 4 service pages), about, reviews, blog (archive), article (single),
   contact, 404, legal pages. Loaded by inc/pages-site.php ONLY on those pages (after sd-wp.css), so the rules below never
   touch home / portfolio. The look itself is the ported 4.1 CSS (assets/css/sketch/*); this file only bridges Elementor's
   markup to it (lists typed in text widgets, image widgets inside the sketch frames …) + the old article bodies.
   ========================================================================== */

:root {
  --p2-ck-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339F4CC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --p2-ck-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300122B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --p2-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300122B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-4.6-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.4 12 20 12 20z'/%3E%3C/svg%3E");
  --p2-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300122B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5l3 2'/%3E%3C/svg%3E");
  --p2-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300122B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3C/svg%3E");
  --p2-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300122B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
}

/* ---------- 1 · lists typed in Elementor text widgets (sketch: li > i/span.ic-sq + text): the icon is drawn here ---------- */
.checks li::before { content: ""; width: 24px; height: 24px; border-radius: 8px; flex: none; background: var(--mint-tint) var(--p2-ck-navy) center / 15px no-repeat; }
:is(html.dk, .navy-sec) .checks li::before { background-color: rgba(57, 244, 204, .16); background-image: var(--p2-ck-mint); }
:is(html.dk, .navy-sec) .is-light .checks li::before { background-color: var(--mint-tint); background-image: var(--p2-ck-navy); }

.inc { counter-reset: p2inc; }
.inc li { counter-increment: p2inc; }
.inc li::before { content: ""; width: 42px; height: 42px; border-radius: 13px; flex: none; background: var(--mint) var(--p2-ck-navy) center / 21px no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.inc li::after { content: counter(p2inc, decimal-leading-zero); margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--ink-2); direction: ltr; }
:is(html.dk, .navy-sec) .inc li::after { color: var(--ink-3); }

.vals li::before { content: ""; width: 52px; height: 52px; border-radius: 16px; flex: none; background: var(--mint) var(--p2-heart) center / 25px no-repeat; box-shadow: 0 10px 26px -10px rgba(57, 244, 204, .6); }
.vals li:nth-child(2)::before { background-image: var(--p2-clock); }
.vals li:nth-child(3)::before { background-image: var(--p2-sparkle); }
.vals li:nth-child(4)::before { background-image: var(--p2-bolt); }
.vals li h3 { margin-top: auto; }


/* ---------- 2 · inner page head (all my pages) + the shared "רוצים גם?" panel ---------- */
/* the aurora light of the CTA panel: the sketch rule is ".cta > .aur" - here an HTML widget wraps it (shared fix requested) */
.cta .aur { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.ph .k-h1 .elementor-heading-title, .ph h1.k-h1 { text-wrap: balance; }
.ph-extra .seg button { font-family: inherit; }

/* ---------- 3 · services + service pages ---------- */
.svc-row > .svc-txt > .elementor-widget-text-editor.sdx > p { margin: 0; }
.svc-txt > .sdx > p, .svc-txt p { margin-top: 18px; }
.svc-txt .top .en .elementor-heading-title, .svc-txt .top .num .elementor-heading-title { direction: ltr; }
.svc-vis-in > .elementor-widget-shortcode { width: 100%; }
.svc-vis-in .sys-combo, .svc-vis-in .pair { margin-inline: auto; }
.svc-sub-vis > .e-con { width: 100%; display: grid; place-items: center; }
.svc-wide-head .hd > .sdx > p { margin: 0; }
.svc-wide-head .hd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.svc-wide-head .hd p { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.svc-wide-head .hd .sdb { justify-self: start; }
.svc-sub-txt .en .elementor-heading-title { font-size: 13.5px; font-weight: 600; }
@media (max-width: 820px) {
  :is(.svc-txt, .bh-txt, .svc-sub-txt, .svc-wide-head) .acts > .sdb { flex: 1 1 auto; }
  :is(.svc-txt, .bh-txt, .svc-sub-txt, .svc-wide-head) .acts > .sdb .elementor-button { width: 100%; justify-content: center; }
}
/* service page hero */
.sv-grid > .elementor-widget-shortcode { display: contents; }
.bh-txt .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-txt .chips .chip { --ic: 16px; --ic-gap: 7px; }
.bh-txt .chips .chip .elementor-heading-title { color: inherit; }
.bh-txt h1.elementor-heading-title { font-size: clamp(44px, 5.4vw, 84px); line-height: 1.02; letter-spacing: -.04em; margin-top: 22px; }
.bh-txt .desc { margin: 26px 0 0; }
/* "נושאים קשורים": the sketch's pills (a and, without an article, a plain pill) */
.seo .seo-t .elementor-heading-title > a, .seo .seo-nl .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 .5px var(--line-2), 0 4px 12px -8px rgba(0, 18, 43, .2); font-size: 15px; font-weight: 500; line-height: 1; transition: box-shadow .25s var(--ease), color .25s var(--ease);
}
.seo .seo-t .elementor-heading-title > a::before, .seo .seo-nl .elementor-heading-title::before { content: "#"; color: var(--ink-2); font-weight: 600; }
:is(html.dk, .navy-sec) .seo .seo-t .elementor-heading-title > a, :is(html.dk, .navy-sec) .seo .seo-nl .elementor-heading-title { background: var(--card); box-shadow: var(--card-sh); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { :is(html.dk, .navy-sec) .seo .seo-t .elementor-heading-title > a:hover { box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); } }
.seo .seo-t.elementor-widget, .seo .seo-nl.elementor-widget { width: auto; }
.seo .seo-nl .elementor-heading-title { opacity: .8; }

/* ---------- 4 · about ---------- */
.ab-studio .big.fill p, .ab-studio .big p { margin: 0; }
.ab-me-txt p.me { margin-bottom: 0; }
.ab-sign p { margin: 0; }
.ab-sign b { display: block; }
.ab-sign small { display: block; }
.ab-by .cta-direct { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-brand { display: flex; align-items: center; justify-content: center; }
.stats4 > .st-cell { min-width: 0; display: flex; }
.stats4 > .st-cell > .tile { flex: 1; }

/* ---------- 5 · reviews ---------- */
.rv-page .r-google-host { margin-bottom: 16px; }
.r-google { display: flex; flex-direction: column; gap: 10px; }
.r-google .top { display: flex; align-items: center; }
.r-google .big .elementor-heading-title, .r-google .big { font-size: 66px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.r-google .lbl { color: var(--on-navy-2); font-size: 16px; }
.r-google .sdb { align-self: flex-start; }
@media (max-width: 820px) {
  .mgrid.rv-stack > .mcol > li > .r-google { position: relative; transform-origin: 50% 0; will-change: transform; }
  .mgrid.rv-stack > .mcol > li > .r-google::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(0, 8, 22, var(--dim, 0)); }
}

/* ---------- 6 · blog (archive) ---------- */
body:not(.sd-blog-home) .feat-post { display: none; }
.feat-post { color: inherit; text-decoration: none; }
.feat-post .ph-img .par > .elementor-widget-image { position: absolute; inset: 0; }
.feat-post .ph-img .par img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-post .bd > .elementor-widget-text-editor > p, .feat-post .bd > p { margin: 0; }
.feat-post .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-post .chip-new { --ic: 15px; --ic-gap: 6px; }
.feat-post .chips .chip .elementor-heading-title { color: inherit; }
#pl > li[hidden] { display: none !important; }
#pl > li.enter { animation: p2-enter .55s cubic-bezier(.23, 1, .32, 1) both; animation-delay: var(--d, 0ms); }
@keyframes p2-enter { from { opacity: 0; transform: translateY(26px) scale(.97); } }

/* ---------- 7 · article (single) ---------- */
.post-hd .post-g > .post-tx > .elementor-widget-shortcode, .post-tx > .sdx { min-width: 0; }
.post-tx h1.elementor-heading-title { font-size: clamp(36px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
.byline p { margin: 0; }
.byline .pav.sm img { margin: 0; }
.post-cover { position: relative; }
.post-cover .par > .elementor-widget-image { position: absolute; inset: 0; }
.post-cover .par img { width: 100%; height: 100%; object-fit: cover; }
.post-body > .elementor-widget-html { display: contents; }
.toc-host { grid-column: 1 / 4; min-width: 0; }
.toc-host .toc2 { grid-column: auto; }
.toc-host.toc-none { display: none; }
@media (max-width: 1100px) { .toc-host { grid-column: 1 / 5; } }
@media (max-width: 820px) { .toc-host { display: block; } }
.post .prose { min-width: 0; }
.pa-tx > .sdx > p, .pa-tx p { margin: 0; }
.pa-tx .role .elementor-heading-title { color: var(--ink-2); font-weight: 500; }
.pa-tx .sdb { justify-self: start; }

/* the 47 article bodies (Post Content widget): old Elementor widgets / classic HTML styled as the 4.1 prose.
   Their own inline Elementor CSS (post-<id>.css: colours, fonts, sizes, widths, paddings) is neutralised inside .prose only. */
.post .prose .elementor-widget-theme-post-content, .post .prose .prose-in { min-width: 0; }
.post .prose :is(.elementor-section, .e-con, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-widget, .e-con-inner) {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important;
}
.post .prose :is(.elementor-section, .e-con) { padding-block: 0 !important; margin-block: 0 !important; min-height: 0 !important; }
.post .prose .elementor-container, .post .prose .e-con-inner { display: block !important; }
.post .prose :is(.elementor-motion-effects-layer, .elementor-background-overlay, .elementor-background-video-container, .elementor-background-slideshow) { display: none !important; }
.post .prose .elementor-portfolio-item__title, .post .prose .elementor-portfolio-item__title.elementor-heading-title { color: #fff !important; font-size: 15px !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.post .prose .elementor-portfolio-item__overlay { border-radius: 18px; }
.post .prose .elementor-portfolio .elementor-post__thumbnail__link, .post .prose .elementor-portfolio-item { border-radius: 18px; overflow: hidden; }
.post .prose .elementor-column { display: block !important; }
.post .prose .elementor-widget-wrap { display: block !important; padding: 0 !important; }
.post .prose .elementor-widget:not(:last-child) { margin-bottom: 1.05em !important; }
.post .prose .elementor-widget-spacer, .post .prose .elementor-widget-divider { display: none !important; }
.post .prose :is(p, li, span, strong, b, em, a, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-text-editor, .elementor-icon-list-text) {
  font-family: inherit !important; letter-spacing: normal;
}
.post .prose :is(p, li, .elementor-widget-text-editor, .elementor-icon-list-text) { color: var(--ink) !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit; text-align: start !important; }
.post .prose :is(h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--navy) !important; text-align: start !important; font-weight: 700 !important; }
.post .prose h2, .post .prose h2.elementor-heading-title { font-size: clamp(27px, 2.6vw, 36px) !important; line-height: 1.15 !important; letter-spacing: -.025em; margin-top: 2.1em; padding-top: 20px; border-top: 1px solid var(--line-2); scroll-margin-top: 110px; }
.post .prose .elementor-widget-heading:first-child h2, .post .prose > :first-child h2:first-child { margin-top: 0; }
.post .prose h3, .post .prose h3.elementor-heading-title { font-size: 23px !important; line-height: 1.3 !important; letter-spacing: -.015em; margin-top: 1.6em; scroll-margin-top: 110px; }
.post .prose :is(h4, h5, h6), .post .prose :is(h4, h5, h6).elementor-heading-title { font-size: 20px !important; line-height: 1.35 !important; margin-top: 1.5em; scroll-margin-top: 110px; }
.post .prose .elementor-widget-heading .elementor-heading-title { margin-top: 0; }
.post .prose .elementor-widget-heading:has(h2) { margin-top: 2.1em !important; }
.post .prose .elementor-widget-heading:has(h3) { margin-top: 1.6em !important; }
.post .prose p { margin: 0 0 1.05em; }
.post .prose p:last-child { margin-bottom: 0; }
.post .prose a { color: var(--navy) !important; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post .prose a:is(.elementor-button, .btn) { text-decoration: none; }
.post .prose :is(strong, b) { font-weight: 700; color: inherit !important; }
.post .prose :is(ul, ol) { margin: 0 0 1.05em; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55em; }
.post .prose ol { counter-reset: p2ol; }
.post .prose ol > li { counter-increment: p2ol; position: relative; padding-inline-start: 34px; }
.post .prose ol > li::before { content: counter(p2ol); position: absolute; right: 0; top: .2em; width: 24px; height: 24px; border-radius: 7px; background: var(--mint); color: var(--navy); font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.post .prose ul > li { position: relative; padding-inline-start: 26px; }
.post .prose ul > li::before { content: ""; position: absolute; right: 0; top: .66em; width: 10px; height: 10px; border-radius: 3px; background: var(--mint); }
.post .prose :is(img, video, iframe) { max-width: 100% !important; height: auto; border-radius: 18px; }
.post .prose .elementor-widget-image img, .post .prose figure img, .post .prose p > img { display: block; width: 100% !important; height: auto !important; margin-inline: auto; box-shadow: var(--sh-1); }
.post .prose figure { margin: 1.4em 0; }
.post .prose figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); text-align: center; }
.post .prose iframe { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; }
.post .prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 1.2em 0; }
.post .prose :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: start; }
.post .prose blockquote { margin: 1.4em 0; padding: 18px 22px; border-inline-start: 4px solid var(--mint); background: #fff; border-radius: 0 16px 16px 0; box-shadow: var(--sh-1); }
/* old icon lists, buttons, boxes, carousels and TOC widgets inside articles */
.post .prose .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.post .prose .elementor-icon-list-item { display: flex !important; align-items: flex-start; gap: 10px; padding: 0 !important; margin: 0 !important; }
.post .prose .elementor-icon-list-item::before { display: none !important; }
.post .prose .elementor-icon-list-icon { flex: none; color: var(--mint) !important; padding-top: .35em; }
.post .prose .elementor-icon-list-icon :is(i, svg) { color: var(--mint) !important; fill: var(--mint) !important; width: 14px; height: 14px; font-size: 14px; }
.post .prose .elementor-button { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px !important; border-radius: 999px !important; background: var(--navy) !important; color: #fff !important;
  font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; border: 0 !important; box-shadow: 0 10px 22px -12px rgba(0, 18, 43, .45) !important; }
.post .prose .elementor-button * { color: inherit !important; fill: currentColor !important; }
.post .prose :is(.elementor-widget-table-of-contents, .elementor-widget-post-comments, .elementor-widget-share-buttons) { display: none !important; }
.post .prose .elementor-widget-icon-box, .post .prose .elementor-widget-image-box { text-align: start !important; }
.post .prose :is(.elementor-icon-box-title, .elementor-image-box-title) { font-size: 20px !important; }
.post .prose .elementor-widget-text-editor :is(h2, h3) { margin-top: 1.6em; }
/* inline styles typed into the old articles (colours / fonts / highlight backgrounds on text) — text elements only */
.post .prose :is(p, span, strong, b, em, li, h1, h2, h3, h4, h5, h6, a, font)[style*="color"] { color: inherit !important; }
.post .prose :is(p, span, strong, b, em, li, h1, h2, h3, h4, h5, h6, a, font)[style*="font-family"] { font-family: inherit !important; }
.post .prose :is(p, span, strong, b, em, li, h2, h3, h4, a)[style*="background"] { background: none !important; }
.post .prose :is(h2, h3, h4):empty, .post .prose .p2-empty { display: none !important; }
/* the sketch's numbered H2 badge (01, 02 …) and the lead paragraph (marked by pages-site.js) */
.post .prose { counter-reset: p2h2; }
.post .prose h2 { counter-increment: p2h2; display: flex; align-items: baseline; gap: 16px; }
.post .prose h2::before { content: counter(p2h2, decimal-leading-zero); flex: none; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--navy); background: var(--mint);
  border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums; transform: translateY(-4px); line-height: 1.3; }
.post .prose .p2-lead { font-size: clamp(20px, 1.7vw, 23px) !important; line-height: 1.6 !important; font-weight: 500 !important; letter-spacing: -.01em; }
@media (max-width: 820px) {
  .post .prose .p2-lead { font-size: 19px !important; }
  .post .prose h2, .post .prose h2.elementor-heading-title { font-size: 26px !important; }
  .post .prose h3, .post .prose h3.elementor-heading-title { font-size: 21px !important; }
}

/* ---------- 8 · contact ---------- */
/* the side box + the form on the navy page (sketch :is(html.dk, .navy-sec) rules; the shared bridge has the light / .cx-navy ones) */
html.dk .cx-page .csoc .csoc-a { background: rgba(255, 255, 255, .06); color: #fff; }
html.dk .cx-page .csoc .csoc-a i, html.dk .cx-page .csoc-tel i { background: rgba(255, 255, 255, .09); color: var(--mint); }
html.dk .cx-page .csoc-tel small { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  html.dk .cx-page .csoc .csoc-a:hover { background: var(--mint); color: var(--navy); }
  html.dk .cx-page .csoc .csoc-a:hover i { background: rgba(0, 18, 43, .1); color: var(--navy); }
}
html.dk .cx-page .form-wide .elementor-field-group .elementor-field-textual { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html.dk .cx-page .form-wide .elementor-field-group .elementor-field-textual::placeholder { color: rgba(255, 255, 255, .42); }
html.dk .cx-page .form-wide .elementor-field-group .elementor-field-textual:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(57, 244, 204, .14); }
html.dk .cx-page .form-wide .elementor-field-type-radio .elementor-field-option label { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; }
html.dk .cx-page .form-wide .elementor-field-type-radio .elementor-field-option label::before { background: rgba(255, 255, 255, .3); }
html.dk .cx-page .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label { background: var(--mint); color: var(--navy); }
html.dk .cx-page .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: var(--navy); }
html.dk .cx-page .form-wide .elementor-field-type-acceptance .elementor-field-option { color: var(--ink-2); }
html.dk .cx-page .form-wide .elementor-field-type-acceptance label a { color: var(--ink-2); }
html.dk .cx-page .form-wide .elementor-field-type-acceptance input[type="checkbox"] { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
html.dk .cx-page .form-wide .elementor-field-type-acceptance input[type="checkbox"]::after { border-color: var(--navy); }
html.dk .cx-page .form-wide .elementor-field-type-acceptance input[type="checkbox"]:checked { background: var(--mint); }
.c-card .c-kv { display: flex; flex-direction: column; min-width: 0; }
.c-card .go > .elementor-widget-heading { flex: 1; }
@media (max-width: 820px) { .c-card > .c-kv { flex: 1; } }

/* ---------- 9 · legal pages + 404 ---------- */
.legal-card { max-width: 900px; margin-inline: auto; padding: clamp(26px, 4.4vw, 64px); }
.legal-txt { font-size: 17.5px; line-height: 1.85; color: var(--ink-2); text-align: start; }
.legal-txt :is(p, li) { text-align: start !important; }
.legal-txt p { margin: 0 0 .9em; }
.legal-txt p:has(> strong:only-child), .legal-txt p > strong:only-child { color: #fff; }
.legal-txt p:has(> strong:only-child) { margin-top: 1.6em; font-size: 20px; }
.legal-txt :is(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: .4em; }
.legal-txt li::marker { color: var(--mint); }
.legal-txt li > p { margin: 0; }
.legal-txt a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.legal-txt :is(span, p)[class] { font: inherit; }
.p2-404 { min-height: min(100vh, 900px); display: flex; align-items: center; }
.p2-404 > .wrap { width: 100%; }
.p2-404 .p2-404-n { margin-top: 18px; font-size: clamp(110px, 17vw, 240px); font-weight: 700; line-height: .85; letter-spacing: -.06em; color: var(--mint); direction: ltr; }
.p2-404 .p2-404-n .elementor-heading-title { color: inherit; }
.p2-404 h1.elementor-heading-title { font-size: clamp(30px, 4.2vw, 58px) !important; }
.p2-404 .ph-extra { --flex-wrap: wrap; justify-content: center; flex-wrap: wrap; gap: 10px; margin-inline: 0 !important; overflow: visible; }

/* ==========================================================================
   26/10 — Shimon's review round
   ========================================================================== */
/* services, phones: smaller device images + more space above them, per card */
@media (max-width: 820px) {
  html.dk .svc-row .svc-vis { padding: 40px 30px 10px; }
  html.dk #svc-web .svc-vis { padding-top: 42px; }
  html.dk #svc-web .svc-vis-in .mk-duo { width: 100%; max-width: 268px; margin-inline: auto; }
  html.dk #svc-store .svc-vis { padding-top: 50px; }
  html.dk #svc-store .svc-vis-in .mk-trio { width: 100%; max-width: 208px; margin-inline: auto; }
  html.dk #svc-apps .svc-vis { padding-top: 50px; }
  html.dk #svc-apps .svc-vis-in .sys-combo { max-width: 280px; }
  html.dk .svc-row-sub .svc-vis { padding-top: 44px; }
  html.dk .svc-row-sub .svc-vis-in .pair { max-width: 250px; }
  html.dk .svc-row-sub .svc-vis-in .pair img:nth-child(2) { transform: translateY(10%); }
}

/* "שלבי הפעולה", phones: no 01/04 counter, a soft glow that is never cut, the next card peeks, an obvious swipe hint */
.prx-hint { display: none; }
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .prx-count { display: none; }
  :is(html.dk, .navy-sec) .prx-track { padding-top: 26px; padding-bottom: 22px; }
  :is(html.dk, .navy-sec) .prx-s { width: 72vw; }
  html.dk .prx-dot, :is(html.dk, .navy-sec) .prx-dot { box-shadow: none; background: rgba(255, 255, 255, .07); }
  html.dk .prx-s.on .prx-dot, :is(html.dk, .navy-sec) .prx-s.on .prx-dot { background: var(--mint); box-shadow: 0 0 22px -2px rgba(57, 244, 204, .32); }
  :is(html.dk, .navy-sec) .prx-foot { margin-top: 4px; flex-wrap: wrap; row-gap: 12px; }
  .prx-hint { order: -1; flex: 1 1 100%; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--mint); transition: opacity .4s var(--ease); }
  .prx-hint .sd-i { width: 18px; height: 18px; animation: p2-nudge 1.4s cubic-bezier(.45, 0, .2, 1) infinite; }
  .prx.swiped .prx-hint { opacity: 0; }
  :is(html.dk, .navy-sec) .prx-dots i { width: 9px; height: 9px; border-radius: 5px; cursor: pointer; }
  :is(html.dk, .navy-sec) .prx-dots i.on { width: 28px; }
}
@keyframes p2-nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-7px); } }
@media (prefers-reduced-motion: reduce) { .prx-hint .sd-i { animation: none; } }

/* about: words filled on load (pages-site.js autoFill) stay filled — the shared scroll fill keeps the rest */
.fill .w.p2-on { opacity: 1 !important; }
.mkw.p2-on { background-size: 100% 82%; }
html.dk .ab-studio-dark .big .mkw.p2-on .w { color: var(--navy); }

/* blog filter: the active chip = white with navy text, exactly like the portfolio filter */
html.dk body.sd-page-blog .seg button[aria-pressed="true"],
html.dk body.sd-page-blog .blog-filters .seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55); }
html.dk body.sd-page-blog .seg button[aria-pressed="true"] .n { background: var(--navy); color: #fff; }

/* phones: no glow is ever cut by a straight edge
   - the scrolling chip rows (blog filter, services jump row) get room for their shadows
   - the drifting lights of the page heads fade out before the section ends */
@media (max-width: 820px) {
  .blog-filters .seg, .ph-extra .seg { padding-block: 8px 20px; margin-block: -8px -20px; }
}
:is(.ph, .sv-hero) > .tex, :is(.ph, .sv-hero) > .elementor-widget-html > .elementor-widget-container > .tex {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* reviews, phones: the H1 on one line */
@media (max-width: 820px) {
  body.sd-page-reviews .ph h1.elementor-heading-title, body.sd-page-reviews .ph .k-h1 .elementor-heading-title { font-size: min(10.6vw, 46px); white-space: nowrap; }
}

/* old articles: their headings carry a widget-level ".highlight { background: linear-gradient(white 60%, #39F4CC 40%) }"
   which draws a white box on the new background (Shimon, 06/11) -> a transparent mint marker behind the lower part of the words */
.post .prose .highlight { background: linear-gradient(180deg, transparent 60%, rgba(57, 244, 204, .6) 60%) !important; padding: 0 .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }