/* ==========================================================================
   Segment — site styles (light, clean B2B theme)
   ========================================================================== */

@font-face{ font-family: 'Ploni'; src: url('../fonts/ploni-regular-aaa.woff2') format('woff2'), url('../fonts/ploni-regular-aaa.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face{ font-family: 'Ploni'; src: url('../fonts/ploni-medium-aaa.woff2') format('woff2'), url('../fonts/ploni-medium-aaa.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face{ font-family: 'Ploni'; src: url('../fonts/ploni-demibold-aaa.woff2') format('woff2'), url('../fonts/ploni-demibold-aaa.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
/* ploni-demibold's kerning pulls . , … about 0.25em into the preceding Latin letter or digit ("segment.co.il" reads "segmert.co.il"); take those three glyphs from the medium file so no kerning pair spans them. */
@font-face{ font-family: 'Ploni'; src: url('../fonts/ploni-medium-aaa.woff2') format('woff2'), url('../fonts/ploni-medium-aaa.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+002C, U+002E, U+2026; }
@font-face{ font-family: 'Ploni'; src: url('../fonts/ploni-bold-aaa.woff2') format('woff2'), url('../fonts/ploni-bold-aaa.ttf') format('truetype'); font-weight: 700 900; font-style: normal; font-display: swap; }

:root{
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f6f8fc;
  --bg-3: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --line: #e4e9f2;
  --line-strong: #cfd7e6;

  --text: #0b1733;
  --body: #46516b;
  --muted: #636e87;

  --logo: #1149aa;
  --brand: #1552d1;
  --brand-dark: #0f3f9f;
  --brand-deep: #0b2f7a;
  --brand-soft: #eef3ff;
  --brand-soft-2: #d9e5ff;
  --teal: #0b6a80;
  --teal-soft: #e6f5f9;
  --grad: linear-gradient(120deg, #1149aa 0%, #1f6bff 100%);
  --grad-band: linear-gradient(125deg, #0b2f7a 0%, #1149aa 55%, #1b5fd6 100%);

  --ok: #117a4d;
  --ok-bg: #e7f6ee;
  --ok-line: #bfe4d0;

  --shadow-sm: 0 1px 2px rgba(11, 23, 51, .05), 0 1px 3px rgba(11, 23, 51, .04);
  --shadow: 0 12px 32px -14px rgba(11, 23, 51, .18), 0 2px 6px rgba(11, 23, 51, .04);
  --shadow-lg: 0 32px 64px -24px rgba(11, 23, 51, .24), 0 4px 14px rgba(11, 23, 51, .05);
  --shadow-brand: 0 1px 2px rgba(11, 47, 122, .2), 0 8px 20px -8px rgba(21, 82, 209, .55);
  --ring: 0 0 0 4px rgba(21, 82, 209, .16);

  --r-sm: 10px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;

  --font-display: 'Ploni', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Ploni', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --header-h: 76px;
  --container: 1240px;
  --gutter: 32px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 72px); background: var(--bg); }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Ploni's Hebrew kerning makes Chrome drop letters in some words ("המאחד" renders as "המאח"); its Hebrew pairs only move glyphs ~1–2%, so Hebrew text goes unkerned. */
:lang(he){ font-kerning: none; }
:lang(en){ font-kerning: auto; }
::selection{ background: var(--brand-soft-2); color: var(--text); }
svg{ flex: none; }
img{ max-width: 100%; display: block; }
a{ color: var(--brand); text-decoration: none; transition: color .2s; }
a:hover{ color: var(--brand-dark); }
p{ margin: 0; }
h1, h2, h3, h4{ margin: 0; font-family: var(--font-display); color: var(--text); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
h1{ font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); line-height: 1.08; letter-spacing: -.015em; }
h2{ font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.7rem); }
h3{ font-size: 1.3rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
button{ font-family: inherit; }
:where(a, button, summary, input, select, textarea):focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

.container{
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 700;
}
.skip-link:focus{ top: 12px; color: #fff; }

/* animatable angle for the rotating gradient borders */
@property --ang{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spinAng{ to{ --ang: 360deg; } }
@keyframes spin{ to{ transform: rotate(360deg); } }

.grad-text, .stat-num{
  background: linear-gradient(100deg, #1149aa 0%, #1f6bff 30%, #3b82f6 50%, #1f6bff 70%, #1149aa 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradShift 7s linear infinite;
}
@keyframes gradShift{ to{ background-position: -200% center; } }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 5px 12px;
  border: 1px solid var(--brand-soft-2); border-radius: 999px;
  background: var(--brand-soft);
  font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--brand-dark);
}
.eyebrow::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(21, 82, 209, .4); }
  70%{ box-shadow: 0 0 0 8px rgba(21, 82, 209, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(21, 82, 209, 0); }
}
.lede{ font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--body); }
.text-link{ font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--brand); }
.text-link:hover{ color: var(--brand-dark); }
.text-link .icon{ transition: transform .25s var(--ease); }
.text-link:hover .i-fwd{ transform: translateX(-4px); }
html[dir="ltr"] .i-fwd{ transform: scaleX(-1); }
html[dir="ltr"] .text-link:hover .i-fwd, html[dir="ltr"] .btn:hover .i-fwd, html[dir="ltr"] .area-card:hover .i-fwd{ transform: scaleX(-1) translateX(-4px); }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position: fixed; top: 0; inset-inline: 0; z-index: 60; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: right center;
  pointer-events: none;
}
html[dir="ltr"] .scroll-progress{ transform-origin: left center; }

/* ---------- buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r); border: 1px solid transparent;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center;
  cursor: pointer; white-space: nowrap; color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn .icon{ transition: transform .25s var(--ease); }
.btn:hover .i-fwd{ transform: translateX(-4px); }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, #1149aa 0%, #1552d1 40%, #1f6bff 70%, #1552d1 100%); background-size: 220% auto;
  color: #fff; box-shadow: var(--shadow-brand);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-position .5s var(--ease);
}
.btn-primary::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .35) 50%, transparent 75%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover{ color: #fff; transform: translateY(-2px); background-position: 100% center; box-shadow: 0 1px 2px rgba(11, 47, 122, .2), 0 14px 28px -10px rgba(21, 82, 209, .6); }
.btn-primary:hover::after{ transform: translateX(120%); }
.btn-secondary{ background: #fff; border-color: var(--line-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-secondary:hover{ border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.btn-light{ background: #fff; color: var(--brand-deep); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); }
.btn-light:hover{ background: var(--brand-soft); color: var(--brand-deep); transform: translateY(-1px); }
.btn-ghost{ background: none; color: var(--brand); padding-inline: 10px; }
.btn-ghost:hover{ color: var(--brand-dark); }
.btn-lg{ min-height: 56px; padding: 0 30px; font-size: 17px; }
.btn-sm{ min-height: 42px; padding: 0 18px; font-size: 15px; }
/* full width only on phones; on wider screens a normal-width button */
.btn-block{ min-width: 220px; align-self: flex-start; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled{ background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner{ height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.header-start{ display: flex; align-items: center; gap: 36px; }
.logo{ display: flex; color: var(--logo); }
.logo:hover{ color: var(--logo); }
.logo-svg{ width: 104px; height: 34px; }
.nav-primary{ display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 600; }
.nav-primary a{ position: relative; padding: 8px 14px; border-radius: var(--r-sm); color: var(--body); transition: color .2s, background-color .2s; }
.nav-primary a::after{ content: ""; position: absolute; inset-inline: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav-primary a:hover::after{ transform: scaleX(1); }
.nav-primary a[aria-current="page"]::after{ display: none; }
.nav-primary a:hover{ color: var(--text); background: var(--surface-2); }
.nav-primary a[aria-current="page"]{ color: var(--brand); background: var(--brand-soft); }
.header-actions{ display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 600; }
/* "Support": outlined pill next to the primary "Log in" button, same height */
.header-link{
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: var(--r); border: 1px solid var(--line-strong); color: var(--text);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.header-link:hover{ border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.lang-switch{
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 700; color: var(--body);
}
.lang-switch:hover{ border-color: var(--brand); color: var(--brand); }
.nav-toggle{
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; color: var(--text); cursor: pointer;
}
.nav-toggle .i-close{ display: none; }
.nav-toggle[aria-expanded="true"] .i-menu{ display: none; }
.nav-toggle[aria-expanded="true"] .i-close{ display: block; }

.mobile-nav{
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  display: none; flex-direction: column;
  padding: 8px var(--gutter) 32px; overflow-y: auto;
  background: #fff; border-top: 1px solid var(--line);
}
.mobile-nav.is-open{ display: flex; animation: menuIn .3s var(--ease); }
@keyframes menuIn{ from{ opacity: 0; transform: translateY(-8px); } }
.mobile-nav .m-link{
  display: flex; align-items: center; min-height: 58px;
  border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--text);
}
.mobile-nav .m-link[aria-current="page"]{ color: var(--brand); }
.mobile-nav .btn-row{ margin-top: 24px; flex-direction: column; }
.mobile-nav .btn{ width: 100%; }
body.nav-open{ overflow: hidden; }

/* ---------- layout ---------- */
main{ padding-bottom: 112px; }
.section{ padding-top: 112px; }
/* the first section right after a page heading needs far less air */
.page-hero + .section, .dark-hero + .section{ padding-top: 52px; }
.section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.section-title{ margin-bottom: 40px; }
.section-intro{ margin-top: 14px; font-size: 18px; color: var(--body); max-width: 820px; }

/* ---------- hero backgrounds: soft blue wash + faint grid ---------- */
.hero, .page-hero, .dark-hero{ position: relative; overflow: hidden; isolation: isolate; }
.hero-bg, .page-hero::before, .dark-hero::before{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg::before, .page-hero::before, .dark-hero::before{
  content: "";
  background-image:
    linear-gradient(rgba(11, 23, 51, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 23, 51, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 65%);
}
.hero-bg::before, .page-hero::before, .dark-hero::before{ animation: gridDrift 40s linear infinite; }
@keyframes gridDrift{ to{ background-position: 56px 56px; } }
.hero-bg::before{ position: absolute; inset: 0; }
.hero-bg{
  background: linear-gradient(180deg, var(--bg-2) 0%, #fff 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
/* glow that follows the pointer (--hx/--hy set by main.js) */
.hero-bg::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--hx, 75%) var(--hy, 25%), rgba(31, 107, 255, .13), transparent 60%);
  transition: background-position .2s;
}
/* orbs drift on their own (transform) and follow the pointer a little (translate, --px/--py from main.js) */
.blob{ position: absolute; border-radius: 50%; filter: blur(80px); opacity: .75; translate: var(--px, 0) var(--py, 0); transition: translate .8s var(--ease); will-change: transform; }
.blob.b1{ width: 560px; height: 560px; top: -220px; inset-inline-end: -120px; background: #c3d7ff; animation: float1 18s ease-in-out infinite alternate; }
.blob.b2{ width: 420px; height: 420px; top: 160px; inset-inline-start: -180px; background: #dbe4ff; animation: float2 22s ease-in-out infinite alternate; }
.blob.b3{ width: 380px; height: 380px; bottom: -200px; inset-inline-end: 32%; background: #c9eef7; opacity: .6; animation: float3 20s ease-in-out infinite alternate; }
@keyframes float1{ to{ transform: translate(-120px, 110px) scale(1.12); } }
@keyframes float2{ to{ transform: translate(140px, -60px) scale(.92); } }
@keyframes float3{ to{ transform: translate(-90px, -100px) scale(1.18); } }
.page-hero, .dark-hero{ background: linear-gradient(180deg, var(--bg-2) 0%, #fff 100%); }
.page-hero::after, .dark-hero::after{
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 640px; height: 640px; top: -360px; inset-inline-end: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 107, 255, .18), rgba(56, 189, 248, .08) 45%, rgba(31, 107, 255, 0) 68%);
  animation: float1 18s ease-in-out infinite alternate;
}

/* ---------- home hero ---------- */
.hero{ padding: 88px 0 100px; }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.hero-copy .lede{ margin-top: 24px; max-width: 580px; }
.hero-copy .btn-row{ margin-top: 36px; }

.process-panel{
  position: relative; padding: 24px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg), 0 0 80px -20px rgba(31, 107, 255, .25);
  transform-style: preserve-3d; transition: transform .2s ease-out;
  animation: floatY 6s ease-in-out infinite alternate;
}
/* float uses `translate`, so the pointer tilt (inline `transform`) still works */
@keyframes floatY{ from{ translate: 0 0; } to{ translate: 0 -10px; } }
/* a beam of light circling the border */
.process-panel::before{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(31, 107, 255, .9) 78%, #38bdf8 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAng 5s linear infinite;
}
.process-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.process-sub{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--ok); }
.process-sub::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1fae6b; animation: pulseOk 2s ease-out infinite; }
@keyframes pulseOk{ 0%{ box-shadow: 0 0 0 0 rgba(31, 174, 107, .45); } 70%{ box-shadow: 0 0 0 8px rgba(31, 174, 107, 0); } 100%{ box-shadow: none; } }
.process-list{ position: relative; z-index: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* "data flowing" line behind the rows' icons, visible in the gaps between rows */
.process-list::before{
  content: ""; position: absolute; z-index: -1; top: 20px; bottom: 20px; inset-inline-start: 33px; width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, #1f6bff 50%, transparent) 0 0 / 100% 40% repeat-y, var(--line-strong);
  animation: flow 2.4s linear infinite;
}
@keyframes flow{ to{ background-position: 0 250%, 0 0; } }
.process-row{
  --i: 0;
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid transparent;
  animation: stepGlow 7.5s var(--ease) infinite; animation-delay: calc(var(--i) * 1.5s);
}
.process-row:nth-child(2){ --i: 1; }
.process-row:nth-child(3){ --i: 2; }
.process-row:nth-child(4){ --i: 3; }
.process-row:nth-child(5){ --i: 4; }
@keyframes stepGlow{
  0%, 22%, 100%{ background: var(--bg-2); border-color: transparent; }
  6%, 14%{ background: var(--brand-soft); border-color: var(--brand-soft-2); }
}
.process-icon{ width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; color: var(--brand); border: 1px solid var(--line); }
.process-name{ flex-grow: 1; font-size: 16px; font-weight: 600; }
.status-pill{ padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--body); font-size: 13px; font-weight: 700; white-space: nowrap; }
.process-row.is-highlight{ background: var(--brand); border-color: transparent; animation: none; box-shadow: var(--shadow-brand); }
.process-row.is-highlight .process-name{ font-weight: 700; color: #fff; }
.process-row.is-highlight .process-icon{ background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.process-row.is-highlight .status-pill{ background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }

/* AI accents in the hero panel: violet-to-blue, so AI steps read differently from the brand blue */
.ai-tag{
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff; white-space: nowrap;
  background: linear-gradient(110deg, #7c3aed 0%, #4f46e5 35%, #a78bfa 50%, #4f46e5 65%, #1f6bff 100%) 0 0 / 250% 100%;
  box-shadow: 0 4px 12px -4px rgba(124, 58, 237, .55);
  animation: aiShimmer 3.2s linear infinite;
}
@keyframes aiShimmer{ to{ background-position: -250% 0; } }

/* ---------- marquee ---------- */
.marquee-section{ padding-top: 48px; }
.marquee-label{ text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.marquee{
  direction: ltr; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{ display: flex; gap: 12px; width: max-content; animation: marquee 36s linear infinite; list-style: none; margin: 0; padding: 0; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track li{
  padding: 11px 22px; border-radius: var(--r); border: 1px solid var(--line);
  background: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--body); white-space: nowrap;
  transition: border-color .2s, color .2s, box-shadow .2s, transform .25s var(--ease);
}
.marquee-track li:hover{ border-color: var(--brand-soft-2); color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ---------- stats ---------- */
.stats-row{ border-block: 1px solid var(--line); background: var(--bg-2); }
.stats{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 48px; margin: 0; list-style: none; padding-inline: 0; }
.stats.is-framed{ border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding-block: 36px; box-shadow: var(--shadow-sm); }
.stat{ padding-inline: 12px; text-align: center; border-inline-end: 1px solid var(--line); }
.stat:last-child{ border-inline-end: none; }
.stat-num{ display: block; direction: ltr; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem); font-weight: 700; line-height: 1.15; }
.stat-label{ display: block; margin-top: 6px; font-size: 16px; color: var(--muted); }

/* ---------- cards (shared) ---------- */
:is(.area-card, .audience-card, .portal-card, .guide-tile, .intent-card, .option-card, .bordered-card, .tile, .link-tile, .person, .three-col > div, .community-card){
  --mx: -500px; --my: -500px;
  background:
    radial-gradient(360px circle at var(--mx) var(--my), rgba(21, 82, 209, .06), transparent 45%),
    #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
:is(.area-card, .audience-card, .portal-card, .guide-tile, .intent-card, .option-card, .bordered-card, .tile, .link-tile, .person, .three-col > div, .community-card):hover{ border-color: var(--brand-soft-2); transform: translateY(-4px); box-shadow: var(--shadow), 0 20px 40px -24px rgba(31, 107, 255, .35); }
/* animated gradient border that fades in on hover */
:is(.area-card, .audience-card, .portal-card, .guide-tile, .intent-card, .option-card, .bordered-card, .tile, .link-tile, .person, .three-col > div, .community-card){ position: relative; isolation: isolate; }
:is(.area-card, .audience-card, .portal-card, .guide-tile, .intent-card, .option-card, .bordered-card, .tile, .link-tile, .person, .three-col > div, .community-card)::after{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), #1552d1, #38bdf8, #a5b4fc, #1552d1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
:is(.area-card, .audience-card, .portal-card, .guide-tile, .intent-card, .option-card, .bordered-card, .tile, .link-tile, .person, .three-col > div, .community-card):hover::after{ opacity: 1; animation: spinAng 4s linear infinite; }
.community-card::after{ inset: 0; }

/* ---------- audience ---------- */
.audience-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.audience-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; border-radius: var(--r-xl); }
.audience-card h3{ font-size: 1.75rem; }
.audience-card p{ font-size: 18px; color: var(--body); }
.audience-card .btn-row{ margin-top: auto; padding-top: 8px; }
.card-kicker{ font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--brand); }

/* ---------- area cards ---------- */
.area-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.area-card{ display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: var(--r-lg); color: var(--text); }
.area-card:hover{ color: var(--text); }
.icon-box{
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--brand-soft); color: var(--brand);
  transition: background-color .25s, color .25s, transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.area-card:hover .icon-box, .audience-card:hover .icon-box{ background: var(--brand); color: #fff; transform: rotate(-8deg) scale(1.1); box-shadow: var(--shadow-brand); }
.area-kicker{ font-size: 14px; font-weight: 700; color: var(--brand); }
.area-title{ font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.area-text{ font-size: 16px; color: var(--body); }
.area-more{ margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }
.area-more .icon{ transition: transform .25s var(--ease); }
.area-card:hover .area-more .i-fwd{ transform: translateX(-4px); }

/* ---------- tools tabs ---------- */
.tools-panel{ position: relative; padding: 52px; border-radius: var(--r-xl); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.tabs{ position: relative; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.tab{
  min-height: 42px; padding: 0 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: #fff; color: var(--body);
  font-size: 16px; font-weight: 600; cursor: pointer; transition: all .2s var(--ease);
}
.tab:hover{ color: var(--brand); border-color: var(--brand); }
.tab[aria-selected="true"]{ background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; box-shadow: var(--shadow-brand); }
.tab-panel{ position: relative; margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.tab-panel:not([hidden]){ animation: panelIn .4s var(--ease); }
@keyframes panelIn{ from{ opacity: 0; transform: translateY(8px); } }
.tab-panel[hidden]{ display: none; }
.tab-panel h3{ font-size: 1.6rem; }
.tab-panel p{ margin-top: 14px; font-size: 18px; color: var(--body); }
.check-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.55; }
.check-list li{ display: flex; gap: 12px; align-items: flex-start; }
.check-list .icon{ color: var(--ok); margin-top: 3px; padding: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); }

/* ---------- steps ---------- */
.steps{ list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.step{ position: relative; padding: 28px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.step:hover{ transform: translateY(-4px); border-color: var(--brand-soft-2); box-shadow: var(--shadow); }
.step::before{ content: ""; position: absolute; top: -1px; inset-inline: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--line-strong); }
.step.is-current::before{ background: linear-gradient(90deg, #1552d1, #38bdf8, #1552d1); background-size: 200% 100%; animation: gradShift 3s linear infinite; }
.step-num{ font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1; color: var(--brand); }
.step-title{ margin-top: 14px; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.step p{ margin-top: 8px; font-size: 16px; color: var(--body); }
.steps + .btn-row{ margin-top: 40px; }

/* ---------- trust band ---------- */
.trust-band{ display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 40px 48px; border-radius: var(--r-xl); background: var(--bg-2); border: 1px solid var(--line); }
.trust-band-main{ display: flex; align-items: center; gap: 24px; }
.icon-box-lg{ width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); animation: ringPulse 2.8s ease-out infinite; }
@keyframes ringPulse{
  0%{ box-shadow: var(--shadow-brand), 0 0 0 0 rgba(21, 82, 209, .35); }
  70%{ box-shadow: var(--shadow-brand), 0 0 0 16px rgba(21, 82, 209, 0); }
  100%{ box-shadow: var(--shadow-brand), 0 0 0 0 rgba(21, 82, 209, 0); }
}
.trust-band h2{ font-size: 25px; font-weight: 600; }
.trust-band p{ margin-top: 6px; color: var(--body); }
.badges{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.badge{ padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 14px; font-weight: 700; color: var(--text); }

/* ---------- certification seals (our own marks) ---------- */
.cert-list{ list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cert{ display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s, transform .3s var(--ease); }
html[dir="rtl"] .cert{ padding: 10px 12px 10px 16px; }
.cert:hover{ border-color: var(--brand-soft-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.cert-text{ display: flex; flex-direction: column; line-height: 1.25; }
.cert-text strong{ font-size: 15px; color: var(--text); }
.cert-text small{ font-size: 13px; color: var(--muted); }
.cert-seal{ width: 48px; height: 48px; flex: none; direction: ltr; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.cs-ring{ fill: #fff; stroke: var(--brand); stroke-width: 2; }
.cs-inner{ fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1; stroke-dasharray: 2 2.4; }
.cert-seal text{ font-family: var(--font-display); font-weight: 700; text-anchor: middle; fill: var(--brand-deep); }
.cs-top{ font-size: 13px; letter-spacing: .06em; }
.cs-bot{ font-size: 11.5px; }
.cs-bot.is-big{ font-size: 19px; }
.cert-icon{ width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-soft-2); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
:is(.cert, .cert-card):hover :is(.cert-seal, .cert-icon){ transform: rotate(-10deg) scale(1.08); }
.cert-list.is-compact{ margin: 0; gap: 8px; }
.cert-list.is-compact .cert{ padding-block: 7px; box-shadow: none; }
.cert-list.is-compact .cert-seal, .cert-list.is-compact .cert-icon{ width: 40px; height: 40px; }
.trust-band-certs{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cert-card{ display: flex; align-items: flex-start; gap: 16px; }
.cert-card .cert-seal, .cert-card .cert-icon{ width: 54px; height: 54px; }

/* ---------- portfolio company card (RTMI) ---------- */
.partner-lead{ margin-top: 24px; font-size: 17px; color: var(--body); }
.partner-lead + .partner-card{ margin-top: 10px; }
.partner-card{ margin-top: 24px; display: inline-flex; max-width: 100%; align-items: center; gap: 20px; padding: 16px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); color: var(--text); transition: border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.partner-card:hover{ color: var(--text); border-color: #f5c77e; box-shadow: var(--shadow), 0 16px 32px -20px rgba(241, 157, 29, .55); transform: translateY(-3px); }
/* fixed-size logo box: never squeezed, and never stretched by the flex row (Safari keeps images at full width otherwise) */
.partner-logo{ flex: none; display: block; padding-inline-end: 20px; border-inline-end: 1px solid var(--line); }
.partner-logo img{ display: block; width: 122px; height: 28px; max-width: none; object-fit: contain; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.partner-card:hover .partner-logo img{ transform: scale(1.06); }
.partner-meta{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.partner-kicker{ font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #b86e00; }
.partner-link{ display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }

/* ---------- FAQ ---------- */
.faq-layout{ display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.faq-layout .text-link{ margin-top: 20px; }
.faq-list{ display: flex; flex-direction: column; gap: 12px; }
.faq-list details{ padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .25s, box-shadow .25s; }
.faq-list details:hover{ border-color: var(--line-strong); }
.faq-list details[open]{ border-color: var(--brand-soft-2); box-shadow: var(--shadow); }
.faq-list summary{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text);
}
.faq-list summary::-webkit-details-marker{ display: none; }
.faq-list summary .icon{ padding: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); color: var(--text); transition: transform .3s var(--ease), background-color .25s, color .25s; }
.faq-list details[open] summary .icon{ transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq-list details p{ margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--body); }
.faq-list details[open] p{ animation: panelIn .35s var(--ease); }

/* ---------- CTA band ---------- */
.cta-dark{
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  padding: 68px 72px; border-radius: var(--r-xl);
  background: var(--grad-band);
}
.cta-dark::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 60%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 60%);
}
html[dir="rtl"] .cta-dark::before{ -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 60%); mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 60%); }
.cta-dark::before{ animation: gridDrift 30s linear infinite; }
/* slow aurora behind the band's content */
.cta-dark::after{
  content: ""; position: absolute; inset: -60%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 35% 40%, rgba(56, 189, 248, .45), transparent 30%),
    radial-gradient(circle at 65% 60%, rgba(129, 140, 248, .45), transparent 32%);
  animation: spin 22s linear infinite;
}
.cta-dark h2{ color: #fff; max-width: 760px; }
.cta-dark p{ margin-top: 12px; font-size: 18px; color: #d7e3ff; }

/* ---------- footer ---------- */
.site-footer{ position: relative; padding: 68px 0 36px; background: var(--bg-2); border-top: 1px solid var(--line); }
.footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand .logo{ margin-bottom: 16px; }
.footer-brand address{ font-style: normal; font-size: 16px; color: var(--muted); }
.footer-title{ margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.footer-col a{ color: var(--body); }
.footer-col a:hover{ color: var(--brand); }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.footer-bottom a{ color: var(--muted); }
.footer-bottom a:hover{ color: var(--brand); }
.legal-links{ display: flex; gap: 24px; }

/* ---------- page hero ---------- */
.page-hero{ padding: 32px 0 40px; border-bottom: 1px solid var(--line); }
.page-hero .lede{ margin-top: 14px; max-width: 760px; }
.page-hero h1{ font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.5rem); }
.page-hero-split{ display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.page-hero-split .lede{ margin-top: 0; }
.page-hero-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.breadcrumb{ margin-bottom: 16px; font-size: 14px; color: var(--muted); }
.breadcrumb ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before{ content: "/"; margin-inline-end: 8px; opacity: .5; }
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--brand); }

/* ---------- platform page ---------- */
.area-subnav{ position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.area-subnav .container{ display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.area-subnav .container::-webkit-scrollbar{ display: none; }
.area-subnav a{
  display: flex; align-items: center; min-height: 38px; padding: 0 14px; white-space: nowrap; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--body); transition: all .2s var(--ease);
}
.area-subnav a:hover{ color: var(--text); background: var(--surface-2); }
.area-subnav a.is-active{ color: #fff; background: var(--brand); font-weight: 700; }

.with-aside{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.aside-sticky{ position: sticky; top: calc(var(--header-h) + 90px); margin-top: 64px; }
.aside-card{ display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.aside-card h2{ font-size: 22px; font-weight: 600; line-height: 1.3; }
.aside-card p{ font-size: 16px; color: var(--body); }
.aside-card .text-link{ justify-content: center; }

.area-section{ padding-block: 64px; border-bottom: 1px solid var(--line); }
.area-section:last-child{ border-bottom: none; }
.area-section-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.area-section-head .eyebrow{ margin: 0; }
.area-section h2{ font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); }
.area-section > p{ margin-top: 16px; font-size: 18px; color: var(--body); max-width: 760px; }
.area-section .sub{ margin-top: 40px; font-size: 1.3rem; }
.area-section .sub + p{ margin-top: 10px; font-size: 17px; color: var(--body); }
.area-section .text-link{ margin-top: 22px; }

.chip-groups{ margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.chip-group{ padding: 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.chip-group-title{ font-size: 14px; font-weight: 700; color: var(--brand); }
.chips{ margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip{ padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 15px; font-weight: 700; color: var(--text); transition: all .2s var(--ease); }
.chip:hover{ border-color: var(--brand-soft-2); background: var(--brand-soft); color: var(--brand-dark); }
/* "and more": plain text, so it sits on the last row instead of wrapping alone */
.chip.is-more, .chip.is-more:hover{ padding-inline: 4px; border-color: transparent; background: none; color: var(--muted); }
/* "bring your own": an open slot for the customer's own format */
.chip.is-own{ border: 1px dashed var(--brand); background: none; color: var(--brand); }

.option-grid, .guide-grid{ margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.option-card{ display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--r-md); }
.option-card.is-featured{ border: 1px solid var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.option-label{ font-size: 14px; font-weight: 700; color: var(--muted); }
.option-card.is-featured .option-label{ color: var(--brand); }
.option-card h4{ font-size: 21px; font-weight: 600; }
.option-card p{ font-size: 16px; color: var(--body); }
.option-facts{ list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--body); }
.option-facts b{ color: var(--text); }
.guide-card{ padding: 28px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); }
.guide-card h3, .guide-card h4{ font-size: 20px; font-weight: 600; }
.num-list{ margin: 14px 0 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: var(--body); }
.num-list b{ color: var(--text); }
.num-list li::marker{ color: var(--brand); font-weight: 700; }
.guide-card .text-link{ margin-top: 16px; font-size: 15px; }
.guide-card h3 + p, .guide-card h4 + p{ margin-top: 10px; font-size: 16px; color: var(--body); }
/* an odd last card spans the row instead of sitting alone */
.guide-grid > .guide-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
/* three-number strip inside a platform section (#display) */
.area-section .stats{ margin-top: 20px; }
.stats.is-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }

/* ---------- vendors hub ---------- */
.portal-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.portal-card{ display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: var(--r-xl); }
.portal-card h3{ font-size: 23px; }
.portal-card p{ font-size: 16px; color: var(--body); }
.portal-card .num-list{ margin-top: 0; color: var(--text); }
.portal-card .btn-row{ margin-top: auto; padding-top: 4px; }
.guide-links, .link-tiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.link-tiles{ gap: 14px; }
.guide-tile{ display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: var(--r-lg); color: var(--text); }
.guide-tile:hover{ color: var(--text); }
.guide-tile h3{ font-size: 21px; }
.guide-tile p{ font-size: 16px; color: var(--body); }
.link-tile{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-radius: var(--r-md); font-size: 17px; font-weight: 700; color: var(--text); }
.link-tile:hover{ color: var(--brand); }
.status-dot{ width: 8px; height: 8px; border-radius: 50%; background: #1fae6b; animation: pulseOk 2s ease-out infinite; }

/* ---------- forms ---------- */
.form-page main{ background: linear-gradient(180deg, var(--bg-2) 0, #fff 520px); }
.form-layout{ display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; padding-top: 40px; }
.form-layout.is-wide-form{ grid-template-columns: 4fr 8fr; gap: 56px; }
.form-intro{ display: flex; flex-direction: column; gap: 28px; }
.form-intro h1{ font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem); line-height: 1.1; }
.form-intro .lede{ margin-top: 18px; }
.form-card{ position: relative; padding: 40px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.form{ display: flex; flex-direction: column; gap: 24px; }
.form[hidden]{ display: none; }
.form-card .form{ gap: 28px; }
fieldset{ margin: 0; padding: 0; border: none; min-width: 0; }
legend{ padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.fieldset-title{ font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 14px; }
.field-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.field{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.span-all{ grid-column: 1 / -1; }
.field label{ font-size: 15px; font-weight: 700; color: var(--text); }
.optional{ font-weight: 400; color: var(--muted); }
.field-hint{ margin-top: -2px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.prose-block{ display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.7; color: var(--body); }
/* highlighted note with an info icon (Maccabi page: "new suppliers contact Maccabi procurement") */
.notice{ display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--brand-soft-2); border-inline-start: 4px solid var(--brand); border-radius: var(--r); background: var(--brand-soft); color: var(--text); }
.notice .icon{ flex: none; margin-top: 3px; color: var(--brand); }
/* stronger blue variant (warning icon, logo-blue accent) for notes the reader must not miss (S-Trans self-managed: no technical support) */
.notice.is-important{ margin-top: 18px; border-inline-start-color: var(--logo); }
.notice.is-important .icon, .notice.is-important strong{ color: var(--logo); }
.prose-block a{ font-weight: 700; }
/* register?portal=police|mod: the old portal pages' numbered steps */
.portal-intro .prose-block{ margin-top: 20px; }
/* a text section on its own (e.g. "מהו פורטל ספקים?") keeps a readable line length */
.section > .container > .prose-block{ max-width: 780px; font-size: 17px; }
.portal-steps{ margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 14px; }
.portal-steps li::marker{ color: var(--brand); font-weight: 700; }
.portal-steps strong{ display: block; color: var(--text); }
.portal-steps span{ display: block; margin-top: 4px; }
.field input, .field select, .field textarea{
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff;
  font-family: inherit; font-size: 16px; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea{ min-height: 110px; padding: 12px 14px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: #b3bfd4; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.segmented{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.segmented button{
  min-height: 52px; padding: 10px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: #fff; color: var(--body);
  font-size: 16px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: all .2s var(--ease);
}
.segmented button:hover{ color: var(--brand); border-color: var(--brand); }
.segmented button[aria-pressed="true"]{ background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.check-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.check{ display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; color: var(--body); }
.check input, .consent input{ width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
.consent{ display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--body); }
.consent input{ margin-top: 3px; }
.note-box{ padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--brand-soft-2); background: var(--brand-soft); font-size: 15px; line-height: 1.5; color: var(--text); }
.note-box[hidden]{ display: none; }
.note-box:not([hidden]){ animation: panelIn .35s var(--ease); }
.users{ display: flex; flex-direction: column; gap: 14px; }
.user-block{ display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); animation: panelIn .35s var(--ease); }
.user-title{ font-size: 14px; font-weight: 700; color: var(--brand); }
.btn-dashed{
  align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: var(--r);
  border: 1px dashed var(--line-strong); background: #fff; color: var(--brand); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .2s var(--ease);
}
.btn-dashed:hover{ border-color: var(--brand); background: var(--brand-soft); }
.btn-dashed:disabled{ color: var(--muted); cursor: not-allowed; border-color: var(--line); background: #fff; }
.dropzone{
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--bg-2);
  text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.dropzone:hover, .dropzone:focus-within{ border-color: var(--brand); background: var(--brand-soft); }
.dropzone input{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone .icon{ color: var(--brand); }
.dropzone-title{ font-size: 16px; font-weight: 700; }
.dropzone-hint, .dropzone-files{ font-size: 14px; color: var(--muted); }
.dropzone-files{ color: var(--brand); }
.dropzone-files:empty{ display: none; }
.form-fine{ font-size: 14px; color: var(--muted); }
.form-success{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 24px; }
.form-success[hidden]{ display: none; }
.form-success:not([hidden]){ animation: panelIn .45s var(--ease); }
.form-success h2{ font-size: 30px; outline: none; }
.form-success p{ font-size: 18px; color: var(--body); }
.success-icon{ width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); animation: pop .5s var(--ease); }
@keyframes pop{ 0%{ transform: scale(.5); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }

.info-card{ padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.info-card h2{ font-size: 20px; font-weight: 600; }
.info-card p, .info-card li{ font-size: 16px; color: var(--body); }
.info-card > p{ margin-top: 10px; }
.info-card.is-navy{ border-color: transparent; background: var(--grad-band); box-shadow: var(--shadow); }
.info-card.is-navy h2{ color: #fff; }
.info-card.is-navy p, .info-card.is-navy li{ color: #d7e3ff; }
.info-card .check-list{ margin-top: 16px; }
.info-card .check-list li{ color: var(--text); font-size: 17px; }
.mini-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; text-align: center; }
.mini-stats li{ padding: 16px 8px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px; color: var(--muted); }
.mini-stats strong{ display: block; direction: ltr; font-family: var(--font-display); font-size: 26px; color: var(--brand); }
.step-list{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--text); }
.step-dot{ width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; font-size: 14px; font-weight: 700; color: var(--body); }
.step-list li.is-current .step-dot{ border-color: var(--brand); background: var(--brand); color: #fff; }
.subsidy{ margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--ok-line); background: var(--ok-bg); font-size: 15px; font-weight: 600; color: var(--ok); }
.portal-info[hidden]{ display: none; }
.portal-info:not([hidden]){ animation: panelIn .4s var(--ease); }
.portal-info .info-kicker{ font-size: 14px; font-weight: 700; color: var(--brand); }
.portal-info h2{ margin-top: 6px; font-size: 21px; line-height: 1.3; }
.portal-info .steps-title{ margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--text); }

/* ---------- contact ---------- */
.intent-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.intent-card{ display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--r-lg); color: var(--text); }
.intent-card:hover{ color: var(--text); }
.intent-card h2, .intent-card h3{ font-size: 20px; font-weight: 600; }
.intent-card p{ font-size: 16px; color: var(--body); }
.intent-card .area-more{ margin-top: 4px; }
.contact-more{ padding-top: 88px; }
.contact-layout{ display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; padding-top: 32px; }
.contact-form-wrap{ padding: 40px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.contact-form-wrap h2{ font-size: 26px; font-weight: 600; }
.aside-stack{ display: flex; flex-direction: column; gap: 20px; }
.aside-stack address{ margin-top: 10px; font-style: normal; font-size: 17px; line-height: 1.6; color: var(--body); }
.contact-lines{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-lines a{ font-weight: 700; }
.info-card.is-navy .btn{ margin-top: 14px; }

/* ---------- trust center ---------- */
.dark-hero{ padding: 48px 0; border-bottom: 1px solid var(--line); }
.dark-hero-grid{ display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.dark-hero h1{ font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.5rem); }
.dark-hero .lede{ margin-top: 20px; }
.navy-panel{ display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--r-lg); background: var(--grad-band); color: #d7e3ff; font-size: 16px; box-shadow: var(--shadow-lg); }
.navy-panel a:not(.btn){ color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.navy-panel a:not(.btn):hover{ text-decoration-color: #fff; }
.two-col{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.stack{ display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.bordered-card{ padding: 22px 24px; border-radius: var(--r-md); }
.bordered-card h3{ font-size: 19px; }
.bordered-card p{ margin-top: 6px; font-size: 16px; color: var(--body); }
.doc-table{ list-style: none; margin: 20px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.doc-row{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; transition: background-color .2s; }
.doc-row:hover{ background: var(--bg-2); }
.doc-row:last-child{ border-bottom: none; }
.pill{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill-ok{ background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
a.pill-ok:hover{ background: #d3efe0; color: var(--ok); }
.pill-muted{ background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }
.tile-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.tile{ padding: 28px; border-radius: var(--r-lg); }
.tile h3{ font-size: 19px; }
.tile p{ margin-top: 10px; font-size: 16px; color: var(--body); }

/* ---------- about ---------- */
.people{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; align-items: stretch; }
.person{ display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: var(--r-xl); }
.person-head{ display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.person h3{ font-size: 23px; }
.person-role{ margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--brand); }
.person-bio{ display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.7; color: var(--body); }
.person-note{ margin-top: auto; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); border-inline-start: 3px solid var(--brand-soft-2); font-size: 15px; }
.person-note strong{ color: var(--text); }
.values-panel{ position: relative; overflow: hidden; padding: 56px; border-radius: var(--r-xl); background: var(--bg-2); border: 1px solid var(--line); }
.values-panel h2{ position: relative; font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.25; max-width: 900px; }
.values-panel .section-intro{ position: relative; max-width: 1000px; }
.values{ position: relative; list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.values li{ padding: 22px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; text-align: center; font-family: var(--font-display); font-size: 18px; font-weight: 600; transition: all .25s var(--ease); }
.values li:hover{ border-color: var(--brand-soft-2); color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); }
.three-col{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.three-col > div{ padding: 28px; border-radius: var(--r-lg); }
.three-col h3{ font-size: 20px; }
.three-col p{ margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--body); }
.community-card{ overflow: hidden; border-radius: var(--r-lg); padding: 0 !important; }
.community-media{ height: 170px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-soft), #e8f6fa); color: var(--brand); border-bottom: 1px solid var(--line); }
.community-media .icon{ transition: transform .4s var(--ease); }
.community-card:hover .community-media .icon{ transform: scale(1.08); }
.community-body{ padding: 22px; }
.community-body h3{ font-size: 19px; }
.community-body p{ margin-top: 8px; font-size: 15px; color: var(--body); }

/* ---------- technical guides ---------- */
.doc-layout{ display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 56px; }
.doc-toc{ position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.doc-toc-title{ margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.doc-toc ol, .doc-toc ul{ list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-toc ul{ margin-bottom: 0; }
.doc-toc a{ display: block; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--body); }
.doc-toc a:hover{ background: var(--surface-2); color: var(--text); }
.doc-toc a.is-active{ background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.doc{ min-width: 0; font-size: 17px; line-height: 1.75; color: var(--body); }
.doc h2{ margin: 56px 0 16px; padding-top: 8px; font-size: clamp(1.4rem, 1.2rem + .7vw, 1.85rem); scroll-margin-top: calc(var(--header-h) + 24px); }
.doc h2:first-of-type{ margin-top: 0; }
.doc h3{ margin: 28px 0 10px; font-size: 1.12rem; color: var(--brand-dark); }
.doc p + p{ margin-top: 12px; }
.doc p.kv{
  margin-top: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 15px; color: var(--text);
}
.doc ul, .doc ol{ margin: 12px 0 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc li::marker{ color: var(--brand); }
.lang-note{ margin-bottom: 28px; padding: 12px 16px; border: 1px solid var(--brand-soft-2); border-radius: var(--r); background: var(--brand-soft); font-size: 15px; color: var(--text); }
.table-wrap{ margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-sm); }
.spec-table{ width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.spec-table th, .spec-table td{ padding: 12px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec-table thead th{ position: sticky; top: 0; background: var(--bg-3); color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th{ background: #f3f7ff; }
.spec-table tbody tr:last-child td, .spec-table tbody tr:last-child th{ border-bottom: none; }
.spec-table td.num{ font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; white-space: nowrap; color: var(--brand-dark); }
.spec-table.is-segments tbody th{ min-width: 220px; font-weight: 700; color: var(--text); border-inline-end: 1px solid var(--line); background: #fafbfd; }
.spec-table code{ font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 14px; color: var(--brand-dark); }
.spec-table tbody tr:nth-child(even) > td,
.spec-table:is(.is-summary, .is-notes) tbody tr:nth-child(even) > th{ background: #fafbfd; }
.spec-table tr.is-filler > td{ color: var(--muted); }
.spec-table tr.is-filler > td.num{ color: var(--muted); }
.spec-table td.req{ width: 1%; white-space: nowrap; }
.spec-table td.req-note{ min-width: 200px; font-size: 14px; color: var(--body); }
.spec-table.is-summary td{ min-width: 120px; }
.spec-table.is-summary td.num, .spec-table.is-summary td.req{ min-width: 0; }
.spec-table .pill{ font-size: 12px; padding: 3px 10px; }
.spec-table tbody th[scope="row"]{ font-weight: 700; color: var(--text); }
.spec-table.is-summary tbody th[scope="row"]{ white-space: nowrap; }
.spec-table.is-summary td.num{ font-size: 18px; font-weight: 700; color: var(--brand); }
.spec-table.is-notes tbody th[scope="row"]{ width: 30%; min-width: 150px; border-inline-end: 1px solid var(--line); }
.spec-table.is-transposed tbody th[scope="row"]{ width: 1%; white-space: nowrap; border-inline-end: 1px solid var(--line); background: var(--bg-3); }
.spec-table.is-transposed td{ text-align: center; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 16px; color: var(--brand-dark); }
.spec-table.is-transposed tr:first-child td{ color: var(--text); }
.spec-table.is-transposed tbody tr > td{ background: none; }
.spec-table.is-segments tbody th{ vertical-align: top; }
.spec-table.is-segments tr.seg-start > *{ border-top: 1px solid var(--line-strong); }
.spec-table.is-segments tbody tr > td{ background: none; }
.seg-name{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spec-table code.seg{ display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--brand-soft); border: 1px solid var(--brand-soft-2); color: var(--brand-dark); font-size: 13px; font-weight: 700; }
.spec-table td.el{ width: 1%; white-space: nowrap; }
.spec-table code.const{ padding: 1px 6px; border-radius: 5px; background: var(--teal-soft); color: var(--teal); font-size: 13px; }
.mini-table{ margin-top: 6px; border-collapse: collapse; font-size: 14px; }
.mini-table td{ padding: 3px 12px 3px 0; border: none !important; background: none !important; }
.code-link{ font-weight: 700; white-space: nowrap; }
.muted-dash{ color: var(--muted); }
.spec-table.is-steps td.num{ width: 1%; font-size: 16px; font-weight: 700; color: var(--brand); }
.spec-table.is-docs td a{ font-weight: 600; }
.guide-actions{ margin-top: 28px; }
.print-only{ display: none; }
.download-row{ margin-top: 16px; }
.doc-help{ display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 64px; padding: 28px 32px; border: 1px solid var(--brand-soft-2); border-radius: var(--r-lg); background: var(--brand-soft); }
.doc-help h2{ margin: 0; font-size: 22px; }
.doc-help p{ margin-top: 6px; }

/* ---------- legal ---------- */
.prose{ max-width: 760px; padding-top: 32px; font-size: 17px; line-height: 1.85; color: var(--body); }
.prose h2{ margin: 44px 0 12px; font-size: 1.4rem; }
.prose > :first-child{ margin-top: 0; }
.prose p + p{ margin-top: 14px; }
.prose .fine{ margin-top: 36px; font-size: 14px; color: var(--muted); }

/* ---------- reveal ---------- */
.js [data-reveal]{
  opacity: 0; transform: translateY(24px) scale(.985); filter: blur(4px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-visible{ opacity: 1; transform: none; filter: none; }
.js [data-reveal].is-visible:is(.area-card, .audience-card, .portal-card, .guide-tile, .intent-card, .community-card, .tile):hover{ transform: translateY(-4px); }

/* reduced motion: stop large movement; color, light and glow effects stay on purpose */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js [data-reveal]{ opacity: 1; transform: none; filter: none; transition: none; }
  .hero-bg .blob, .page-hero::after, .dark-hero::after, .hero-bg::before, .page-hero::before, .dark-hero::before,
  .process-panel, .cta-dark::before, .cta-dark::after, .mobile-nav.is-open,
  .tab-panel:not([hidden]), .note-box:not([hidden]), .user-block, .portal-info:not([hidden]),
  .form-success:not([hidden]), .success-icon, .faq-list details[open] p{ animation: none; }
  .hero-bg .blob{ translate: none; }
  .marquee-track{ animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track li[aria-hidden="true"]{ display: none; }
  /* hover lifts, icon springs and button nudges stay: they are small, short and user-triggered */
}

/* ---------- print / PDF export (technical guides) ---------- */
@media print{
  @page{ size: A4; margin: 14mm 12mm; }
  html, body{ background: #fff !important; color: #111 !important; }
  body{ font-size: 10.5pt; padding: 0 !important; overflow: visible; }
  .site-header, .mobile-nav, .site-footer, .scroll-progress, .skip-link, .a11y, .search-overlay,
  .doc-toc, .doc-help, .breadcrumb, .guide-actions, .download-row, .lang-note, .hero-bg{ display: none !important; }
  .print-only{ display: block !important; }
  .container{ max-width: none; padding: 0; }
  main{ padding-bottom: 0; }
  .page-hero{ padding: 0 0 10pt !important; border-bottom: 2px solid #1149aa !important; background: none !important; }
  .page-hero::before, .page-hero::after{ display: none !important; }
  .eyebrow{ padding: 0; border: none; background: none; color: #1149aa; font-size: 9pt; }
  .eyebrow::before{ display: none; }
  h1, h2, h3, h4{ color: #0b1b3a !important; }
  .page-hero h1{ font-size: 20pt; }
  .page-hero .lede{ font-size: 10.5pt; color: #333 !important; }
  .print-meta{ margin-top: 8pt; font-size: 8.5pt; color: #555; }
  .doc-layout{ display: block; padding-top: 10pt; }
  .doc{ font-size: 10.5pt; line-height: 1.5; color: #222 !important; }
  .doc h2{ margin: 16pt 0 6pt; padding: 0; font-size: 13.5pt; break-after: avoid; }
  .doc h3{ margin: 10pt 0 4pt; font-size: 11pt; color: #1149aa !important; break-after: avoid; }
  .doc li::marker{ color: #1149aa; }
  .doc p.kv{ background: none; border: 1px solid #bbb; color: #111; font-size: 9.5pt; break-inside: avoid; }
  .table-wrap{ overflow: visible; margin-top: 6pt; border: 1px solid #b8c2d6; border-radius: 0; background: none; box-shadow: none; }
  .spec-table{ font-size: 8.5pt; line-height: 1.35; }
  .spec-table th, .spec-table td{ padding: 4pt 6pt; border-bottom: 1px solid #d3d9e6; color: #111 !important; background: none !important; }
  .spec-table thead th{ position: static; background: #e9effa !important; color: #0b1b3a !important; font-size: 8pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .spec-table tbody tr:nth-child(even) > td{ background: #f6f8fc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .spec-table tr{ break-inside: avoid; }
  .spec-table td.num, .spec-table code, .spec-table.is-transposed td, .spec-table.is-summary td.num{ color: #0b3478 !important; }
  .spec-table tr.is-filler > td{ color: #666 !important; }
  .spec-table .pill{ padding: 0; border: none !important; background: none !important; font-size: 8.5pt; }
  .spec-table .pill-ok{ color: #075a3f !important; font-weight: 700; }
  .spec-table .pill-muted{ color: #555 !important; }
  .spec-table.is-segments tbody th, .spec-table.is-notes tbody th[scope="row"], .spec-table.is-transposed tbody th[scope="row"]{ background: #f1f4fa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .spec-table code.seg, .spec-table code.const{ background: none !important; border: 1px solid #b8c2d6; color: #0b3478 !important; }
  .spec-table.is-segments tr.seg-start > *{ border-top: 1px solid #9aa6bf; }
  .spec-table.is-segments tbody tr{ break-inside: avoid; }
  a{ color: #0b3478 !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .nav-primary, .header-actions .header-link, .header-actions .lang-switch{ display: none; }
  .nav-toggle{ display: flex; }
  .hero-grid, .with-aside, .contact-layout, .form-layout, .form-layout.is-wide-form,
  .dark-hero-grid, .page-hero-split, .faq-layout, .two-col{ grid-template-columns: 1fr; }
  .hero-grid{ gap: 56px; }
  .page-hero-actions{ justify-content: flex-start; }
  .aside-sticky{ position: static; margin-top: 0; }
  .area-grid, .tile-grid, .three-col, .guide-links, .link-tiles, .intent-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .stat{ border-inline-end: none; }
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip-groups{ grid-template-columns: 1fr; }
  .trust-band, .cta-dark, .doc-help{ flex-direction: column; align-items: flex-start; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .doc-layout{ grid-template-columns: 1fr; gap: 32px; }
  .doc-toc{ position: static; max-height: none; }
  .faq-layout{ gap: 28px; }
}

@media (max-width: 640px){
  .btn-block{ width: 100%; }
  :root{ --gutter: 20px; --header-h: 64px; }
  body{ font-size: 16px; }
  .logo-svg{ width: 88px; height: 29px; }
  .header-actions{ gap: 8px; }
  main{ padding-bottom: 80px; }
  .section{ padding-top: 76px; }
  .page-hero + .section, .dark-hero + .section{ padding-top: 36px; }
  .hero{ padding: 44px 0 56px; }
  .hero-copy .btn-row .btn{ width: 100%; }
  .blob.b1{ width: 320px; height: 320px; }
  .blob.b2{ width: 260px; height: 260px; }
  .page-hero{ padding: 24px 0 28px; }
  .section-head{ flex-direction: column; align-items: flex-start; }
  .audience-grid, .area-grid, .tile-grid, .three-col, .guide-links, .link-tiles, .intent-grid,
  .portal-grid, .option-grid, .guide-grid, .people, .field-grid, .field-grid.cols-3{ grid-template-columns: 1fr; }
  .check-grid, .stats, .values{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps{ grid-template-columns: 1fr; }
  .tools-panel, .values-panel, .cta-dark, .trust-band, .form-card, .contact-form-wrap{ padding: 30px 22px; }
  .audience-card, .portal-card{ padding: 28px; }
  .trust-band-main{ flex-direction: column; align-items: flex-start; }
  .tab-panel{ grid-template-columns: 1fr; gap: 24px; }
  /* phones: the process illustration is too tall and its rows wrap; the hero ends with its buttons */
  .process-panel{ display: none; }
  .doc-row{ flex-wrap: wrap; }
  .footer-grid{ grid-template-columns: 1fr; }
  .form-layout{ padding-top: 24px; }
  .person{ padding: 22px; gap: 18px; }
  .marquee-track li{ font-size: 16px; padding: 10px 18px; }
  .btn{ white-space: normal; padding-block: 10px; }
  .audience-grid > *, .portal-grid > *{ min-width: 0; }
  /* phones: logo above the text, card spans the column */
  .partner-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .partner-logo{ padding: 0 0 12px; border-inline-end: none; border-bottom: 1px solid var(--line); align-self: stretch; }
  .partner-logo img{ width: 104px; height: 24px; }
}

/* ---------- accessibility menu (built by main.js) ---------- */
.a11y-toggle{
  position: fixed; left: 16px; bottom: 16px; z-index: 70;   /* bottom-left corner in both languages */
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #fff; background: var(--brand); color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(11, 47, 122, .55);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.a11y-toggle:hover{ transform: scale(1.06); background: var(--brand-dark); }
.a11y-toggle:focus-visible, .a11y-panel :focus-visible{ outline: 3px solid #f5b400; outline-offset: 2px; }
.a11y-panel{
  position: fixed; left: 16px; bottom: 76px; z-index: 70;
  width: min(300px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow: auto;
  padding: 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg); color: var(--text); font-size: 15px;
}
.a11y-panel[hidden]{ display: none; }
.a11y-panel button{ font: inherit; color: inherit; cursor: pointer; }
.a11y-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 17px; }
.a11y-close{ width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; font-size: 22px !important; line-height: 1; }
.a11y-size{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-weight: 600; }
.a11y-size div{ display: flex; gap: 6px; }
.a11y-step{ min-width: 52px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-2); font-weight: 700 !important; direction: ltr; }
.a11y-step:disabled{ opacity: .4; cursor: default; }
.a11y-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a11y-opt{ min-height: 48px; padding: 8px; border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; font-weight: 600 !important; line-height: 1.3; }
.a11y-opt:hover, .a11y-step:not(:disabled):hover{ border-color: var(--brand); }
.a11y-opt[aria-pressed="true"]{ background: var(--brand); border-color: var(--brand); color: #fff !important; }
.a11y-reset{ width: 100%; margin-top: 12px; min-height: 42px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--bg-2); font-weight: 600 !important; }
.a11y-link{ display: block; margin-top: 10px; text-align: center; font-weight: 600; text-decoration: underline; }

/* the settings themselves, as classes on <html> */
html.a11y-size-1 body{ zoom: 1.1; }
html.a11y-size-2 body{ zoom: 1.2; }
html.a11y-size-3 body{ zoom: 1.3; }
html.a11y-contrast{ --text: #000; --body: #000; --muted: #1f1f1f; --line: #6b6b6b; --line-strong: #000; --brand: #0039a6; --brand-dark: #002a7a; }
html.a11y-contrast .grad-text, html.a11y-contrast .stat-num{ background: none; -webkit-text-fill-color: currentColor; color: #0039a6; }
html.a11y-gray{ filter: grayscale(1); }
html.a11y-links a:not(.btn):not(.a11y-link){ text-decoration: underline !important; text-underline-offset: 3px; background-color: #fff3a8; color: #000 !important; }
html.a11y-links a.btn{ outline: 3px solid #f5b400; outline-offset: 2px; }
html.a11y-font{ --font-body: Arial, 'Segoe UI', sans-serif; --font-display: Arial, 'Segoe UI', sans-serif; letter-spacing: .01em; word-spacing: .06em; }
html.a11y-motion, html.a11y-motion *{ scroll-behavior: auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after{ animation: none !important; transition: none !important; }
html.a11y-cursor, html.a11y-cursor *{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1-4 7z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
@media (max-width: 640px){
  .a11y-toggle{ left: 10px; bottom: 12px; width: 44px; height: 44px; }
  .a11y-panel{ left: 10px; right: 10px; bottom: 66px; width: auto; max-height: 75vh; }
}

/* ---------- live forms: error message and honeypot ---------- */
.form-error{ margin-top: 12px; padding: 10px 14px; border-radius: var(--r); border: 1px solid #f1b4b4; background: #fdf1f1; color: #8a1c1c; font-size: 15px; font-weight: 600; }
.hp-field{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cf-turnstile{ margin-bottom: 16px; }

/* ---------- site search (built by main.js) ---------- */
.search-toggle{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 14px; flex: none;
  font: inherit; font-size: 15px; font-weight: 600;
  border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; color: var(--text); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.search-toggle:hover{ border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.search-overlay{ position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(11, 23, 51, .45); }
.search-overlay[hidden]{ display: none; }
body.search-open{ overflow: hidden; }
.search-panel{ width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.search-bar{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.search-input{ flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: var(--text); }
.search-input::-webkit-search-cancel-button{ display: none; }
.search-close{ padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-2); font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.search-results{ list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.search-results a{ display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r); color: var(--text); }
.search-results a:hover, .search-results [aria-selected="true"] a{ background: var(--brand-soft); }
.search-results strong{ font-weight: 600; }
.sr-section{ font-size: 14px; font-weight: 600; color: var(--brand); }
.sr-snippet{ font-size: 14px; line-height: 1.5; color: var(--body); }
.sr-lang{ display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; background: var(--bg-2); font-size: 11px; color: var(--muted); }
.search-results mark{ background: #fff1a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.search-group{ padding: 6px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.search-empty{ padding: 18px 12px; color: var(--muted); }
/* narrower screens: icon only */
@media (max-width: 1280px){
  .search-toggle{ padding: 0; width: 42px; }
  .search-toggle-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 640px){
  .search-overlay{ padding: 8px; }
  .search-panel{ max-height: calc(100vh - 16px); }
  .search-toggle{ width: 40px; height: 40px; }
}

/* ---------- contact page map ---------- */
.map-embed{ margin-top: 16px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.map-embed iframe{ display: block; width: 100%; height: 100%; border: 0; }
.map-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; font-size: 15px; font-weight: 600; }
.map-links .icon{ color: var(--brand); }

/* ---------- form validation messages (main.js) ---------- */
.field-error{ margin-top: 0; font-size: 14px; font-weight: 600; color: #b42318; }
.field-error[hidden]{ display: none; }
.form [aria-invalid="true"]:not([type="checkbox"]){ border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.form input[type="checkbox"][aria-invalid="true"]{ outline: 2px solid #d92d20; outline-offset: 2px; }
.consent + .field-error{ margin-top: -16px; }   /* the form's 24px gap would push it far from the checkbox */