/* AGIVIX — design tokens
   Palette continues the existing brand (theme-color #edf2ee).
   Status colours are semantic, not decorative: the business is diagnosis,
   so healthy / degraded / broken carry meaning wherever they appear. */

:root {
  /* Palette sampled directly from the logo gradient, then darkened only where a
     colour had to carry text. Raw fan, right to left:
     #408685 teal · #3c7483 steel · #4d5276 indigo · #624671 plum · #39947e leaf */
  --teal:      #367271;   /* 4.88:1 on sage — the logo teal, darkened to carry text */
  --steel:     #3c7483;   /* 4.61:1 — used as-is */
  --indigo:    #4d5276;   /* 6.66:1 — used as-is */
  --plum:      #624671;   /* 7.04:1 — used as-is */
  --leaf:      #2e7665;   /* 4.76:1 — the leaf green, darkened */

  --brand:     var(--teal);
  --brand-deep:var(--plum);
  --fan: linear-gradient(to left, var(--teal), var(--steel), var(--indigo), var(--plum));

  --sage:      #edf2ee;
  --sage-deep: #dde7e0;
  --paper:     #ffffff;
  --ink:       #17222b;   /* cooled toward the indigo end of the fan */
  --ink-soft:  #4d5a62;
  --ink-faint: #5e6b72;
  --line:      #ccd9d7;
  --line-strong:#74908c;

  /* Status scale. The logo fan has no warning hue, so the mid state is an ochre
     chosen to sit beside it; the alarm state is pulled from the plum end rather
     than a stock red, so it stays inside the brand family. */
  --healthy:   var(--leaf);
  --degraded:  #6f5518;
  --broken:    #77334a;

  --measure: 66ch;
  --step--2: 0.78rem;
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.6rem;
  --step-3:  1.95rem;
  --step-4:  clamp(2.6rem, 7.5vw, 4.4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sage);
  color: var(--ink);
  font-family: "Assistant", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "kern";
}

h1, h2, h3, .display {
  font-family: "Assistant", system-ui, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--ink); color: var(--sage); padding: .7rem 1.1rem; z-index: 99;
}
.skip:focus { inset-inline-start: 0; }

.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

section { padding-block: clamp(3.25rem, 7vw, 5.75rem); position: relative; }

/* Bands: sections alternate between the sage field and a paper field, bled to
   the viewport edges. Gives the page rhythm so it reads as stacked findings
   rather than one long strip of identical cards. */
.band {
  background: var(--paper);
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax var(--paper);
}
/* On paper bands, surfaces invert to the sage tint so nothing floats. */
.band .guide, .band .contact-box { background: var(--sage); }

main h2 { margin-bottom: .5em; }
main section > p:first-of-type { font-size: var(--step-1); color: var(--ink-soft); }

/* ---------- header ---------- */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { display: block; height: 38px; width: auto; max-width: 100%; }
.brand span {
  color: var(--ink-faint); font-size: .78rem; font-weight: 400;
  padding-inline-start: .7rem; border-inline-start: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 30rem) { .brand span { display: none; } }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: var(--step--1); }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero p.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 34rem; }

/* Z-pattern, mirrored for RTL. Stroke 1: header logo (start) to nav (end).
   Stroke 2: the diagonal from the headline down to the status board.
   Stroke 3: the CTA row running out to the end edge, where the eye lands. */
.hero-z { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) {
  .hero-z { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; }
  .hero-z .z-board { margin-block-start: 5.5rem; }
}
.hero-z .z-lead h1 { margin-bottom: .5em; }
.z-close { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .z-close { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; }
  .z-close .z-kicker { margin: 0; margin-inline-end: auto; max-width: 26rem; font-size: var(--step--1); color: var(--ink-faint); }
}

.cta-row { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }
.z-close .cta-row { margin-top: 0; }

.btn {
  display: inline-block; padding: .85rem 1.6rem;
  background: var(--ink); color: var(--sage);
  text-decoration: none; font-weight: 700; font-size: var(--step-0);
  border: 1px solid var(--ink); border-radius: 3px;
}
.btn:hover { background: #0d1712; color: var(--paper); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--sage-deep); color: var(--ink); }

/* ---------- status strip: the signature element ---------- */

.status-board {
  margin-top: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem 1.6rem 1.3rem;
  position: relative; overflow: hidden;
}
/* the only place the logo gradient appears on this page */
.status-board::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: var(--fan);
}
.status-board h2 {
  font-size: var(--step--1); font-weight: 700;
  color: var(--ink-faint); margin-bottom: 1.1rem;
}
.links { display: grid; gap: .55rem; }
.link-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .9rem; padding-block: .6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.link-row:last-child { border-bottom: 0; }
.link-row .path { font-weight: 700; font-size: var(--step--1); }
.link-row .dots { border-bottom: 1px dotted var(--line); }

