@charset "UTF-8";
/* =============================================================================
   מושכות — landing.css
   Owned by: Landing (index.html + assets/js/landing.js).
   Requires base.css and components.css, in that order.

   Nothing here redefines a token. Every colour is a semantic alias or a
   documented brand value from base.css §2.1, every length walks the 8px
   spacing scale, and every radius comes from the radii block. RTL logical
   properties only: "inline-start" is the RIGHT edge in this document.

   Contents
     1.  Page-level helpers
     2.  Hero
     3.  Problem → shift
     4.  Signature moment: three apps, one system
     5.  Phone-screen ports  (.scr — student PWA / guide PWA)
     6.  Office web-app port (.office / .board / .rep)
     7.  Smart scheduling
     8.  Horses
     9.  Pension
     10. Reports
     11. Payments (roadmap)
     12. Roles
     13. CTA
     14. High-contrast overrides
   ============================================================================= */

/* =============================================================================
   1. PAGE-LEVEL HELPERS
   ============================================================================= */

/* The <symbol> sprite. Never painted, never measured, never focusable. */
.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Photographic beds (hero, CTA) declare their own over-scan below: the image
   over-fills its box by the parallax travel so the layer never shows its own
   edge at either end of the scroll, and the box clips. */

/* =============================================================================
   2. HERO
   The product's login screen restated as a page: full-bleed warm photograph,
   `bg-white/30 backdrop-blur-[36px]` over it, then ONE white card at 32px with
   the login card's own shadow and a generous inset so the photo breathes on
   every side.
   ============================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Slide under the sticky header so the photograph is genuinely full-bleed;
     the padding puts it back for the content. */
  margin-block-start: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) clamp(4rem, 8vw, 6.5rem);
  min-block-size: max(44rem, 100svh);
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: hidden;
  background-color: var(--bg-deep);
}
.hero__bg picture { display: block; }
.hero__bg-img {
  position: absolute;
  inset-block-start: -8%;
  inset-inline: 0;
  inline-size: 100%;
  block-size: 116%;
  object-fit: cover;
  object-position: 50% 38%;
}

.hero__inner { position: relative; z-index: var(--z-base); }

.hero__card {
  --hero-pad: clamp(1.75rem, 3.5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: var(--hero-pad);
  min-block-size: min(74vh, 42rem);
}
@media (min-width: 900px) {
  .hero__card {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    /* The photo column runs edge to edge: no padding on the card's block axis
       or on its inline-end (= the LEFT edge in RTL), so the plate reaches the
       card's own rounded corner and is clipped by it. The copy column carries
       the padding itself so the text still breathes. */
    padding-inline-end: 0;
    padding-block: 0;
  }
  .hero__copy { padding-block: var(--hero-pad); }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  padding-block-end: clamp(0.5rem, 2vw, 2rem);
}
@media (min-width: 900px) {
  .hero__copy { padding-block-end: clamp(1.75rem, 3.5vw, 3.5rem); }
}

.hero__logo {
  inline-size: auto;
  block-size: clamp(2.25rem, 4.4vw, 3.25rem);
  margin-block-end: calc(var(--space-2) * -1);
}
/* On phones the logo already sits in the sticky header, so the big hero logo
   is redundant and just pushes the headline down. Desktop keeps it. */
@media (max-width: 899px) {
  .hero__logo { display: none; }
}

.hero__eyebrow { margin-block-start: calc(var(--space-1) * -1); }

/* The headline rides .h1's rung, not .display's: the hero card is a two-column
   composition and a 108px line would break its own measure at 1440. The reveal
   is a masked two-line rise, so each line needs its own block box, and the
   negative margin takes back the overflow padding those boxes need for Fabs's
   descenders. */
.hero__title { margin-block: calc(var(--space-2) * -1); }
.hero__title .reveal-line { padding-block: 0.06em; }

.hero__lede { max-inline-size: 34ch; }

.hero__actions { gap: var(--space-3) var(--space-4); }

.hero__store { margin-block-start: var(--space-1); }
.hero__store .store-badges__note { max-inline-size: 46ch; }

/* The transparent cutout from the same shoot the login screen uses. Bleeds off
   the card's inline-end and block-end edges so it reads as a photograph the
   card is standing in front of, not a pasted asset. */
.hero__figure {
  position: relative;
  display: none;
  align-self: stretch;
  min-block-size: 20rem;
}
@media (min-width: 900px) {
  .hero__figure { display: block; }
}
.hero__figure-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  object-fit: cover;              /* fills the column; the card crops the rest */
  object-position: 42% 52%;       /* keeps the horse in frame on a tall crop */
}

/* Scroll cue. It sits on the frosted photograph rather than on a flat field,
   and the arena floor under it is dark enough that plain ink would fall under
   4.5:1, so it carries the same frosted plate the hero's own buttons do. */
.hero__cue {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--text);
  transition:
    color var(--dur-2) ease,
    background-color var(--dur-2) ease,
    translate var(--dur-3) var(--ease-brand);
}
.hero__cue:hover { color: var(--brand-ink); background-color: rgba(255, 255, 255, 0.9); translate: 0 3px; }
.hero__cue-text {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
}
.hero__cue-rail {
  position: relative;
  display: block;
  inline-size: 2px;
  block-size: 2rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background-color: var(--cocoa-a10);
}
.hero__cue-rail i {
  position: absolute;
  inset-inline: 0;
  block-size: 40%;
  border-radius: var(--r-pill);
  background-color: var(--brand);
  animation: cue-run 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-run {
  0%   { translate: 0 -110%; }
  55%  { translate: 0 160%; }
  100% { translate: 0 160%; }
}

/* =============================================================================
   3. PROBLEM → SHIFT
   ============================================================================= */
.shift__head { max-inline-size: var(--measure-wide); }

.shift__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 820px) {
  .shift__grid { grid-template-columns: 1fr 1fr; }
}

.shift__card { padding: clamp(1.5rem, 3vw, 2.5rem); }
.shift__card--before { background-color: var(--bg-warm); }
.shift__card--after  { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--rust-a24); }

.shift__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  padding-block: 0.375rem;
  padding-inline: 0.875rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.4;
  border-radius: var(--r-pill);
  background-color: var(--surface-muted);
  color: var(--text-2);
  box-shadow: var(--ring-hairline);
}
.shift__tag--brand {
  background-color: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-rust);
}

.shift__list { display: flex; flex-direction: column; gap: var(--space-4); }
.shift__list li {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-inline-start: 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--text-2);
}
/* A hollow dot for "today", a drawn tick for "with מושכות". Both marks are
   pure CSS: no emoji, no glyph, and nothing that could be read as punctuation
   (an em-rule bullet next to Hebrew copy reads as an em-dash, which this site
   does not use). */
.shift__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15rem;
  inset-block-start: 0.62em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--r-full);
}
.shift__list--check li::before {
  inset-inline-start: 0;
  inset-block-start: 0.42em;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: 0;
  border-radius: var(--r-xs);
  background-color: var(--brand);
  clip-path: polygon(14% 46%, 4% 58%, 40% 88%, 96% 20%, 84% 8%, 38% 64%);
}

/* =============================================================================
   4. SIGNATURE MOMENT — three apps, one system
   Default (no JS, narrow viewport, or motion off): three chapters read top to
   bottom, each with its device under it. landing.js adds .is-pinned only when
   the viewport is wide enough AND motion is allowed, and removes it again the
   moment either stops being true.
   ============================================================================= */
.apps__intro { margin-block-end: clamp(2rem, 4vw, 3.5rem); }

.apps__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-content: start;
}

.apps__step {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--brand-ink);
}
.apps__chapter-title { margin-block-start: var(--space-2); }
.apps__chapter-body { margin-block-start: var(--space-4); max-inline-size: 46ch; }

.apps__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-5);
}
.apps__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--r-pill);
  background-color: var(--rust-a08);
  color: var(--brand-ink);
  box-shadow: var(--ring-hairline);
}
.apps__facts .icon { color: var(--brand-ink); }

.apps__chapter-link { margin-block-start: var(--space-5); }

.apps__device {
  display: flex;
  justify-content: center;
  align-items: center;
}
.apps__device--office { inline-size: 100%; }
.apps__device--office .device-desktop { inline-size: 100%; }

