@charset "UTF-8";
/* =============================================================================
   מושכות — base.css
   Design tokens, font faces, reset, RTL foundations, accessibility state hooks.
   Owned by: Foundation. Loaded FIRST, before components.css / landing.css /
   pages.css.

   Everything here is authored with CSS logical properties (inline-start /
   inline-end / block-start / block-end). The document is `dir="rtl"`, so
   "inline-start" resolves to the RIGHT edge. Never use left/right in this site.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Fabs (FbAbsolutiHeb) — the brand typeface.
   Exactly three weights exist. Never request 400/600/700: the browser would
   synthesise them and Hebrew would smear.
   The capital "I" in fabs-LIght.ttf is the real filename. Do not "fix" it.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fabs";
  src: url("../fonts/fabs-LIght.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fabs";
  src: url("../fonts/fabs-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fabs";
  src: url("../fonts/fabs-extra-bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Belt and braces for any native control the kit has not replaced outright
     (range, progress, a checkbox in a browser that ignores `appearance: none`).
     Rust, so nothing can ever render in the OS blue. */
  accent-color: #b35830;

  /* ---- 2.1 Palette — raw brand values -------------------------------------
     Every hex below is copied verbatim from the product's own token block
     (app/src/app/globals.css). Nothing else may enter this site. */

  /* Web-admin surface — the site's light chrome */
  --cream:            #f8f4ed;  /* page background */
  --charcoal:         #383c3f;  /* primary text */
  --rust:             #b35830;  /* THE action colour */
  --soft:             #f6efe5;  /* subtle warm surface */

  /* Product / PWA palette — depth, device screens, richer sections */
  --rust-deep:        #834331;
  --rust-deepest:     #5e2e21;
  --cream-warm:       #f4e6d8;
  --tan:              #e9d8c4;
  --cocoa:            #2e1d14;
  --chocolate:        #330d02;
  --ink-soft:         #6b5446;
  --ink-faint:        #9c8472;
  --hairline:         #f0e7da;
  --ochre:            #ca9025;  /* the single highlight */
  --olive:            #505d2f;  /* seasoning */
  --teal:             #89acad;  /* rare */

  /* Device-bezel greys, copied verbatim from the product's own
     `.jc-device-frame` in globals.css. They render a physical phone, not brand
     surface, and appear nowhere else on the site. */
  --bezel:            #1c1c1e;
  --bezel-edge:       #3a3a3c;

  /* Neutral utilities, also from the product's token block */
  --line:             #e7e0d5;  /* --border   */
  --line-strong:      #e9d8c4;  /* = --tan, for scrollbars and heavier rules */
  --surface-muted:    #f1ece3;  /* --muted    */
  --ink-muted:        #77716a;  /* --muted-foreground */
  --white:            #ffffff;
  --white-warm:       #fffdf9;  /* --card inside the PWA */
  --on-rust:          #fdfaf6;  /* --primary-foreground */

  /* Alpha derivations of the above (never new hues) */
  --rust-a08:         rgba(179, 88, 48, 0.08);
  --rust-a14:         rgba(179, 88, 48, 0.14);
  --rust-a24:         rgba(179, 88, 48, 0.24);
  --cocoa-a06:        rgba(46, 29, 20, 0.06);
  --cocoa-a10:        rgba(46, 29, 20, 0.10);
  --cocoa-a16:        rgba(46, 29, 20, 0.16);
  --glass-fill:       rgba(255, 250, 244, 0.58);
  --glass-fill-strong:rgba(255, 250, 244, 0.78);
  --glass-edge:       rgba(255, 255, 255, 0.55);
  /* Modal scrim. Cocoa, not black: a neutral scrim over a warm cream page
     reads grey and cold, and the whole site is warm. */
  --scrim:            rgba(46, 29, 20, 0.36);

  /* ---- 2.2 Semantic aliases ------------------------------------------------
     Sections and components consume THESE, so high-contrast mode can retune
     the whole site by overriding a handful of variables.

     CONTRAST CONTRACT (sRGB, measured against the two page fields --bg #f8f4ed
     and --bg-warm #f6efe5). Every token used for TEXT clears 4.5:1 at any size:
       --text        #383c3f  10.15 / 9.75
       --text-2      #6b5446   6.42 / 6.17
       --text-3      #6b5446   6.42 / 6.17
       --brand-ink   #834331   6.81 / 6.54
     Tier 3 is a real third ink, not a repeat of tier 2. No raw hex in the brand
     list sits in the gap between #6b5446 (6.42:1) and the 4.5:1 floor: the
     product's --muted-foreground #77716a reaches only 4.40:1 and --ink-faint
     #9c8472 only 3.22:1, so neither can carry text. Tier 3 is therefore an
     ALPHA DERIVATION of tier 2 against the page field — the same technique the
     block above already uses for --rust-a08 and friends, and it introduces no
     new hue. 87% ink-soft over the page measures 4.73:1 on --bg #f8f4ed, 4.60:1
     on --bg-warm #f6efe5 and 5.19:1 on white, so it clears 4.5:1 on every
     surface tier 3 is ever used on, while reading a visible step lighter than
     body copy. The plain --ink-soft declaration in front of it is the fallback
     for anything without color-mix(). --ink-faint survives as --border-strong,
     where 3:1 is the whole requirement. */
  --bg:               var(--cream);
  --bg-warm:          var(--soft);
  --bg-deep:          var(--cream-warm);
  --surface:          var(--white);
  --text:             var(--charcoal);
  --text-2:           var(--ink-soft);
  --text-3:           var(--ink-soft);
  --text-3:           color-mix(in srgb, var(--ink-soft) 87%, var(--bg));
  /* --brand is a FILL (rust reaches 4.63:1 against --on-brand, so solid rust
     buttons pass). --brand-ink is the same family one step darker, and is what
     brand-coloured TEXT and icons on light surfaces must use: rust #b35830 is
     only 4.40:1 on cream, #834331 is 6.81:1. */
  --brand:            var(--rust);
  --brand-ink:        var(--rust-deep);
  --brand-ink-strong: var(--rust-deepest);
  --brand-strong:     var(--rust-deep);
  --brand-deepest:    var(--rust-deepest);
  --on-brand:         var(--on-rust);
  --accent:           var(--ochre);
  --border:           var(--line);
  /* A control edge that has to be *seen* (WCAG 1.4.11 wants 3:1). --line is a
     1.20:1 hairline: fine as decoration on a card, not enough on a button. */
  --border-strong:    var(--ink-faint);   /* 3.22:1 on cream, 3.53:1 on white */
  --focus:            var(--rust);

  /* ---- 2.3 Type ------------------------------------------------------------
     A fluid modular scale: ~1.15 at 360px opening to ~1.26 at 1440px and holding
     1.26 to 2560. Preferred values are pre-solved per range, and every range
     meets the next at exactly the same pixel size, so no width shows a step.

     The APPLIED ladder (components.css §2) walks these rungs one at a time:
       .h1 5xl · .h2 4xl · .h3 3xl · .h4 2xl · .h5 xl · .h6 lg
     which is a uniform 1.26 between every pair of headings at 1440 and 1.15 at
     360. .display sits deliberately OUTSIDE that ladder, one extra rung clear of
     .h1 (7xl over 5xl, 1.59), because it is a hero device rather than a heading
     rank; that single wide step is the only non-uniform gap in the system. */
  --font-sans: "Fabs", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  /* Latin-only runs that must NOT wear the Hebrew brand face: the browser-chrome
     URL bar in the desktop frame and the App Store / Google Play trademarks. */
  --font-ltr:  ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Numeric runs. Fabs carries real digits in all three weights, so this stays
     the brand face; it exists as the single lever if a numeral face is ever
     added. Consumed by .num/[data-num], .stat__value, the phone status bar and
     the a11y stepper readout. */
  --font-num:  var(--font-sans);

  /* Mobile minimums re-solved as a clean geometric run. The previous set put
     --fs-4xl at 27px and --fs-3xl at 26px, one pixel apart, so on a 360px screen
     .h2 and .h3 rendered as the same size and the heading ladder collapsed
     exactly where the reader can least afford it. Every rung below is ~1.15 from
     its neighbour at 360 and ~1.26 at 1440.

     Every vw term is multiplied by --a11y-scale, and that is not decoration.
     The accessibility widget works by multiplying the ROOT font size, which
     scales rem and nothing else. A clamp whose preferred value is vw-dominated
     therefore barely moves: at 1440px, 150% text used to grow the display size
     by 9% while body grew by 43%, so the display:body ratio collapsed from 6.00
     to 4.59 and the visitor who most needs bigger text got a flattened
     hierarchy on the largest type. Scaling the vw term by the same multiplier
     keeps every step of the ladder in proportion at every width. */
  --fs-3xs: clamp(0.6875rem, 0.667rem + 0.09vw * var(--a11y-scale),  0.75rem);   /* 11 → 12 */
  --fs-2xs: clamp(0.75rem,  0.729rem + 0.09vw * var(--a11y-scale),  0.8125rem);  /* 12 → 13 */
  --fs-xs:  clamp(0.875rem, 0.854rem + 0.09vw * var(--a11y-scale),  0.9375rem);  /* 14 → 15 */
  --fs-sm:  clamp(0.9375rem, 0.917rem + 0.09vw * var(--a11y-scale), 1rem);       /* 15 → 16 */
  --fs-md:  clamp(1rem,     0.958rem + 0.19vw * var(--a11y-scale),  1.125rem);   /* 16 → 18 */
  --fs-lg:  clamp(1.125rem,  1.0417rem + 0.3704vw * var(--a11y-scale), 1.375rem);   /* 18 →  22 */
  --fs-xl:  clamp(1.3125rem, 1.1875rem + 0.5556vw * var(--a11y-scale), 1.6875rem);  /* 21 →  27 */
  --fs-2xl: clamp(1.5rem,    1.2917rem + 0.9259vw * var(--a11y-scale), 2.125rem);   /* 24 →  34 */
  --fs-3xl: clamp(1.75rem,   1.4375rem + 1.3889vw * var(--a11y-scale), 2.6875rem);  /* 28 →  43 */
  --fs-4xl: clamp(2rem,      1.5417rem + 2.037vw  * var(--a11y-scale), 3.375rem);   /* 32 →  54 */
  --fs-5xl: clamp(2.3125rem, 1.6667rem + 2.8704vw * var(--a11y-scale), 4.25rem);    /* 37 →  68 */
  --fs-6xl: clamp(2.6875rem, 1.7917rem + 3.9815vw * var(--a11y-scale), 5.375rem);   /* 43 →  86 */
  --fs-7xl: clamp(3.0625rem, 1.8333rem + 5.463vw  * var(--a11y-scale), 6.75rem);    /* 49 → 108 */

  /* Line-height. Hebrew sits taller in the em box than Latin and has real
     descenders (ק ן ך ף ץ), so every value here is looser than a Latin default. */
  --lh-display: 1.12;
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-body:    1.75;
  --lh-loose:   1.95;

  /* Tracking. Hebrew takes neither positive nor negative tracking: letterspacing
     is a Latin small-caps convention and on Hebrew it reads as a rendering
     fault, so --ls-label is a hairline optical loosening and nothing more.
     Eyebrows and field labels earn their rank from size, weight and colour. */
  --ls-display: -0.004em;
  --ls-normal:  0;
  --ls-label:   0.01em;

  /* Measure — the brief caps lines at 75 characters. */
  --measure:        62ch;
  --measure-narrow: 46ch;
  --measure-wide:   72ch;

  /* ---- 2.4 Spacing — a strict 8px system (4 and 12 are the only half-steps) */
  --space-0:  0;
  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  0.75rem;  /*  12 */
  --space-4:  1rem;     /*  16 */
  --space-5:  1.5rem;   /*  24 */
  --space-6:  2rem;     /*  32 */
  --space-7:  2.5rem;   /*  40 */
  --space-8:  3rem;     /*  48 */
  --space-9:  4rem;     /*  64 */
  --space-10: 5rem;     /*  80 */
  --space-11: 6rem;     /*  96 */
  --space-12: 8rem;     /* 128 */
  --space-13: 10rem;    /* 160 */

  /* Rhythm helpers */
  --section-y:      clamp(4rem, 7.5vw, 8.5rem);
  --section-y-lg:   clamp(5rem, 10vw, 11rem);
  --stack:          var(--space-5);

  /* ---- 2.5 Layout ---------------------------------------------------------- */
  --container:        1240px;
  --container-wide:   1440px;
  --container-narrow: 780px;
  --gutter:           clamp(1.25rem, 3.5vw, 3rem);
  --header-h:         4rem;   /* 64px — mobile */
  --header-h-lg:      4.75rem;/* 76px — ≥ 900px */

  /* ---- 2.6 Radii — tops out at 32px, matching the login card ---------------- */
  --r-xs:   0.375rem;  /*  6 */
  --r-sm:   0.625rem;  /* 10 */
  --r-md:   0.875rem;  /* 14 */
  --r-lg:   1.125rem;  /* 18 */
  --r-xl:   1.375rem;  /* 22 */
  --r-2xl:  1.75rem;   /* 28 */
  --r-3xl:  2rem;      /* 32 — the ceiling: the product's login card */
  --r-pill: 999px;
  --r-full: 50%;

  /* ---- 2.7 Elevation — the product's shadow language ------------------------
     Every shadow token is a COMPLETE shadow value, never the keyword `none`.
     Components compose them (`box-shadow: var(--shadow-sm), var(--ring-hairline)`)
     and `none` is illegal inside a comma-separated list: one `none` and the
     browser throws away the whole declaration, ring included. --shadow-none is
     the transparent no-op to reach for instead. */
  --shadow-none:  0 0 rgba(0, 0, 0, 0);
  --shadow-xs:    0 1px 2px rgba(46, 29, 20, 0.08);
  --shadow-sm:    0 3px 14px -5px rgba(46, 29, 20, 0.18);
  --shadow-md:    0 12px 32px -14px rgba(70, 45, 33, 0.32);   /* = .jc-card */
  --shadow-lg:    0 24px 60px -22px rgba(40, 25, 15, 0.32);
  --shadow-xl:    0 40px 90px -25px rgba(40, 25, 15, 0.4);    /* = login card */
  --shadow-rust:  0 16px 34px -14px rgba(179, 88, 48, 0.55);
  /* The login card's `ring-1 ring-black/5` restated in warm ink, so a white card
     on cream keeps a readable edge instead of relying on blur alone. */
  --ring-hairline: inset 0 0 0 1px var(--cocoa-a10);
  --blur-glass:   blur(14px) saturate(108%);
  --blur-heavy:   blur(36px);                                  /* = login backdrop */

  /* ---- 2.8 Motion ---------------------------------------------------------- */
  --ease-brand:  cubic-bezier(0.22, 1, 0.36, 1);  /* the product's sheet easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 800ms;

  /* ---- 2.9 Layers ---------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     1;
  --z-raised:  10;
  --z-sticky:  20;
  --z-header:  60;
  --z-drawer:  70;
  --z-a11y:    90;
  --z-top:    100;

  /* ---- 2.10 Accessibility-widget state ------------------------------------- */
  --a11y-scale: 1;
}

