/* ============================================================
   MishMarot Landing Pages, Shared Design System (v3)
   ============================================================
   Visual language inspired by smarteam.ai: deep navy ink,
   violet→blue gradient accents, soft lavender washes, large
   rounded cards with gentle lift on hover, heavy Heebo headings.
   Class names are unchanged from v1, pages restyle automatically.
   Tokens → Reset → Base → Components → Sections → Responsive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---- Design Tokens ---- */
/* Solution theme: every solution page sets <html data-sol="…"> and gets its brand color.
   A theme only defines --c-accent (brand shade that reads well as text on white) and the two
   gradient stops; everything else (tints, lines, glows, gradients) is derived from them.
   The solutions page (index.html) has no data-sol and keeps the MishMarot violet→blue. */
:root {
  --c-accent:     #596CF5;
  --c-grad-from:  #A966FF;
  --c-grad-to:    #596CF5;
}
html[data-sol="forecasting"]  { --c-accent: #5A5CE6; --c-grad-from: #8B6CF6; --c-grad-to: #4547C9; }  /* MishCast */
html[data-sol="attendance"]   { --c-accent: #0E8A59; --c-grad-from: #1FB87A; --c-grad-to: #0B7A4C; }  /* MishClock */
html[data-sol="transport"]    { --c-accent: #B85A08; --c-grad-from: #E8862E; --c-grad-to: #A44F06; }  /* MishMove */
html[data-sol="clinic-rooms"] { --c-accent: #0B7FA0; --c-grad-from: #14A9C9; --c-grad-to: #0E7490; }  /* 5 STEPS */
html[data-sol="nursing"]      { --c-accent: #C8306D; --c-grad-from: #E25A92; --c-grad-to: #A8285C; }  /* MishCampus */
html[data-sol="shift-live"]   { --c-accent: #D33434; --c-grad-from: #EF5B5B; --c-grad-to: #B42318; }  /* MishLive */
html[data-sol="shuttles"]     { --c-accent: #2563EB; --c-grad-from: #4F8BF5; --c-grad-to: #1D4ED8; }  /* MishRide */
html[data-sol="quotas"]       { --c-accent: #8A6607; --c-grad-from: #D4A21F; --c-grad-to: #7A5900; }  /* MishQuota */
html[data-sol="payroll"]          { --c-accent: #7E22CE; --c-grad-from: #A855F7; --c-grad-to: #7E22CE; }  /* MishPay (logo #9333EA) */
html[data-sol="nurse-supervisor"] { --c-accent: #A21CAF; --c-grad-from: #C026D3; --c-grad-to: #86198F; }  /* MishNurse (logo #C026D3) */
html[data-sol="emergency"]        { --c-accent: #9F1239; --c-grad-from: #E0466B; --c-grad-to: #881337; }  /* MishAlert (logo #BE123C) */
html[data-sol="workload"]         { --c-accent: #4D7C0F; --c-grad-from: #7DB52A; --c-grad-to: #3F6212; }  /* MishMadad (placeholder) */
html[data-sol="breaks"]           { --c-accent: #0F766E; --c-grad-from: #14B8A6; --c-grad-to: #0F766E; }  /* MishBreak (logo #14B8A6) */

:root {
  /* Palette */
  --c-navy:      #0D1B3D;
  --c-ink:       #13213F;
  --c-blue:      var(--c-accent);      /* historical name, it is the solution accent */
  --c-violet:    var(--c-grad-from);
  --c-green:     #1BA77B;
  --c-orange:    #E57B25;
  --c-mint:      #65DFB4;
  --c-wash:      color-mix(in srgb, var(--c-accent) 5%, #fff);
  --c-tint:      color-mix(in srgb, var(--c-accent) 11%, #fff);
  --c-hover-bg:  color-mix(in srgb, var(--c-accent) 7%, #fff);
  --c-line:      color-mix(in srgb, var(--c-accent) 30%, #fff);
  --c-glow:      color-mix(in srgb, var(--c-accent) 24%, transparent);
  --c-glow-strong: color-mix(in srgb, var(--c-accent) 36%, transparent);
  --c-on-dark:   color-mix(in srgb, var(--c-accent) 50%, #fff);   /* accent that reads on navy */

  /* Semantic (names kept from v1 so inline page styles keep working) */
  --c-primary:   var(--c-accent);
  --c-secondary: var(--c-grad-from);
  --c-grad:      linear-gradient(115deg, var(--c-grad-from) 0%, var(--c-grad-to) 100%);
  --c-grad-text: linear-gradient(90deg, var(--c-grad-from), var(--c-accent));
  --c-bg:        #F7F8FD;
  --c-surface:   #FFFFFF;
  --c-text:      #13213F;
  --c-muted:     #69738E;
  --c-border:    #E2E7F4;
  --c-success:   #1BA77B;

  --font:      'Heebo', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-full: 9999px;

  --sh-sm: 0 5px 20px rgba(20,35,72,.06);
  --sh-md: 0 12px 35px rgba(23,34,70,.08);
  --sh-lg: 0 28px 70px rgba(25,37,74,.14);
  --sh-hover: 0 22px 55px rgba(34,44,88,.11);

  --container: 1180px;
  --header-h:  76px;
  --tr: .25s ease;
  --a11y-font-scale: 1;
  --a11y-contrast: ;
  --a11y-grayscale: ;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: calc(16px * var(--a11y-font-scale)); scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--c-surface);
  color: var(--c-text);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
:focus-visible { outline: 3px solid #FFBF47; outline-offset: 4px; }

h1, h2, h3, h4 { color: var(--c-navy); }


/* ---- Layout ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---- Typography helpers ---- */
.gradient-text {
  background: var(--c-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
}
.section-header h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin-bottom: 1rem;
}
.section-header p {
  color: var(--c-muted);
  font-size: 1.125rem;
  max-width: 640px;
  margin-inline: auto;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 800;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font);
}
.btn-primary {
  background: var(--c-grad);
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--c-accent) 32%, transparent);
}
.btn-light {
  background: #fff;
  color: var(--c-navy);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn-light:hover { transform: translateY(-2px); color: var(--c-blue); }
.btn-lg { min-height: 56px; padding: 0 2rem; font-size: 1.08rem; border-radius: 16px; }
.btn-outline {
  border: 1px solid var(--c-border);
  color: var(--c-navy);
  background: #fff;
}
.btn-outline:hover {
  border-color: var(--c-line);
  color: var(--c-blue);
  background: var(--c-hover-bg);
}

/* ---- Header ---- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--header-h);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226,231,244,.8);
  z-index: 1000;
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 35px rgba(18,31,68,.08);
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.logo {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.logo img { width: auto; height: 52px; }
/* Product lockup: [logo] | module name, how the module is named, instead of a hero badge */
.product-name {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-inline-start: -.6rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--c-navy);
  white-space: nowrap;
  flex-shrink: 0;
}
.product-name::before {
  content: '';
  width: 1px;
  height: 30px;
  background: var(--c-border);
}
.logo-m { color: var(--c-navy); }
.logo-r { color: #22C55E; }
.main-nav {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.main-nav a {
  position: relative;
  padding: .55rem .6rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 600;
  color: #44506C;
  transition: color var(--tr), background var(--tr);
}
.main-nav a::after {
  content: '';
  position: absolute;
  inset-inline: .6rem;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-grad);
  transform: scaleX(0);
  transition: transform var(--tr);
}
.main-nav a:hover { color: var(--c-blue); background: var(--c-hover-bg); }
.main-nav a:hover::after { transform: scaleX(1); }
/* the demo CTA copied into the nav (main.js) only shows inside the open mobile menu */
.main-nav .nav-cta { display: none; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.header-actions .btn { min-height: 44px; padding: 0 1.2rem; font-size: .92rem; }
/* The logo already links to mishmarot.com; the text link is kept in the markup but gives its room to the nav */
.nav-back-link {
  display: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-muted);
  transition: color var(--tr);
  white-space: nowrap;
}
.nav-back-link:hover { color: var(--c-blue); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .6rem;
  cursor: pointer;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-navy);
  border-radius: 2px;
  transition: all var(--tr);
}

/* ---- Hero ---- */
.hero {
  min-height: 100vh;
  padding-top: var(--header-h);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 8% 15%, color-mix(in srgb, var(--c-grad-from) 13%, transparent), transparent 30%),
    radial-gradient(circle at 90% 45%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 26%),
    linear-gradient(#FFFFFF, #FBFBFF);
  position: relative;
  overflow: hidden;
}
.hero::before { display: none; }
.hero::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent);
  border-radius: 50%;
  left: -280px;
  top: 145px;
  box-shadow: 0 0 0 80px color-mix(in srgb, var(--c-accent) 2.5%, transparent), 0 0 0 160px color-mix(in srgb, var(--c-accent) 2%, transparent);
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: 4.5rem;
  align-items: center;
  padding-block: 5rem;
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  font-weight: 900;
  line-height: 1.02;
  margin-bottom: 1.6rem;
  letter-spacing: -.045em;
}
.hero-subtitle {
  font-size: 1.2rem;
  color: #4F5A75;
  line-height: 1.72;
  margin-bottom: 2.2rem;
  max-width: 560px;
}
.hero-subtitle strong { color: var(--c-navy); }
.hero-ctas {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Hero visual: soft halo behind the mockup */
.hero-visual { position: relative; }
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -45px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-grad-from) 12%, transparent), rgba(48,203,150,.12));
  filter: blur(12px);
  pointer-events: none;
}
.hero-visual > * { position: relative; }

/* Dashboard mockup */
.dashboard-mockup {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--c-border);
  overflow: hidden;
  background: #fff;
  animation: float 5s ease-in-out infinite;
}
.dashboard-mockup svg { width: 100%; height: auto; display: block; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* ---- Sections base ---- */
section { padding-block: 6rem; }

/* ---- Steps (How it works) ---- */
.steps-section { background: #F7F8FC; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.step-card {
  text-align: right;
  padding: 1.9rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 22px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-hover);
  border-color: var(--c-line);
}
.step-num {
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 900;
  color: var(--c-violet);
  margin-bottom: .75rem;
}
.step-num::before { content: '0'; }
.step-card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: .6rem; line-height: 1.25; }
.step-card p { color: var(--c-muted); font-size: 1rem; line-height: 1.65; }

/* ---- Features ---- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  padding: 1.75rem;
  box-shadow: 0 12px 35px rgba(23,34,70,.05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover {
  transform: translateY(-7px);
  border-color: var(--c-line);
  box-shadow: var(--sh-hover);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--c-tint);
  color: var(--c-blue);
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}
.feature-card:nth-child(3n+2) .feature-icon { background: #E4F7F0; color: var(--c-green); }
.feature-card:nth-child(3n+3) .feature-icon { background: #FFF1E5; color: var(--c-orange); }
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; line-height: 1.3; }
.feature-card p { color: var(--c-muted); font-size: .97rem; line-height: 1.65; }

/* On a solution page every feature icon and check uses the solution color
   (the solutions page keeps its blue / green / orange rotation). */
html[data-sol] .feature-card:nth-child(n) .feature-icon { background: var(--c-tint); color: var(--c-accent); }
html[data-sol] .why-check { background: var(--c-tint); color: var(--c-accent); }

/* ---- Why section ---- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 940px;
  margin-inline: auto;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-item:hover {
  transform: translateY(-5px);
  border-color: var(--c-line);
  box-shadow: var(--sh-hover);
}
.why-check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #E8F8F1;
  color: var(--c-green);
  display: grid;
  place-items: center;
  font-size: .9rem;
  font-weight: 900;
  margin-top: .1rem;
}
.why-item h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .35rem; }
.why-item p { color: var(--c-muted); font-size: .95rem; line-height: 1.6; }

/* ---- Contact section (navy band, like smarteam's optimization block) ---- */
.contact-section {
  background: var(--c-navy);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: auto 45% -65% -10%;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 65%);
  pointer-events: none;
}
.contact-section .container { position: relative; }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start;
}
.contact-info h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 1.25rem;
  line-height: 1.1;
}
.contact-info p {
  color: #C3CBE0;
  font-size: 1.1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.contact-points { display: flex; flex-direction: column; gap: .75rem; }
.contact-point {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: #D7DEF0;
  font-size: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.045);
}
.contact-point-icon { flex-shrink: 0; display: grid; place-items: center; color: var(--c-on-dark); }
.contact-point-icon svg { width: 20px; height: 20px; display: block; }
.contact-point a { color: inherit; }
.contact-point a:hover { color: #fff; }
.contact-info .btn { margin-top: .25rem; }

/* Direct-contact column (replaces the old in-page form) */
.contact-side { align-self: center; }

/* Visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Icons (Phosphor, duotone, see assets/icons/README.md) ---- */
.ph { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex-shrink: 0; }
.feature-icon .ph { width: 26px; height: 26px; }
.why-check .ph { width: 18px; height: 18px; }

/* ============================================================
   Interactive simulator kit, shared by every page's live demo.
   <section class="sim-section"> .container > .section-header +
     <div class="sim">
       <div class="sim-controls"> h3, p, .sim-control (head: label + output, input.sim-range) | .seg
       <div class="sim-main">
         <div class="sim-stage">  live visual (svg / canvas / grid)
         <div class="sim-results"> .sim-stat(.accent|.good) > small + strong + em
   Range fill: set --fill (0-100%) on the input from JS.
   ============================================================ */
.sim-section { background: linear-gradient(180deg, #FFFFFF, var(--c-wash)); }
.sim {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 1.75rem;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--c-border);
  border-radius: 28px;
  padding: 2rem;
  box-shadow: 0 30px 80px rgba(29,43,89,.12);
}
.sim-controls { display: grid; gap: 1.35rem; align-content: start; }
.sim-controls h3 { font-size: 1.35rem; font-weight: 900; line-height: 1.25; }
.sim-controls > p { color: var(--c-muted); font-size: .97rem; margin-top: -.75rem; }
.sim-control { display: grid; gap: .55rem; }
.sim-control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-ink);
}
.sim-control output {
  color: var(--c-blue);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sim-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-blue) var(--fill, 50%), #E2E7F4 var(--fill, 50%));
  outline-offset: 6px;
  cursor: pointer;
}
html[dir="rtl"] .sim-range { background: linear-gradient(270deg, var(--c-blue) var(--fill, 50%), #E2E7F4 var(--fill, 50%)); }
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-blue);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-accent) 30%, transparent);
  transition: transform .15s ease;
}
.sim-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-blue);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.sim-range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* Segmented control, an actual input, not a label */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #F1F3FB;
  border-radius: 12px;
}
.seg button {
  min-height: 38px;
  padding: .45rem .9rem;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-muted);
  transition: background var(--tr), color var(--tr), box-shadow var(--tr);
}
.seg button:hover { color: var(--c-navy); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--c-navy); box-shadow: var(--sh-sm); }