/* ---- pinned mode --------------------------------------------------------- */
/* 420vh minus the sticky pin leaves ~3.2 screens of scroll for three acts, so
   each one lasts about a screen: long enough to read, short enough not to feel
   like the page has stopped responding. */
.apps.is-pinned .apps__track { block-size: 420vh; }

.apps.is-pinned .apps__pin {
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
}

.apps.is-pinned .apps__grid {
  inline-size: 100%;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  perspective: 1700px;
  perspective-origin: 66% 50%;
}

.apps.is-pinned .apps__chapter {
  grid-area: 1 / 1;
  z-index: var(--z-raised);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-2xl);
  background-color: var(--glass-fill-strong);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  backdrop-filter: blur(20px) saturate(112%);
}
.apps.is-pinned .apps__chapter-body { font-size: var(--fs-sm); }

.apps.is-pinned .apps__device {
  grid-area: 1 / 2;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Both devices are also capped by the stage's HEIGHT. A phone is 413×872 and
   a browser frame 16:10, so each one's width is clamped to whatever keeps it
   inside a pin that is only as tall as the viewport allows. Without this a
   1200×660 laptop renders a frame taller than the stage it is standing in. */
.apps.is-pinned .apps__device--student .device-phone,
.apps.is-pinned .apps__device--guide .device-phone {
  --phone-w: min(100%, 21rem, calc((100svh - var(--header-h) - 4rem) * 0.4736));
}

/* The office frame is the widest object in the set, so on its chapter it spans
   the whole grid. It docks to the INLINE-START edge (physically right) and the
   chapter card crosses to the other side, because the office window carries its
   own app chrome — the nav rail — on its inline-start edge, which is exactly
   where the first two chapter cards sit. Docked the other way round the card
   covered the sidebar and a third of the board at every desktop width, so the
   one screen a farm owner actually buys was represented by a bare calendar
   grid. This way the reading edge (nav rail, time axis, the first days) is
   always clear and the card only ever laps the far end of the week. */
.apps.is-pinned .apps__device--office {
  grid-area: 1 / 1 / 2 / -1;
  justify-content: flex-start;
}
.apps.is-pinned .apps__chapter--wide {
  grid-area: 1 / 2;
  justify-self: end;            /* inline-end — physically the left edge */
  max-inline-size: 22rem;
}
.apps.is-pinned .apps__device--office .device-desktop {
  inline-size: min(100%, 62rem, calc((100svh - var(--header-h) - 5rem) * 1.55));
}
/* On the stage the office window renders at ~930px, so the port is designed
   against an 880px window rather than the 980px the reports section uses. Same
   markup, same structure; the whole thing simply reads at roughly life size
   instead of being shrunk to 95%. */
.apps__device--office .office { --ou: 0.11364cqw; }

@media (min-width: 1500px) {
  .apps.is-pinned .apps__grid { grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); }
  .apps.is-pinned .apps__device--student .device-phone,
  .apps.is-pinned .apps__device--guide .device-phone {
    --phone-w: min(100%, 22.5rem, calc((100svh - var(--header-h) - 4rem) * 0.4736));
  }
  .apps.is-pinned .apps__device--office .device-desktop {
    inline-size: min(100%, 68rem, calc((100svh - var(--header-h) - 5rem) * 1.55));
  }
  .apps.is-pinned .apps__chapter--wide { max-inline-size: 24rem; }
}

/* =============================================================================
   5. PHONE-SCREEN PORTS
   HTML/CSS recreations of the real PWA screens, not screenshots:
     · app/src/features/student-pwa/StudentHome.tsx  (+ StudentPwaShell header)
     · app/src/features/instructor-pwa/InstructorDailyView.tsx + LessonCard.tsx
       + InstructorHorsePrep.tsx
   Colours are the product's own `.jc-pwa` tokens as they exist in base.css:
   cocoa text, soft/faint ink, rust brand, the `.jc-card` glass recipe.

   SIZING. Everything below is expressed in --u, where 1 unit is one CSS pixel
   of the real 393px-wide screen. The device frame is a container (components.css
   §9.1) so 1cqi is 1% of its RENDERED width; --u therefore tracks the frame
   whatever size it is asked to render at, exactly like the frame's own chrome.
   Sizes are written as calc(N * var(--u)) with N = the real Tailwind pixel
   value, so a port can be checked against the component line by line.
   ============================================================================= */
.scr {
  --u: 0.2545cqi;              /* 1px on the real 393px screen */
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  color: var(--cocoa);
  font-weight: 300;
  line-height: 1.4;
  text-align: start;
  will-change: transform;
}

.scr__glyphs { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }

/* Shell header — px-5 pt-4 pb-4, greeting over name, bell + avatar. */
.scr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  flex: none;
  padding-inline: calc(20 * var(--u));
  padding-block: calc(16 * var(--u));
}
.scr__head-id { display: flex; flex-direction: column; min-inline-size: 0; }
.scr__hello {
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-faint);
}
.scr__name {
  font-size: calc(19 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  color: var(--cocoa);
  white-space: nowrap;
}
.scr__head-tools { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.scr__bell {
  display: grid;
  place-items: center;
  inline-size: calc(36 * var(--u));
  block-size: calc(36 * var(--u));
  border-radius: var(--r-full);
  background-color: rgba(255, 253, 249, 0.6);
  color: var(--ink-soft);
  box-shadow: var(--ring-hairline);
}
.scr__bell .icon { inline-size: calc(17 * var(--u)); block-size: calc(17 * var(--u)); }
.scr__avatar {
  display: grid;
  place-items: center;
  inline-size: calc(40 * var(--u));
  block-size: calc(40 * var(--u));
  border-radius: var(--r-full);
  background-image: linear-gradient(135deg, var(--rust-deep), var(--rust-deepest));
  color: var(--cream-warm);
  font-size: calc(13 * var(--u));
  font-weight: 500;
  box-shadow: 0 2px 10px -3px rgba(131, 67, 49, 0.4), 0 0 0 calc(2 * var(--u)) var(--white-warm);
}

.scr__body {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding-inline: calc(16 * var(--u));
  padding-block-end: calc(112 * var(--u));   /* clear of the floating nav */
}
.scr__body--guide { gap: calc(12 * var(--u)); padding-block-start: calc(4 * var(--u)); }

.scr__eyebrow {
  margin-block-end: calc(8 * var(--u));
  padding-inline: calc(4 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--ink-faint);
}
.scr__eyebrow--tile { margin-block-end: 0; font-size: calc(10 * var(--u)); padding-inline: 0; }

.scr__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin-block-end: calc(10 * var(--u));
  padding-inline: calc(4 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 800;
  color: var(--cocoa);
}
.scr__section-link {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 800;
  color: var(--rust-deep);
}
.scr__section-link .icon { inline-size: calc(14 * var(--u)); block-size: calc(14 * var(--u)); }

/* .jc-card, value for value (globals.css). */
.scr-card {
  border-radius: calc(26 * var(--u));
  background-color: rgba(255, 250, 244, 0.58);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 12px 32px -14px rgba(70, 45, 33, 0.32);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
}
.scr-card--hero { padding: calc(20 * var(--u)); }

.scr-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin-block-end: calc(12 * var(--u));
}
.scr-card__when {
  font-size: calc(22 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  color: var(--cocoa);
}
.scr-card__sub {
  margin-block: calc(4 * var(--u)) calc(16 * var(--u));
  font-size: calc(13 * var(--u));
  color: var(--ink-soft);
}

/* Lesson-type / status chips. The real app tints each type; the tints below are
   alpha derivations of the documented olive / teal / ochre / rust, so the same
   four functional families read the same way without inventing a hue. */
.scr-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  block-size: calc(24 * var(--u));
  padding-inline: calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-pill);
  background-color: var(--surface-muted);
  color: var(--ink-soft);
}
.scr-chip .icon { inline-size: calc(12 * var(--u)); block-size: calc(12 * var(--u)); stroke-width: 2.25; }
.scr-chip--olive { background-color: rgba(80, 93, 47, 0.16);    color: var(--olive); }
.scr-chip--teal  { background-color: rgba(137, 172, 173, 0.30); color: var(--cocoa); }
.scr-chip--ochre { background-color: rgba(202, 144, 37, 0.22);  color: var(--cocoa); }
.scr-chip--rust  { background-color: var(--rust-a14);           color: var(--rust-deep); }

