/* mivtzah marketing site — deliberately dependency-free.
   No build step, no framework, no Supabase client. If this file ever needs a
   bundler, something has gone wrong with the premise. */

/* Palette follows the Mivtzah logo package (brand-sheet.html): the mark is a
   gold ayin, so the accent is gold rather than the indigo this site launched
   with. Indigo next to a gold wordmark read as two different products.

   --brand is the sheet's light/print gold #A16207. It is a FILL colour only:
   white on it is 4.92:1, so buttons pass AA, but as text on paper it is 4.45:1
   and fails. Anything that is text (links, the Latin wordmark, focus glyphs)
   uses --brand-deep (6.68:1). The brighter #E8A33D from the sheet is the
   DARK-surface value and is not used here at all.

   --ink-faint is the sheet's own --sec (#6B6357, 5.26:1 on paper): the earlier
   #7a7264 was 4.29:1 and failed on the pilot line, the section labels, the
   footer and the notes. */
:root {
  color-scheme: light;
  --ink: #1c1813;
  --ink-soft: #4e4739;
  --ink-faint: #6b6357;
  --rule: #e6ded0;
  --rule-strong: #d3c8b4;
  /* form-control edge: 3.9:1 on white, so the input boundary itself clears
     the 3:1 non-text minimum (the hairline --rule does not) */
  --edge: #8a8172;
  --paper: #f7f3ea;
  --paper-raised: #ffffff;
  --brand: #a16207;
  --brand-deep: #7c4a05;
  --brand-wash: #fbf3e3;
  --ok: #15803d;
  --ok-wash: #dcfce7;
  --warn: #b45309;
  --warn-wash: #fef3c7;
  --danger: #b91c1c;
  --measure-read: 66ch;
  --measure-lede: 52ch;
  /* Written by lang.js from a ResizeObserver on .masthead; the fallback is the
     one-row desktop height so anchors clear the sticky bar even before JS. */
  --masthead-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* the masthead is sticky, so an anchor jump would otherwise park the section
     heading underneath it. Computed, not guessed: see --masthead-h. */
  scroll-padding-top: calc(var(--masthead-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Heebo', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

h1, h2, h3 {
  font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

/* One scale, wide in the middle: h1 3.5 → h2 2 → h3 1.15 (rem). The earlier
   1.7 / 1.03 pair made every section heading read like a subhead. */
h1 { font-size: clamp(2.3rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2rem); }
h3 { font-size: 1.15rem; }

a { color: var(--brand-deep); }

button { touch-action: manipulation; }

.he {
  font-family: 'Frank Ruhl Libre', serif;
  direction: rtl;
  unicode-bidi: isolate;
}

.wrap {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper-raised);
  font-weight: 500;
  text-decoration: none;
}

.skip:focus-visible { top: 12px; outline-color: var(--paper-raised); }

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

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
}

/* wraps: at ~800px the nav used to overflow its row, squashing "Sponsor a
   bochur" onto two lines and pushing the language toggle off the edge */
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-height: 68px;
  padding-block: 10px;
}

/* The logo is the Hebrew wordmark -- the ayin of מבצע doubling as a checkmark.
   "Mivtzah" sits BESIDE it rather than inside the lockup: the brand rules keep
   the lockup Hebrew-only, but this site is English-primary and its readers are
   hanhala and donors who should not have to transliterate the product's name.
   The image is decorative (alt="") so the link's accessible name is the one
   word "Mivtzah", not "מבצע Mivtzah". `order` pins it to the start even when
   the nav beside it flips to RTL. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  order: -1;
}

.wordmark img {
  height: 25px;
  width: auto;
  display: block;
}

/* "Mivtzah" is set in deep gold rather than flat ink so the two halves of the
   banner read as one thing. Both gradient stops are text-safe on this paper
   (#7c4a05 6.68:1, #8f5606 5.4:1); the mid gold #a16207 is a fill colour and
   is kept out of text.

   background-clip:text needs a fallback -- if it is unsupported the transparent
   fill would leave an invisible word, so the color is set first and only made
   transparent inside @supports. */
.wordmark-latin {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wordmark-latin {
    background: linear-gradient(100deg, var(--brand-deep) 0%, #8f5606 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* The one motion moment the brand sheet allows: the ayin stamps in on load, the
   same spring as marking a row. Entrance only, nothing loops, and the Latin word
   does not move (the sheet says "nowhere else"). */
@keyframes wordmark-stamp {
  0%   { opacity: 0; transform: scale(0.82) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.wordmark img {
  transform-origin: 60% 70%;
  animation: wordmark-stamp 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wordmark:hover .wordmark-latin,
.wordmark:focus-visible .wordmark-latin { text-decoration: underline; text-decoration-color: var(--brand-deep); text-underline-offset: 3px; }

.masthead nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 0.94rem;
}

.masthead nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

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

/* `.masthead nav a` outranks `.btn-primary`, so the header's waitlist button was
   taking the muted nav ink instead of white -- dark text on a solid accent. */
.masthead nav a.btn-primary,
.masthead nav a.btn-primary:hover { color: #fff; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: translateY(1px); }

/* --brand fill: white on #a16207 is 4.92:1 (AA for normal text, verified in
   the critique's contrast table). Hover deepens rather than lightens so the
   ratio only ever goes up. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }

.btn-quiet {
  border-color: var(--rule-strong);
  color: var(--ink);
  background: var(--paper-raised);
}
.btn-quiet:hover { border-color: var(--ink-faint); }

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

.hero { padding-block: 80px 64px; }

.hero h1 { max-width: 19ch; }

.hero .lede {
  margin: 22px 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: var(--measure-lede);
}

.hero .actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* The pilot offer. It used to be the faintest, smallest text on the page; it is
   the most persuasive line, so it is now body-size ink-soft with a gold tick. */
.hero-offer {
  margin: 22px 0 0;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--brand);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: var(--measure-lede);
}

.hero-offer strong { color: var(--ink); font-weight: 600; }

.note {
  font-size: 0.9rem;
  color: var(--ink-faint);
  max-width: var(--measure-read);
}

/* ---------- sections ---------- */

section { padding: 64px 0; }

.rule-top { border-top: 1px solid var(--rule); }

.prose { max-width: var(--measure-read); }
.prose p { color: var(--ink-soft); }
.prose h2 { margin-bottom: 14px; }
.prose h3 { margin: 34px 0 8px; }

/* Section heading that stands alone above a list (How it works, Step by step,
   Questions we get). A real <h2>; the numbered eyebrows are gone. */
.section-head { margin-bottom: 28px; }

/* ---------- split (Record): prose beside the demo card ---------- */

.split {
  display: grid;
  gap: 32px 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: start;
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- screenshots (Show) ---------- */
/* Unlike .demo-card above, these are the running app, not illustrative markup.
   Captured from the demo yeshiva, whose roster is invented -- a real pilot's
   bochurim must never appear on a public page.
   Both are captured at the size they ship at: a screenshot scaled down in the
   browser blurs its own text, which on a page about a board people read across
   a beis medrash is the wrong thing to show. */
.shots {
  margin: 34px 0 0;
  display: grid;
  gap: 20px 28px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
  align-items: end;
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  /* the app's own paper, so the shot does not sit on a seam */
  background: var(--paper-raised);
}

.shots figcaption {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .shots { grid-template-columns: 1fr; justify-items: start; }
  .shots .shot-phone { max-width: 230px; }
}

@media (prefers-contrast: more) {
  .shots img { border-color: var(--ink); }
}

/* ---------- band (Sponsor): full-bleed raised wash ---------- */
/* Sponsorship is the nav's first promise, so it does not sit as one of four
   identical stripes: it gets the page's one raised band and the goal card at
   full width. */
.band {
  background: var(--paper-raised);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 72px 0;
}

.band .band-grid {
  display: grid;
  gap: 32px 56px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 760px) {
  .band .band-grid { grid-template-columns: 1fr; }
}

.band .demo-card {
  background: var(--paper);
  max-width: none;
  padding: 24px 26px;
}

.band .actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- steps: a numbered list, not three equal cards ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure-read);
  counter-reset: step;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.step:first-child { border-top: 0; padding-top: 0; }

.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand-deep);
  font-size: 0.86rem;
  font-weight: 600;
  margin-top: 2px;
}

.step h3 { margin: 0; align-self: center; }
.step p { margin: 0; color: var(--ink-soft); }

/* ---------- screenshots inside a step (Guide) ---------- */
/* grid-column: 2 because .step::before owns column 1 for the number, and a
   figure left to flow would sit under the circle instead of the prose.
   Stacked rather than side by side: .steps is capped at the reading measure,
   and two-up inside it shrinks the wall shot below the point where the board
   can be read -- which on a page explaining the board defeats the picture. */
.step-shots {
  grid-column: 2;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.step-shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
}

.step-shots .shot-phone { max-width: 205px; }

.step-shots figcaption {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-faint);
}

@media (prefers-contrast: more) {
  .step-shots img { border-color: var(--ink); }
}

.more-link { margin-top: 30px; }

/* ---------- call to action ---------- */

.cta {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 44px 38px;
  text-align: center;
}

.cta p {
  color: var(--ink-soft);
  max-width: var(--measure-lede);
  margin: 13px auto 26px;
}

/* ---------- status callout ---------- */

.callout {
  border-inline-start: 3px solid var(--brand);
  background: var(--brand-wash);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.callout strong { color: var(--ink); }

/* ---------- waitlist / privacy page chrome ---------- */

.form-intro {
  color: var(--ink-soft);
  margin: 14px 0 34px;
  max-width: var(--measure-lede);
}

.page-intro { color: var(--ink-soft); margin: 14px 0 0; max-width: var(--measure-lede); }

.privacy h2 { margin: 40px 0 10px; font-size: 1.35rem; }
.privacy p, .privacy li { color: var(--ink-soft); }
.privacy ul { padding-inline-start: 22px; }
.privacy .updated { font-size: 0.9rem; color: var(--ink-faint); margin-top: 40px; }

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

footer {
  border-top: 1px solid var(--rule);
  padding: 34px 0 calc(46px + env(safe-area-inset-bottom));
  font-size: 0.9rem;
  color: var(--ink-faint);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: baseline;
}

footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }

/* The funding credit: full-width last line so it never fights the nav for
   space, and its link is visible as one (the only line here people may
   actually want to follow out). */
footer .funding { flex-basis: 100%; }
footer .funding a { text-decoration: underline; }

/* ---------- a11y + motion ---------- */

a:focus-visible,
.btn:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 5px;
}

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

@media (max-width: 640px) {
  .hero { padding-block: 52px 44px; }
  section { padding: 48px 0; }
  .band { padding: 52px 0; }
  .cta { padding: 34px 22px; }
  .masthead nav { gap: 15px; font-size: 0.89rem; }
}

/* Phone masthead: two rows, never three. Row one is the wordmark, the language
   toggle and the primary button; row two is the links. The nav element becomes
   display:contents so its children can be ordered into those rows without
   changing the DOM (the landmark survives display:contents in current
   engines). The Latin "Mivtzah" beside the lockup is the one thing that does
   not fit: it is visually hidden here (still read out, still the link's name)
   and the Hebrew wordmark, which is the brand's actual mark, carries the row.
   In Hebrew the whole bar runs RTL so the links read right-to-left, and the
   wordmark is pushed to the far left with an auto margin so it stays where the
   eye expects a logo. */
@media (max-width: 560px) {
  .masthead .wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px 10px;
    padding-block: 10px;
    padding-inline: 20px;
    min-height: 0;
  }
  .masthead nav { display: contents; }
  .masthead .wrap::after { content: ''; flex-basis: 100%; height: 0; order: 2; }
  .wordmark { order: -1; margin-inline-end: auto; }
  .wordmark-latin {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .lang-toggle { order: 0; }
  .lang-toggle button { padding: 6px 9px; font-size: 0.78rem; min-height: 28px; }
  .masthead nav .btn {
    order: 1;
    padding: 8px 13px;
    font-size: 0.85rem;
  }
  .masthead nav a:not(.btn) { order: 3; font-size: 0.85rem; white-space: nowrap; }

  html[data-lang='he'] .masthead .wrap { direction: rtl; }
  html[data-lang='he'] .wordmark { order: 2; margin-inline-end: 0; margin-inline-start: auto; }
  html[data-lang='he'] .masthead .wrap::after { order: 2; }
  html[data-lang='he'] .lang-toggle { order: 1; }
  html[data-lang='he'] .masthead nav .btn { order: 0; }
}

/* ---------- language toggle ---------- */
/* English-primary with a full Hebrew version behind a tab. Copy is authored as
   paired .i18n-en / .i18n-he elements; the inactive one is hidden here rather
   than in JS, so there is no flash of both and no-JS/crawler default is
   English. See site/lang.js. */

html:not([data-lang='he']) .i18n-he { display: none; }
html[data-lang='he'] .i18n-en { display: none; }

/* Hebrew body copy wants a little more line height to breathe, and the display
   face for headings matches the existing site tokens. */
html[data-lang='he'] body { line-height: 1.75; }
html[data-lang='he'] h1,
html[data-lang='he'] h2,
html[data-lang='he'] h3 { font-family: 'Frank Ruhl Libre', Georgia, serif; }

/* Numbers stay Western digits in both languages -- and stay LTR even inside an
   RTL run, or "5786" and page ranges render reversed. */
html[data-lang='he'] .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* `display` on a class beats the UA stylesheet's [hidden] { display: none },
   so the hidden attribute silently does nothing without this line. */
.lang-toggle[hidden] { display: none; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-raised);
}

.lang-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1;
  padding: 8px 12px;
  min-height: 32px;
  color: var(--ink-soft);
}