/* Status reads as a chip, not coloured text — it's a verdict, so give it weight */
.state {
  font-size: var(--step--2); font-weight: 700; white-space: nowrap;
  padding: .18rem .55rem; border-radius: 999px; line-height: 1.5;
}
.state.ok   { color: var(--healthy);  background: color-mix(in srgb, var(--healthy) 12%, transparent); }
.state.warn { color: var(--degraded); background: color-mix(in srgb, var(--degraded) 14%, transparent); }
.state.bad  { color: var(--broken);   background: color-mix(in srgb, var(--broken) 12%, transparent); }
.board-note { margin: 1rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

/* Interactive stack map. The static .links block above is the first-paint
   content and the no-JS fallback. JS adds a "Draw yours" button that swaps
   .links for .stack-fields when the visitor decides to customize. */
.stack-map-toggle {
  margin-top: 1rem; padding: .55rem 1rem;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; color: var(--ink-soft);
  font: inherit; font-size: var(--step--1); font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.stack-map-toggle:hover { border-color: var(--brand); color: var(--brand); }
.stack-map-toggle:focus-visible { outline-offset: 3px; }

.stack-map[data-mode="interactive"] .links,
.stack-map[data-mode="interactive"] .stack-map-toggle { display: none; }

.stack-fields { display: grid; gap: 1rem; margin-top: .3rem; }
.stack-fields fieldset {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: .4rem;
}
.stack-fields legend {
  font-weight: 700; font-size: var(--step--1);
  color: var(--ink); padding: 0;
}
.stack-fields .segmented {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.stack-fields .segmented input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
  pointer-events: none;
}
.stack-fields .segmented label {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .25rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--step--2); font-weight: 700;
  cursor: pointer;
  color: var(--ink-soft);
  background: var(--paper);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.stack-fields .segmented label:hover { border-color: var(--brand); color: var(--brand); }
.stack-fields .segmented input:focus-visible + label {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.stack-fields .segmented input:checked + label.opt-ok      { color: var(--healthy);  border-color: var(--healthy);  background: color-mix(in srgb, var(--healthy) 12%, transparent); }
.stack-fields .segmented input:checked + label.opt-partial { color: var(--degraded); border-color: var(--degraded); background: color-mix(in srgb, var(--degraded) 14%, transparent); }
.stack-fields .segmented input:checked + label.opt-manual  { color: var(--degraded); border-color: var(--degraded); background: color-mix(in srgb, var(--degraded) 14%, transparent); }
.stack-fields .segmented input:checked + label.opt-bad     { color: var(--broken);   border-color: var(--broken);   background: color-mix(in srgb, var(--broken) 12%, transparent); }
.stack-fields .segmented input:checked + label.opt-unknown { color: var(--ink-soft); border-color: var(--line-strong); background: color-mix(in srgb, var(--line-strong) 15%, transparent); }

.stack-readout {
  margin: 1rem 0 0; padding: .75rem 1rem;
  background: color-mix(in srgb, var(--sage-deep) 60%, transparent);
  border-inline-start: 3px solid var(--brand);
  border-radius: 4px;
  font-size: var(--step--1); color: var(--ink);
  max-width: none;
}
.stack-cta { margin: 1rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.stack-cta .btn { padding: .55rem 1rem; font-size: var(--step--1); }

/* ---------- signs list ---------- */

.signs { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; max-width: 52rem; }
.signs li {
  padding: 1.15rem 0 1.15rem 0; border-top: 1px solid var(--line);
  display: grid; gap: .2rem;
}
.signs li:last-child { border-bottom: 1px solid var(--line); }
.signs strong { font-size: var(--step-1); font-weight: 800; font-weight: 500; }
.signs span { color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- process ---------- */

.stages { counter-reset: stage; display: grid; gap: 1.6rem; margin-top: 2.5rem; }
.stage {
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 1.5rem 1.6rem;
  border-inline-start: 3px solid var(--brand);
}
.stage h3 { margin-bottom: .35rem; }
.stage p { margin-bottom: .6rem; }
.stage .meta { font-size: var(--step--1); color: var(--ink-faint); }


/* ---------- local knowledge ---------- */

.local { display: grid; gap: 1.4rem; margin-top: 2.5rem; }
@media (min-width: 46rem) { .local { grid-template-columns: 1fr 1fr; } }
.local div { border-top: 1px solid var(--ink); padding-top: 1rem; }
.local h3 { font-size: var(--step-0); margin-bottom: .35rem; }
.local p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; max-width: 42ch; }

/* ---------- articles ---------- */

.guides { display: grid; gap: 1.2rem; margin-top: 2.2rem; }
@media (min-width: 46rem) { .guides { grid-template-columns: 1fr 1fr; } }
.guide {
  display: block; text-decoration: none; background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.5rem;
}
.guide:hover { border-color: var(--brand); }
.guide h3 { font-size: var(--step-1); font-weight: 500; margin-bottom: .45rem; }
.guide p { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .7rem; }
.tag { font-size: .78rem; color: var(--ink-faint); }

/* ---------- proof ---------- */
/* Legacy three-column proof block (kept for any downstream pages that still
   use it). The homepage now uses the .proof-slots vertical stack below. */
.proof { display: grid; gap: 1.5rem; margin-top: 2.2rem; }
@media (min-width: 46rem) { .proof { grid-template-columns: repeat(3, 1fr); } }
.proof div { border-top: 1px solid var(--line); padding-top: 1rem; }
.proof h3 { font-size: var(--step-1); font-weight: 500; margin-bottom: .4rem; }
.proof p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; max-width: 40ch; }

/* Homepage proof block — case, doc excerpt, and identity in a vertical stack.
   Prose, not a card grid: the brief explicitly asked for this. */
.proof-slots {
  display: grid; gap: 2.5rem; margin-top: 2.5rem;
  max-width: 52rem;
}
.proof-slots > article {
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}
.proof-slots > article:first-child { border-top: none; padding-top: 0; }
.proof-tag {
  font-size: var(--step--2); font-weight: 700; color: var(--brand);
  text-transform: none; letter-spacing: .04em;
  margin: 0 0 .4rem;
}
.proof-slots h3 {
  font-size: var(--step-1); font-weight: 700;
  margin: 0 0 1rem;
}
.proof-slots p { max-width: 46rem; margin: 0 0 .9rem; }
.proof-slots p:last-child { margin-bottom: 0; }
.proof-caveat {
  font-size: var(--step--1); color: var(--ink-faint);
  font-style: italic; margin-top: 1rem !important;
}

/* Diagnostic-doc excerpt — styled like a page from a real document.
   Paper background, tighter type, definition list for the fields. */
.doc-excerpt {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  margin: 1rem 0;
  box-shadow: 0 1px 3px rgba(23,34,43,0.04);
}
.doc-h {
  font-weight: 700; font-size: var(--step-0);
  margin: 0 0 1rem !important;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  font-family: "Assistant", system-ui, sans-serif;
  letter-spacing: -.01em;
}
.doc-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.2rem;
  row-gap: .6rem;
  margin: 0;
}
.doc-dl dt {
  font-weight: 700; font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: .1rem;
}
.doc-dl dd {
  margin: 0; font-size: var(--step--1);
  color: var(--ink);
}
.doc-state {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 3px;
  font-size: var(--step--2); font-weight: 700;
}
.doc-state.bad { background: var(--broken); color: var(--paper); }
@media (max-width: 34rem) {
  .doc-dl { grid-template-columns: 1fr; row-gap: .25rem; }
  .doc-dl dd { margin-bottom: .5rem; }
}

/* Identity slot — photo + text side-by-side. Photo is a placeholder box
   until Lior supplies an actual headshot. */
.proof-me-inner {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.proof-photo {
  width: 120px; height: 120px;
  background: var(--sage-deep);
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: var(--step--1);
}
.proof-me-body h3 { margin-top: 0; }
.proof-links { font-size: var(--step--1); color: var(--ink-soft); }
.proof-links a { color: var(--brand); font-weight: 700; }
@media (max-width: 34rem) {
  .proof-me-inner { grid-template-columns: 1fr; }
  .proof-photo { width: 96px; height: 96px; }
}

/* ---------- faq ---------- */

details {
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0;
}
details:first-of-type { border-top: 1px solid var(--line); }
summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-faint); font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { margin: .8rem 0 0; color: var(--ink-soft); }

/* ---------- contact ---------- */

.contact-box { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.5rem, 4vw, 2.4rem); }
.field { margin-bottom: 1.1rem; max-width: 34rem; }
.field label { display: block; font-weight: 700; font-size: var(--step--1); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: var(--step-0);
  color: var(--ink); background: var(--sage);
  border: 1px solid var(--line-strong); border-radius: 3px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field .hint { font-size: .82rem; color: var(--ink-faint); margin-top: .3rem; }
.field .opt {
  font-weight: 400; color: var(--ink-faint);
  font-size: var(--step--2); margin-inline-start: .3rem;
}
.err { color: var(--broken); font-size: var(--step--1); font-weight: 700; margin-bottom: .8rem; }
.err a { color: var(--broken); font-weight: 700; }

/* Honeypot — visually and assistively hidden, but present in tab-order-neutral
   position so bots that fill every field still trip it. tabindex=-1 keeps
   keyboard users out. */
.honeypot {
  position: absolute; inset-inline-start: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Attribution line under the form — the single strongest proof point on the page. */
.zoho-note {
  margin-top: 1rem;
  font-size: var(--step--1); color: var(--ink-soft);
  border-inline-start: 2px solid var(--brand);
  padding-inline-start: .8rem;
  max-width: 44rem;
}

/* Success state — replaces the form after a successful POST. */
.lead-success {
  background: var(--sage); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--leaf);
  border-radius: 4px;
  padding: clamp(1.4rem, 4vw, 2rem);
}
.lead-success[hidden] { display: none; }
.lead-success h3 { margin: 0 0 .5rem; font-size: var(--step-2); color: var(--leaf); }
.lead-success p { margin: 0 0 .8rem; max-width: 40rem; }
.lead-success p:last-child { margin-bottom: 0; }
.lead-success .direct { font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.2rem 3rem;
  font-size: var(--step--1); color: var(--ink-soft);
}
.site-foot a { color: var(--ink-soft); }
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.foot-mark { display: block; height: 26px; width: auto; margin-bottom: .5rem; }

/* ---------- checkup tool ---------- */

.q-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.4rem, 4vw, 2.2rem); }
.progress { height: 4px; background: var(--sage-deep); border-radius: 2px; overflow: hidden; margin-bottom: 1.8rem; }
.progress i { display: block; height: 100%; background: var(--fan); transition: width .25s ease; }
.q-count { font-size: var(--step--1); color: var(--ink-faint); margin-bottom: .5rem; }
.q-text { font-weight: 800; font-size: var(--step-2); line-height: 1.22; margin-bottom: 1.5rem; max-width: 34ch; }
.answers { display: grid; gap: .6rem; }
.answers button {
  font: inherit; text-align: start; cursor: pointer;
  background: var(--sage); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: .85rem 1rem;
}
.answers button:hover { border-color: var(--brand); background: var(--paper); }
.q-back { margin-top: 1.3rem; background: none; border: 0; font: inherit; font-size: var(--step--1); color: var(--ink-faint); cursor: pointer; text-decoration: underline; padding: 0; }