.scr-rows { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.scr-row { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.scr-row__ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(32 * var(--u));
  block-size: calc(32 * var(--u));
  border-radius: var(--r-full);
  background-color: rgba(239, 229, 214, 0.9);
  color: var(--ink-soft);
}
.scr-row__ico .icon { inline-size: calc(15 * var(--u)); block-size: calc(15 * var(--u)); }
.scr-row__txt { font-size: calc(14 * var(--u)); color: var(--ink-soft); }
.scr-row__txt b { font-weight: 800; color: var(--cocoa); }

/* Two stat tiles: pack (glass) + credits (rust gradient). */
.scr-tiles { display: flex; gap: calc(12 * var(--u)); }
.scr-tile {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: calc(16 * var(--u));
  border-radius: calc(22 * var(--u));
  background-color: rgba(255, 250, 244, 0.58);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 12px 32px -14px rgba(70, 45, 33, 0.32);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
}
.scr-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  margin-block-end: calc(8 * var(--u));
}
.scr-tile__ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(28 * var(--u));
  block-size: calc(28 * var(--u));
  border-radius: var(--r-full);
  background-color: var(--rust-a08);
  color: var(--rust-deep);
}
.scr-tile__ico .icon { inline-size: calc(14 * var(--u)); block-size: calc(14 * var(--u)); stroke-width: 2; }
.scr-tile__body { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.scr-tile__title { font-size: calc(13 * var(--u)); font-weight: 800; color: var(--cocoa); }
.scr-tile__note { margin-block-start: calc(2 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.35; color: var(--ink-faint); }

.scr-tile--brand {
  background-image: linear-gradient(135deg, var(--rust-deep), var(--rust-deepest));
  background-color: var(--rust-deep);
  border-color: transparent;
  color: var(--cream-warm);
  box-shadow: 0 12px 28px -12px rgba(131, 67, 49, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.scr-tile--brand .scr__eyebrow--tile { color: rgba(244, 230, 216, 0.8); }
.scr-tile--brand .scr-tile__ico { background-color: rgba(255, 255, 255, 0.18); color: var(--cream-warm); }
.scr-tile--brand .scr-tile__note { color: rgba(244, 230, 216, 0.94); font-weight: 500; }
.scr-tile__big { display: flex; align-items: baseline; gap: calc(4 * var(--u)); line-height: 1; }
.scr-tile__big b { font-size: calc(28 * var(--u)); font-weight: 800; }
.scr-tile__big span { font-size: calc(13 * var(--u)); font-weight: 500; color: rgba(244, 230, 216, 0.9); }

/* Pack progress ring — the real one is a 64px SVG with a 6px stroke. It is
   drawn at 58 here: the tile is half a 393px screen, and the extra 6px is the
   difference between "כרטיסיית ספורט פרטי" wrapping to two lines and to four. */
.scr-ring {
  position: relative;
  flex: none;
  inline-size: calc(58 * var(--u));
  block-size: calc(58 * var(--u));
}
.scr-ring svg { inline-size: 100%; block-size: 100%; rotate: -90deg; }
.scr-ring circle { fill: none; stroke-width: 6; }
.scr-ring__track { stroke: var(--tan); }
.scr-ring__fill {
  stroke: var(--rust-deep);
  stroke-linecap: round;
  /* r = 29 → circumference 182.2; 6/10 filled. */
  stroke-dasharray: 109.3 72.9;
}
.scr-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.scr-ring__label b { font-size: calc(18 * var(--u)); font-weight: 800; color: var(--cocoa); }
.scr-ring__label i { font-size: calc(9 * var(--u)); font-style: normal; color: var(--ink-faint); }

/* Row lists inside a card (upcoming lessons / recent activity). */
.scr-list { overflow: hidden; }
.scr-list__row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-block-size: calc(58 * var(--u));
  padding-inline: calc(16 * var(--u));
  padding-block: calc(12 * var(--u));
}
.scr-list__row + .scr-list__row,
.scr-act + .scr-act { border-block-start: 1px solid var(--hairline); }
.scr-list__spacer { flex: 1; }
.scr-list__date { flex: none; font-size: calc(14 * var(--u)); font-weight: 800; color: var(--cocoa); }
.scr-list__time { flex: none; font-size: calc(14 * var(--u)); color: var(--ink-soft); }

.scr-act {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding-inline: calc(16 * var(--u));
  padding-block: calc(12 * var(--u));
}
.scr-act > span:last-child { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.scr-act b { font-size: calc(12.5 * var(--u)); font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.scr-act i { font-size: calc(11 * var(--u)); font-style: normal; color: var(--ink-faint); }

/* ---- guide screen -------------------------------------------------------- */
.scr-daynav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.scr-daynav__btn {
  display: grid;
  place-items: center;
  inline-size: calc(36 * var(--u));
  block-size: calc(36 * var(--u));
  border-radius: var(--r-md);
  color: var(--ink-soft);
}
.scr-daynav__btn .icon { inline-size: calc(20 * var(--u)); block-size: calc(20 * var(--u)); }
.scr-daynav__label { font-size: calc(14 * var(--u)); font-weight: 800; color: var(--cocoa); }

.scr-prep { overflow: hidden; border-radius: calc(16 * var(--u)); }
.scr-prep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding-inline: calc(16 * var(--u));
  padding-block: calc(12 * var(--u));
}
.scr-prep__title {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 800;
  color: var(--cocoa);
}
.scr-prep__title .icon { inline-size: calc(16 * var(--u)); block-size: calc(16 * var(--u)); }
.scr-prep__chev { color: var(--ink-soft); }
.scr-prep__sun  { color: var(--ochre); }
.scr-prep__count {
  padding-inline: calc(8 * var(--u));
  padding-block: calc(2 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 800;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--ink-soft);
}
.scr-prep__hint {
  margin-block-end: calc(6 * var(--u));
  padding-inline: calc(16 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 500;
  color: var(--ink-faint);
}
.scr-prep__list {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding-inline: calc(12 * var(--u));
  padding-block-end: calc(12 * var(--u));
}
.scr-prep__list li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding-inline: calc(10 * var(--u));
  padding-block: calc(8 * var(--u));
  border-radius: calc(12 * var(--u));
}
.scr-prep__box {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(24 * var(--u));
  block-size: calc(24 * var(--u));
  border-radius: var(--r-full);
  border: 1px solid var(--cocoa-a16);
  background-color: rgba(255, 255, 255, 0.7);
  color: transparent;
}
.scr-prep__box .icon { inline-size: calc(14 * var(--u)); block-size: calc(14 * var(--u)); stroke-width: 3; }
.scr-prep__name { flex: 1; font-size: calc(14 * var(--u)); font-weight: 800; color: var(--cocoa); }
.scr-prep__meta { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-soft); }
.scr-prep__meta b { font-weight: 500; padding-inline: calc(6 * var(--u)); border-radius: var(--r-pill); background-color: rgba(255, 255, 255, 0.6); }
.scr-prep__meta i { font-style: normal; }
.scr-prep__list li.is-done { background-color: rgba(80, 93, 47, 0.12); }
.scr-prep__list li.is-done .scr-prep__box { border-color: var(--olive); background-color: var(--olive); color: var(--cream-warm); }
.scr-prep__list li.is-done .scr-prep__name { color: var(--ink-faint); text-decoration: line-through; }

.scr-lessons { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }

/* LessonCard.tsx — one neutral base for every card, the TYPE carried by a tag. */
.scr-lesson {
  padding-inline: calc(12 * var(--u));
  padding-block: calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  border: 1px solid var(--hairline);
  background-color: rgba(250, 246, 240, 0.92);
  box-shadow: var(--shadow-xs);
}
.scr-lesson.is-current {
  box-shadow: var(--shadow-sm), 0 0 0 calc(2 * var(--u)) var(--rust-deep);
}
.scr-lesson__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.scr-lesson__left { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.scr-lesson__time { font-size: calc(14 * var(--u)); font-weight: 800; color: var(--cocoa); }
.scr-lesson__student { font-size: calc(14 * var(--u)); font-weight: 800; color: var(--cocoa); }
.scr-lesson__now {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  block-size: calc(22 * var(--u));
  padding-inline: calc(8 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 800;
  border-radius: var(--r-pill);
  background-color: var(--rust-deep);
  color: var(--cream-warm);
}
.scr-lesson__now i {
  inline-size: calc(6 * var(--u));
  block-size: calc(6 * var(--u));
  border-radius: var(--r-full);
  background-color: var(--cream-warm);
}
.scr-lesson__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-block-start: calc(6 * var(--u));
}
.scr-lesson__badges { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-block-start: calc(8 * var(--u)); }
.scr-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  block-size: calc(22 * var(--u));
  padding-inline: calc(8 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  border-radius: var(--r-pill);
  background-color: var(--rust-a08);
  color: var(--rust-deep);
}
.scr-badge .icon { inline-size: calc(11 * var(--u)); block-size: calc(11 * var(--u)); }

.scr-break { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-block: calc(2 * var(--u)); }
.scr-break__rule { flex: 1; block-size: 1px; background-color: var(--hairline); }
.scr-break__pill {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding-inline: calc(8 * var(--u));
  padding-block: calc(2 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 500;
  border-radius: var(--r-pill);
  background-color: rgba(239, 229, 214, 0.6);
  color: var(--ink-faint);
}
.scr-break__pill .icon { inline-size: calc(12 * var(--u)); block-size: calc(12 * var(--u)); }

/* ---- 5.1 legibility inside the ports -------------------------------------
   The real PWA uses --ink-faint (#9c8472) for its quietest labels, and inside
   the app — where that text renders at 11–12 real pixels on a phone held at
   reading distance — it is a deliberate, comfortable step down. On this page
   the SAME markup renders at 9–12 CSS px inside a scaled illustration, where
   #9c8472 measures 2.7–2.9:1 against the warm screen. `role="img"` keeps the
   frames out of the accessibility tree but it does not exempt visible text
   from WCAG 1.4.3, so every faint run inside a port is promoted one tier to
   --ink-soft (#6b5446 → 6.2:1). The hierarchy is still carried by size and
   weight, which is where it belongs at this scale.
   Kept as one block so the ports themselves stay a line-by-line port of the
   component and this is the only place that departs from it. */
.scr__hello,
.scr__eyebrow,
.scr-tile__note,
.scr-ring__label i,
.scr-act i,
.scr-prep__hint,
.scr-prep__count,
.scr-break__pill,
.scr-prep__list li.is-done .scr-prep__name { color: var(--ink-soft); }
.scr-tile--brand .scr__eyebrow--tile { color: rgba(244, 230, 216, 0.86); }
.scr-tile--brand .scr-tile__note { color: var(--cream-warm); }
/* The avatar paints its ink on a rust GRADIENT. Declaring the matching solid
   colour underneath keeps the contrast pair real (cream on rust-deep, 6.9:1)
   rather than resolving against whatever sits behind the element. */
.scr__avatar { background-color: var(--rust-deep); }

/* =============================================================================
   6. OFFICE WEB-APP PORT
   The office shell (sidebar + top bar) and ScheduleBoard.tsx: time axis on the
   inline-start edge, days flowing right→left, 15-minute rows, lessons as grid
   items with a coloured reading-edge band.

   The board's shipped palette is Tailwind's sky/emerald/violet/amber/rose set,
   which is outside this site's documented palette. The port therefore keeps the
   STRUCTURE exactly and re-tones the six lesson types onto the brand's own four
   functional colours (olive, teal, ochre, rust) the way the PWA's own
   lesson-type tokens already do.

   SIZING. --ou is one CSS pixel of a 980px-wide office window; the browser
   frame's screen is the container, so the whole port scales with the frame.
   ============================================================================= */
.office-frame .device-desktop__screen { container-type: inline-size; }

.office {
  --ou: 0.10204cqw;            /* 1px of a 980px-wide window */
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(190 * var(--ou)) minmax(0, 1fr);
  background-color: var(--bg);
  color: var(--text);
  font-weight: 300;
  /* An app screen, not a page of prose: it must not inherit the site's 1.75
     reading leading or every label in the port sits in a double-height box. */
  line-height: 1.35;
  text-align: start;
}

.office__side {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--ou));
  padding: calc(18 * var(--ou)) calc(14 * var(--ou));
  background-color: var(--bg-warm);
  border-inline-start: 0;
  border-inline-end: 1px solid var(--border);
}
.office__brand {
  padding-inline: calc(8 * var(--ou));
  font-size: calc(17 * var(--ou));
  font-weight: 800;
  color: var(--brand-ink);
}
.office__nav { display: flex; flex-direction: column; gap: calc(2 * var(--ou)); }
.office__nav li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--ou));
  padding-inline: calc(10 * var(--ou));
  padding-block: calc(8 * var(--ou));
  font-size: calc(12.5 * var(--ou));
  font-weight: 500;
  line-height: 1.2;
  border-radius: calc(10 * var(--ou));
  color: var(--text-2);
}
.office__nav .icon {
  inline-size: calc(15 * var(--ou));
  block-size: calc(15 * var(--ou));
  stroke-width: 1.8;
}
.office__nav li.is-active { background-color: var(--brand); color: var(--on-brand); }