@media (min-width: 900px) {
  :root { --header-h: var(--header-h-lg); }
}

/* The scale is pre-solved for 360 → 1440 and tops out exactly at 1440. The
   column keeps growing past that (--container goes to 1360px above 1900px), so
   left alone a 108px headline sits in an ever wider measure and the hero loses
   weight on a large monitor. A second, much gentler ramp takes over from 1440
   up. Every base value below is solved so the two ramps meet at exactly the same
   pixel size at 1440px: no step, no jump.

   EVERY heading rung ramps, by the SAME 1.14 factor from 1440 to 2560. The
   earlier version ramped only 4xl…7xl, which stretched the h2:h3 gap from 1.26
   at 1440 to 1.78 at 2560: the ladder came apart on exactly the screens that
   show most of it. Ramping all of lg…7xl by one shared factor keeps every step
   at 1.26 across the whole range.

   --fs-md and below deliberately do NOT ramp. Body copy and UI text are already
   the right size at 18px and growing them on a big monitor just reads as a
   zoomed page; letting the headings pull away from a fixed body size is what
   makes a large screen feel composed rather than magnified. */
@media (min-width: 1440px) {
  :root {
    --fs-lg:  clamp(1.375rem,  1.1275rem  + 0.275vw  * var(--a11y-scale), 1.5675rem);   /*  22 →  25.1 */
    --fs-xl:  clamp(1.6875rem, 1.38375rem + 0.3375vw * var(--a11y-scale), 1.92375rem);  /*  27 →  30.8 */
    --fs-2xl: clamp(2.125rem,  1.7425rem  + 0.425vw  * var(--a11y-scale), 2.4225rem);   /*  34 →  38.8 */
    --fs-3xl: clamp(2.6875rem, 2.20375rem + 0.5375vw * var(--a11y-scale), 3.06375rem);  /*  43 →  49.0 */
    --fs-4xl: clamp(3.375rem,  2.7675rem  + 0.675vw  * var(--a11y-scale), 3.8475rem);   /*  54 →  61.6 */
    --fs-5xl: clamp(4.25rem,   3.485rem   + 0.85vw   * var(--a11y-scale), 4.845rem);    /*  68 →  77.5 */
    --fs-6xl: clamp(5.375rem,  4.4075rem  + 1.075vw  * var(--a11y-scale), 6.1275rem);   /*  86 →  98.0 */
    --fs-7xl: clamp(6.75rem,   5.535rem   + 1.35vw   * var(--a11y-scale), 7.695rem);    /* 108 → 123.1 */
  }
}