.score-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.score-num {
  font-weight: 800; font-size: clamp(4.5rem, 16vw, 6.5rem);
  line-height: .88; font-weight: 700; letter-spacing: -0.04em;
}
.score-band { font-weight: 700; font-size: var(--step-1); }
.breakdown { margin: 2rem 0 0; padding: 0; list-style: none; }
.breakdown li { padding: .9rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; }
.breakdown li:last-child { border-bottom: 1px solid var(--line); }
.breakdown .cat { font-weight: 700; }
.breakdown .note { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ============================================================
   Modernisation pass — refinement, not a new look.
   Sticky translucent header, softer surfaces with real depth,
   larger radii, motion that respects prefers-reduced-motion.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


.site-head {

}

.btn { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ink) 55%, transparent); }
.btn:active { transform: translateY(0); }

.status-board, .guide, .contact-box, .q-card {
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
              0 12px 32px -20px color-mix(in srgb, var(--ink) 40%, transparent);
}
.guide { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.guide:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent),
              0 18px 40px -22px color-mix(in srgb, var(--ink) 55%, transparent);
}
.answers button { transition: border-color .14s ease, background-color .14s ease, transform .14s ease; }
.answers button:hover { transform: translateX(-2px); }

/* ---------- articles ---------- */

.art-head { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.art-meta { font-size: var(--step--1); color: var(--ink-faint); margin-bottom: 1.2rem; }
.art-meta a { color: var(--ink-faint); }
.art-head h1 { font-size: clamp(2rem, 5.5vw, 3rem); margin-bottom: .45em; }
.art-head .lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 40rem; }