.office__main { display: flex; flex-direction: column; min-inline-size: 0; }
.office__topbar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--ou));
  flex: none;
  padding-inline: calc(16 * var(--ou));
  block-size: calc(46 * var(--ou));
  border-block-end: 1px solid var(--border);
  background-color: var(--surface);
}
.office__title { font-size: calc(15 * var(--ou)); font-weight: 800; color: var(--text); }
.office__tabs {
  display: inline-flex;
  gap: calc(2 * var(--ou));
  padding: calc(2 * var(--ou));
  border-radius: var(--r-pill);
  background-color: var(--surface-muted);
}
.office__tabs i {
  padding-inline: calc(10 * var(--ou));
  padding-block: calc(3 * var(--ou));
  font-size: calc(11 * var(--ou));
  font-style: normal;
  font-weight: 500;
  border-radius: var(--r-pill);
  color: var(--text-2);
}
.office__tabs i.is-active { background-color: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.office__range {
  margin-inline-start: auto;
  font-size: calc(12 * var(--ou));
  font-weight: 500;
  color: var(--text-2);
}

/* ---- ScheduleBoard ------------------------------------------------------- */
.board {
  flex: 1;
  min-block-size: 0;
  margin: calc(12 * var(--ou));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(10 * var(--ou));
  background-color: var(--surface);
}
.board__head,
.board__body { display: grid; grid-template-columns: calc(48 * var(--ou)) repeat(6, minmax(0, 1fr)); }

.board__head {
  border-block-end: 1px solid var(--border);
  background-color: var(--bg-warm);
}
.board__hcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--ou));
  padding-block: calc(6 * var(--ou));
  border-inline-end: 1px solid var(--border);
  font-size: calc(11 * var(--ou));
  line-height: 1.2;
}
.board__hcell:last-child { border-inline-end: 0; }
.board__hcell i { font-style: normal; font-size: calc(10 * var(--ou)); color: var(--text-3); }
.board__hcell b { font-weight: 500; color: var(--text); }
.board__hcell--axis { justify-content: center; font-size: calc(10 * var(--ou)); color: var(--text-3); }
.board__hcell--today { background-color: var(--rust-a08); }
.board__hcell--today b { color: var(--brand-ink); }

.board__axis { display: grid; grid-auto-rows: calc(88 * var(--ou)); border-inline-end: 1px solid var(--border); }
.board__axis span {
  padding-inline-end: calc(4 * var(--ou));
  padding-block-start: calc(2 * var(--ou));
  font-size: calc(10 * var(--ou));
  text-align: end;
  color: var(--text-3);
  border-block-end: 1px solid var(--border);
}

/* One grid for the six day columns. The row is 22px, which is the board's own
   PX_PER_SLOT, so a 30-minute lesson is 44px high exactly as it is in the app.
   The 20 quarter-hour rows are painted as a repeating background rather than as
   120 empty cells: a faint line every quarter, a real one every hour. */