.lang-toggle button[aria-pressed='true'] {
  background: var(--brand);
  color: #fff;
}

.lang-toggle button:not([aria-pressed='true']):hover { color: var(--ink); background: var(--brand-wash); }

.lang-toggle button:focus-visible {
  outline-offset: -3px;
  outline-color: var(--ink);
  border-radius: 999px;
}

/* ב"ה, top of marketing surfaces. Lives inside .wrap so it aligns to the content
   edge, and follows the reading direction: right in English, left in Hebrew. */
.bh {
  margin: 0;
  padding-top: 10px;
  text-align: end;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- demo cards (v3) ---------- */
/* Illustrative UI, not live data. Kept dir=ltr in both languages per handoff §1 --
   names and tabular marks read better LTR; only the labels around them translate. */

.demo-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 420px;
}

.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-title { font-weight: 600; font-size: 0.98rem; }

.demo-live {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ok);
  background: var(--ok-wash);
  border-radius: 999px;
  padding: 3px 9px;
}

.demo-sub {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.demo-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.92rem;
}

.demo-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}

.mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 600;
}

.mark-p { background: var(--ok-wash); color: var(--ok); }
.mark-l { background: var(--warn-wash); color: var(--warn); }

.demo-bar {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.demo-bar span {
  display: block;
  height: 100%;
  background: var(--brand);
}

.demo-big { font-family: 'Frank Ruhl Libre', serif; font-size: 1.8rem; font-weight: 600; line-height: 1.1; margin: 6px 0 0; }

/* ---------- waitlist form ---------- */

.wl-form { max-width: 420px; margin-top: 8px; }

.wl-field { margin-bottom: 18px; }

.wl-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 500;
}