/* -----------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  /* The accessibility widget's font-size control multiplies the root size, so
     every rem-based token in the site scales with it. */
  font-size: calc(100% * var(--a11y-scale));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-5));
  -webkit-tap-highlight-color: var(--rust-a14);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-block-size: 100dvh;
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No horizontal scrollbar at any width, 360 → 2560. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;          /* kills headline orphans where supported */
  overflow-wrap: break-word;
}

p, li, dd, blockquote, figcaption {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

ul, ol { padding-inline-start: 0; list-style: none; }
ul[class], ol[class] { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

img, picture, video, canvas, svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
svg { fill: currentColor; }

/* This is the RESET only. The controls themselves — text inputs, textarea,
   select, checkbox, radio, file, fieldset, labels — are fully styled in
   components.css §15, and tables / details / blockquote and the rest of the
   long-form elements in §16. Nothing on this site is left at a browser default. */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; inline-size: 100%; }        /* styled: §16.1 */

hr {
  border: 0;
  block-size: 1px;
  background-color: var(--border);
}

[hidden] { display: none !important; }

/* Latin / numeric runs inside Hebrew: bidi-safe and tabular where it matters.
   `.num` also pins the numeral face, so figures never fall through to a
   fallback that has different digit widths from Fabs. */
[dir="ltr"] { unicode-bidi: isolate; }
.num, [data-num] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Latin strings that are not brand voice — URLs, e-mail, file names. */
.ltr-run {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-ltr);
}