.board__grid {
  position: relative;
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(20, calc(22 * var(--ou)));
}
.board__col {
  grid-row: 1 / -1;
  border-inline-end: 1px solid var(--surface-muted);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(22 * var(--ou) - 1px),
    var(--surface-muted) calc(22 * var(--ou) - 1px),
    var(--surface-muted) calc(22 * var(--ou)),
    transparent calc(22 * var(--ou)),
    transparent calc(88 * var(--ou) - 1px),
    var(--border) calc(88 * var(--ou) - 1px),
    var(--border) calc(88 * var(--ou))
  );
}
/* Explicit columns: the day backgrounds and the lesson blocks share one grid,
   and auto-placement would shuffle the backgrounds around the blocks. */
.board__col:nth-of-type(1) { grid-column: 1; }
.board__col:nth-of-type(2) { grid-column: 2; }
.board__col:nth-of-type(3) { grid-column: 3; }
.board__col:nth-of-type(4) { grid-column: 4; }
.board__col:nth-of-type(5) { grid-column: 5; }
.board__col:nth-of-type(6) { grid-column: 6; border-inline-end: 0; }
.board__col--today { background-color: var(--rust-a08); }

.board__ev {
  position: relative;
  z-index: var(--z-base);
  grid-column: var(--col);
  grid-row: var(--r) / span var(--s);
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--ou));
  overflow: hidden;
  margin: calc(2 * var(--ou));
  padding-inline: calc(5 * var(--ou));
  /* A 30-minute lesson is 44px tall and holds three lines. 3px of padding is
     what leaves room for all three without the last one being clipped. */
  padding-block: calc(3 * var(--ou));
  border-radius: calc(5 * var(--ou));
  border-inline-start: 0;
  border-inline-end: calc(4 * var(--ou)) solid var(--ev-band, var(--brand));
  background-color: var(--ev-fill, var(--rust-a08));
  color: var(--ev-ink, var(--text));
  font-size: calc(10 * var(--ou));
  line-height: 1.25;
}
.board__ev-top { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--ou)); }
.board__ev-top b { font-weight: 800; }
.board__ev-top i { font-style: normal; font-size: calc(9 * var(--ou)); opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__ev-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__ev-tags { display: flex; flex-wrap: wrap; gap: calc(3 * var(--ou)); }
.board__ev-tags i {
  font-style: normal;
  font-size: calc(8.5 * var(--ou));
  font-weight: 500;
  padding-inline: calc(4 * var(--ou));
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.board__ev-horse { background-color: var(--white); color: var(--ink-soft); }
.board__ev-warn  { background-color: var(--ochre); color: var(--cocoa); font-weight: 800; }
.board__ev-first { background-color: var(--brand); color: var(--on-brand); font-weight: 800; }

/* The six lesson types, re-toned onto the brand's four functional colours. */
.board__ev--sport   { --ev-band: var(--olive); --ev-fill: rgba(80, 93, 47, 0.12);    --ev-ink: var(--cocoa); }
.board__ev--therapy { --ev-band: var(--teal);  --ev-fill: rgba(137, 172, 173, 0.22); --ev-ink: var(--cocoa); }
.board__ev--group   { --ev-band: var(--ochre); --ev-fill: rgba(202, 144, 37, 0.18);  --ev-ink: var(--cocoa); }
.board__ev--maccabi { --ev-band: var(--rust); --ev-fill: var(--rust-a08);            --ev-ink: var(--cocoa); }
.board__ev--trial   { --ev-band: var(--rust-deepest); --ev-fill: var(--tan);         --ev-ink: var(--cocoa); }
.board__ev--intake  { --ev-band: var(--rust-deep); --ev-fill: var(--cream-warm);     --ev-ink: var(--cocoa); }

/* ---- reports screen ------------------------------------------------------ */
.rep {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--ou));
  padding: calc(14 * var(--ou)) calc(16 * var(--ou));
  overflow: hidden;
}
.rep__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--ou)); }
.rep__stat {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--ou));
  padding: calc(10 * var(--ou)) calc(12 * var(--ou));
  border-radius: calc(10 * var(--ou));
  background-color: var(--surface);
  box-shadow: var(--ring-hairline);
}
.rep__stat span { font-size: calc(10.5 * var(--ou)); color: var(--text-3); }
.rep__stat b { font-size: calc(20 * var(--ou)); font-weight: 800; line-height: 1.1; color: var(--text); }
.rep__stat:last-child b { color: var(--brand-ink); }

.rep__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--ou)); }
.rep__card {
  padding: calc(12 * var(--ou));
  border-radius: calc(10 * var(--ou));
  background-color: var(--surface);
  box-shadow: var(--ring-hairline);
}
.rep__card h3 {
  margin-block-end: calc(9 * var(--ou));
  font-size: calc(11.5 * var(--ou));
  font-weight: 800;
  color: var(--text);
}

.bars { display: flex; flex-direction: column; gap: calc(6 * var(--ou)); }
.bars li {
  display: grid;
  grid-template-columns: calc(78 * var(--ou)) minmax(0, 1fr) calc(26 * var(--ou));
  align-items: center;
  gap: calc(8 * var(--ou));
  font-size: calc(10 * var(--ou));
}
.bars li > span:first-child { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track {
  block-size: calc(8 * var(--ou));
  border-radius: var(--r-pill);
  background-color: var(--surface-muted);
  overflow: hidden;
}
.bars__track i {
  display: block;
  inline-size: var(--v, 0%);
  block-size: 100%;
  border-radius: var(--r-pill);
  background-color: var(--brand);
}
.bars li b { font-weight: 500; text-align: end; color: var(--text); }

/* Daily-activity strip — the full-width card at the foot of the reports page.
   One column per day of the month, tallest = busiest. */
.rep__card--wide { grid-column: 1 / -1; }
.days {
  display: flex;
  align-items: flex-end;
  gap: calc(3 * var(--ou));
  block-size: calc(52 * var(--ou));
}
.days i {
  flex: 1 1 0;
  min-inline-size: calc(3 * var(--ou));
  block-size: var(--v, 10%);
  border-start-start-radius: calc(2 * var(--ou));
  border-start-end-radius: calc(2 * var(--ou));
  background-color: var(--brand);
  opacity: 0.85;
}
.days__axis {
  display: flex;
  justify-content: space-between;
  margin-block-start: calc(6 * var(--ou));
  font-size: calc(9.5 * var(--ou));
  color: var(--text-3);
}

/* =============================================================================
   7. SMART SCHEDULING
   The section opens one rung above every other head on the page (.h1, centred)
   because it carries the page's second signature moment, and closes on a rail
   of four steps rather than a fifth row of white cards.
   ============================================================================= */
.sched__head { max-inline-size: 46rem; }
/* Two deliberate lines, so the sentence lands as a statement and a correction
   rather than as one wrapped run. */
.sched__title .hl { display: block; }

/* ---- 7.1 THE BUILD BAND -------------------------------------------------
   Full-bleed, and the ONLY dark field on the page. Everything up to here is
   cream under warm light; this band inverts the key for one screen and lands
   the real ScheduleBoard on it at roughly life size. landing.js §2 scrubs the
   twenty-four lessons in as the band crosses the viewport and the horse chips
   after them, which is the section's own claim acted out. With motion off the
   band simply shows the finished week. */
.build {
  position: relative;
  isolation: isolate;
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background-color: var(--rust-deepest);
  color: var(--cream-warm);
  overflow: clip;
}
/* A single soft warm light over the deep field, the same move the hero makes
   with the photograph. Palette only: rust-deep fading into rust-deepest. */
.build__field {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image:
    radial-gradient(120% 90% at 78% 0%, rgba(131, 67, 49, 0.85), rgba(131, 67, 49, 0) 62%),
    radial-gradient(90% 70% at 12% 100%, rgba(202, 144, 37, 0.16), rgba(202, 144, 37, 0) 60%);
}

.build__inner { position: relative; z-index: var(--z-base); }

.build__lead {
  display: grid;
  gap: var(--space-4) clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 900px) {
  .build__lead { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}

.build__line {
  max-inline-size: 52ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--cream-warm);
}

.build__meter { min-inline-size: 0; }
.build__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--cream-warm);
}
.build__count b {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
}
.build__count span { font-size: var(--fs-xs); font-weight: 500; color: var(--tan); }

