@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=Noto+Sans+Hebrew:wght@400;500;600;700;800;900&display=swap");

:root {
  --pp-font-sans: "Noto Sans Hebrew", "Heebo", Arial, sans-serif;
  --pp-color-frame: #e9edff;
  --pp-color-frame-strong: #dde4ff;
  --pp-color-bg: #f8faff;
  --pp-color-surface: #ffffff;
  --pp-color-surface-subtle: #f5f7fd;
  --pp-color-surface-tint: #f1f5ff;
  --pp-color-text: #101936;
  --pp-color-text-muted: #64708a;
  --pp-color-text-disabled: #98a4bc;
  --pp-color-border: #dce4f2;
  --pp-color-border-strong: #c8d4e8;
  --pp-color-brand-50: #eef4ff;
  --pp-color-brand-100: #dde9ff;
  --pp-color-brand-500: #2f6bff;
  --pp-color-brand-600: #0b5bff;
  --pp-color-brand-700: #0748d9;
  --pp-color-brand-900: #10255b;
  --pp-color-cyan-500: #18bdea;
  /* the same cyan, dark enough to read on a WHITE card. cyan-500 is 2.21:1 on white
     (measured from pixels, 2026-08-21) — it is a night colour, and on the light card
     bodies it was decoration pretending to be a label. 5.74:1. */
  --pp-color-cyan-700: #0f6f8a;
  --pp-color-mint-500: #2ccf91;
  --pp-color-success-50: #f0fdf4;
  --pp-color-success-600: #16a34a;
  --pp-color-danger-50: #fef2f2;
  --pp-color-danger-600: #dc2626;
  --pp-color-info-50: #f0f9ff;
  --pp-color-info-600: #0284c7;
  --pp-night-frame: #0a1224;
  --pp-night-bg: #0d1527;
  --pp-night-surface: #121c31;
  --pp-night-surface-subtle: #17223a;
  --pp-night-surface-tint: #182747;
  --pp-night-text: #f4f7ff;
  --pp-night-muted: #aab5cc;
  --pp-night-disabled: #748198;
  --pp-night-border: #283650;
  --pp-night-border-strong: #3a4a69;
  --pp-space-1: 4px;
  --pp-space-2: 8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-5: 20px;
  --pp-space-6: 24px;
  --pp-space-8: 32px;
  --pp-space-10: 40px;
  --pp-space-12: 48px;
  --pp-radius-sm: 10px;
  --pp-radius-md: 14px;
  --pp-radius-lg: 18px;
  --pp-radius-xl: 24px;
  --pp-radius-frame: 32px;
  --pp-radius-pill: 999px;
  --pp-shadow-sm: 0 1px 3px rgb(16 37 91 / 0.07);
  --pp-shadow-card: 0 10px 28px rgb(30 64 175 / 0.07);
  --pp-shadow-popover: 0 18px 48px rgb(16 37 91 / 0.16);
  --pp-shadow-floating: 0 14px 34px rgb(11 91 255 / 0.28);
  --pp-focus: 0 0 0 5px var(--pp-color-brand-600);
  --pp-milo-gradient: linear-gradient(145deg, #6a5cff 0%, #155cff 55%, #00bceb 100%);
  --pp-content-max: 1240px;
  --pp-reading-max: 760px;
  --pp-motion-fast: 120ms;
  --pp-motion-base: 180ms;
  --pp-header-height: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pp-header-height) + 20px); }
