/*
 * מכריעים וממשיכים — site styles
 * Brand palette (see :root), neutral grays, Apple-inspired scale. Logical properties throughout for RTL.
 */

/* Fonts are served from this site (no third-party requests). Heebo (headings) and Noto Sans
   Hebrew (text) are variable: one file covers every weight (100–900). Subsets: Hebrew + Latin. Licence: SIL Open Font License (assets/fonts/LICENSE.md). */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Body text: Noto Sans Hebrew, variable (one file per subset covers every weight) */
@font-face {
  font-family: "Noto Sans Hebrew";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/noto-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Noto Sans Hebrew";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/noto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette (fixed by the brand): gold #d9b878, light blue #d7e3f9, blue #2663dc, violet #5741c3,
     plus the logo's black #101010 and white. Nothing else: every other value below is one of
     these mixed with white, noted as "x% on white". Contrast ratios are against white. */
  --white: #ffffff;
  --ink: #101010;         /* the logo's black, 18:1 */
  --ink-body: #3b3b3b;    /* ink 82% on white: long answers, 11:1 */
  --ink-2: #555555;       /* ink 71%: secondary text, 7.5:1 (AAA, for older readers) */
  --ink-3: #6b6b6b;       /* ink 62%: the gray of two-tone statements, 4.9:1 on the light band */
  --slate: #838383;       /* ink 52%: icons, field borders, connectors, 3.8:1 (non-text) */
  --slate-light: #bcbcbc; /* ink 28% */
  --rule: #e2e2e2;        /* ink 12%: hairlines */
  --light-blue: #d7e3f9;
  --gray: #f5f5f7;        /* neutral gray (the black/white family): light bands and boxes */
  --mist: #ededf0;        /* neutral gray: pills */
  --mist-hover: #e4e4e8;
  --blue-glow: #497de2;   /* blue 80% + light blue 20%: the blue lit up, for glows and the bar on black */
  --blue: #2663dc;        /* buttons, links, marks, numbers: 5.4:1 either way */
  --link: #2663dc;
  --blue-deep: #2357bd;   /* blue 85% + ink: outline buttons on tinted tiles, 4.5:1 or more */
  --blue-hover: #316bde;  /* blue 95%: a touch lighter on hover, as on Apple; 4.9:1 */
  --violet: #5741c3;      /* in the palette; not used on the page at the moment */
  --gold: #d9b878;        /* gradients and tints only: 1.9:1, never text */
  --night: #101010;
  --icon-gray: var(--slate);
  --error: #b3261e;

  --font-display: "Heebo", "Arial Hebrew", "Noto Sans Hebrew", system-ui, sans-serif;
  --font-body: "Noto Sans Hebrew", "Heebo", "Arial Hebrew", "Noto Sans Hebrew", system-ui, sans-serif;

  --wrap: 1120px;
  --gutter: 20px;
  --header-h: 58px;
  --section-y: clamp(52px, 2.6rem + 2vw, 72px);
  --radius: 10px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 64px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}



img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ol,
ul,
fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  inset-block-start: 8px;
}

.wrap {
  inline-size: 100%;
  max-inline-size: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 44px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn-blue {
  background: var(--blue);
  color: var(--white);
}

.btn-blue:hover {
  background: var(--blue-hover);
}

.btn-outline {
  background: transparent;
  border-color: var(--link);
  color: var(--link);
}

.btn-outline:hover {
  background: var(--link);
  color: var(--white);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--white);
  border-block-end: 1px solid var(--rule);
  transition: background-color 200ms ease;
}

.site-header[data-scrolled] {
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: var(--header-h);
}

.header-logo {
  display: flex;
  align-items: center;
  flex: none;
  min-block-size: 48px;
  inline-size: 124px;
}

.header-logo img {
  inline-size: 100%;
  block-size: auto;
}

.header-nav {
  display: none;
}