.prose { padding-block: 0 clamp(2rem, 5vw, 3rem); }
.prose h2 {
  font-size: var(--step-2); margin-top: 2.4em; margin-bottom: .5em;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { max-width: 40rem; }
.prose ul.signs { margin-block: 1.5rem; }
.prose a { color: var(--brand); }

.sources { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.6rem; }
.sources h2 {
  font-size: var(--step-0);
  border-top: 0; padding-top: 0; margin-top: 0;
}
.sources p { font-size: var(--step--1); color: var(--ink-faint); }
.sources ol { padding-inline-start: 1.2rem; margin: 0; }
.sources li { font-size: var(--step--1); margin-bottom: .5rem; }
.sources a { color: var(--ink-soft); overflow-wrap: anywhere; }

.art-cta {
  background: var(--paper); border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border: 1px solid var(--line);
}
.art-cta h2 { font-size: var(--step-1); margin-bottom: .4em; }
.art-cta p { font-size: var(--step--1); color: var(--ink-soft); }

.related { padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.related h2 { font-size: var(--step-1); }
.related .guide h3 { font-size: var(--step-0); margin-bottom: .5rem; }


/* Sticky header: the bar spans the viewport, the lockup stays inside the measure. */
.head-wrap {
  position: sticky; top: 0; z-index: 50;
  width: 100%; max-width: none; margin: 0;
  background: var(--sage);
}
.head-wrap .site-head {
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
}

.direct { font-size: var(--step--1); color: var(--ink-soft); }
.direct a { color: var(--brand); font-weight: 700; }
.signs a { text-underline-offset: 4px; }


/* The full fan appears three times and no more: the rule on the status board,
   the progress bar in the health check, and a hairline under the sticky header. */
.head-wrap { border-bottom: 1px solid var(--line); }
.head-wrap::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0;
  height: 2px; background: var(--fan); opacity: .9;
}
.site-head { border-bottom: 0; }
.score-num { background: var(--fan); -webkit-background-clip: text; background-clip: text; }


/* ---------- research findings ---------- */

.findings { list-style: none; counter-reset: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; }
.findings li {
  display: grid; gap: .1rem 1.6rem;
  grid-template-columns: auto 1fr;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.findings li:last-child { border-bottom: 1px solid var(--line); }
.findings .fig {
  grid-row: 1 / span 2;
  font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.04em;
  color: var(--teal); white-space: nowrap;
  min-width: 4.5ch;
}
.findings .fig i { font-style: normal; font-size: .5em; font-weight: 700; color: var(--ink-faint); }
.findings .claim { margin: 0 0 .45rem; max-width: 44ch; }
.findings .cite { margin: 0; font-size: var(--step--1); color: var(--ink-faint); }
.findings .cite a { color: var(--ink-faint); }
.findings .cite a:hover { color: var(--brand); }

@media (max-width: 34rem) {
  .findings li { grid-template-columns: 1fr; }
  .findings .fig { grid-row: auto; margin-bottom: .5rem; }
}

.research-note { margin-top: 1.6rem; font-size: var(--step--1); color: var(--ink-soft); }
.research-note a { color: var(--brand); font-weight: 700; }

.pull { margin: 2.5rem 0; padding: 0; border-inline-start: 3px solid var(--teal); padding-inline-start: 1.4rem; }
.pull blockquote { margin: 0; }
.pull blockquote p { font-size: var(--step-2); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 .6rem; max-width: 34ch; }
.pull figcaption { font-size: var(--step--1); color: var(--ink-faint); }
.pull figcaption a { color: var(--ink-faint); }


/* ---------- service routes ---------- */
.svc-list { display: grid; gap: 1.2rem; margin-top: 2.2rem; }
@media (min-width: 46rem) { .svc-list { grid-template-columns: 1fr 1fr; } }

/* Homepage #svc uses .svc-row wrappers instead of a flat .svc-list. Two primary
   tracks now sit side by side — Rescue takes the wider column and comes first,
   so it still reads as the main offering, with Priority integration beside it
   rather than beneath. Below 46rem they stack in source order, Rescue first.
   The card grid on /services uses .svc-list / .svc-more instead. */
.svc-row.primary { margin-top: 2.2rem; display: grid; gap: 1.2rem; }
@media (min-width: 46rem) { .svc-row.primary { grid-template-columns: 1.2fr 1fr; } }
.svc-row.primary .svc { padding: 2rem 1.9rem; }
.svc-row.primary .svc h3 { font-size: var(--step-2); }
.svc-row.primary .svc p { font-size: var(--step-0); max-width: 52ch; }
.svc-row.secondary { margin-top: 1.2rem; display: grid; gap: 1.2rem; }
@media (min-width: 46rem) { .svc-row.secondary { grid-template-columns: 1fr 1fr; } }
.svc {
  display: block; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
              0 12px 32px -20px color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc:hover { transform: translateY(-2px); border-color: var(--brand); }
.svc-tag {
  display: inline-block; font-size: var(--step--2); font-weight: 700;
  color: var(--teal); background: color-mix(in srgb, var(--teal) 11%, transparent);
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .8rem;
}
.svc h2, .svc h3 { font-size: var(--step-1); margin-bottom: .45rem; }
.svc p { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .8rem; }
.svc-meta { font-size: var(--step--2); color: var(--ink-faint); }
.svc-note { margin-top: 1.6rem; font-size: var(--step--1); color: var(--ink-faint); }
.svc-note a { color: var(--brand); font-weight: 700; }
.band .svc { background: var(--sage); }

/* Additional practices on /services — the same card, deliberately quieter:
   no shadow, no lift, smaller type. They stay reachable without competing
   with the two main tracks above them. */
.svc-more-head { margin-top: 3rem; font-size: var(--step-1); }
.svc-more { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 46rem) { .svc-more { grid-template-columns: 1fr 1fr; } }
.svc-more .svc { padding: 1.25rem 1.4rem; box-shadow: none; }
.svc-more .svc:hover { transform: none; }
.svc-more .svc h3 { font-size: var(--step-0); }
.svc-more .svc p { font-size: var(--step--2); margin-bottom: .5rem; }


/* ---------- collapsible navigation ----------
   Six wrapping links used two or three rows of a sticky header on a phone —
   space that was lost on every scroll. Below 52rem the links collapse behind a
   toggle; above it the row returns. Without JS the links stay visible as before,
   so navigation never depends on the script. */

.nav-toggle { display: none; }

.site-head { padding-block: .85rem; gap: 1rem; }
.has-js-nav .site-head { flex-wrap: nowrap; }
.brand img { height: 34px; }

@media (min-width: 52rem) {
  .site-head { padding-block: 1.15rem; }
  .brand img { height: 38px; }
}

@media (max-width: 51.99rem) {
  .has-js-nav .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-size: var(--step--1); font-weight: 700;
    color: var(--ink); background: transparent;
    border: 1px solid var(--line-strong); border-radius: 6px;
    padding: .45rem .8rem; cursor: pointer;
  }
  .nav-bars { position: relative; width: 15px; height: 2px; background: currentColor; border-radius: 2px; }
  .nav-bars::before, .nav-bars::after {
    content: ""; position: absolute; inset-inline: 0; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-bars::before { top: -5px; }
  .nav-bars::after  { top: 5px; }
  [aria-expanded="true"] .nav-bars { background: transparent; }
  [aria-expanded="true"] .nav-bars::before { top: 0; transform: rotate(45deg); }
  [aria-expanded="true"] .nav-bars::after  { top: 0; transform: rotate(-45deg); }

  .has-js-nav .site-nav {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-block: 1px solid var(--line);
    padding: .4rem 0;
    box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--ink) 60%, transparent);
  }
  .has-js-nav .site-nav.open { display: flex; }
  .has-js-nav .site-nav a {
    padding: .85rem clamp(1.25rem, 5vw, 2rem);
    font-size: var(--step-0); color: var(--ink);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .has-js-nav .site-nav a:last-child { border-bottom: 0; }
}

.head-wrap { position: sticky; top: 0; }
.head-wrap .site-head { position: relative; }


/* ---------- allocation checker ---------- */
.num-wrap { display: grid; gap: .6rem; max-width: 22rem; }
.num-label { font-size: var(--step--1); font-weight: 700; }
.num-in {
  font: inherit; font-size: var(--step-1); font-weight: 700;
  padding: .7rem .85rem; color: var(--ink); background: var(--sage);
  border: 1px solid var(--line-strong); border-radius: 6px; width: 100%;
}
.num-in:focus { border-color: var(--brand); }
.num-wrap .btn { justify-self: start; }

.exposure {
  margin: 2rem 0 0; padding: 1.5rem 1.6rem;
  background: var(--sage); border-radius: 12px;
  border-inline-start: 3px solid var(--broken);
}
.exp-label { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .5rem; max-width: 40ch; }
.exp-num {
  font-size: clamp(2.1rem, 8vw, 3rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--broken); margin: 0 0 .7rem;
}
.exp-num i { font-style: normal; font-size: .4em; font-weight: 700; color: var(--ink-faint); }
.exp-note { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }


/* ---------- language suggestion banner ---------- */
/* Shown once (via localStorage) to visitors with an English browser locale
   who land on a Hebrew page. Never redirects — the visitor stays where they are
   unless they click through. */
#lang-suggest {
  background: var(--ink); color: var(--sage);
  padding: .55rem 1rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  font-size: var(--step--1);
  direction: ltr; /* banner is in English */
  text-align: center;
}
#lang-suggest[hidden] { display: none; }
#lang-suggest p { margin: 0; max-width: none; }
#lang-suggest a {
  color: var(--sage); text-decoration: underline;
  text-underline-offset: 3px; font-weight: 700;
}
#lang-suggest a:hover { color: var(--paper); }
#lang-suggest button {
  background: transparent; border: 1px solid var(--sage);
  color: var(--sage); border-radius: 3px;
  padding: .25rem .7rem; cursor: pointer;
  font-family: inherit; font-size: var(--step--1);
  min-height: 32px;
}
#lang-suggest button:hover { background: var(--sage); color: var(--ink); }
#lang-suggest button:focus-visible { outline-offset: 2px; }