html[dir="rtl"] { direction: rtl; }
body {
  margin: 0;
  color: var(--pp-color-text);
  background: var(--pp-color-bg);
  font: 400 1rem/1.7 var(--pp-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.mkt-dark { color: var(--pp-night-text); background: var(--pp-night-bg); }
img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, blockquote { margin-block-start: 0; }
h1, h2, h3, h4 { line-height: 1.13; letter-spacing: -0.035em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { color: #fff; background: var(--pp-color-brand-600); }

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: var(--pp-radius-md);
  color: #fff;
  background: var(--pp-color-brand-600);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: var(--pp-focus); }

.mkt-container { inline-size: min(var(--pp-content-max), calc(100% - 40px)); margin-inline: auto; }
.mkt-reading { inline-size: min(var(--pp-reading-max), calc(100% - 40px)); margin-inline: auto; }
.mkt-section { position: relative; padding-block: 70px; }
.mkt-section--compact { padding-block: 56px; }
.mkt-section--light { color: var(--pp-color-text); background: var(--pp-color-bg); }
.mkt-section--surface { color: var(--pp-color-text); background: var(--pp-color-surface); }
.mkt-section--tint { color: var(--pp-color-text); background: var(--pp-color-surface-tint); }
.mkt-section--dark { color: var(--pp-night-text); background: var(--pp-night-bg); }
.mkt-section--frame { color: var(--pp-night-text); background: var(--pp-night-frame); }

.mkt-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(91 131 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(91 131 255 / 0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.mkt-orb {
  position: absolute;
  inline-size: min(54vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgb(24 189 234 / 0.16);
  border-radius: 50%;
  pointer-events: none;
}
.mkt-orb::before, .mkt-orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgb(44 207 145 / 0.13);
  border-radius: inherit;
}
.mkt-orb::before {
  inset: 14%;
  background:
    radial-gradient(circle at 50% 6px, var(--pp-color-mint-500) 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 6px, rgb(44 207 145 / .16) 0 12px, transparent 12.5px);
  animation: ppOrbitSignal 18s linear infinite;
}
.mkt-orb::after { inset: 30%; border-color: rgb(91 131 255 / 0.14); }

@keyframes ppOrbitSignal { to { transform: rotate(1turn); } }

.mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 18px;
  color: var(--pp-color-brand-600);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: 0;
}
.mkt-section--dark .mkt-eyebrow,
.mkt-section--frame .mkt-eyebrow { color: var(--pp-color-cyan-500); }
.mkt-eyebrow::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--pp-color-mint-500);
  box-shadow: 0 0 0 5px rgb(44 207 145 / 0.1);
}
.mkt-title { max-inline-size: 900px; margin-block-end: 20px; font-size: clamp(2.375rem, 6vw, 4.625rem); font-weight: 900; }
.mkt-title--section { font-size: clamp(2rem, 4vw, 3.375rem); }
.mkt-lead { max-inline-size: 740px; margin-block-end: 0; color: var(--pp-color-text-muted); font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.65; }
.mkt-section--dark .mkt-lead,
.mkt-section--frame .mkt-lead { color: var(--pp-night-muted); }
.mkt-accent { color: var(--pp-color-cyan-500); }

.mkt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block-start: 30px; }
.btn {
  min-block-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-inline: 20px;
  border: 1px solid var(--pp-color-border-strong);
  border-radius: var(--pp-radius-md);
  color: var(--pp-color-text);
  background: var(--pp-color-surface);
  font-size: .9375rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--pp-motion-fast), background var(--pp-motion-fast), border-color var(--pp-motion-fast), box-shadow var(--pp-motion-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; border-color: var(--pp-color-brand-600); background: var(--pp-color-brand-600); box-shadow: 0 10px 22px rgb(11 91 255 / 0.2); }
.btn-primary:hover { border-color: var(--pp-color-brand-700); background: var(--pp-color-brand-700); }
.btn-secondary { color: var(--pp-night-text); border-color: var(--pp-night-border-strong); background: var(--pp-night-surface); }
.btn-secondary:hover { border-color: var(--pp-color-cyan-500); background: var(--pp-night-surface-subtle); }
.btn-quiet { border-color: transparent; background: transparent; }
.btn svg { inline-size: 18px; block-size: 18px; }

.mkt-chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-block-start: 24px; }
.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 34px;
  padding-inline: 12px;
  border: 1px solid var(--pp-color-border);
  border-radius: var(--pp-radius-pill);
  color: var(--pp-color-text-muted);
  background: var(--pp-color-surface);
  font-size: .8125rem;
  font-weight: 700;
}
.mkt-section--dark .mkt-chip,
.mkt-section--frame .mkt-chip { color: var(--pp-night-muted); border-color: var(--pp-night-border); background: var(--pp-night-surface); }
.mkt-chip::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--pp-color-mint-500); }