.sim-main { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.sim-stage {
  position: relative;
  background: #F7F8FD;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 1.1rem;
  min-height: 260px;
  overflow: hidden;
}
.sim-stage svg, .sim-stage canvas { display: block; width: 100%; height: auto; }
.sim-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.sim-stat {
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: var(--c-navy);
  color: #fff;
  min-width: 0;
}
.sim-stat.accent { background: var(--c-grad); }
.sim-stat.good { background: linear-gradient(135deg, #168D6B, #27BF8E); }
.sim-stat.warn { background: linear-gradient(135deg, #C9621A, #E57B25); }
.sim-stat.warn small, .sim-stat.warn em { color: rgba(255,255,255,.88); }
.sim-stat small { display: block; color: #C5CDE0; font-size: .82rem; line-height: 1.35; }
.sim-stat.accent small, .sim-stat.good small { color: rgba(255,255,255,.82); }
.sim-stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.sim-stat em { display: block; font-style: normal; font-size: .78rem; color: #C8D1E4; margin-top: .15rem; }
.sim-note { font-size: .85rem; color: var(--c-muted); }
.sim-live { font-size: .9rem; color: var(--c-ink); }

@media (max-width: 900px) {
  .sim { grid-template-columns: 1fr; padding: 1.5rem; }
}
@media (max-width: 560px) {
  .sim { padding: 1.1rem; border-radius: 22px; }
  .sim-results { grid-template-columns: 1fr 1fr; }
  .sim-results .sim-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sim-stat strong { font-size: 1.35rem; }
}


/* ---- Footer ---- */
.site-footer {
  background: #0B1734;
  color: #B5BFD6;
  padding-block: 3.25rem 2rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.footer-brand .logo-footer {
  font-size: 1.5rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .9rem;
  letter-spacing: -.02em;
  line-height: 1;
  text-decoration: none;
}
.logo-footer img { width: auto; height: 56px; }
.logo-footer .logo-m { color: rgba(255,255,255,.92); }
.logo-footer .logo-r { color: #4ADE80; }
.footer-brand p { font-size: .95rem; line-height: 1.7; max-width: 300px; }
.footer-col h4 {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: .93rem; transition: color var(--tr); }
.footer-col a:hover { color: #fff; }
.footer-col .sol-name { font-weight: 800; color: #fff; }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
}

/* Legal links row (privacy / terms / accessibility / contact) */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
}
.legal-links a {
  color: #D7DEF0;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--tr);
}
.legal-links a:hover { color: #fff; }

/* Social + app-store links (same destinations as mishmarot.com's footer) */
.footer-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #D7DEF0;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.footer-social a:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; transform: translateY(-2px); }
.footer-social .ph { width: 20px; height: 20px; }

/* ---- Cookie consent (assets/js/consent.js) ---- */
.cookie-banner {
  position: fixed;
  z-index: 1002;
  bottom: 1.5rem;
  left: 6rem;                /* clear of the accessibility button */
  width: min(440px, calc(100vw - 7.5rem));
  padding: 1.25rem 1.35rem;
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(10,26,58,.22);
}
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-text { font-size: .93rem; line-height: 1.7; }
.cookie-text a { font-weight: 800; color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; }
.cookie-btn {
  min-height: 44px;
  padding: .5rem .75rem;
  border-radius: 12px;
  border: 1.5px solid var(--c-blue);
  background: #fff;
  color: var(--c-blue);
  font-size: .9rem;
  font-weight: 800;
  transition: background var(--tr), color var(--tr), box-shadow var(--tr);
}
.cookie-btn:hover { background: var(--c-hover-bg); }
.cookie-btn.primary { background: var(--c-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--c-accent) 28%, transparent); }
.cookie-btn.primary:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--c-accent) 38%, transparent); }

.cookie-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; }
.cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(13,27,61,.6); }
.cookie-modal-box {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(10,26,58,.3);
  overflow: hidden;
}
.cookie-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--c-border);
}
.cookie-modal-head h2 { font-size: 1.25rem; font-weight: 900; }
.cookie-close { color: var(--c-muted); padding: .35rem; border-radius: 8px; }
.cookie-close:hover { color: var(--c-navy); background: #F1F3FB; }
.cookie-close .ph { width: 20px; height: 20px; display: block; }
.cookie-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; }
.cookie-modal-body > p { color: var(--c-muted); font-size: .93rem; margin-bottom: .6rem; }
.cookie-cat { padding: 1rem 0; border-top: 1px solid var(--c-border); }
.cookie-cat:first-of-type { margin-top: .6rem; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.cookie-cat h3 { font-size: 1.02rem; font-weight: 800; }
.cookie-cat p { color: var(--c-muted); font-size: .9rem; line-height: 1.65; }
.cookie-always { color: var(--c-green); font-weight: 800; font-size: .88rem; white-space: nowrap; }
.cookie-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #CFD6E7;
  transition: background var(--tr);
}
.cookie-switch span {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(13,27,61,.2);
  transition: inset-inline-start var(--tr);
}
.cookie-switch[aria-checked="true"] { background: var(--c-blue); }
.cookie-switch[aria-checked="true"] span { inset-inline-start: 21px; }
.cookie-modal-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--c-border);
}
.legal-links button { color: #D7DEF0; text-decoration: underline; text-underline-offset: 4px; font: inherit; }
.legal-links button:hover { color: #fff; }

/* ============================================================
   Solution logos, MishCast (animated mark + wordmark)
   Source: mishcast-logo.html from the brand team. Rubik is loaded
   by the pages that show a logo. Static version: drop "mc-on".
   Used in: forecasting.html header lockup, index.html MishCast card.
   ============================================================ */
.mc-logo {
  --mc-accent: #5A5CE6; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.mc-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.mc-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.mc-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.02em;
}
.mc-logo .mc-name span { color: var(--mc-accent); }
.mc-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent); }
.mc-logo .mc-accent-fill { fill: var(--mc-accent); }
.mc-logo .mc-accent-stroke { stroke: var(--mc-accent); }
.mc-logo .mc-ping { opacity: 0; }
.mc-on .mc-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: mc-bar 3.2s ease-in-out infinite; }
.mc-on .mc-b1 { animation-delay: -0.4s; }
.mc-on .mc-b2 { animation-delay: -1.2s; }
.mc-on .mc-b3 { animation-delay: -2.0s; }
.mc-on .mc-b4 { animation: mc-grow 3.2s ease-in-out infinite; }
.mc-on .mc-line { animation: mc-draw 3.2s ease-in-out infinite; }
.mc-on .mc-dot { transform-box: fill-box; transform-origin: 50% 50%; animation: mc-pop 3.2s ease-out infinite; }
.mc-on .mc-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: mc-ping 3.2s ease-out infinite; }
@keyframes mc-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.62); } }
@keyframes mc-grow { 0%, 10% { transform: scaleY(0.45); } 55%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0.45); } }
@keyframes mc-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 55% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mc-pop { 0%, 50% { transform: scale(0); } 60% { transform: scale(1.25); } 66%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes mc-ping { 0%, 58% { transform: scale(1); opacity: 0; } 62% { opacity: 0.9; } 88% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mc-on * { animation: none !important; } }
/* English: mark on the left, text aligned left */
html[dir="ltr"] .mc-logo { direction: ltr; }
html[dir="ltr"] .mc-logo .mc-name { text-align: left; }

/* MishClock (attendance), same layout as MishCast, its own colors and motion.
   Source: MishClockLogo.jsx from the brand team, ported to plain HTML/CSS
   (markup kept in tools/mishclock-logo.html). The arrow comes in (clock-in), then goes out. */
.mk-logo {
  --mc-accent: #16A06A; --mc-accent-text: #0B7A4C; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.mk-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.mk-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.mk-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.02em;
}
.mk-logo .mc-name span { color: var(--mc-accent); }
.mk-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent-text); }
.mk-logo .mk-out { opacity: 0; }
.mk-on .mk-in { transform-box: view-box; animation: mk-in 3.6s ease-in-out infinite; }
.mk-on .mk-out { transform-box: view-box; animation: mk-out 3.6s ease-in-out infinite; }
@keyframes mk-in { 0% { transform: translateX(-26px); opacity: 0; } 16% { transform: translateX(0); opacity: 1; } 42% { transform: translateX(0); opacity: 1; } 50%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes mk-out { 0%, 50% { transform: translateX(0); opacity: 0; } 56% { opacity: 1; } 70% { transform: translateX(-14px); opacity: 1; } 90% { transform: translateX(-14px); opacity: 1; } 100% { transform: translateX(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-on * { animation: none !important; } }
html[dir="ltr"] .mk-logo { direction: ltr; }
html[dir="ltr"] .mk-logo .mc-name { text-align: left; }

/* MishMove (patient transport), source: mishmove-logo.html from the brand team
   (markup kept in tools/mishmove-logo.html, text classes renamed to the shared mc-*).
   A bed rolls along a dashed route to the destination, which pings. */
.mv-logo {
  --mc-accent: #D96A0B; --mc-accent-text: #A44F06; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.mv-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.mv-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.mv-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.02em;
}
.mv-logo .mc-name span { color: var(--mc-accent); }
.mv-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent-text); }
.mv-logo .mv-accent-fill { fill: var(--mc-accent); }
.mv-logo .mv-accent-stroke { stroke: var(--mc-accent); }
.mv-logo .mv-ping { opacity: 0; }
.mv-on .mv-bed { transform-box: view-box; animation: mv-bed 3.6s ease-in-out infinite; }
.mv-on .mv-route { animation: mv-flow 0.9s linear infinite; }
.mv-on .mv-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: mv-ping 3.6s ease-out infinite; }
@keyframes mv-bed { 0% { transform: translateX(-22px); opacity: 0; } 10% { transform: translateX(-22px); opacity: 1; } 62% { transform: translateX(22px); } 88% { transform: translateX(22px); opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
@keyframes mv-flow { to { stroke-dashoffset: -10; } }
@keyframes mv-ping { 0%, 60% { transform: scale(1); opacity: 0; } 63% { opacity: 0.9; } 88% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mv-on * { animation: none !important; } }
html[dir="ltr"] .mv-logo { direction: ltr; }
html[dir="ltr"] .mv-logo .mc-name { text-align: left; }

/* 5 STEPS (therapy scheduling), source: 5steps-logo.html from the brand team
   (markup kept in tools/5steps-logo.html, text classes renamed to the shared mc-*).
   Patient and therapist step into the calendar from both sides, then a check pops. */
.mf-logo {
  --mc-accent: #0891B2; --mc-accent-text: #0E7490; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.mf-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.mf-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.mf-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.01em;
}
.mf-logo .mc-name span { color: var(--mc-accent); }
.mf-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent-text); }
.mf-logo .mf-accent-fill { fill: var(--mc-accent); }
.mf-on .mf-pt { transform-box: view-box; animation: mf-pt 3.8s ease-in-out infinite; }
.mf-on .mf-th { transform-box: view-box; animation: mf-th 3.8s ease-in-out infinite; }
.mf-on .mf-ok { transform-box: fill-box; transform-origin: 50% 50%; animation: mf-ok 3.8s ease-out infinite; }
@keyframes mf-pt { 0% { transform: translateX(-26px); opacity: 0; } 20%, 80% { transform: translateX(0); opacity: 1; } 92%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes mf-th { 0%, 8% { transform: translateX(26px); opacity: 0; } 28%, 80% { transform: translateX(0); opacity: 1; } 92%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes mf-ok { 0%, 34% { transform: scale(0); } 42% { transform: scale(1.2); } 48%, 80% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .mf-on * { animation: none !important; } }
html[dir="ltr"] .mf-logo { direction: ltr; }
html[dir="ltr"] .mf-logo .mc-name { text-align: left; }

/* MishCampus (nursing clinical placements), source: mishcampus-logo.html from the brand team
   (markup kept in tools/mishcampus-logo.html, text classes renamed to the shared mc-*).
   A graduation cap drops in, its tassel swings, and an ECG line draws underneath. */
.mp-logo {
  --mc-accent: #D23C77; --mc-accent-text: #A8285C; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.mp-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.mp-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.mp-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.02em;
}
.mp-logo .mc-name span { color: var(--mc-accent); }
.mp-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent-text); }
.mp-logo .mp-accent-fill { fill: var(--mc-accent); }
.mp-on .mp-cap { transform-box: view-box; animation: mp-cap 3.8s ease-in-out infinite; }
.mp-on .mp-tassel { transform-box: view-box; transform-origin: 84px 33px; animation: mp-tassel 3.8s ease-in-out infinite; }
.mp-on .mp-ecg { animation: mp-ecg 3.8s ease-in-out infinite; }
@keyframes mp-cap { 0% { transform: translateY(-30px); opacity: 0; } 18% { transform: translateY(3px); opacity: 1; } 24% { transform: translateY(-2px); } 29%, 84% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes mp-tassel { 0%, 18% { transform: rotate(0deg); } 24% { transform: rotate(-14deg); } 30% { transform: rotate(8deg); } 36% { transform: rotate(-4deg); } 42%, 100% { transform: rotate(0deg); } }
@keyframes mp-ecg { 0%, 20% { stroke-dashoffset: 100; opacity: 1; } 52% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-on * { animation: none !important; } }
html[dir="ltr"] .mp-logo { direction: ltr; }
html[dir="ltr"] .mp-logo .mc-name { text-align: left; }

/* MishLive (live shift management), source: mishlive-logo.html from the brand team
   (markup kept in tools/mishlive-logo.html, text classes renamed to the shared mc-*).
   Two people pop in, the third seat stays a blinking dashed outline (missing), a live dot pings. */
.ml-logo {
  --mc-accent: #E03E3E; --mc-accent-text: #B42318; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.ml-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.ml-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.ml-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.02em;
}
.ml-logo .mc-name span { color: var(--mc-accent); }
.ml-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent-text); }
.ml-logo .ml-accent-fill { fill: var(--mc-accent); }
.ml-logo .ml-accent-stroke { stroke: var(--mc-accent); }
.ml-logo .ml-ping { opacity: 0; }
.ml-on .ml-p1 { transform-box: fill-box; transform-origin: 50% 100%; animation: ml-p1 4s ease-out infinite; }
.ml-on .ml-p2 { transform-box: fill-box; transform-origin: 50% 100%; animation: ml-p2 4s ease-out infinite; }
.ml-on .ml-miss { animation: ml-miss 4s ease-in-out infinite; }
.ml-on .ml-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: ml-ping 1.6s ease-out infinite; }
@keyframes ml-p1 { 0% { transform: scale(0.3); opacity: 0; } 10% { transform: scale(1.1); opacity: 1; } 14%, 86% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ml-p2 { 0%, 14% { transform: scale(0.3); opacity: 0; } 24% { transform: scale(1.1); opacity: 1; } 28%, 86% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ml-miss { 0%, 30% { opacity: 0; } 36% { opacity: 1; } 46% { opacity: 0.35; } 56% { opacity: 1; } 66% { opacity: 0.35; } 76%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ml-ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ml-on * { animation: none !important; } }
html[dir="ltr"] .ml-logo { direction: ltr; }
html[dir="ltr"] .ml-logo .mc-name { text-align: left; }

/* MishRide (employee shuttles), source: mishride-logo.html from the brand team
   (markup kept in tools/mishride-logo.html). Unlike the others it is ONE svg: the wordmark is
   svg text and a minibus rides over the letters, squashes each one, then hops into the tile.
   The viewBox is cropped to the artwork (0 0 744 200; the tile is the right-hand 200×200) and
   sized by height, so the tile matches the other logos' 1:1 mark at the same --mc-size. */
.mr-logo { --mc-size: 72px; display: inline-flex; flex: none; height: var(--mc-size); width: calc(var(--mc-size) * 3.72); }
.mr-logo svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'Rubik', 'Heebo', sans-serif; }
.mr-l { transform-box: fill-box; transform-origin: 50% 80%; }
.mr-van { transform-box: view-box; transform-origin: 0 0; transform: translate(644px, 138px) scale(1.55); }
.mr-speed { opacity: 0; }
.mr-dust { opacity: 0; }
.mr-on .mr-van { animation: mr-van 4.8s linear infinite; }
.mr-on .mr-speed { animation: mr-speed 4.8s linear infinite; }
.mr-on .mr-dust { transform-box: fill-box; transform-origin: 50% 50%; animation: mr-dust 4.8s ease-out infinite; }
.mr-on .mr-l { animation: mr-squash 4.8s ease-out infinite both; }
.mr-on .mr-l1 { animation-delay: 0.44s; }
.mr-on .mr-l2 { animation-delay: 0.74s; }
.mr-on .mr-l3 { animation-delay: 0.96s; }
.mr-on .mr-l4 { animation-delay: 1.28s; }
.mr-on .mr-l5 { animation-delay: 1.64s; }
.mr-on .mr-l6 { animation-delay: 1.89s; }
.mr-on .mr-l7 { animation-delay: 2.13s; }
.mr-on .mr-l8 { animation-delay: 2.46s; }
@keyframes mr-van{0%{transform:translate(-70px,38.0px) rotate(0deg) scale(1);opacity:0}4.0%{transform:translate(-30.0px,38.0px) rotate(-2.4deg) scale(1.00);opacity:1}4.6%{transform:translate(-24.0px,37.7px) rotate(-3.6deg) scale(1.00)}5.2%{transform:translate(-18.0px,37.1px) rotate(-5.3deg) scale(1.00)}5.8%{transform:translate(-12.0px,36.1px) rotate(-6.5deg) scale(1.00)}6.4%{transform:translate(-6.0px,34.9px) rotate(-6.2deg) scale(1.00)}7.0%{transform:translate(0.0px,34.1px) rotate(-4.2deg) scale(1.00)}7.6%{transform:translate(6.0px,33.7px) rotate(-2.0deg) scale(1.00)}8.2%{transform:translate(12.0px,33.6px) rotate(-0.6deg) scale(1.00)}8.8%{transform:translate(18.0px,33.7px) rotate(0.0deg) scale(1.00)}9.4%{transform:translate(24.0px,34.5px) rotate(0.0deg) scale(1.00)}10.0%{transform:translate(30.0px,37.4px) rotate(0.0deg) scale(1.00)}10.6%{transform:translate(36.0px,43.8px) rotate(0.0deg) scale(1.00)}11.2%{transform:translate(42.0px,51.7px) rotate(0.0deg) scale(1.00)}11.8%{transform:translate(48.0px,54.5px) rotate(0.0deg) scale(1.00)}12.4%{transform:translate(54.0px,49.4px) rotate(-0.2deg) scale(1.00)}13.0%{transform:translate(60.0px,41.4px) rotate(-1.3deg) scale(1.00)}13.6%{transform:translate(66.0px,35.8px) rotate(-3.3deg) scale(1.00)}14.2%{transform:translate(72.0px,33.1px) rotate(-5.9deg) scale(1.00)}14.8%{transform:translate(78.0px,31.6px) rotate(-7.1deg) scale(1.00)}15.4%{transform:translate(84.0px,30.9px) rotate(-6.7deg) scale(1.00)}16.0%{transform:translate(90.0px,32.1px) rotate(-4.6deg) scale(1.00)}16.6%{transform:translate(96.0px,37.1px) rotate(-2.2deg) scale(1.00)}17.2%{transform:translate(102.0px,44.8px) rotate(-0.7deg) scale(1.00)}17.8%{transform:translate(108.0px,49.0px) rotate(0.0deg) scale(1.00)}18.4%{transform:translate(114.0px,45.6px) rotate(1.8deg) scale(1.00)}19.0%{transform:translate(120.0px,38.1px) rotate(6.0deg) scale(1.00)}19.6%{transform:translate(126.0px,33.6px) rotate(10.0deg) scale(1.00)}20.2%{transform:translate(132.0px,33.6px) rotate(10.0deg) scale(1.00)}20.8%{transform:translate(138.0px,37.4px) rotate(10.0deg) scale(1.00)}21.4%{transform:translate(144.0px,42.1px) rotate(10.0deg) scale(1.00)}22.0%{transform:translate(150.0px,46.0px) rotate(7.6deg) scale(1.00)}22.6%{transform:translate(156.0px,47.1px) rotate(-0.7deg) scale(1.00)}23.2%{transform:translate(162.0px,44.7px) rotate(-8.3deg) scale(1.00)}23.8%{transform:translate(168.0px,40.9px) rotate(-10.0deg) scale(1.00)}24.4%{transform:translate(174.0px,37.1px) rotate(-10.0deg) scale(1.00)}25.0%{transform:translate(180.0px,34.6px) rotate(-10.0deg) scale(1.00)}25.6%{transform:translate(186.0px,33.1px) rotate(-6.4deg) scale(1.00)}26.2%{transform:translate(192.0px,32.6px) rotate(-2.6deg) scale(1.00)}26.8%{transform:translate(198.0px,33.4px) rotate(-0.4deg) scale(1.00)}27.4%{transform:translate(204.0px,36.3px) rotate(0.0deg) scale(1.00)}28.0%{transform:translate(210.0px,42.9px) rotate(0.0deg) scale(1.00)}28.6%{transform:translate(216.0px,51.0px) rotate(0.0deg) scale(1.00)}29.2%{transform:translate(222.0px,54.0px) rotate(0.0deg) scale(1.00)}29.8%{transform:translate(228.0px,48.8px) rotate(0.0deg) scale(1.00)}30.5%{transform:translate(234.0px,40.6px) rotate(0.0deg) scale(1.00)}31.1%{transform:translate(240.0px,35.1px) rotate(0.0deg) scale(1.00)}31.7%{transform:translate(246.0px,33.1px) rotate(0.1deg) scale(1.00)}32.3%{transform:translate(252.0px,32.6px) rotate(0.3deg) scale(1.00)}32.9%{transform:translate(258.0px,32.6px) rotate(0.8deg) scale(1.00)}33.5%{transform:translate(264.0px,32.8px) rotate(1.4deg) scale(1.00)}34.1%{transform:translate(270.0px,33.3px) rotate(1.6deg) scale(1.00)}34.7%{transform:translate(276.0px,34.9px) rotate(1.5deg) scale(1.00)}35.3%{transform:translate(282.0px,39.3px) rotate(1.1deg) scale(1.00)}35.9%{transform:translate(288.0px,47.0px) rotate(0.5deg) scale(1.00)}36.5%{transform:translate(294.0px,53.7px) rotate(-0.1deg) scale(1.00)}37.1%{transform:translate(300.0px,53.4px) rotate(-1.3deg) scale(1.00)}37.7%{transform:translate(306.0px,46.0px) rotate(-3.3deg) scale(1.00)}38.3%{transform:translate(312.0px,37.9px) rotate(-5.9deg) scale(1.00)}38.9%{transform:translate(318.0px,33.0px) rotate(-7.1deg) scale(1.00)}39.5%{transform:translate(324.0px,30.9px) rotate(-6.7deg) scale(1.00)}40.1%{transform:translate(330.0px,32.1px) rotate(-4.6deg) scale(1.00)}40.7%{transform:translate(336.0px,37.1px) rotate(-2.2deg) scale(1.00)}41.3%{transform:translate(342.0px,44.8px) rotate(-0.7deg) scale(1.00)}41.9%{transform:translate(348.0px,49.0px) rotate(0.0deg) scale(1.00)}42.5%{transform:translate(354.0px,45.6px) rotate(0.5deg) scale(1.00)}43.1%{transform:translate(360.0px,37.9px) rotate(1.7deg) scale(1.00)}43.7%{transform:translate(366.0px,32.5px) rotate(3.5deg) scale(1.00)}44.3%{transform:translate(372.0px,30.7px) rotate(5.2deg) scale(1.00)}44.9%{transform:translate(378.0px,33.1px) rotate(5.5deg) scale(1.00)}45.5%{transform:translate(384.0px,39.0px) rotate(4.5deg) scale(1.00)}46.1%{transform:translate(390.0px,47.6px) rotate(2.5deg) scale(1.00)}46.7%{transform:translate(396.0px,53.8px) rotate(1.0deg) scale(1.00)}47.3%{transform:translate(402.0px,51.8px) rotate(0.2deg) scale(1.00)}47.9%{transform:translate(408.0px,43.9px) rotate(0.0deg) scale(1.00)}48.5%{transform:translate(414.0px,36.9px) rotate(0.0deg) scale(1.00)}49.1%{transform:translate(420.0px,33.6px) rotate(0.5deg) scale(1.00)}49.7%{transform:translate(426.0px,32.7px) rotate(3.1deg) scale(1.00)}50.3%{transform:translate(432.0px,33.2px) rotate(7.7deg) scale(1.00)}50.9%{transform:translate(438.0px,34.9px) rotate(10.0deg) scale(1.00)}51.5%{transform:translate(444.0px,37.7px) rotate(10.0deg) scale(1.00)}52.1%{transform:translate(450.0px,41.7px) rotate(10.0deg) scale(1.00)}52.7%{transform:translate(456.0px,45.6px) rotate(10.0deg) scale(1.00)}53.3%{transform:translate(462.0px,48.7px) rotate(5.2deg) scale(1.00)}53.9%{transform:translate(468.0px,49.3px) rotate(1.6deg) scale(1.00)}54.5%{transform:translate(474.0px,47.7px) rotate(0.0deg) scale(1.00)}55.1%{transform:translate(480.0px,45.7px) rotate(0.0deg) scale(1.00)}55.7%{transform:translate(486.0px,44.5px) rotate(0.0deg) scale(1.00)}58.5%{transform:translate(527.8px,18.2px) rotate(-7.5deg) scale(1.14)}61.0%{transform:translate(566.5px,21.1px) rotate(-5.0deg) scale(1.27)}63.5%{transform:translate(605.2px,65.1px) rotate(9.5deg) scale(1.41)}66.0%{transform:translate(644.0px,138.0px) rotate(0.0deg) scale(1.55)}69%{transform:translate(644px,132px) rotate(0deg) scale(1.55,1.61)}72%,88%{transform:translate(644px,138px) rotate(0deg) scale(1.55);opacity:1}96%,100%{transform:translate(674px,138px) rotate(0deg) scale(1.40);opacity:0}}
@keyframes mr-speed { 0%, 4% { opacity: 0; } 8%, 54% { opacity: 0.55; } 60%, 100% { opacity: 0; } }
@keyframes mr-squash { 0% { transform: none; } 2.5% { transform: scale(1.08, 0.72); } 6% { transform: scale(0.98, 1.05); } 9%, 100% { transform: none; } }
@keyframes mr-dust { 0%, 65% { transform: scale(0.2); opacity: 0; } 67% { opacity: 0.6; } 75%, 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mr-on * { animation: none !important; } }

/* MishQuota (hospital duty / on-call quotas), source: MishQuotaLogo.jsx from the brand team,
   ported to plain HTML/CSS (markup kept in tools/mishquota-logo.html).
   Slots fill exactly to the standard, the bracket lights up, then the lock closes. */
.mq-logo {
  --mc-accent: #B8860B; --mc-accent-text: #7A5900; --mc-navy: #0E1A3A; --mc-size: 72px;
  display: inline-flex; align-items: center; gap: calc(var(--mc-size) * 0.22);
  direction: rtl; font-family: 'Rubik', 'Heebo', sans-serif; color: var(--mc-navy);
}
.mq-logo svg { width: var(--mc-size); height: var(--mc-size); flex: none; }
.mq-logo .mc-text { display: flex; flex-direction: column; gap: 2px; }
.mq-logo .mc-name {
  direction: ltr; text-align: right; font-weight: 800; line-height: 1;
  font-size: calc(var(--mc-size) * 0.56); letter-spacing: -0.02em;
}
.mq-logo .mc-name span { color: var(--mc-accent); }
.mq-logo .mc-tag { font-weight: 500; font-size: calc(var(--mc-size) * 0.2); color: var(--mc-accent-text); }
.mq-on .mq-k1 { transform-box: fill-box; transform-origin: 50% 100%; animation: mq-k1 4.4s ease-out infinite; }
.mq-on .mq-k2 { transform-box: fill-box; transform-origin: 50% 100%; animation: mq-k2 4.4s ease-out infinite; }
.mq-on .mq-k3 { transform-box: fill-box; transform-origin: 50% 100%; animation: mq-k3 4.4s ease-out infinite; }
.mq-on .mq-k4 { transform-box: fill-box; transform-origin: 50% 100%; animation: mq-k4 4.4s ease-out infinite; }
.mq-on .mq-sh { animation: mq-sh 4.4s ease-in-out infinite; }
.mq-on .mq-on1 { animation: mq-on1 4.4s ease-in-out infinite; }
.mq-on .mq-lock { transform-box: fill-box; transform-origin: 50% 60%; animation: mq-lock 4.4s ease-in-out infinite; }
.mq-on .mq-brk { animation: mq-brk 4.4s ease-in-out infinite; }
@keyframes mq-k1 { 0% { transform: translateY(-22px); opacity: 0; } 8% { transform: translateY(2px) scaleY(0.92); opacity: 1; } 11%, 86% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes mq-k2 { 0%, 10% { transform: translateY(-22px); opacity: 0; } 18% { transform: translateY(2px) scaleY(0.92); opacity: 1; } 21%, 86% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes mq-k3 { 0%, 20% { transform: translateY(-22px); opacity: 0; } 28% { transform: translateY(2px) scaleY(0.92); opacity: 1; } 31%, 86% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes mq-k4 { 0%, 30% { transform: translateY(-22px); opacity: 0; } 38% { transform: translateY(2px) scaleY(0.92); opacity: 1; } 41%, 86% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes mq-sh { 0%, 42% { transform: translateY(-6px); } 46% { transform: translateY(1.5px); } 49%, 86% { transform: translateY(0); } 96%, 100% { transform: translateY(-6px); } }
@keyframes mq-on1 { 0%, 42% { opacity: 0; } 46%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mq-lock { 0%, 48% { transform: rotate(0deg); } 51% { transform: rotate(-9deg); } 54% { transform: rotate(7deg); } 57% { transform: rotate(-3deg); } 60%, 100% { transform: rotate(0deg); } }
@keyframes mq-brk { 0%, 40% { opacity: 0; } 44% { opacity: 1; } 50% { opacity: 0.4; } 56%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mq-on * { animation: none !important; } }
html[dir="ltr"] .mq-logo { direction: ltr; }
html[dir="ltr"] .mq-logo .mc-name { text-align: left; }

/* MishPay (attendance approval for payroll), source: mishpay-logo.svg from the brand team
   (markup kept in tools/mishpay-logo.html). Like MishRide it is ONE svg with the wordmark inside;
   the embedded data: fonts were dropped (the CSP allows fonts only from fonts.gstatic.com) and the
   pages' Rubik 500/800 is used instead. viewBox cropped to the artwork (0 0 707.5 200, tile = the
   right-hand 200x200), sized by height. The descriptor has a Hebrew and an English <text>.
   A timesheet slides in, its lines fill, the last line overshoots and settles, then a check pops. */
.my-logo { --mc-size: 72px; display: inline-flex; flex: none; height: var(--mc-size); width: calc(var(--mc-size) * 3.5375); }
.my-logo svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'Rubik', 'Heebo', sans-serif; }
.my-logo .my-tag-en { display: none; }
html[dir="ltr"] .my-logo .my-tag-he { display: none; }
html[dir="ltr"] .my-logo .my-tag-en { display: inline; }
.my-on .my-sheet { animation: my-sheet 4.6s cubic-bezier(.4,0,.2,1) infinite; }
.my-on .my-l1 { animation: my-l1 4.6s ease-out infinite; }
.my-on .my-l2 { animation: my-l2 4.6s ease-out infinite; }
.my-on .my-l3 { transform-box: fill-box; transform-origin: 0% 50%; animation: my-l3 4.6s ease-in-out infinite; }
.my-on .my-ok { transform-box: fill-box; transform-origin: 50% 50%; animation: my-ok 4.6s ease-out infinite; }
@keyframes my-sheet { 0% { transform: translateX(-80px); opacity: 0; } 10% { transform: translateX(3px); opacity: 1; } 13%, 80% { transform: translateX(0); opacity: 1; } 92%, 100% { transform: translateX(80px); opacity: 0; } }
@keyframes my-l1 { 0%, 14% { stroke-dashoffset: 100; opacity: 0; } 15% { opacity: 1; } 24%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes my-l2 { 0%, 24% { stroke-dashoffset: 100; opacity: 0; } 25% { opacity: 1; } 34%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes my-l3 { 0%, 34% { transform: scaleX(0); opacity: 0; } 35% { opacity: 1; } 44% { transform: scaleX(1.32); opacity: 1; } 47% { opacity: 0.35; } 50% { opacity: 1; } 53% { transform: scaleX(1.32); opacity: 0.35; } 58% { transform: scaleX(0.94); opacity: 1; } 61%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes my-ok { 0%, 61% { transform: scale(0); } 67% { transform: scale(1.22); } 71%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .my-on * { animation: none !important; } }

/* MishMadad logo (tools/mishmadad-logo.html): wordmark + heat-map tile in one svg, viewBox -93.3..768.9, tile at x 568.9-768.9 */
.md-logo { --mc-size: 72px; display: inline-flex; flex: none; height: var(--mc-size); width: calc(var(--mc-size) * 4.311); }
.md-logo svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'Rubik', 'Heebo', sans-serif; }
.md-logo .md-tag-en { display: none; }
html[dir="ltr"] .md-logo .md-tag-he { display: none; }
html[dir="ltr"] .md-logo .md-tag-en { display: inline; }
.md-on .md-hot { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: md-hot 4.6s ease-in-out infinite; }
.md-on .md-r0 { animation: md-r0 4.6s ease-out infinite; }
.md-on .md-r1 { animation: md-r1 4.6s ease-out infinite; }
.md-on .md-r2 { animation: md-r2 4.6s ease-out infinite; }
.md-on .md-dot { animation: md-dot 4.6s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes md-r0 { 0% { opacity: 0; } 8%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes md-r1 { 0%, 5% { opacity: 0; } 13%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes md-r2 { 0%, 10% { opacity: 0; } 18%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes md-hot { 0%, 22% { opacity: 0; transform: scale(1); } 27% { opacity: 1; transform: scale(1.12); } 31% { transform: scale(1); } 35% { transform: scale(1.08); } 39% { transform: scale(1); } 43% { transform: scale(1.08); } 47%, 52% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1); } }
@keyframes md-dot { 0%, 10% { transform: translate(44px, 0); opacity: 0; } 16%, 40% { transform: translate(44px, 0); opacity: 1; } 46% { transform: translate(22px, -18px); } 52% { transform: translate(0, 2px); } 55%, 86% { transform: translate(0, 0); opacity: 1; } 96%, 100% { transform: translate(0, 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .md-on * { animation: none !important; } .md-on .md-hot { opacity: 1; } }

/* MishNurse logo (mishnurse-logo.svg): wordmark + checklist tile in one svg, tile at x 626.2-826.2 */
.mn-logo { --mc-size: 72px; display: inline-flex; flex: none; height: var(--mc-size); width: calc(var(--mc-size) * 4.131); }
.mn-logo svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'Rubik', 'Heebo', sans-serif; }
.mn-logo .mn-tag-en { display: none; }
html[dir="ltr"] .mn-logo .mn-tag-he { display: none; }
html[dir="ltr"] .mn-logo .mn-tag-en { display: inline; }
.mn-on .mn-slot { opacity: 0; animation: mn-slot 4.6s linear infinite; }
.mn-on .mn-pg { transform-box: view-box; transform-origin: 60px 58px; animation: mn-pg 4.6s ease-out infinite; }
.mn-on .mn-hd { animation: mn-hd 4.6s ease-out infinite; }
.mn-on .mn-r1 { animation: mn-r1 4.6s ease-out infinite; }
.mn-on .mn-r3 { animation: mn-r3 4.6s ease-out infinite; }
.mn-on .mn-cf { animation: mn-cf 4.6s cubic-bezier(.3,0,.2,1) infinite; }
.mn-on .mn-k1 { animation: mn-k1 4.6s ease-out infinite; }
.mn-on .mn-k2 { animation: mn-k2 4.6s ease-out infinite; }
.mn-on .mn-k3 { animation: mn-k3 4.6s ease-out infinite; }
.mn-on .mn-bd { transform-box: fill-box; transform-origin: 50% 50%; animation: mn-bd 4.6s ease-out infinite; }
@keyframes mn-pg { 0% { transform: scale(.85); opacity: 0; } 8% { transform: scale(1.03); opacity: 1; } 11%, 86% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(1); opacity: 0; } }
@keyframes mn-hd { 0%, 9% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes mn-r1 { 0%, 12% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes mn-r3 { 0%, 16% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes mn-slot { 0%, 22% { opacity: 0; } 25% { opacity: 1; } 29% { opacity: .3; } 33% { opacity: 1; } 37% { opacity: .3; } 41% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes mn-cf { 0%, 34% { transform: translateX(52px); opacity: 0; } 37% { opacity: 1; } 46% { transform: translateX(-2px); opacity: 1; } 49%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes mn-k1 { 0%, 52% { stroke-dashoffset: 100; } 57%, 100% { stroke-dashoffset: 0; } }
@keyframes mn-k2 { 0%, 57% { stroke-dashoffset: 100; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes mn-k3 { 0%, 62% { stroke-dashoffset: 100; } 67%, 100% { stroke-dashoffset: 0; } }
@keyframes mn-bd { 0%, 68% { transform: scale(0); } 74% { transform: scale(1.15); } 77%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .mn-on * { animation: none !important; } }

/* MishAlert logo (mishalert-logo.svg): wordmark + call-up tile in one svg, tile at x 579.2-779.2 */
.ma-logo { --mc-size: 72px; display: inline-flex; flex: none; height: var(--mc-size); width: calc(var(--mc-size) * 3.896); }
.ma-logo svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'Rubik', 'Heebo', sans-serif; }
.ma-logo .ma-tag-en { display: none; }
html[dir="ltr"] .ma-logo .ma-tag-he { display: none; }
html[dir="ltr"] .ma-logo .ma-tag-en { display: inline; }
.ma-on :is(.ma-pl, .ma-halo) { opacity: 0; }
.ma-on .ma-all { animation: ma-all 4.6s linear infinite; }
.ma-on :is(.ma-src, .ma-pa, .ma-pb, .ma-r3, .ma-f1, .ma-f2, .ma-f3, .ma-halo) { transform-box: fill-box; transform-origin: 50% 50%; }
.ma-on .ma-src { animation: ma-src 4.6s ease-out infinite; }
.ma-on .ma-pa { animation: ma-pa 4.6s ease-out infinite; }
.ma-on .ma-pb { animation: ma-pb 4.6s ease-out infinite; }
.ma-on .ma-ln { animation: ma-ln 4.6s ease-out infinite; }
.ma-on .ma-l3 { animation: ma-l3 4.6s ease-out infinite; }
.ma-on .ma-rg { animation: ma-rg 4.6s ease-out infinite; }
.ma-on .ma-r3 { animation: ma-r3 4.6s linear infinite; }
.ma-on .ma-f1 { animation: ma-f1 4.6s ease-out infinite; }
.ma-on .ma-f2 { animation: ma-f2 4.6s ease-out infinite; }
.ma-on .ma-f3 { animation: ma-f3 4.6s ease-out infinite; }
.ma-on .ma-halo { animation: ma-halo 4.6s ease-out infinite; }
.ma-on .ma-bar { transform-box: fill-box; transform-origin: 0% 50%; animation: ma-bar 4.6s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes ma-all { 0%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ma-src { 0% { transform: scale(0); } 5% { transform: scale(1.2); } 8%, 100% { transform: scale(1); } }
@keyframes ma-pa { 0%, 6% { transform: scale(1); opacity: 0; } 7% { opacity: .9; } 30%, 100% { transform: scale(3.4); opacity: 0; } }
@keyframes ma-pb { 0%, 14% { transform: scale(1); opacity: 0; } 15% { opacity: .9; } 38%, 100% { transform: scale(3.4); opacity: 0; } }
@keyframes ma-ln { 0%, 16% { stroke-dashoffset: 100; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes ma-l3 { 0%, 55% { stroke-dashoffset: 100; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes ma-rg { 0%, 20% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes ma-r3 { 0%, 20% { opacity: 0; transform: scale(1); } 28%, 44% { opacity: 1; } 47% { opacity: .25; } 50% { opacity: 1; } 53% { opacity: .25; } 56% { opacity: 1; transform: scale(1); } 61%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes ma-f1 { 0%, 33% { transform: scale(0); opacity: 0; } 34% { opacity: 1; } 37% { transform: scale(1.2); } 40%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ma-f2 { 0%, 39% { transform: scale(0); opacity: 0; } 40% { opacity: 1; } 43% { transform: scale(1.2); } 46%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ma-f3 { 0%, 61% { transform: scale(0); opacity: 0; } 62% { opacity: 1; } 65% { transform: scale(1.2); } 68%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ma-halo { 0%, 63% { transform: scale(1); opacity: 0; } 64% { opacity: .9; } 78%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ma-bar { 0%, 34% { transform: scaleX(0); } 38% { transform: scaleX(.333); } 44%, 62% { transform: scaleX(.667); } 68%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ma-on * { animation: none !important; } }

/* MishBreak logo (mishbreak-logo.svg): wordmark + break-seat tile in one svg, tile at x 623.9-823.9 */
.mb-logo { --mc-size: 72px; display: inline-flex; flex: none; height: var(--mc-size); width: calc(var(--mc-size) * 4.1195); }
.mb-logo svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: 'Rubik', 'Heebo', sans-serif; }
.mb-logo .mb-tag-en { display: none; }
html[dir="ltr"] .mb-logo .mb-tag-he { display: none; }
html[dir="ltr"] .mb-logo .mb-tag-en { display: inline; }
.mb-on :is(.mb-ac, .mb-p, .mb-w, .mb-t1, .mb-bz) { opacity: 0; }
.mb-on :is(.mb-pa, .mb-pc, .mb-pd, .mb-bz) { transform-box: fill-box; transform-origin: 50% 50%; }
.mb-on .mb-all { animation: mb-all 4.6s linear infinite; }
.mb-on .mb-in { animation: mb-in 4.6s ease-out infinite; }
.mb-on .mb-a { animation: mb-a 4.6s cubic-bezier(.45,0,.25,1) infinite; }
.mb-on .mb-ac { animation: mb-ac 4.6s ease-out infinite; }
.mb-on .mb-c { animation: mb-c 4.6s cubic-bezier(.45,0,.25,1) infinite; }
.mb-on .mb-cc { animation: mb-cc 4.6s ease-out infinite; }
.mb-on .mb-d { animation: mb-d 4.6s cubic-bezier(.45,0,.25,1) infinite; }
.mb-on .mb-dc { animation: mb-dc 4.6s ease-out infinite; }
.mb-on .mb-pa { animation: mb-pa 4.6s ease-out infinite; }
.mb-on .mb-pc { animation: mb-pc 4.6s ease-out infinite; }
.mb-on .mb-pd { animation: mb-pd 4.6s ease-out infinite; }
.mb-on .mb-w { animation: mb-w 4.6s linear infinite; }
.mb-on .mb-t1 { animation: mb-t1 4.6s linear infinite; }
.mb-on .mb-t2 { animation: mb-t2 4.6s linear infinite; }
.mb-on .mb-t3 { animation: mb-t3 4.6s linear infinite; }
.mb-on .mb-bz { animation: mb-bz 4.6s ease-out infinite; }
@keyframes mb-all { 0%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mb-in { 0% { opacity: 0; } 8%, 100% { opacity: 1; } }
@keyframes mb-a { 0%, 4% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 16% { transform: translate(0, 0); } 26%, 56% { transform: translate(17px, -52px); } 64%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes mb-ac { 0%, 18% { opacity: 0; } 24%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes mb-c { 0%, 4% { transform: translate(-5px, 52px); opacity: 0; } 8% { opacity: 1; } 26% { transform: translate(-5px, 52px); } 36%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes mb-cc { 0%, 28% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes mb-d { 0%, 4% { transform: translate(49px, 52px); opacity: 0; } 8% { opacity: 1; } 64% { transform: translate(49px, 52px); } 72%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes mb-dc { 0%, 66% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes mb-pa { 0%, 9% { transform: scale(1); opacity: 0; } 10% { opacity: .9; } 18%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes mb-pc { 0%, 19% { transform: scale(1); opacity: 0; } 20% { opacity: .9; } 28%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes mb-pd { 0%, 35% { transform: scale(1); opacity: 0; } 36% { opacity: .9; } 44%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes mb-w { 0%, 42% { opacity: 0; } 44% { opacity: 1; } 48% { opacity: .2; } 52% { opacity: 1; } 56% { opacity: .2; } 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes mb-t1 { 0%, 26% { opacity: 0; stroke-dashoffset: 0; } 27% { opacity: 1; } 54% { stroke-dashoffset: 92; opacity: 1; } 57%, 100% { opacity: 0; stroke-dashoffset: 92; } }
@keyframes mb-t2 { 0%, 70% { opacity: 0; stroke-dashoffset: 0; } 72% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 1; stroke-dashoffset: 22; } }
@keyframes mb-t3 { 0%, 34% { opacity: 0; stroke-dashoffset: 0; } 36% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 1; stroke-dashoffset: 62; } }
@keyframes mb-bz { 0%, 54% { transform: scale(1); opacity: 0; } 55% { opacity: .9; } 66%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mb-on * { animation: none !important; } }



/* Placements (all solution logos) */
.product-name :is(.mc-logo, .mk-logo, .mv-logo, .mf-logo, .mp-logo, .ml-logo, .mr-logo, .mq-logo, .my-logo, .md-logo, .mn-logo, .ma-logo, .mb-logo) { --mc-size: 42px; }
.product-name :is(.mc-logo, .mk-logo, .mv-logo, .mf-logo, .mp-logo, .ml-logo, .mr-logo, .mq-logo, .my-logo, .md-logo, .mn-logo, .ma-logo, .mb-logo) .mc-tag { font-size: 11px; }
/* tablets: the header keeps just the logo mark (the full lockup is too wide next to the menu button) */
@media (max-width: 900px) {
  .product-name :is(.mc-logo, .mk-logo, .mv-logo, .mf-logo, .mp-logo, .ml-logo, .mr-logo, .mq-logo, .my-logo, .md-logo, .mn-logo, .ma-logo, .mb-logo) .mc-text { display: none; }
  .product-name .mr-logo { width: var(--mc-size); overflow: hidden; justify-content: flex-end; direction: ltr; }
  .product-name .mr-logo svg { flex: none; width: calc(var(--mc-size) * 3.72); }
  .product-name .my-logo { width: var(--mc-size); overflow: hidden; justify-content: flex-end; direction: ltr; }
  .product-name .my-logo svg { flex: none; width: calc(var(--mc-size) * 3.5375); }
  .product-name .md-logo { width: var(--mc-size); overflow: hidden; justify-content: flex-end; direction: ltr; }
  .product-name .md-logo svg { flex: none; width: calc(var(--mc-size) * 4.311); }
  .product-name .mn-logo { width: var(--mc-size); overflow: hidden; justify-content: flex-end; direction: ltr; }
  .product-name .mn-logo svg { flex: none; width: calc(var(--mc-size) * 4.131); }
  .product-name .ma-logo { width: var(--mc-size); overflow: hidden; justify-content: flex-end; direction: ltr; }
  .product-name .ma-logo svg { flex: none; width: calc(var(--mc-size) * 3.896); }
  .product-name .mb-logo { width: var(--mc-size); overflow: hidden; justify-content: flex-end; direction: ltr; }
  .product-name .mb-logo svg { flex: none; width: calc(var(--mc-size) * 4.1195); }
}
.sol-card .sol-logo { margin: 0; }
.sol-card .sol-logo :is(.mc-logo, .mk-logo, .mv-logo, .mf-logo, .mp-logo, .ml-logo, .mr-logo, .mq-logo, .my-logo, .md-logo, .mn-logo, .ma-logo, .mb-logo) { --mc-size: 58px; }
.sol-card .sol-logo :is(.mc-logo, .mk-logo, .mv-logo, .mf-logo, .mp-logo, .ml-logo, .mr-logo, .mq-logo, .my-logo, .md-logo, .mn-logo, .ma-logo, .mb-logo) .mc-tag { font-size: 13px; }
.sol-card .feature-icon[hidden] { display: none; }

/* ---- Language switch (EN | עברית) ---- */
.language-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
}
.language-switch button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #65708C;
  padding: 6px 10px;
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.language-switch button:hover { color: var(--c-navy); }
.language-switch button.active { background: var(--c-navy); color: #fff; }
/* Pages without a header (demo.html) get a floating switch */
.language-switch.floating {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 1001;
  box-shadow: var(--sh-md);
}

/* ---- WhatsApp FAB ---- */
.whatsapp-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 35px rgba(10,26,58,.28);
  z-index: 999;
  transition: transform var(--tr), box-shadow var(--tr);
}
.whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 38px rgba(37,211,102,.45);
}
.whatsapp-btn svg { width: 28px; height: 28px; }

/* ---- "All solutions" button (solution pages only, injected by main.js) ----
   Pinned in the very top-right corner (physical right in both languages), inside the header strip. The header content is pushed
   in just enough to clear it (--sfab-w is set from the button's real width by main.js). */
.solutions-fab {
  position: fixed;
  right: 12px;
  top: calc((var(--header-h) - 42px) / 2);
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: 0 1rem 0 .85rem;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(10,26,58,.22);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.solutions-fab:hover { background: var(--c-blue); transform: translateY(-2px); box-shadow: 0 14px 38px color-mix(in srgb, var(--c-accent) 38%, transparent); }
.solutions-fab .ph { width: 22px; height: 22px; color: var(--c-on-dark); }
.solutions-fab:hover .ph { color: #fff; }
html.has-sfab .header-inner {
  padding-right: max(1.5rem, calc(var(--sfab-w, 150px) + 24px - max(0px, (100vw - var(--container)) / 2)));
}
/* tablets: icon only, so the header keeps its room */
@media (max-width: 900px) {
  .solutions-fab { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; top: calc((var(--header-h) - 40px) / 2); }
  .solutions-fab span { display: none; }
}

/* ---- Accessibility widget ---- */
.a11y-widget { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 999; }
.a11y-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 35px rgba(10,26,58,.28);
  transition: transform var(--tr), box-shadow var(--tr);
}
.a11y-btn:hover { transform: scale(1.08); }
.a11y-btn svg { width: 28px; height: 28px; color: #fff; }
.a11y-close .ph { width: 20px; height: 20px; display: block; }
.a11y-panel {
  position: absolute;
  bottom: 66px;
  left: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(10,26,58,.25);
  padding: 1.25rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}
.a11y-panel-header h2 { font-size: 1.3rem; font-weight: 900; }
.a11y-close {
  font-size: 1.2rem;
  color: var(--c-muted);
  line-height: 1;
  transition: color var(--tr);
}
.a11y-close:hover { color: var(--c-navy); }
.a11y-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-bottom: .8rem;
}
.a11y-actions button {
  min-height: 44px;
  font-size: .85rem;
  font-weight: 700;
  padding: .55rem .5rem;
  border-radius: 11px;
  border: 1px solid #CFD6E7;
  background: #F7F8FD;
  color: var(--c-ink);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.a11y-actions button:hover { border-color: var(--c-blue); color: var(--c-blue); }
.a11y-actions button[aria-pressed="true"] {
  background: var(--c-navy);
  color: #fff;
  border-color: var(--c-navy);
}
.a11y-statement-link {
  display: block;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Accessibility statement modal */
.a11y-statement-modal[hidden] { display: none; }
.a11y-statement-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.a11y-statement-backdrop { position: absolute; inset: 0; background: rgba(13,27,61,.6); }
.a11y-statement-box {
  position: relative;
  background: var(--c-surface);
  border-radius: 24px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2.25rem;
  box-shadow: 0 24px 70px rgba(10,26,58,.25);
}
.a11y-statement-box h2 { font-size: 1.6rem; font-weight: 900; margin-bottom: 1rem; }
.a11y-statement-box h3 { font-size: 1.1rem; font-weight: 800; margin: 1.25rem 0 .5rem; }
.a11y-statement-box p { margin-bottom: .8rem; line-height: 1.8; color: var(--c-muted); }
.a11y-statement-box ul { margin-bottom: .8rem; }
.a11y-statement-box li { line-height: 1.8; color: var(--c-muted); padding-inline-start: 1rem; position: relative; }
.a11y-statement-box li::before { content: '✦'; color: var(--c-blue); font-size: .7rem; position: absolute; inset-inline-start: 0; top: .2rem; }
.a11y-statement-box .a11y-close { position: absolute; top: 1.1rem; left: 1.1rem; font-size: 1.3rem; }

/* Applied accessibility states */
html.a11y-contrast { --a11y-contrast: contrast(1.35); }
html.a11y-grayscale { --a11y-grayscale: grayscale(1); }
body { filter: var(--a11y-contrast) var(--a11y-grayscale); }
html.a11y-underline-links a { text-decoration: underline !important; }
html.a11y-readable-font body,
html.a11y-readable-font input,
html.a11y-readable-font button { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-stop-animations *,
html.a11y-stop-animations *::before,
html.a11y-stop-animations *::after {
  animation: none !important;
  transition: none !important;
}

/* ---- English (LTR) ----
   Flex/grid mirror automatically from `dir`; these cover the rules
   above that hard-code right-to-left. */
html[dir="ltr"] body { direction: ltr; text-align: left; }
html[dir="ltr"] .step-card { text-align: left; }
html[dir="ltr"] .hero::after { left: auto; right: -280px; }
html[dir="ltr"] .contact-section::before { inset: auto -10% -65% 45%; }
html[dir="ltr"] .a11y-statement-box .a11y-close { left: auto; right: 1.1rem; }
/* English lines run longer than Hebrew, keep the hero headline to ~3 lines */
html[dir="ltr"] .hero h1 { font-size: clamp(2.3rem, 4.3vw, 3.7rem); line-height: 1.06; }
html[dir="ltr"] .hero h1,
html[dir="ltr"] .section-header h2,
html[dir="ltr"] .contact-info h2 { letter-spacing: -.03em; }

/* ---- Animations ---- */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.animate.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .animate { opacity: 1; transform: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid      { grid-template-columns: 1fr; max-width: 600px; }
  .hero-inner    { gap: 3rem; }
}

/* Menu button from 1240px: up to five nav links + product name + language switch + CTA */
@media (max-width: 1240px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* The header's backdrop-filter makes it the containing block for this fixed menu,
     so `bottom: 0` would end at the header's own bottom (a 49px strip). Give it an
     explicit viewport height instead; `top` still lines up because the header sits at 0. */
  .main-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    inset-inline: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: #fff;
    padding: 1.5rem;
    gap: .5rem;
    align-items: stretch;
    z-index: 998;
    border-top: 1px solid var(--c-border);
    overflow-y: auto;
  }
  .main-nav.open { justify-content: flex-start; gap: 0; }
  .main-nav.open a { font-size: 1.1rem; color: var(--c-navy); padding: 1rem .5rem; border-bottom: 1px solid var(--c-border); border-radius: 0; }
  .main-nav.open a::after { display: none; }
  /* CTA copied into the menu by main.js (the header one is hidden on phones) */
  .main-nav.open .nav-cta { display: flex; margin-top: 1.5rem; border: 0; border-radius: var(--r-md); color: #fff; justify-content: center; }
  /* nav no longer takes the middle, keep lockup at the start, actions at the end */
  .header-actions { margin-inline-start: auto; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3.5rem; padding-block: 3.5rem; }
  .hero h1 { letter-spacing: -.035em; }
  .hero-subtitle { max-width: 100%; }
  .hero::after { display: none; }

  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  :root { --header-h: 68px; }

  .logo img { height: 40px; }
  .hero-visual { order: -1; }
  .hero-visual::before { inset: -20px; }
  .dashboard-mockup { animation: none; }

  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }

  .features-grid { grid-template-columns: 1fr; }


  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .9rem; text-align: center; }
  .legal-links { justify-content: center; }

  section { padding-block: 4.75rem; }
}

@media (max-width: 560px) {
  .container, .header-inner { padding-inline: 1rem; }
  /* room for logo + language switch + menu; the hero already has the CTA */
  .product-name { display: none; }
  .header-actions .btn { display: none; }
  .language-switch button { padding: 6px 8px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-subtitle { font-size: 1.1rem; }
  .whatsapp-btn { right: .75rem; bottom: .75rem; }
  .a11y-widget { left: .75rem; bottom: .75rem; }
  /* cookie banner becomes a bottom sheet; floating buttons sit above it while it's open */
  .cookie-banner { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
  html.cookie-banner-open .whatsapp-btn,
  html.cookie-banner-open .a11y-widget { bottom: calc(var(--cookie-h, 200px) + 1.5rem); }
  /* phones: icon-only circle in the same corner (the label is still read by screen readers via aria-label) */
  .solutions-fab { right: 8px; top: calc((var(--header-h) - 38px) / 2); width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; }
  html.has-sfab .header-inner { padding-right: calc(38px + 16px); gap: .6rem; }
  html.has-sfab .logo img { height: 34px; }
  .solutions-fab span { display: none; }
  .cookie-modal-foot { grid-template-columns: 1fr; }
  .cookie-modal-foot .primary { order: -1; }
}