/* ---------- language switcher (in header nav) ---------- */
.site-nav .lang-switch {
  font-size: var(--step--1); font-weight: 700;
  padding: .3rem .6rem; margin-inline-start: .3rem;
  border: 1px solid var(--line-strong); border-radius: 4px;
  color: var(--ink-soft); letter-spacing: .02em;
}
.site-nav .lang-switch:hover { color: var(--brand); border-color: var(--brand); }
@media (max-width: 52rem) {
  .has-js-nav .site-nav .lang-switch { margin: .3rem 0; align-self: flex-start; }
}


/* ---------- mobile polish: tap targets ---------- */
@media (max-width: 40rem) {
  .btn { min-height: 48px; padding: .85rem 1.2rem; }
  .nav-toggle { min-height: 44px; min-width: 44px; }
  .foot-links a { min-height: 44px; display: inline-flex; align-items: center; padding: .3rem .5rem; }
}


/* ---------- sticky mobile CTA bar ---------- */
/* Opt-in per page via <body class="has-cta-bar"> and a <nav class="cta-bar"> element */
.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  display: none;
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(23,34,43,0.05);
}
.cta-bar-inner { display: flex; gap: .5rem; max-width: 42rem; margin: 0 auto; }
.cta-bar a {
  flex: 1 1 0; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 700; font-size: var(--step--1);
  border-radius: 8px; text-decoration: none;
  padding: 0 .8rem;
}
.cta-bar a.wa { background: var(--brand); color: var(--paper); }
.cta-bar a.wa:hover { background: var(--indigo); }
.cta-bar a.tel { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.cta-bar a.tel:hover { background: var(--sage); }
@media (max-width: 40rem) {
  body.has-cta-bar .cta-bar { display: block; }
  body.has-cta-bar main { padding-bottom: 5.5rem; }
}


/* ========================================================================
   DEPTH LAYER
   Added on top of the existing system, not in place of it. The palette,
   the type family and the --fan budget are unchanged: the fan still
   appears only on the status board, the health-check progress bar and the
   sticky-header hairline. What changes is air, hierarchy and surface —
   the things that were making the page read flat.
   ======================================================================== */

/* ---------- section eyebrow ----------
   A short coloured label above a heading. Gives each section a second
   line of hierarchy without inflating the heading itself. Specificity is
   raised deliberately: `main section > p:first-of-type` would otherwise
   promote it to lede size. */
main section > p.eyebrow:first-of-type,
main section > .eyebrow,
.eyebrow {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand);
  margin: 0 0 .9rem;
  max-width: none;
}
.eyebrow::before {
  content: ""; inline-size: 1.6rem; block-size: 2px; border-radius: 2px;
  background: currentColor; opacity: .55; flex: none;
}