.wl-field input,
.wl-field select {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--paper-raised);
  color: var(--ink);
}

.wl-field input::placeholder { color: var(--ink-faint); opacity: 1; }

.wl-field input:focus-visible,
.wl-field select:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 1px;
  border-color: var(--brand-deep);
  border-radius: 9px;
}

.wl-field input[aria-invalid='true'] { border-color: var(--danger); }

/* inline error under the field it belongs to */
.wl-error {
  display: none;
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--danger);
}
.wl-error:not(:empty) { display: block; }

.wl-req { color: var(--brand-deep); }

.wl-optional {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-inline-start: 6px;
}

/* honeypot: off-screen, not display:none, so a naive bot still fills it */
.wl-hp {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wl-submit { display: inline-flex; align-items: center; gap: 10px; }

.wl-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: wl-spin 700ms linear infinite;
}
.wl-spinner[hidden] { display: none; }
@keyframes wl-spin { to { transform: rotate(360deg); } }

.form-status { font-size: 0.95rem; min-height: 1.4em; margin-top: 14px; max-width: var(--measure-lede); }
.form-status.pending { color: var(--ink-faint); }
.form-status.ok { color: var(--ok); font-weight: 500; }
.form-status.err { color: var(--danger); }

/* after a successful send the form stays visible, read-only, echoing the
   address, with an "edit" link that unlocks it again */