/* -----------------------------------------------------------------------------
   4. Focus, selection, scrollbars
   -------------------------------------------------------------------------- */
:focus { outline: none; }

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

::selection {
  background-color: var(--rust);
  color: var(--on-rust);
  text-shadow: none;
}

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { inline-size: 12px; block-size: 12px; }
  ::-webkit-scrollbar-track { background-color: var(--soft); }
  ::-webkit-scrollbar-thumb {
    background-color: var(--line-strong);
    border: 3px solid var(--soft);
    border-radius: var(--r-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--line-strong) var(--soft); scrollbar-width: thin; }
}

/* -----------------------------------------------------------------------------
   5. Lenis (assets/vendor/lenis.min.js) — required host styles
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body { block-size: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* -----------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-measure        { max-inline-size: var(--measure); }
.u-measure-narrow { max-inline-size: var(--measure-narrow); }
.u-measure-wide   { max-inline-size: var(--measure-wide); }
.u-center         { margin-inline: auto; }
.u-text-center    { text-align: center; }
.u-text-start     { text-align: start; }
.u-nowrap         { white-space: nowrap; }
.u-no-scroll      { overflow: hidden; }

.u-stack > * + * { margin-block-start: var(--stack); }

/* -----------------------------------------------------------------------------
   7. Accessibility-widget effects (root level).
   a11y.js writes these attributes onto <html> and persists them. The widget's
   own chrome lives in components.css.
   -------------------------------------------------------------------------- */