/* ---------- section rhythm ----------
   The page was a uniform strip. Give headings room to land and let the
   lede breathe under them. */
main section > h2 { letter-spacing: -0.03em; }
main section > h2 + p { margin-top: -.1em; }
main section > p:first-of-type { max-width: 46rem; line-height: 1.6; }

/* ---------- surfaces ----------
   Cards previously sat on a single hairline. They now carry a two-stop
   shadow — a tight contact shadow plus a wide soft one — which is what
   reads as depth rather than as a drop shadow. */
.svc, .guide, .stage, .contact-box, .art-cta, .status-board {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 14px 36px -22px color-mix(in srgb, var(--ink) 45%, transparent);
}
.svc, .guide, .art-cta { border-radius: 14px; }
.stage { border-radius: 10px; }

/* The two primary service cards earn a coloured top edge. Single hues from
   the fan, not the gradient itself, so the fan budget is untouched. */
.svc-row.primary .svc { position: relative; overflow: hidden; }
.svc-row.primary .svc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: var(--teal);
}
.svc-row.primary .svc:nth-child(2)::before { background: var(--indigo); }

.svc:hover, .guide:hover {
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--ink) 7%, transparent),
    0 22px 48px -24px color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ---------- figures ----------
   Diagrams are content, not decoration: they sit in the measure, carry a
   caption, and scale with the viewport rather than to a fixed pixel size. */