/* The scrub read-out. Fills with the same progress that fills the board. */
.build__rail {
  display: block;
  margin-block-start: var(--space-3);
  block-size: 3px;
  border-radius: var(--r-pill);
  background-color: rgba(244, 230, 216, 0.22);
  overflow: hidden;
}
.build__rail i {
  display: block;
  inline-size: var(--p, 100%);
  block-size: 100%;
  border-radius: var(--r-pill);
  background-color: var(--ochre);
}

/* The board. --ou is one pixel of the 980px window the port is drawn against,
   so at 1440 it renders about 30% larger than the same board does inside the
   browser frame in §4: the same real screen, read at arm's length instead of
   over someone's shoulder. */
.build__board {
  container-type: inline-size;
  --ou: 0.10204cqw;
  border-radius: calc(14 * var(--ou));
  background-color: var(--surface);
  box-shadow: 0 40px 90px -30px rgba(20, 8, 4, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.build__board .board {
  margin: calc(10 * var(--ou));
  border-radius: calc(9 * var(--ou));
}
.build__board .board__body { min-block-size: 0; }

.build__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-inline-size: 62ch;
  margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--tan);
}
.build__foot .icon { flex: none; margin-block-start: 0.2em; color: var(--ochre); }

/* ---- 7.2 the four steps, as a rail -------------------------------------- */
.flow {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 700px)  { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .flow { grid-template-columns: repeat(4, 1fr); } }

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.flow__num {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--text-3);
}
.flow__plate { margin-block-end: var(--space-2); }
.flow__title { margin-block-start: calc(var(--space-1) * -1); }
.flow__body { color: var(--text-2); max-inline-size: 34ch; }

/* A rust hairline from each plate to the next one, drawn plate-edge to
   plate-edge so the line never runs past the last node. Four white cards became
   four nodes on a rail: the steps are a sequence, and a sequence should look
   like one rather than like a fifth row of cards. */
@media (min-width: 1080px) {
  .flow--rail { --flow-gap: clamp(1.5rem, 3vw, 2rem); }
  .flow--rail .flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 1.6875rem;              /* the plate's optical centre */
    inset-inline-start: 4rem;                  /* 3.5rem plate + 8px of air   */
    inline-size: calc(100% + var(--flow-gap) - 4.5rem);
    block-size: 2px;
    border-radius: var(--r-pill);
    background-image: linear-gradient(to left, var(--rust-a24), var(--rust-a14));
  }
}

.sched__notes {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) { .sched__notes { grid-template-columns: 1fr 1fr; } }
.sched__note > * + * { margin-block-start: var(--space-3); }
.sched__note .icon-plate { margin-block-end: var(--space-1); }

.sched__more { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* =============================================================================
   8. HORSES
   ============================================================================= */
.horses__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 1020px) {
  .horses__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .horses__panel { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6)); }
}

.feature-list { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.feature { display: flex; gap: var(--space-4); }
.feature h3 { margin-block-end: var(--space-2); }
/* --measure is 62ch, and `ch` is the advance of "0" in Fabs — noticeably wider
   than the average Hebrew glyph, so a 62ch box holds ~70 Hebrew characters.
   In this two-column section the copy is the wide half, so it takes a shorter
   measure to stay comfortably inside the 75-character ceiling. */
.feature .body-sm { max-inline-size: 54ch; }

.horse-card { padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.horse-card > * + * { margin-block-start: var(--space-5); }

.horse-card__head { display: flex; align-items: center; gap: var(--space-4); }
.horse-card__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--r-lg);
  background-color: var(--rust-a08);
  color: var(--brand-ink);
  box-shadow: var(--ring-hairline);
}
.horse-card__name { font-size: var(--fs-xl); font-weight: 800; line-height: 1.2; color: var(--text); }
.horse-card__meta { font-size: var(--fs-xs); font-weight: 300; color: var(--text-3); }
.horse-card__status { margin-inline-start: auto; }

.horse-card__rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-lg);
  background-color: var(--bg-warm);
}
.horse-card__rules > div { display: flex; flex-direction: column; gap: 0.15rem; }
.horse-card__rules dt { font-size: var(--fs-2xs); font-weight: 500; color: var(--text-3); }
.horse-card__rules dd { font-size: var(--fs-md); font-weight: 800; color: var(--text); }

.horse-card__block > * + * { margin-block-start: var(--space-2); }
.horse-card__label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--text-3);
}
.horse-card__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.horse-card__treat { display: flex; flex-direction: column; }
.horse-card__treat li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--text-2);
  border-block-end: 1px solid var(--border);
}
.horse-card__treat li:last-child { border-block-end: 0; }

/* =============================================================================
   9. PENSION
   The page's quietest chapter, on purpose. The head drops two rungs to .h4 and
   sits in a side rail; the four capabilities are an indented index rather than
   a card row (which is also what fixes the ragged 4-up they used to render as);
   the real artefact, a monthly billing sheet, carries the weight.
   ============================================================================= */
/* STACKED, not split. #horses immediately above runs copy-right / media-left;
   repeating that here made the two sections read as one template used twice.
   Pension instead gets its own silhouette: a centred head, the four capability
   columns in a row, and the monthly bill full width beneath them. */
.pension__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.pension__lead { min-inline-size: 0; }
.pension__head { margin-block-end: 0; }
.pension__lede { max-inline-size: 46ch; }

.pension__index { margin-block-start: clamp(1.5rem, 3vw, 2rem); }
.pension__index li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 var(--space-3);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border);
}
.pension__index li:last-child { border-block-end: 1px solid var(--border); }

@media (min-width: 900px) {
  /* Head stays start-aligned like every other section on the page. The section
     is already differentiated from #horses by its silhouette (stacked head →
     four columns → full-width bill, instead of a copy/media split), so it does
     not also need a centred head — that only broke the page's alignment spine. */
  .pension__lede { max-inline-size: 60ch; }

  /* four capabilities across, each its own column with a top rule */
  .pension__index {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin-block-start: clamp(2rem, 4vw, 3rem);
  }
  .pension__index li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-4) 0;
    border-block-start: 2px solid var(--rust-a24);
    border-block-end: 0;
  }
  .pension__index li:last-child { border-block-end: 0; }
  .pension__index .icon { grid-row: auto; margin-block-start: 0; }
  .pension__index span { max-inline-size: none; }

  /* the bill runs the full measure underneath, not beside */
  .pension__sheet { inline-size: 100%; }
  .pension__bill { max-inline-size: 60rem; margin-inline: auto; }

  /* the deep-link belongs to the whole section now, not to the last column */
  .pension .sched__more { text-align: center; margin-block-start: var(--space-6); }
}
.pension__index .icon { grid-row: 1 / span 2; margin-block-start: 0.15em; color: var(--brand-ink); }
.pension__index b {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}
.pension__index span {
  max-inline-size: 52ch;
  margin-block-start: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--text-2);
}

.pension__bill { padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.pension__bill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}
.pension__bill-title { font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; color: var(--text); }
.pension__table { font-size: var(--fs-sm); }
.pension__table th[scope="col"] { white-space: nowrap; }
.pension__table td:last-child,
.pension__table th:last-child { text-align: end; }
.pension__bill-foot { max-inline-size: 52ch; margin-block-start: var(--space-4); }

/* =============================================================================
   10. REPORTS
   The screen is the argument here, so the head steps DOWN a rung to .h3 and the
   trailing list is a ruled strip rather than a fourth row of ticked cards.
   ============================================================================= */
.reports__head { max-inline-size: 40ch; }
.reports__lede { max-inline-size: 54ch; }
.reports__frame { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }

.reports__strip {
  display: grid;
  gap: var(--space-4) var(--space-6);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-block: 1px solid var(--border);
}
@media (min-width: 900px) {
  .reports__strip { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); align-items: baseline; }
}
.reports__strip-label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--brand-ink);
}
.reports__notes { display: grid; gap: var(--space-3) var(--space-6); }
@media (min-width: 640px)  { .reports__notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .reports__notes { grid-template-columns: repeat(4, 1fr); } }
.reports__notes li {
  max-inline-size: 42ch;
  padding-inline-start: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--text-2);
  border-inline-start: 1px solid var(--border);
}
/* The rule LEADS each item, so whichever item opens a row never carries one.
   RTL: inline-start is the right edge, which is where a row begins. */