.mkt-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  min-block-size: var(--pp-header-height);
  color: var(--pp-night-text);
  border-block-end: 1px solid rgb(58 74 105 / 0.7);
  background: rgb(10 18 36 / 0.94);
  backdrop-filter: blur(16px);
}
/* ROW-REVERSE, so the logo sits on the LEFT of an RTL page (owner decision, 2026-08-21). The
   document stays `dir="rtl"` — only this strip is flipped — so the markup order (brand, nav,
   actions) is unchanged and every page keeps working without being touched. */
.mkt-header__inner { min-block-size: var(--pp-header-height); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 24px; }
.mkt-brand { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; }
.mkt-brand img { inline-size: clamp(154px, 15vw, 196px); block-size: auto; }
.mkt-nav { display: flex; align-items: center; gap: 4px; }
.mkt-nav > a {
  min-block-size: 42px;
  display: inline-flex;
  align-items: center;
  padding-inline: 13px;
  border-radius: var(--pp-radius-sm);
  color: var(--pp-night-muted);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.mkt-nav > a:hover, .mkt-nav > a[aria-current="page"] { color: #fff; background: var(--pp-night-surface-subtle); }
/* SIGN-IN LIVES IN THE MOBILE MENU, and only there. `.mkt-header__actions .btn-secondary` is
   hidden below 1024px, and the menu the hamburger opens is `.mkt-nav` — which contained no route
   to /app/login on any of the 27 pages. Measured: 0 of 27. So a returning customer on a phone had
   no way to sign in from the header and had to scroll to the footer to find one (Codex design
   review, 2026-08-21). It stays out of the desktop nav so the seven-item ceiling still holds.
   `.mkt-nav > a.mkt-nav__login` and not `.mkt-nav__login`: the bare class is (0,1,0) and loses to
   `.mkt-nav > a` at (0,1,1), so `display: none` would never have applied. */
.mkt-nav > a.mkt-nav__login { display: none; }
/* Reversed too, or the hamburger — last in the markup — lands in the MIDDLE of a row-reversed
   header instead of at its right edge. Measured at 360px: logo@14, CTA@189, hamburger@302. */
.mkt-header__actions { display: flex; flex-direction: row-reverse; align-items: center; gap: 9px; }
.mkt-header .btn { min-block-size: 42px; padding-inline: 15px; }
.mkt-menu-toggle {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  place-items: center;
  border: 1px solid var(--pp-night-border);
  border-radius: var(--pp-radius-md);
  color: var(--pp-night-text);
  background: var(--pp-night-surface);
  cursor: pointer;
}
.mkt-menu-toggle span,
.mkt-menu-toggle::before,
.mkt-menu-toggle::after { content: ""; display: block; inline-size: 20px; block-size: 2px; border-radius: 2px; background: currentColor; transition: transform var(--pp-motion-base), opacity var(--pp-motion-base); }
.mkt-menu-toggle span { margin-block: 4px; }
.mkt-menu-toggle[aria-expanded="true"] span { opacity: 0; }
.mkt-menu-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.mkt-menu-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

.mkt-card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--pp-color-border);
  border-radius: var(--pp-radius-xl);
  color: var(--pp-color-text);
  background: var(--pp-color-surface);
  box-shadow: var(--pp-shadow-card);
}
.mkt-card--dark { color: var(--pp-night-text); border-color: var(--pp-night-border); background: var(--pp-night-surface); box-shadow: 0 14px 34px rgb(0 0 0 / 0.18); }
.mkt-card h3 { margin-block-end: 12px; font-size: clamp(1.3125rem, 2.4vw, 1.75rem); }
.mkt-card p:last-child { margin-block-end: 0; }
.mkt-card p { color: var(--pp-color-text-muted); }
.mkt-card--dark p { color: var(--pp-night-muted); }
.mkt-icon {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  margin-block-end: 20px;
  border: 1px solid var(--pp-color-brand-100);
  border-radius: var(--pp-radius-md);
  color: var(--pp-color-brand-600);
  background: var(--pp-color-brand-50);
}
.mkt-icon svg { inline-size: 21px; block-size: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mkt-card--dark .mkt-icon { color: var(--pp-color-cyan-500); border-color: var(--pp-night-border); background: var(--pp-night-surface-tint); }
.mkt-grid { display: grid; gap: 18px; }
.mkt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mkt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mkt-stat { padding: 22px; border-inline-start: 3px solid var(--pp-color-cyan-500); }
.mkt-stat strong { display: block; margin-block-end: 4px; color: var(--pp-night-text); font-size: 1.875rem; line-height: 1; }
.mkt-stat span { color: var(--pp-night-muted); font-size: .875rem; }

.mkt-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 24px; color: var(--pp-color-text-muted); font-size: .875rem; }
.mkt-breadcrumbs a { color: var(--pp-color-brand-600); text-decoration: none; }
.mkt-breadcrumbs a:hover { text-decoration: underline; }
.mkt-breadcrumbs span[aria-hidden="true"] { color: var(--pp-color-text-disabled); }