.fig {
  /* The diagrams are authored at a ~620px viewBox. Letting them stretch to a
     74rem container would scale every label up by ~1.9x, so the figure is
     capped near its design size and centred instead of hugging one edge. */
  margin: 2.4rem auto;
  max-width: 44rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.1rem;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
    0 14px 36px -24px color-mix(in srgb, var(--ink) 40%, transparent);
}
.band .fig { background: var(--sage); }

/* Below ~tablet the diagram would shrink its 13px labels to about 6px, so the
   canvas holds a floor width and scrolls within its own box. The page body
   still never scrolls sideways. */
.fig-canvas { overflow-x: auto; overscroll-behavior-x: contain; }
.fig-canvas:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.fig-canvas > svg { display: block; width: 100%; height: auto; min-width: 600px; }
.fig figcaption {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  font-size: var(--step--1); color: var(--ink-faint);
  max-width: 46rem;
}
.fig figcaption b { color: var(--ink-soft); font-weight: 700; }

/* Diagram type. Set here rather than per-element so every figure stays
   consistent and inherits the page font. */
.fig text { font-family: inherit; fill: var(--ink); }
.fig .f-label   { font-size: 13px; font-weight: 700; }
.fig .f-sub     { font-size: 11.5px; fill: var(--ink-faint); font-weight: 400; }
.fig .f-head    { font-size: 11px; font-weight: 700; fill: var(--ink-faint); letter-spacing: .04em; }
.fig .f-val     { font-size: 12.5px; font-weight: 700; }
.fig .f-card    { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.band .fig .f-card { fill: var(--paper); }
.fig .f-rule    { stroke: var(--line); stroke-width: 1; }
.fig .f-flow    { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.fig .f-flow-bad{ stroke: var(--broken); stroke-width: 2; fill: none; stroke-dasharray: 6 5; }
.fig .f-ok      { fill: var(--healthy); }
.fig .f-warn    { fill: var(--degraded); }
.fig .f-bad     { fill: var(--broken); }
.fig .f-ok-t    { fill: var(--healthy); font-size: 11px; font-weight: 700; }
.fig .f-bad-t   { fill: var(--broken);  font-size: 11px; font-weight: 700; }
.fig .f-teal    { fill: var(--teal); }
.fig .f-indigo  { fill: var(--indigo); }

/* ---------- motion ----------
   Everything above animates on a single short curve, and all of it is
   dropped for anyone who asks for reduced motion. */
.fig, .svc, .guide { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .fig, .svc, .guide, .btn { transition: none; }
  .svc:hover, .guide:hover { transform: none; }
}


/* ========================================================================
   PRIORITY INTEGRATIONS
   Hub illustration, a decision table for articles, and a header tweak so the
   extra nav item fits on one row between the mobile breakpoint and ~66rem.
   ======================================================================== */

/* With seven nav items the row only fits from ~66rem. Between the mobile
   breakpoint and that width, drop the brand tagline and tighten the gap
   instead of letting the nav wrap onto a second line. */
@media (min-width: 52rem) and (max-width: 66rem) {
  .brand span { display: none; }
  .site-nav { gap: 1.05rem; }
}

/* ---------- Priority hub figure ----------
   Two drawings of the same diagram: a radial one for wide screens and a
   vertical one for phones, so labels never shrink below a readable size and
   the canvas never needs to scroll. Only one is rendered at a time
   (display:none also removes the other from the accessibility tree). */
.fig-hub { max-width: 46rem; }
.fig-hub .fig-canvas { overflow: visible; }
.fig-hub .fig-canvas > svg { min-width: 0; }
.fig-hub .hub-tall { display: none; }
@media (max-width: 45.99rem) {
  .fig-hub { padding-inline: .8rem; }
  .fig-hub .hub-wide { display: none; }
  .fig-hub .hub-tall { display: block; max-width: 26rem; margin-inline: auto; }
}

.fig .h-halo  { fill: color-mix(in srgb, var(--indigo) 7%, transparent); }
.fig .h-ring  { fill: none; stroke: color-mix(in srgb, var(--indigo) 25%, transparent); stroke-width: 1; stroke-dasharray: 2 6; }
.fig .h-core  { fill: var(--paper); stroke: color-mix(in srgb, var(--indigo) 40%, var(--line)); stroke-width: 1.5; }
.fig .h-title { font-size: 18px; font-weight: 800; fill: var(--ink); letter-spacing: -.01em; }
.fig .h-label { font-weight: 700; fill: var(--ink); }
.fig .h-spoke { fill: none; stroke: var(--line-strong); stroke-width: 1.5; opacity: .45; }
.fig .h-flow  { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 10;
                animation: hubflow 1.8s linear infinite; }
.fig .h-in    { stroke: var(--teal); }
.fig .h-out   { stroke: var(--indigo); }
.fig .h-icon  { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hubflow { to { stroke-dashoffset: -24; } }
/* The site-wide reduced-motion rule already stops the flow; this keeps the
   dashes from reading as broken lines when it does. */
@media (prefers-reduced-motion: reduce) {
  .fig .h-flow { stroke-dasharray: none; opacity: .55; }
}

/* ---------- decision table (articles) ---------- */
.prose .table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td {
  text-align: start; vertical-align: top;
  padding: .75rem .7rem; border-bottom: 1px solid var(--line);
}
.prose th { font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--ink); }
.prose td:last-child { font-weight: 700; }

/* Homepage Priority section: CTA row sits under the cards, not floating. */
#priority .cta-row { margin-top: 2rem; }