.reports__notes li:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 1199px) {
  .reports__notes li:nth-child(2n + 1) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 639px) {
  .reports__notes li { border-inline-start: 0; padding-inline-start: 0; }
}

/* =============================================================================
   11. PAYMENTS
   A MIRRORED split. #horses and #pension both run copy-right / media-left; a
   third one reads as a template. Here the media comes first in source order, so
   in RTL it sits on the right and the copy on the left, and the eye gets a new
   composition instead of a fourth repeat of the same one.
   ============================================================================= */
.payments__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 1020px) {
  .payments__inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .payments__stage { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6)); }
}
.payments__copy { min-inline-size: 0; }

/* --- the money flow: due -> paid, with the payment step between them -------- */
.pay-flow { display: flex; flex-direction: column; align-items: stretch; }

.pay-card {
  border-radius: var(--r-2xl);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm), var(--ring-hairline);
}
.pay-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-block-end: var(--space-3);
}
.pay-card__date { color: var(--text-3); font-size: var(--fs-xs); }
.pay-card__title { font-weight: 500; color: var(--cocoa); }
.pay-card__meta {
  margin-block-start: 2px;
  font-size: var(--fs-xs); color: var(--text-2);
}
.pay-card__sum {
  margin-block-start: var(--space-3);
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.01em;
  color: var(--cocoa);
}
.pay-card--due { background-color: var(--bg-warm); }
.pay-card--due .pay-card__sum { color: var(--text-2); }
.pay-card--paid { box-shadow: var(--shadow-md), var(--ring-hairline); }
.pay-card__foot {
  display: flex; align-items: center; gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--fs-xs); color: var(--text-2);
}
.pay-card__foot .icon { color: var(--brand); flex: none; }

/* The connector reads as one continuous move from "due" to "paid". */
.pay-flow__link {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
}
.pay-flow__rail {
  inline-size: 2px; block-size: clamp(0.9rem, 2vw, 1.4rem);
  background: linear-gradient(var(--hairline), var(--brand));
  border-radius: 2px;
}
.pay-flow__link .pay-flow__rail:last-child { background: linear-gradient(var(--brand), var(--hairline)); }
.pay-flow__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  background-color: var(--brand);
  color: var(--white);
  font-size: var(--fs-xs); font-weight: 500;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.pay-flow__badge .icon { color: currentColor; flex: none; }

html[data-a11y-contrast="on"] .pay-card { box-shadow: inset 0 0 0 2px var(--charcoal); background-color: var(--white); }
html[data-a11y-contrast="on"] .pay-flow__badge { background-color: var(--charcoal); }

/* =============================================================================
   12. ROLES
   The page's closing index: a small head in a rail and six hairline rows. By
   here the reader is scanning rather than being sold to, and an appendix should
   look like one — not like a sixth grid of cards.
   ============================================================================= */
@media (min-width: 900px) {
  .roles__inner {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .roles__head { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6)); margin-block-end: 0; }
}

.roles__body { min-inline-size: 0; }

.roles__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block: clamp(1rem, 2vw, 1.375rem);
  border-block-end: 1px solid var(--border);
}
.roles__list > :first-child { border-block-start: 1px solid var(--border); }
@media (min-width: 620px) {
  .roles__row {
    grid-template-columns: 2.25rem minmax(0, 9.5rem) minmax(0, 1fr);
    align-items: baseline;
  }
}
.roles__ico {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-sm);
  background-color: var(--rust-a08);
  color: var(--brand-ink);
  box-shadow: var(--ring-hairline);
}
.roles__name {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}
.roles__what {
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--text-2);
}
@media (max-width: 619px) {
  .roles__ico { grid-row: 1 / span 2; }
}

/* =============================================================================
   13. CTA
   ============================================================================= */
.cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: hidden;
  background-color: var(--bg-deep);
}
.cta__bg-img {
  position: absolute;
  inset-block-start: -8%;
  inset-inline: 0;
  inline-size: 100%;
  block-size: 116%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* The hero shows the photograph at full strength; here it is a closing note,
   not the subject. A warm wash over the frost lands the band back on the page's
   own field at both edges, and lifts the store-badge caption off the arena
   floor, which is the darkest part of the frame. */
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(248, 244, 237, 0.52) 18%,
    rgba(248, 244, 237, 0.62) 74%,
    var(--bg-warm) 100%
  );
}
.cta__inner { position: relative; z-index: var(--z-base); }

.cta__card {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 960px) {
  .cta__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.cta__copy > * + * { margin-block-start: var(--space-4); }
.cta__points { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-5); }
.cta__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--text-2);
}
.cta__points .icon { color: var(--brand-ink); margin-block-start: 0.15em; }

/* `.field + .field` (components.css §15) is the STACKED-field rule: it also
   fires on the second grid child of a .form__row, which pushed the טלפון field
   16px below the איש קשר field beside it. components.css is Foundation-owned,
   so the row is corrected here where the form lives. */
.cta__form .form__row > .field + .field { margin-block-start: 0; }
.cta__form { max-inline-size: none; }
.cta__store { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; }
/* This caption sits on the washed photograph rather than on a flat page field,
   so it takes the second ink tier instead of the third. */
.cta__store .store-badges__note { text-align: center; color: var(--text-2); }

.site-footer__badges { margin-block-start: var(--space-2); }

/* =============================================================================
   14. HIGH-CONTRAST OVERRIDES
   base.css §7.2 flips every fill to white and turns --ring-hairline into a 2px
   charcoal ring, so anything that composes that ring is already covered. What
   follows are this page's own translucent, tinted or shadow-only surfaces.
   ============================================================================= */
html[data-a11y-contrast="on"] .hero__bg,
html[data-a11y-contrast="on"] .cta__bg { background-color: var(--white); }
html[data-a11y-contrast="on"] .hero__cue-rail { background-color: var(--charcoal); }

html[data-a11y-contrast="on"] .shift__card--after { box-shadow: inset 0 0 0 2px var(--charcoal); }
html[data-a11y-contrast="on"] .shift__tag { background-color: var(--white); color: var(--cocoa); }
html[data-a11y-contrast="on"] .shift__tag--brand { background-color: var(--brand); color: var(--white); }
html[data-a11y-contrast="on"] .shift__list li::before { background-color: var(--charcoal); }
html[data-a11y-contrast="on"] .shift__list--check li::before { background-color: var(--brand); }

html[data-a11y-contrast="on"] .apps.is-pinned .apps__chapter,
html[data-a11y-contrast="on"] .payments__card {
  background-color: var(--white);
  border-color: var(--charcoal);
  box-shadow: inset 0 0 0 2px var(--charcoal);
}
html[data-a11y-contrast="on"] .apps__facts li {
  background-color: var(--white);
  color: var(--cocoa);
  box-shadow: inset 0 0 0 1.5px var(--charcoal);
}

html[data-a11y-contrast="on"] .horse-card__avatar,
html[data-a11y-contrast="on"] .roles__ico,
html[data-a11y-contrast="on"] .horse-card__rules {
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--charcoal);
}

/* The build band is the page's one inverted field. High contrast has exactly
   one background colour, so the band flattens to white and every run on it
   comes back to cocoa; the deep field, its light and its glow all drop out. */
html[data-a11y-contrast="on"] .build {
  background-color: var(--white);
  color: var(--cocoa);
  box-shadow: inset 0 0 0 2px var(--charcoal);
}
html[data-a11y-contrast="on"] .build__field { background-image: none; }
html[data-a11y-contrast="on"] .build__line,
html[data-a11y-contrast="on"] .build__count b,
html[data-a11y-contrast="on"] .build__count span,
html[data-a11y-contrast="on"] .build__foot { color: var(--cocoa); }
html[data-a11y-contrast="on"] .build__foot .icon,
html[data-a11y-contrast="on"] .build__rail i { color: var(--brand); background-color: var(--brand); }
html[data-a11y-contrast="on"] .build__foot .icon { background-color: transparent; }
html[data-a11y-contrast="on"] .build__rail { background-color: var(--white); box-shadow: inset 0 0 0 1px var(--charcoal); }
html[data-a11y-contrast="on"] .build__board {
  background-color: var(--white);
  box-shadow: inset 0 0 0 2px var(--charcoal);
}
html[data-a11y-contrast="on"] .flow--rail .flow__step:not(:last-child)::after { background-image: none; background-color: var(--charcoal); }