/* 7.1 Underline links — a genuine, visible change everywhere. */
html[data-a11y-underline="on"] a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}
html[data-a11y-underline="on"] a:hover { text-decoration-thickness: 2px; }

/* 7.2 High contrast — retunes the semantic tokens, flattens every translucent
   surface, and thickens every hairline. Stays strictly inside the palette.

   The shadows below are TRANSPARENT, not `none`. Half the kit composes
   `box-shadow: var(--shadow-*), var(--ring-hairline)`; `none, inset …` is an
   invalid box-shadow list, so a `none` here would silently delete the boundary
   of every card, device frame and panel on the page — the exact opposite of
   what this mode is for. A transparent shadow drops out of the paint while
   keeping the list valid, so the 2px charcoal ring below survives. */
html[data-a11y-contrast="on"] {
  --bg:            var(--white);
  --bg-warm:       var(--white);
  --bg-deep:       var(--white);
  --surface:       var(--white);
  --text:          var(--cocoa);
  --text-2:        var(--cocoa);
  --text-3:        var(--cocoa);
  --brand:         var(--rust-deepest);
  --brand-ink:     var(--rust-deepest);
  --brand-ink-strong: var(--chocolate);
  --brand-strong:  var(--chocolate);
  --brand-deepest: var(--chocolate);
  --accent:        var(--rust-deepest);
  --border:        var(--charcoal);
  --border-strong: var(--charcoal);
  --line:          var(--charcoal);
  --line-strong:   var(--charcoal);
  --focus:         var(--chocolate);
  --surface-muted: var(--white);
  --soft:          var(--white);
  --cream:         var(--white);
  --glass-fill:        var(--white);
  --glass-fill-strong: var(--white);
  --glass-edge:        var(--charcoal);
  --scrim:             rgba(46, 29, 20, 0.72);
  --shadow-xs:   var(--shadow-none);
  --shadow-sm:   var(--shadow-none);
  --shadow-md:   var(--shadow-none);
  --shadow-lg:   var(--shadow-none);
  --shadow-xl:   var(--shadow-none);
  --shadow-rust: var(--shadow-none);
  --ring-hairline: inset 0 0 0 2px var(--charcoal);
  --blur-glass: none;
}
html[data-a11y-contrast="on"] body { background-color: var(--white); }
html[data-a11y-contrast="on"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Photographic layers get pushed back so text always wins. */
html[data-a11y-contrast="on"] img:not([src$=".svg"]),
html[data-a11y-contrast="on"] [data-decorative-photo] {
  filter: contrast(1.15) saturate(0.55);
}

/* 7.3 Stop animations — kills CSS motion. main.js additionally tears down
   Lenis, ScrollTrigger and the magnetic buttons. */
html[data-a11y-motion="off"],
html[data-a11y-motion="off"] * ,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* -----------------------------------------------------------------------------
   8. prefers-reduced-motion — the OS-level equivalent of 7.3
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   9. Print — legal pages get printed by real farm owners.
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .site-header, .site-footer__nav, .a11y-fab, .a11y-panel,
  [data-print="hide"] { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  * { box-shadow: none !important; }

  /* Legal pages are the ones that actually get printed, and they are tables,
     disclosure lists and quoted clauses. */
  table { break-inside: auto; }
  thead { display: table-header-group; }
  tr, blockquote, details, .table-wrap { break-inside: avoid; }
  th, td { border: 1px solid #000 !important; padding: 4pt 6pt !important; }
  thead th { background: #eee !important; }
  blockquote { border-inline-start: 2pt solid #000 !important; }
  summary::after { content: none !important; }
  .table-wrap { overflow: visible !important; }
  input, textarea, select { border: 1px solid #000 !important; }
}