.wl-form.is-done .wl-field input,
.wl-form.is-done .wl-field select { background: var(--paper); color: var(--ink-soft); }
.wl-form.is-done .wl-submit { display: none; }
.wl-edit { font-size: 0.9rem; }

.wl-privacy { font-size: 0.9rem; color: var(--ink-faint); margin: 18px 0 0; max-width: var(--measure-lede); }

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

/* <details> rather than scripted accordions: it works before JS runs, it is
   keyboard-operable for free, and browser find-in-page opens the panel that
   holds the match, which a div-based accordion silently cannot do. */
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  padding-inline-end: 34px;
  position: relative;
  font-weight: 500;
  color: var(--ink);
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--brand-deep);
}

.faq details[open] summary::after { content: "\2212"; }

.faq summary:hover { color: var(--brand-deep); }

.faq summary:focus-visible { outline-offset: 0; border-radius: 6px; }

.faq details p {
  margin: 0 0 18px;
  padding-inline-end: 34px;
  color: var(--ink-soft);
}

/* ---------- print ---------- */
/* The guide is the thing a mashgiach prints. Black ink on white, no chrome,
   every answer open, and link targets written out. */
@media print {
  :root { --paper: #fff; --paper-raised: #fff; --ink: #000; --ink-soft: #000; --ink-faint: #333; --rule: #bbb; }
  @page { margin: 18mm; }
  html { scroll-padding-top: 0; }
  body { font-size: 11pt; line-height: 1.5; padding: 0; }
  .masthead, .skip, .lang-toggle, .cta, section:has(> .wrap > .cta), .btn, footer nav, .wl-form, .noprint { display: none !important; }
  section { padding: 18pt 0; break-inside: avoid-page; }
  .band { border: 0; padding: 18pt 0; }
  .wrap { max-width: none; padding: 0; }
  h1, h2, h3 { break-after: avoid-page; }
  .step { break-inside: avoid; }
  .step::before { border: 1px solid #000; background: none; color: #000; }
  .faq details { break-inside: avoid; }
  .faq details::details-content { content-visibility: visible; display: block; }
  .faq summary::after { display: none; }
  .faq details p { display: block; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .wordmark img { animation: none; }
  .print-only { display: block !important; }
  .demo-card { border-color: #000; }
}

.print-only { display: none; }