.header-cta {
  position: relative;
  margin-inline-start: auto;
  min-block-size: 34px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.header-cta::after {
  content: "";
  position: absolute;
  inset: -5px -3px; /* keeps the tap area 44px tall while the button looks 34px */
}

@media (min-width: 380px) {
  .header-logo {
    inline-size: 136px;
  }
}

/* the full menu (4 links) needs about 740px; below that the header is logo + button, as on phones */
@media (min-width: 740px) {
  .header-logo {
    inline-size: 148px;
  }

  .header-nav {
    display: flex;
    gap: 4px;
    margin-inline-start: 28px;
  }

  .header-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 48px;
    padding-inline: 10px;
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: 400;
    text-decoration: none;
    color: rgb(16 16 16 / 0.8);
    transition: color 160ms ease;
  }

  .header-nav a:hover {
    color: var(--ink);
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 42%, rgb(38 99 220 / 0.085), transparent 70%),
    var(--white);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(56px, 2rem + 6vw, 112px) clamp(60px, 2rem + 6.5vw, 120px);
}

.hero-wordmark {
  inline-size: min(520px, 100%);
}

.hero-wordmark img {
  inline-size: 100%;
  block-size: auto;
}

.hero-explainer {
  margin-block-start: clamp(12px, 0.4rem + 1vw, 20px);
  max-inline-size: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); /* 22px → 28px */
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.hero-anchor {
  margin-block-start: 12px;
  max-inline-size: 36ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17px → 19px */
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: clamp(28px, 1.2rem + 1.4vw, 40px);
}



/* ---------- Sections ---------- */

.section {
  padding-block: var(--section-y);
  background: var(--white);
}

.section-gray {
  background: var(--gray);
}

/* two white sections in a row: the band does not change, so the second does not add its own top
   padding (otherwise the gap doubles); its heading sits one section-step below the last line */
.section:not(.section-gray) + .section:not(.section-gray) {
  padding-block-start: 0;
}

.h-section {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); /* 36px → 64px */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17px → 19px */
  line-height: 1.6;
  max-inline-size: 60ch;
}

.section-intro {
  margin-block-start: 20px;
  max-inline-size: none; /* one sentence: on desktop it runs the full line instead of breaking early */
  color: var(--ink-2);
}

/* Premise */

/* Premise: Apple's lockup (iPhone 18 Pro, "Most wanted."): a very large centred headline, then one
   centred paragraph in gray whose key phrases are set in ink. Same weight, colour does the work. */

.statement {
  padding-block: calc(var(--section-y) * 1.3);
}

.premise {
  max-inline-size: 920px;
  margin-inline: auto;
  text-align: center;
}

.premise-title {
  font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.5rem); /* 40px → 88px */
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.premise-copy {
  max-inline-size: 820px;
  margin: clamp(22px, 1.2rem + 1vw, 36px) auto 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); /* 19px → 24px */
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

.premise-copy strong {
  color: var(--ink);
  font-weight: 500;
}

/* on wider screens the key phrase never breaks, so its bar stays one stroke; on phones it flows
   (a short orphan line would be worse), and the bar is drawn line by line */
@media (min-width: 600px) {
  .premise-copy .mark {
    white-space: nowrap;
  }
}

/* Once the statement is in view (main.js adds .is-lit), the headline gets a one-time colour sweep,
   right to left, ending in plain ink; the key phrases light up from gray to ink, the second group
   a beat later. Without JavaScript or with reduced motion everything simply shows finished. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .has-light .h-sweep {
    background-image: linear-gradient(90deg, rgb(16 16 16 / 0) 0%, rgb(16 16 16 / 0) 34%, #d7e3f9 42%, #2663dc 50%, #101010 60%, #101010 100%);
    background-size: 300% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .has-light .h-sweep.is-lit {
    animation: sweep 2.4s var(--ease) 0.1s forwards;
  }
}

@keyframes sweep {
  to {
    background-position: 100% 0;
  }
}

.has-light .premise-copy strong {
  color: var(--ink-3);
  transition: color 900ms var(--ease) 700ms;
}

.has-light .premise-copy .lit-late {
  transition-delay: 1500ms;
}

.has-light .premise-copy.is-lit strong {
  color: var(--ink);
}

@media (forced-colors: active) {
  .has-light .h-sweep {
    background: none;
    color: CanvasText;
  }
}

.section-intro strong {
  color: var(--ink);
  font-weight: 500;
}

/* The one emphasis device: a straight blue bar under a key phrase, drawn right to left as it
   enters (main.js). Without JavaScript the same bar is a plain underline. */