.mkt-callout { padding: 22px 24px; border: 1px solid var(--pp-color-brand-100); border-inline-start: 4px solid var(--pp-color-brand-600); border-radius: var(--pp-radius-lg); background: var(--pp-color-brand-50); }
.mkt-callout--safety { border-color: var(--pp-color-brand-100); border-inline-start-color: var(--pp-color-cyan-500); background: linear-gradient(135deg, var(--pp-color-brand-50), var(--pp-color-info-50)); }
.mkt-callout p:last-child { margin-block-end: 0; }

.mkt-cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 64px);
  border: 1px solid var(--pp-night-border-strong);
  border-radius: var(--pp-radius-frame);
  color: var(--pp-night-text);
  background: var(--pp-night-surface);
}
.mkt-cta-band::before {
  content: "";
  position: absolute;
  inset-inline-end: -140px;
  inset-block-start: -180px;
  inline-size: 420px;
  aspect-ratio: 1;
  border: 1px solid rgb(24 189 234 / .22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 6px, var(--pp-color-mint-500) 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 6px, rgb(44 207 145 / .16) 0 12px, transparent 12.5px);
  animation: ppOrbitSignal 18s linear infinite;
}
.mkt-cta-band > * { position: relative; }
.mkt-cta-band h2 { max-inline-size: 720px; margin-block-end: 14px; font-size: clamp(2rem, 4.5vw, 3.5rem); }
.mkt-cta-band p { max-inline-size: 680px; color: var(--pp-night-muted); font-size: 1.125rem; }

.mkt-footer { color: var(--pp-night-muted); border-block-start: 1px solid var(--pp-night-border); background: var(--pp-night-frame); }
.mkt-footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(140px, 1fr)); gap: 42px; padding-block: 64px 46px; }
.mkt-footer__brand img { inline-size: 188px; margin-block-end: 18px; }
.mkt-footer__brand p { max-inline-size: 360px; }
.mkt-footer h2, .mkt-footer h3 { color: var(--pp-night-text); font-size: .9375rem; letter-spacing: 0; }
.mkt-footer ul { list-style: none; margin: 0; padding: 0; }
.mkt-footer li + li { margin-block-start: 8px; }
.mkt-footer a { text-decoration: none; }
.mkt-footer a:hover { color: var(--pp-color-cyan-500); text-decoration: underline; text-underline-offset: 3px; }