/* The device screens are illustrations of a different product surface. In this
   mode they keep their own identity but every translucent card becomes an
   opaque white one with a hard edge, so nothing dissolves. */
html[data-a11y-contrast="on"] .scr-card,
html[data-a11y-contrast="on"] .scr-tile,
html[data-a11y-contrast="on"] .scr-lesson,
html[data-a11y-contrast="on"] .rep__stat,
html[data-a11y-contrast="on"] .rep__card {
  background-color: var(--white);
  background-image: none;
  border-color: var(--charcoal);
  box-shadow: inset 0 0 0 1.5px var(--charcoal);
}
html[data-a11y-contrast="on"] .scr-tile--brand,
html[data-a11y-contrast="on"] .scr__avatar {
  background-color: var(--brand);
  background-image: none;
  color: var(--white);
}
html[data-a11y-contrast="on"] .scr-tile--brand .scr__eyebrow--tile,
html[data-a11y-contrast="on"] .scr-tile--brand .scr-tile__note,
html[data-a11y-contrast="on"] .scr-tile--brand .scr-tile__big span { color: var(--white); }
html[data-a11y-contrast="on"] .scr-chip,
html[data-a11y-contrast="on"] .scr-badge,
html[data-a11y-contrast="on"] .scr-break__pill,
html[data-a11y-contrast="on"] .board__ev-horse {
  background-color: var(--white);
  color: var(--cocoa);
  box-shadow: inset 0 0 0 1px var(--charcoal);
}
html[data-a11y-contrast="on"] .board__ev {
  background-color: var(--white);
  color: var(--cocoa);
  border-inline-end-color: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--charcoal);
}
html[data-a11y-contrast="on"] .board__col { background-image: none; border-inline-end-color: var(--charcoal); }
html[data-a11y-contrast="on"] .board__col--today,
html[data-a11y-contrast="on"] .board__hcell--today { background-color: var(--white); }
html[data-a11y-contrast="on"] .bars__track { box-shadow: inset 0 0 0 1px var(--charcoal); }
html[data-a11y-contrast="on"] .scr-prep__list li.is-done { background-color: var(--white); }

/* =============================================================================
   15. RESPONSIVE SAFETY
   ============================================================================= */
/* Under 900px the cutout drops out and the card becomes a single column. Left
   full-width it would be a 700px white field with 400px of text pinned to one
   edge, so it narrows and centres instead — which is exactly what the product's
   own login card does below its lg breakpoint. */
@media (max-width: 899px) {
  .hero { min-block-size: 0; padding-block-end: clamp(3rem, 7vw, 4.5rem); }
  .hero__card {
    min-block-size: 0;
    max-inline-size: 32rem;
    margin-inline: auto;
  }
  .hero__lede { max-inline-size: none; }
}

/* On a phone the two hero buttons stack, and two buttons of different widths
   stacked one above the other read as a mistake rather than as a hierarchy. */
@media (max-width: 560px) {
  .hero__actions { display: flex; flex-direction: column; align-items: stretch; inline-size: 100%; }
  .hero__actions .btn { inline-size: 100%; }
  /* 2 × 165px badges + the 12px gap overshoot a 302px card interior and wrap
     into a column. At the small size they are 140px and sit side by side. */
  .hero__store .store-badge { block-size: 2.75rem; }
}

@media (max-width: 460px) {
  .hero__card { padding: var(--space-5); }
  .horse-card__rules { grid-template-columns: 1fr; }
  .apps__facts { gap: var(--space-2); }
}

/* A six-day board scaled into a 350px column renders 3.5px type: that is not a
   screenshot, it is a texture. Below this width the office port stops scaling
   and renders at LIFE SIZE instead — --ou becomes one real pixel — with the
   frame showing the reading edge (the time axis and the first days) and a soft
   fade where the week continues. The real app behaves the same way: under lg it
   holds an 880px minimum and scrolls sideways inside its own box.

   --ou is set in rem rather than px so the accessibility widget's text scale
   grows the port too, and the two size declarations below grow with it. */
@media (max-width: 860px) {
  .office-frame .device-desktop__screen {
    aspect-ratio: auto;
    block-size: 34.375rem;               /* topbar + head + 20 rows + margins */
    /* An ALPHA mask: only the gradient's opacity is used, so the colour stop
       never paints. It is a palette token anyway, so nothing off-brand can
       leak in if a browser ever falls back to luminance masking. */
    -webkit-mask-image: linear-gradient(to left, var(--cocoa) 64%, transparent 100%);
    mask-image: linear-gradient(to left, var(--cocoa) 64%, transparent 100%);
  }
  .reports__frame .device-desktop__screen {
    block-size: 31.25rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* The build band's board takes the same treatment for the same reason: below
     this width a six-day board scaled into the column renders 4px type. It
     stops scaling, renders at LIFE SIZE anchored to the reading edge, and fades
     where the week continues. */
  .build__board {
    --ou: 0.0625rem;                     /* 1px */
    container-type: normal;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, var(--cocoa) 62%, transparent 100%);
    mask-image: linear-gradient(to left, var(--cocoa) 62%, transparent 100%);
  }
  .build__board .board {
    inline-size: max(100%, 41.25rem);
    margin-inline-end: 0;
  }
  .office {
    --ou: 0.0625rem;                     /* 1px */
    /* Anchored to the READING edge, which in RTL is the right one, so what the
       frame shows is the time axis and the first days of the week. */
    inline-size: max(100%, 41.25rem);
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
  .apps__device--office .office { --ou: 0.0625rem; }
  /* The sidebar is gone here, so its track has to go with it, or the main
     column auto-places into the empty 190px rail instead of filling the frame. */
  .office { grid-template-columns: minmax(0, 1fr); }
  .office__side,
  .office__tabs { display: none; }
  /* Reports is a stacked list, not a wide grid, so it FITS the frame at life
     size rather than overflowing it: no clipping, no fade, two cards deep. */
  .reports__frame .office { inline-size: 100%; }
  .rep__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep__cards { grid-template-columns: minmax(0, 1fr); }
  .rep__cards > :nth-child(n + 3):not(.rep__card--wide) { display: none; }
}

/* The motion switch (OS or widget) must also undo the CSS-only animation. */
html[data-a11y-motion="off"] .hero__cue-rail i { animation: none; translate: 0 25%; }
@media (prefers-reduced-motion: reduce) {
  .hero__cue-rail i { animation: none; translate: 0 25%; }
}

/* =============================================================================
   HERO FROST TUNING (integration pass)
   The shared .frost (white 0.3 + blur 36px) is calibrated for the login screen,
   where the card covers less of the plate. Across the hero's full bleed it
   flattened the photograph to near-solid cream and the brand imagery was lost.
   We keep the login's blur value — that is the brand's signature — but trade
   the flat white veil for a warm cream wash plus a saturation lift, so the
   chestnut/sky tones stay legible behind the card without ever competing
   with the type sitting on top of them.
   ========================================================================== */
.hero .frost {
  background-color: rgba(255, 255, 255, 0.1);
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(248, 244, 237, 0.34), transparent 62%),
    linear-gradient(196deg, rgba(244, 230, 216, 0.5) 0%, rgba(248, 244, 237, 0.72) 58%, rgba(248, 244, 237, 0.88) 100%);
  -webkit-backdrop-filter: var(--blur-heavy) saturate(1.16);
  backdrop-filter: var(--blur-heavy) saturate(1.16);
}

/* The photograph itself carries a touch more presence behind the wash. */
.hero__bg-img { filter: saturate(1.06) contrast(1.02); }

/* High-contrast mode still wins: no imagery competing with text. */
html[data-a11y-contrast="on"] .hero .frost {
  background-image: none;
  background-color: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-a11y-contrast="on"] .hero__bg-img { display: none; }

/* Who is selling this. The demo form is the one place a farm owner commits to
   contact, so the vendor behind מושכות is named right under the submit action
   rather than only in the footer. */
.form__by {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--text-2);
}
.form__by .link { font-weight: 500; }