.mark {
  text-decoration: underline;
  text-decoration-color: var(--mark-color, var(--blue));
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.1em;
}

.has-marks .mark {
  text-decoration: none;
}

.mark-host {
  position: relative;
}

.mark-layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.mark-layer path {
  fill: none;
  stroke: var(--mark-color, var(--blue));
  stroke-linecap: butt;
  transition: stroke-dashoffset 1100ms var(--ease);
}

/* Three mechanisms */

.fixes {
  margin-block-start: clamp(32px, 1.6rem + 1.6vw, 52px);
  border-block-start: 1px solid var(--rule);
}

.fix {
  position: relative; /* anchors the cross-fade copy of the explanation (main.js) */
  display: grid;
  gap: 8px;
  padding-block: clamp(24px, 1.2rem + 1vw, 36px);
  border-block-end: 1px solid var(--rule);
}

.fix-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); /* 28px → 40px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--blue);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  justify-self: start;
}

.fix-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22px → 28px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fix-text {
  max-inline-size: 58ch;
}

@media (min-width: 900px) {
  .fix {
    grid-template-columns: 76px minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 32px;
    align-items: baseline;
  }

  .fix-num {
    padding-block-start: 0;
  }
}

/* "How it works" diagrams inside each fix.
   .fixes[data-diagrams="open"]   → always visible, no button
   .fixes[data-diagrams="button"] → collapsed behind the summary button (main.js closes them) */

.fix-more {
  min-inline-size: 0;
}

.fix-more > summary {
  list-style: none;
  cursor: pointer;
}

.fix-more > summary::-webkit-details-marker {
  display: none;
}

.how-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-block-size: 44px;
  margin-block-start: 6px;
  padding-block: 8px;
  padding-inline: 18px 12px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  transition: background-color 240ms var(--ease);
}

.how-btn:hover {
  background: var(--mist-hover);
}

.how-accent {
  color: var(--blue);
  font-weight: 600;
}

.how-icon {
  inline-size: 24px;
  block-size: 24px;
}

/* circle icons (⊕, open, download): outline at rest, filled on hover */
.circ-icon {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
}

.circ-icon circle {
  fill: transparent;
  stroke: var(--icon-gray);
  stroke-width: 1.5;
  transition: fill 240ms var(--ease);
}

.circ-icon path {
  fill: none;
  stroke: var(--icon-gray);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 240ms var(--ease);
}

/* filled only while pointed at (Apple-style); on touch screens a tap would leave it stuck filled */
@media (hover: hover) {
  .how-btn:hover .circ-icon circle,
  .pill-link:hover .circ-icon circle {
    fill: var(--icon-gray);
  }

  .how-btn:hover .circ-icon path,
  .pill-link:hover .circ-icon path {
    stroke: var(--white);
  }
}

.fix-more-body {
  display: flow-root;
}

.fixes[data-diagrams="open"] .fix-more > summary {
  display: none;
}

.flow {
  margin: 16px 0 0;
}

.fixes[data-diagrams="button"] .flow {
  margin-block-start: 24px;
}

.flow-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-body); /* 11:1 */
}

.flow-text strong {
  color: var(--ink);
  font-weight: 600;
}