/* Footer link columns are a nav list, not prose, so they get a real tap target. Measured on
   the live site before this rule: rect `...x22.0`, a 23px hit area, on 332 of the 440 footer
   anchors across all 27 pages -- every text link on every page. The 108 that passed were
   exactly the four social icons times 27, which have had their own 44x44 box all along.
   `:not(.mkt-social)` is scoping, not a tie-break: without it this selector is (0,1,2) and
   loses to `.mkt-footer .mkt-social a` at (0,2,1) anyway. `min-block-size` rather than a fixed
   height, because the longest label wraps to two lines at 768 and measures 54.375 -- it has to
   grow past 44, not be clipped to it. (The accessibility widget takes the root font to 140%;
   measured there, the links stay at 44 with nothing clipped. That is evidence the floor does not
   cut enlarged text, not evidence that it must exceed 44.) The gap goes to 0 because the in-flow
   44px box already separates the rows: keeping the old 8px measures a 52px pitch, which is not
   wrong, only extra footer height for no extra target -- 88px on the home page at 360, 48px on a
   legal page, because the cost is 8px per gap and the pages carry different numbers of links.
   OVERLAP belongs to the alternative this replaced, and that is measured too: padding the old
   inline box to 44 WITHOUT growing the layout gives a 35.19px pitch and 11 overlapping pairs at
   360, and a mis-tap is worse than a small target. (I first wrote the overlap warning against
   the 8px margin, which was wrong -- Codex.) Measured after this rule, on the built dist, across
   all 27 pages at 360/393/412/768/1280: 0 rects under 44, 0 overlaps, 0 centre-point misses. */
.mkt-footer__top ul:not(.mkt-social) a { display: flex; align-items: center; min-block-size: 44px; }
.mkt-footer__top ul:not(.mkt-social) li + li { margin-block-start: 0; }

/* Social row. Every selector is scoped `.mkt-footer .mkt-social` on purpose: `.mkt-footer ul`
   (0,1,1) beats a bare `.mkt-social` (0,1,0), so an unscoped margin here would never apply. */
.mkt-footer .mkt-social { display: flex; gap: 10px; margin-block-start: 18px; }
.mkt-footer .mkt-social li + li { margin-block-start: 0; }
.mkt-footer .mkt-social a { display: grid; place-items: center; inline-size: 44px; block-size: 44px; color: var(--pp-night-muted); border: 1px solid var(--pp-night-border); border-radius: 50%; transition: color .16s ease, border-color .16s ease; }
.mkt-footer .mkt-social a:hover { color: var(--pp-color-cyan-500); border-color: var(--pp-color-cyan-500); text-decoration: none; }
.mkt-footer .mkt-social svg { inline-size: 20px; block-size: 20px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .mkt-footer .mkt-social a { transition: none; } }

.mkt-footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px 28px; border-block-start: 1px solid var(--pp-night-border); font-size: .8125rem; }

.mkt-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1100; block-size: 2px; pointer-events: none; }
.mkt-progress span { display: block; inline-size: 100%; block-size: 100%; background: var(--pp-color-cyan-500); transform: scaleX(0); transform-origin: right center; }

.whatsapp-fab {
  position: fixed;
  left: clamp(16px, 2.5vw, 30px);
  right: auto;
  inset-block-end: clamp(16px, 2.5vw, 30px);
  z-index: 900;
  inline-size: 54px;
  block-size: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--pp-color-mint-500);
  box-shadow: 0 0 0 4px var(--pp-night-bg), 0 14px 34px rgb(10 18 36 / .32);
  line-height: 0;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--pp-motion-base), box-shadow var(--pp-motion-base), background var(--pp-motion-base);
}
.whatsapp-fab:hover { color: #fff; background: #20ba7d; box-shadow: 0 0 0 4px var(--pp-night-bg), 0 18px 42px rgb(10 18 36 / .36); transform: translateY(-3px); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--pp-color-cyan-500); outline-offset: 4px; }
.whatsapp-fab svg { inline-size: 25px; block-size: 25px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-.5px); }

[data-reveal] { opacity: 0; transform: translateY(18px); }
.no-js [data-reveal], .is-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  :root { --pp-header-height: 68px; }
  .mkt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-nav {
    position: fixed;
    inset-inline: 20px;
    inset-block-start: calc(var(--pp-header-height) + 10px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--pp-night-border-strong);
    border-radius: var(--pp-radius-xl);
    background: var(--pp-night-surface);
    box-shadow: 0 24px 54px rgb(0 0 0 / 0.32);
  }
  .mkt-nav[data-open="true"] { display: flex; }
  .mkt-nav > a { min-block-size: 48px; }
  .mkt-menu-toggle { display: grid; }
  .mkt-header__actions .btn-secondary { display: none; }
  /* ...and it reappears inside the menu, which is the only place it exists below this width. */
  .mkt-nav > a.mkt-nav__login { display: inline-flex; }
  .mkt-footer__top { grid-template-columns: 1.5fr repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .mkt-container, .mkt-reading { inline-size: min(100% - 28px, var(--pp-content-max)); }
  .mkt-section { padding-block: 56px; }
  .mkt-title { font-size: clamp(2.375rem, 12vw, 3.5rem); }
  .mkt-title--section { font-size: clamp(1.9375rem, 9vw, 2.75rem); }
  .mkt-lead { font-size: 1.125rem; }
  .mkt-actions { align-items: stretch; }
  .mkt-actions .btn { flex: 1 1 100%; }
  .mkt-grid--2, .mkt-grid--3, .mkt-grid--4 { grid-template-columns: 1fr; }
  .mkt-card { padding: 22px; border-radius: var(--pp-radius-lg); }
  /* THE HEADER KEEPS ITS CALL TO ACTION ON A PHONE. This used to be
     `.mkt-header__actions .btn-primary { display: none }`, which left the mobile header with the
     logo and a hamburger and nothing to press — on the device most visitors arrive from. The
     secondary (`כניסה למערכת`) stays hidden below 1024px; it is for people who already have an
     account, and it is inside the menu.
     The logo drops to 130px to pay for it: measured at 360px, a 154px logo leaves 2px of slack
     next to a 114px button, which is not slack. At 130px there is 26px. */
  .mkt-brand img { inline-size: 130px; }
  /* 44px, not the 42px the header buttons carry elsewhere. That two-pixel gap did not matter while
     this button was hidden on phones; it is the recommended minimum for something a thumb has to
     hit, and this is now the only control in the mobile header besides the menu. */
  .mkt-header .btn { min-block-size: 44px; }
  .mkt-footer__top { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .mkt-footer__brand { grid-column: 1 / -1; }
  .mkt-footer__bottom { flex-direction: column; }
  .mkt-cta-band { border-radius: var(--pp-radius-xl); }
  .mkt-orb { inline-size: 92vw; }
}

@media (max-width: 479px) {
  .mkt-footer__top { grid-template-columns: 1fr; }
  .mkt-footer__brand { grid-column: auto; }
}

html.pp-a11y-nomo .mkt-orb::before,
html.pp-a11y-nomo .mkt-cta-band::before,
html.pp-a11y-fs2 .mkt-orb::before,
html.pp-a11y-fs2 .mkt-cta-band::before,
html.pp-a11y-fs3 .mkt-orb::before,
html.pp-a11y-fs3 .mkt-cta-band::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .mkt-header, .mkt-footer, .pp-a11y-btn, .pp-a11y-panel, .mkt-progress, .whatsapp-fab { display: none !important; }
  body { color: #101936; background: #fff; }
  .mkt-section { padding-block: 24px; }
  a { color: #101936; text-decoration: underline; }
}