.num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.flow-note {
  margin-block-start: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--gray);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

.flow-note-list {
  display: grid;
  gap: 4px;
}

.flow-note-list li {
  position: relative;
  padding-inline-start: 16px;
}

.flow-note-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.65em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.flow-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* Steps: a vertical rail on phones, a row read right-to-left on desktop */

.steps {
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
  padding-block-end: 26px;
  counter-increment: step;
}

/* the step number in a circle: the order reads at a glance */
.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* connector to the next step, ending in a small arrow (downward on phones) */
.step::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 34px 6px;
  inline-size: 28px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1.5 1.5l4.5 5 4.5-5%27 fill=%27none%27 stroke=%27%23838383%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center bottom / 12px 8px no-repeat,
    linear-gradient(#bcbcbc, #bcbcbc) center top / 1.5px calc(100% - 4px) no-repeat;
}

.step:last-child::after {
  display: none;
}

.step.is-final::before {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.step-title {
  padding-block-start: 2px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.step-body {
  margin-block-start: 4px;
}

/* The referendum fix: both conditions must hold */

.conds {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 6px;
  max-inline-size: 320px;
}

.cond {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--gray);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

.cond-and {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
}

/* Fix 01: two legitimate doors, three back exits closed */

.doors {
  display: grid;
  gap: 16px;
}

.door {
  padding: 22px 24px 24px;
  border-radius: var(--radius);
  background: var(--gray);
}

.door-q {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.door-num {
  margin-block: 6px 4px;
  line-height: 1;
}

.door-num > .num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* "(today: 61)" sits on the number line, so both boxes keep the same three rows */
.door-today {
  margin-inline-start: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
}

.door-unit {
  margin-inline-start: 6px;
  font-weight: 500;
}

.exits {
  margin-block-start: 40px;
}

/* fix 01: the Knesset decision vote. A "what if" of its own, so it sits in a light-blue panel
   (light blue 70% → 35% on white), apart from the gray doors and the open list of exits. */
.decision {
  margin-block-start: 40px;
  padding: 24px 20px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #e3ebfb 0%, #f1f5fd 100%);
}

.decision-q {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20px → 24px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.decision-lead {
  margin-block-start: 8px;
}

.decision .steps {
  margin-block-start: 24px;
}

.decision .flow-note {
  background: var(--white);
}

.exits-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.exits-list {
  display: grid;
  gap: 20px;
  margin-block-start: 16px;
}

.exit {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.exit-icon {
  inline-size: 24px;
  block-size: 24px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.exit-title {
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 640px) {
  /* the boxes share their rows, so both paragraphs start at the same height even if a question
     or a number line wraps in only one of them */
  .doors {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    row-gap: 0;
  }

  .door {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .door-q { grid-row: 1; }
  .door-num { grid-row: 2; }
  .door > .flow-text { grid-row: 3; }
}

@media (min-width: 900px) {
  .fix-more {
    grid-column: 2 / -1;
  }

  .flow {
    margin-block-start: 24px;
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 28px auto auto;
    padding-block-end: 0;
  }

  .step::before {
    grid-row: 1;
    justify-self: start;
  }

  .step::after {
    inset-block: 9px auto;
    inset-inline-start: 36px;
    inset-inline-end: -20px;
    inline-size: auto;
    block-size: 10px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 12%27%3E%3Cpath d=%27M6.5 1.5l-5 4.5 5 4.5%27 fill=%27none%27 stroke=%27%23838383%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") left center / 8px 12px no-repeat,
      linear-gradient(#bcbcbc, #bcbcbc) right center / calc(100% - 4px) 1.5px no-repeat;
  }

  .step-title {
    grid-row: 2;
    padding-block-start: 10px;
  }

  /* once a diagram is open, the explanation moves under the title so it reads in order */
  .fix:has(.fix-more[open]) .fix-text {
    grid-column: 2 / -1;
    max-inline-size: none; /* the full line while the diagram is open */
  }

  /* while a diagram folds (main.js), the explanation already takes its closed place, so the
     text and the panel move as one motion */
  .fix.is-closing:has(.fix-more[open]) .fix-text {
    grid-column: auto;
    max-inline-size: 58ch;
  }

  .step-body {
    grid-row: 3;
  }

  .flow-note {
    margin-block-start: 24px;
    inline-size: fit-content;
  }

  .exits-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
  }

  .decision {
    padding: 32px 36px 36px;
  }

  .decision .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Documents: Apple homepage tiles (proportions measured on apple.com). Square, no rounded corners,
   12px seams. Text from the top: title, subhead, a quiet callout, then two small buttons. Below
   it, the "product shot": the document itself as a stack of paper, a real page on top and as
   thick as the document is long. Two tiles plain, two with a soft gradient rising from below. */

.docs {
  display: grid;
  gap: 12px;
  margin-block-start: clamp(28px, 1.4rem + 1.4vw, 48px);
  margin-inline: calc(var(--gutter) * -1); /* edge to edge on phones, like Apple's tiles */
}

.doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding-block-start: clamp(44px, 2.4rem + 1vw, 54px);
  background: var(--gray);
  color: var(--ink);
  text-align: center;
}

/* Apple's iPad Air tile: the colour sits at the top and fades down to near white */
/* blue 26% → 17% → 6% on white, then the plain tile gray */
.doc--blue {
  background: linear-gradient(180deg, #c7d6f6 0%, #dae4f9 30%, #eef2fb 62%, #f5f6f9 100%);
}

/* gold 50% → 33% → 14% → 5% on white */
.doc--gold {
  background: linear-gradient(180deg, #ecdcbc 0%, #f2e8d2 30%, #f8f3ea 62%, #fcfaf6 100%);
}

/* on the tinted tops the outline button takes a deeper shade of the same blue (4.5:1 or more) */
.doc--blue .doc-btn--line,
.doc--gold .doc-btn--line {
  border-color: var(--blue-deep);
  color: var(--blue-deep);
}

.doc-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 24px;
}

.doc-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.125rem); /* 28px → 34px */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.doc-desc {
  margin-block-start: 4px;
  font-family: var(--font-display); /* the lighter display face, as Apple sets its subheads */
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16px → 18px */
  font-weight: 400;
  line-height: 1.25;
}

.doc-meta {
  margin-block-start: 6px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.doc-meta .dot {
  margin-inline: 7px;
}

.doc-meta [dir="ltr"] {
  unicode-bidi: isolate;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 16px;
}

/* Apple's tile buttons: small pills, 36px to look at, 44px to tap; on hover both fill completely */
.doc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 34px;
  padding-inline: 15px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.doc-btn::after {
  content: "";
  position: absolute;
  inset: -5px -2px; /* 44px tap area */
}

.doc-btn--fill {
  background: var(--blue);
  color: var(--white);
}

.doc-btn--line {
  background: transparent;
  color: var(--blue);
}

.doc-btn--fill:hover,
.doc-btn--line:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: var(--white);
}

/* The paper stack. Geometry is physical (left/top), not logical: it is a drawing, not text.
   The top face is a real page; the front and side edges are page lines; under it a soft shadow. */
.doc-visual {
  flex: 1;
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: 0;
  perspective: 1600px;
}

.paper {
  --t: 8px; /* thickness: grows with the page count */
  position: relative;
  inline-size: min(48%, 260px);
  aspect-ratio: 500 / 707;
  margin-block-start: -4%;
  transform-style: preserve-3d;
  transform: rotateX(52deg) rotateZ(-34deg);
  transition: transform 900ms var(--ease-out);
}

.paper--1 { --t: 1.5px; }
.paper--13 { --t: 8px; }
.paper--14 { --t: 8.5px; }
.paper--48 { --t: 23.5px; }

.paper-top {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  outline: 0.5px solid rgb(0 0 0 / 0.06);
}

.paper-edge {
  position: absolute;
  background: repeating-linear-gradient(var(--edge-dir), #fdfbfb 0 1px, #e4dcdb 1px 2px);
}

.paper-edge--front {
  --edge-dir: to bottom;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--t);
  transform-origin: top;
  transform: rotateX(-90deg);
}

.paper-edge--side {
  --edge-dir: to left;
  top: 0;
  bottom: 0;
  right: 100%;
  width: var(--t);
  transform-origin: right;
  transform: rotateY(-90deg);
  filter: brightness(0.9);
}

.paper-shadow {
  position: absolute;
  inset: 2%;
  background: rgb(45 30 30 / 0.34);
  filter: blur(14px);
  transform: translateZ(calc(var(--t) * -1 - 1px)) translate(-4%, 5%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .doc:hover .paper {
    transform: rotateX(48deg) rotateZ(-30deg) translateZ(16px);
  }
}

@media (min-width: 700px) {
  .docs {
    grid-template-columns: 1fr 1fr;
    margin-inline: 0;
  }

  .doc {
    aspect-ratio: 1 / 1;
  }
}

.share {
  margin-block-start: clamp(28px, 1.4rem + 1vw, 40px);
}

/* ---------- Form ---------- */

.join {
  display: grid;
  gap: clamp(32px, 1.6rem + 1.6vw, 52px);
}

.join-intro .lead {
  margin-block-start: 20px;
  color: var(--ink-2);
}

@media (min-width: 960px) {
  .join {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 64px;
    align-items: start;
  }

  .join-intro {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 32px);
  }
}

.form {
  display: grid;
  gap: 24px;
}

.field {
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  border: 0;
}

.field-row {
  display: grid;
  gap: 24px;
}

@media (min-width: 600px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field > label,
.choices legend {
  font-weight: 500;
  font-size: 0.9375rem;
}

.choices legend {
  margin-block-end: 8px;
}

.optional {
  font-weight: 400;
  color: var(--ink-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 12px 14px;
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input[dir="ltr"] {
  text-align: left;
}

textarea {
  min-block-size: 128px;
  resize: vertical;
  line-height: 1.5;
}

input:hover,
textarea:hover {
  border-color: var(--ink);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(38 99 220 / 0.28);
}

[aria-invalid="true"] {
  border-color: var(--error) !important;
}

.choice-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 600px) {
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 52px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 160ms ease;
}

.choice:hover {
  border-color: var(--slate);
}

.choice:has(input:checked) {
  border-color: var(--blue);
}

input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--blue);
  cursor: pointer;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-block-size: 48px;
  padding-block: 12px;
  font-weight: 400;
  cursor: pointer;
}

.consent input {
  margin-block-start: 3px;
}

.field-error {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--error);
}

.field-error::before {
  content: "";
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
}

.form-submit .btn {
  inline-size: 100%;
}

@media (min-width: 600px) {
  .form-submit .btn {
    inline-size: auto;
    padding-inline: 36px;
  }
}

.form-status:empty {
  display: none;
}

.form-status {
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--ink-2);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 500;
}

/* ---------- FAQ ---------- */

.faq {
  margin-block-start: clamp(28px, 1.4rem + 1.4vw, 44px);
  border-block-start: 1px solid var(--rule);
}

.faq-item {
  border-block-end: 1px solid var(--rule);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-block-size: 48px;
  padding-block: 17px;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  font-weight: 500;
  line-height: 1.4;
}

.faq-chevron {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: var(--icon-gray);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms var(--ease);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-item > summary:hover .faq-chevron {
  stroke: var(--ink);
}

.faq-body {
  display: flow-root;
}

.faq-a {
  display: grid;
  gap: 12px;
  max-inline-size: 70ch;
  padding-block: 0 26px;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--ink-body);
}

.faq-a a:not(.faq-link) {
  color: var(--link);
  text-underline-offset: 3px;
}

.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  color: var(--link);
  font-weight: 400;
  text-decoration: none;
}

.faq-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-link .icon {
  inline-size: 18px;
  block-size: 18px;
}

.faq-more {
  margin-block-start: clamp(24px, 1.2rem + 1vw, 36px);
}

/* pill link with a circle icon at the end (Apple "… ⊕" style) */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding-block: 8px;
  padding-inline: 20px 12px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  transition: background-color 240ms var(--ease);
}

.pill-link:hover {
  background: var(--mist-hover);
}

/* ---------- Notice at the point of collection (form) ---------- */

.form-notice {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.form-notice a {
  color: var(--link);
  font-weight: 400;
  text-underline-offset: 3px;
}

/* ---------- Legal pages ---------- */

.legal {
  max-inline-size: calc(780px + 2 * var(--gutter));
  padding-block: clamp(40px, 2rem + 3vw, 80px);
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.legal-updated {
  margin-block-start: 10px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.legal h2 {
  margin-block-start: 40px;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
}

.legal p,
.legal li {
  line-height: 1.7;
}

.legal h2 + p,
.legal h2 + ul,
.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-block-start: 12px;
}

.legal ul {
  display: grid;
  gap: 6px;
  padding-inline-start: 1.25em;
  list-style: disc;
}

.legal li::marker {
  color: var(--blue);
}

.legal a {
  color: var(--link);
  text-underline-offset: 3px;
}

.legal-summary {
  margin-block-start: 28px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--gray);
}

.legal-summary ul {
  margin-block-start: 8px;
}

/* draft notice and fill-in markers: temporary, must be gone before going public */
.draft-banner {
  margin-block-start: 24px;
  padding: 14px 16px;
  border: 1.5px solid #c9341f;
  border-radius: 12px;
  background: #fff1ef;
  color: #8a1f12;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.55;
}

.todo {
  padding-inline: 4px;
  border-radius: 4px;
  background: #fff1ef;
  color: #8a1f12;
  font-weight: 600;
  outline: 1px dashed #c9341f;
}

/* ---------- Closing & footer ---------- */

.closing {
  padding-block: clamp(64px, 3rem + 4vw, 120px);
  background:
    radial-gradient(ellipse 32% 38% at 50% 106%, rgb(73 125 226 / 0.6), transparent 72%),
    radial-gradient(ellipse 66% 78% at 50% 114%, rgb(38 99 220 / 0.9), transparent 72%),
    radial-gradient(ellipse 50% 40% at 50% -12%, rgb(38 99 220 / 0.16), transparent 70%),
    #000;
  color: var(--white); /* light gray: ~13:1 on the dark field, still a step below the white verbs */
  text-align: center;
}

.closing-statement {
  font-family: var(--font-display);
  /* Sized so each of the three phrases fits on one line, up to 50px. */
  font-size: clamp(1.5rem, calc((100vw - 2 * var(--gutter)) / 12.5), 3.5rem); /* up to 56px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.closing-statement > span {
  display: block;
}

/* the repeated verbs carry the rhythm: שומרים / מתקנים / ממשיכים */
.closing-statement b {
  font-weight: 800; /* all white and bold; the verbs a step heavier */
}

.closing-blue {
  margin-block-start: 0.12em;
}

.closing {
  --mark-color: var(--blue-glow);
}

.site-footer {
  background: var(--white);
  border-block-start: 1px solid var(--rule);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 24px;
}

/* social profiles: gray monochrome glyphs (Apple-style), 44px tap area each */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-inline: -11px; /* optical: icon edges line up with the footer text */
}

.social-link {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  color: var(--icon-gray);
  transition: color 200ms var(--ease);
}

.social-link svg {
  inline-size: 19px;
  block-size: 19px;
  fill: currentColor;
}

.social-link .ig-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
}

.social-link[href]:hover {
  color: var(--ink);
}

/* placeholder until the profile address is supplied: looks final, is not a link */
.social-link:not([href]) {
  cursor: default;
}

.footer-logo {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  inline-size: 132px;
}

.footer-logo img {
  inline-size: 100%;
  block-size: auto;
}

.footer-provenance {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.footer-utility {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  padding-block: 4px 16px;
  border-block-start: 1px solid var(--rule);
}

.footer-utility a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-copy {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  font-size: 0.75rem;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .footer-copy {
    margin-inline-start: auto; /* end of the row on wide screens; under the links on phones */
  }
}

.footer-utility a:hover {
  color: var(--ink);
}

.footer-utility .icon {
  inline-size: 18px;
  block-size: 18px;
}

/* ---------- Motion ---------- */

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.reveal {
  animation: reveal 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.reveal:nth-child(2) { animation-delay: 70ms; }
.reveal:nth-child(3) { animation-delay: 140ms; }
.reveal:nth-child(4) { animation-delay: 210ms; }

.sr {
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
}

.sr-pending {
  opacity: 0;
  transform: translateY(28px);
}

/* ---------- Accessibility panel (main.js) ----------
   Built into the site, not a third-party overlay: it only switches classes on <html>, and nothing is
   stored, so a setting lasts for the open page. The site itself meets IS 5568 without it. */

html.a11y-text-1 {
  font-size: 112.5%;
}

html.a11y-text-2 {
  font-size: 125%;
}

html.a11y-contrast {
  --ink-body: #101010;
  --ink-2: #101010;
  --ink-3: #101010;
  --slate: #3b3b3b;
  --slate-light: #6b6b6b;
  --rule: #8a8a8a;
}

html.a11y-links a:not(.btn):not(.doc-btn):not(.pill-link) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

html.a11y-still .sr-pending {
  opacity: 1;
  transform: none;
}

html.a11y-still.has-light .h-sweep {
  background: none;
  color: var(--ink);
  animation: none;
}

.a11y-fab {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  z-index: 60;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 4px 16px rgb(16 16 16 / 0.2);
  cursor: pointer;
}

.a11y-fab:hover {
  background: #2b2b2b;
}

.a11y-fab svg {
  inline-size: 28px;
  block-size: 28px;
  fill: currentColor;
}

.a11y-panel {
  position: fixed;
  inset-block-end: 76px;
  inset-inline-end: 16px;
  z-index: 60;
  inline-size: min(20rem, calc(100vw - 32px)); /* grows with the chosen text size */
  max-block-size: calc(100vh - 100px);
  overflow-y: auto;
  padding: 18px;
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 40px rgb(16 16 16 / 0.18), 0 0 0 1px rgb(16 16 16 / 0.06);
  font-size: 1rem;
  line-height: 1.4;
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.a11y-label {
  margin-block: 14px 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}

.a11y-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.a11y-sizes .a11y-btn {
  padding-inline: 4px;
}

.a11y-toggles {
  display: grid;
  gap: 6px;
}

.a11y-btn {
  min-block-size: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.a11y-toggles .a11y-btn {
  text-align: start;
}

.a11y-btn:hover {
  border-color: var(--slate);
}

.a11y-btn[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.a11y-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 12px;
  font-size: 0.875rem;
}

.a11y-foot button,
.a11y-foot a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* room under the footer, so the panel button never covers its last line */
.site-footer {
  padding-block-end: 64px;
}

@media print {
  .a11y-fab,
  .a11y-panel {
    display: none !important;
  }

  .sr-pending {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 404 ---------- */

.notfound {
  display: grid;
  place-items: center;
  min-block-size: 70vh;
  padding-block: 64px;
  text-align: center;
}

.notfound p {
  margin-block-start: 16px;
  color: var(--ink-2);
}

.notfound .btn {
  margin-block-start: 28px;
}