/* ============================================================================
   Lemon Studio — components
   Each block below is one reusable piece. Nothing here knows about the page.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. BUTTONS
   The primary CTA is a BLACK button wearing a lemon glow — not a yellow fill.
   The secondary is the same size and type scale with a white-22% border:
   a quiet action must never be a small one.
   ------------------------------------------------------------------------- */

.btn {
  --btn-py: 16px;
  --btn-px: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;                      /* touch target floor */
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: none;
  /* Buttons belong to the display face: at 700 they read as small headlines
     rather than as heavy body text sitting in a box. */
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-strong);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out),
              background-color var(--dur-slow) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(var(--press-scale)); }   /* 120ms, no colour change */

.btn--primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-color: var(--cta-bd);
  box-shadow: var(--glow-cta);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: var(--glow-cta-hover);
  border-color: var(--lemon-500);
  color: var(--accent-hover);
}

.btn--secondary {
  border-color: var(--border-strong);
  color: var(--text-body);
  /* Rubik only ships 700 and 800 — asking for 400 here made the browser
     fake a lighter weight, which looks smeared next to the real one. */
  font-weight: var(--fw-strong);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--lemon-500);
  color: var(--accent-hover);
}

.btn--sm { --btn-py: 13px; --btn-px: 26px; font-size: 15px; }
.btn--block { width: 100%; }

.btn .icon { width: 20px; height: 20px; flex: none; }

/* Long label on wide screens, short label on phones. */
.btn__label-short { display: none; }
/* Below this the two columns cannot both earn their width, so they stack and
   the photograph is lifted above the pane. */
@media (max-width: 860px) {
  .order__step--split { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 0; }
  .order__visual { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .order__pane { overflow: visible; }
  .order__pane { padding-bottom: clamp(22px, 2.3vw, 36px); }
  .field-row { grid-template-columns: 1fr; }
  .order__foot { position: static; padding-bottom: 0; background: none; }
}

@media (max-width: 560px) {
  .btn__label-long  { display: none; }
  .btn__label-short { display: inline; }
}

/* ---------------------------------------------------------------------------
   2. ICONS — Lucide subset, 2px stroke, round caps, currentColor, never filled
   ------------------------------------------------------------------------- */

.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--lg { stroke-width: 1.5; }   /* 32px+ drops to 1.5 */

/* ---------------------------------------------------------------------------
   3. SITE HEADER
   The only fixed element on the page. It sits on a SOLID BLACK bar so the
   navigation is legible over the hero photograph as well as over the flat
   sections — no fade, no translucency. A hairline bottom border separates it
   from whatever is scrolling underneath.
   Three tracks: logo at the start (right, in RTL), NAVIGATION CENTRED, CTA at
   the end. The two outer tracks are equal-width flex children so the nav
   lands on the true centre of the bar rather than wherever the logo ends.
   ------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  /* The logo and the CTA used to sit hard in the corners of a full-bleed bar.
     They now inset to a 1180px track on wide screens — never less than the
     page gutter, so nothing changes on a phone. */
  padding-block: 20px;
  padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
  background: var(--surface-void);
  border-bottom: 1px solid var(--border-hairline);
  transition: padding var(--dur-slow) var(--ease-out);
}
/* Scrolled state changes the height only — the bar was already black. */
.header.is-stuck { padding-block: 14px; }

.header__logo { display: block; flex: 1 1 0; min-width: 0; }
.header__logo img {
  height: clamp(38px, 3.4vw, 52px);
  width: auto;
  transition: height var(--dur-slow) var(--ease-out);
}
.header.is-stuck .header__logo img { height: clamp(32px, 2.8vw, 42px); }

.header__nav { display: flex; flex: none; align-items: center; justify-content: center; gap: clamp(18px, 2vw, 34px); }
.header__nav a {
  font-size: 15px;
  font-weight: var(--fw-body);
  color: var(--text-body);
  padding-block: 6px;
}
.header__actions { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); }

/* Mobile menu toggle — hidden on desktop */
.header__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: none; color: var(--text-body); cursor: pointer;
}
.header__burger .icon { width: 22px; height: 22px; }
.header__burger .icon--close { display: none; }
.header.is-open .header__burger .icon--menu  { display: none; }
.header.is-open .header__burger .icon--close { display: block; }

@media (max-width: 900px) {
  .header { padding-block: 14px; padding-inline: var(--gutter); }
  .header__burger { display: inline-flex; }
  .header__actions { gap: var(--sp-3); }
  .header__actions .btn { --btn-py: 12px; --btn-px: 18px; font-size: 14px; }

  .header__nav {
    position: fixed;
    flex: none;
    inset-inline: 0;
    top: var(--header-h);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: rgba(10,10,9,.96);
    -webkit-backdrop-filter: var(--blur-panel);
    backdrop-filter: var(--blur-panel);
    border-bottom: 1px solid var(--border-hairline);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }
  .header.is-open .header__nav { opacity: 1; visibility: visible; transform: none; }
  .header__nav a {
    padding: 16px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--border-hairline);
  }
  .header__nav a:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   4. MEDIA
   The photo IS the object. Tiles get a large radius, no background fill and
   no border — a frame around a product shot reads as a widget.
   Text over photography always sits on a scrim, never on a bare image.
   ------------------------------------------------------------------------- */

.media { position: relative; overflow: hidden; background: var(--surface-void); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--round  { border-radius: var(--radius-media); }
.media--card   { border-radius: var(--radius-lg); }
.media--square { aspect-ratio: 1 / 1; }
.media--4x5    { aspect-ratio: 4 / 5; }
.media--16x9   { aspect-ratio: 16 / 9; }

.scrim-bottom { background: linear-gradient(transparent, rgba(10,10,9,.72)); }
.scrim-full   { background: linear-gradient(rgba(10,10,9,.40), rgba(10,10,9,.18) 34%, rgba(10,10,9,.72) 74%, rgba(10,10,9,.94)); }

/* ---------------------------------------------------------------------------
   5. CARD
   Flat --surface-base fill, 1px hairline, 32px padding, NO drop shadow.
   On a --surface-void section the 4% step plus the hairline is the whole
   edge. Depth comes from the border and from hover — never from a fill.
   ------------------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-slow) var(--ease-out),
              background-color var(--dur-slow) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); }   /* cards do not lift */

/* ---------------------------------------------------------------------------
   5b. CENTRED SECTION HEADER
   Eyebrow → display title → a hairline rule broken by one small lemon mark →
   lead. The mark is a Lucide icon, never the logo's lemon (the brand mark is
   the full lockup only, never a decorative glyph).
   ------------------------------------------------------------------------- */

.section-head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-inline: auto; }
.section-head .lead { margin: 0 auto; color: var(--text-muted); }

.section-head__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: clamp(20px, 3vh, 28px) auto clamp(20px, 3vh, 28px);
  max-width: 260px;
  color: var(--lemon-500);
}
.section-head__rule span {
  flex: 1;
  height: 1px;
  background: var(--rule-accent);
}
.section-head__rule .icon { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------------------
   6. STEP SEQUENCE
   RTL: 1 → 2 → 3 runs right to left, so the arrows point LEFT.
   ------------------------------------------------------------------------- */

.steps-rail {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  max-width: 900px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding-inline: 6%;
}
/* The numerals are the supplied artwork, not type. */
.steps-rail__num {
  flex: none;
  width: clamp(52px, 5vw, 74px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.steps-rail__line {
  position: relative;
  flex: 1;
  min-width: 48px;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--lemon-500));
}
.steps-rail__line::after {          /* the arrowhead, pointing left */
  content: "";
  position: absolute; left: -1px; top: -4.5px;
  width: 0; height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-right: 9px solid var(--lemon-500);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}
.step__media { position: relative; width: 100%; }
/* The step artwork already carries its own rounded shape on transparency —
   the photo IS the object, so no fill and no frame behind it. */
.step__media .media { background: none; border-radius: 0; }
/* The tiles were scaled up ~9% inside the square. `.media` clips by default,
   which sliced the top of the hair off the middle illustration — the artwork
   reaches the edge of its own canvas there. Since these images sit on
   transparency with no frame behind them, the fix is to stop clipping and let
   the extra bleed past the square. Nothing is cut, and the tiles keep the
   larger size. */
.step__media .media { overflow: visible; }
.step__media .media img { transform: scale(1.09); }
/* The per-tile badge only appears where the rail is hidden (phones), so a
   number is never shown twice on the same screen. */
.step__num {
  display: none;
  position: absolute;
  inset-inline-start: -6px;
  top: -10px;
  width: clamp(44px, 4.4vw, 62px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
@media (max-width: 860px) { .step__num { display: block; } }
.step h3 { color: var(--lemon-500); margin-bottom: 10px; }
.step p  { color: var(--text-muted); font-size: clamp(15px, 1.15vw, 17px); max-width: 30ch; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   GALLERY MARQUEE
   The rail drifts on its own so the work is visible without anyone touching
   it. Press and hold (or focus a photo with the keyboard) and it stops; a
   single click opens that photo full size.

   The movement is a CSS transform on a duplicated track, not scrollLeft —
   which sidesteps the fact that browsers still disagree about the sign of
   scrollLeft in RTL, and keeps the animation off the main thread.
   ------------------------------------------------------------------------- */

.marquee {
  position: relative;
  /* `overflow: hidden` still makes this a SCROLL CONTAINER — it only hides the
     scrollbars. The photos are <button>s, so the moment one of them took focus
     the browser scrolled it into view and the whole strip lurched sideways and
     stayed there (measured: 1201px on a single Tab press). `clip` does not
     create a scroll container, so there is nothing for the browser to scroll.
     The plain overflow-x below is the no-JavaScript state, where the strip
     does not drift and being able to swipe it is the only way to see it all;
     gallery.js swaps in .is-live once it has taken over. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-block: 4px;
  /* the photos fade out at both edges instead of being cut off */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-live { overflow: clip; }

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;

  /* The spacing is a per-item margin, NOT `gap`. With `gap`, 28 items have
     only 27 gaps, so half the track is 14 items + 13.5 gaps while one true
     loop is 14 items + 14 gaps — the keyframe came up half a gap short and
     the strip snapped 6-10px every time it wrapped. A trailing margin on
     every item makes the repeating unit exactly (item + gap), so 50% of the
     track is exactly one period and the wrap is invisible. */
  --marquee-gap: clamp(12px, 1.4vw, 20px);
}
.marquee__track > .gallery__item { margin-inline-end: var(--marquee-gap); }
/* Hold to stop. Also stops while a photo has KEYBOARD focus, and while the
   lightbox is open — nothing should crawl about behind it.
   `is-kbd` rather than :focus-within on purpose: pressing a photo with a mouse
   also focuses it, and :focus-within would then keep the strip parked for good
   after the finger came off. gallery.js only sets the class for :focus-visible,
   which is the keyboard case. */
/* Not on .marquee__track directly: until gallery.js has duplicated the track
   and written the real duration, the animation would be running against half
   the content and a placeholder 90s. Both change under it a few hundred
   milliseconds after load, and a CSS animation reinterprets its progress when
   either does — which is a visible jolt on the first view. */
.marquee.is-live .marquee__track {
  /* Longhands, NOT the `animation` shorthand. The shorthand also resets
     animation-play-state to running, and this selector is more specific than
     `body.is-locked .marquee__track` — so the shorthand silently un-paused the
     strip behind the open lightbox. Longhands leave play-state alone. */
  animation-name: marquee-drift;
  animation-duration: var(--marquee-duration, 90s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee.is-held .marquee__track,
.marquee.is-kbd .marquee__track,
body.is-locked .marquee__track { animation-play-state: paused; }

@keyframes marquee-drift {
  from { transform: translateX(0); }
  /* Exactly half the track, which is exactly one set of photos plus its
     trailing margin — see the note above about why that is not true with
     `gap`. Any mismatch here shows up as a snap once per loop. */
  to   { transform: translateX(50%); }   /* RTL: the next photo enters from the left */
}

.marquee .gallery__item {
  flex: 0 0 clamp(258px, 30vw, 420px);
  position: relative;
  padding: 0;
  border: 0;
  background: var(--surface-void);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.marquee .gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;                 /* the button takes the press, not the image */
  transition: transform var(--dur-slow) var(--ease-out);
}
.marquee .gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(252,226,7,0);
  transition: box-shadow var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.marquee .gallery__item:hover img,
.marquee .gallery__item:focus-visible img { transform: scale(1.04); }
.marquee .gallery__item:hover::after,
.marquee .gallery__item:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(252,226,7,.55); }

.gallery__caption {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 44px 18px 14px;
  background: linear-gradient(transparent, rgba(10,10,9,.82));
  font-size: var(--fs-xs);
  color: var(--text-body);
  text-align: start;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.marquee .gallery__item:hover .gallery__caption,
.marquee .gallery__item:focus-visible .gallery__caption { opacity: 1; }

.marquee__hint {
  margin: clamp(20px, 3vh, 30px) auto 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Nothing should drift for someone who asked for less motion — the rail
   becomes a normal scroller instead. */
@media (prefers-reduced-motion: reduce) {
  .marquee, .marquee.is-live {
    overflow-x: auto;                /* beats .is-live's clip: still swipeable */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none; mask-image: none;
  }
  .marquee__track, .marquee.is-live .marquee__track { animation: none; }
  .marquee .gallery__item { scroll-snap-align: center; }
}

/* ---------------------------------------------------------------------------
   8. LIGHTBOX
   ------------------------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 95;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0,0,0,.96);
}
.lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; }
.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  width: auto; margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
}
.lightbox__caption {
  margin-top: 16px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(10,10,9,.6);
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}
.lightbox__btn:hover { border-color: var(--lemon-500); color: var(--accent-hover); }
.lightbox__btn .icon { width: 24px; height: 24px; }
.lightbox__close { top: 20px; inset-inline-end: 20px; }
.lightbox__prev  { top: 50%; inset-inline-end: 20px; transform: translateY(-50%); }
.lightbox__next  { top: 50%; inset-inline-start: 20px; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; }
  .lightbox__prev { inset-inline-end: calc(50% + 12px); }
  .lightbox__next { inset-inline-start: calc(50% + 12px); }
}

/* ---------------------------------------------------------------------------
   9. FAQ ACCORDION
   The plus rotates into an x. No colour flip, no bounce.
   ------------------------------------------------------------------------- */

.faq__item { border-bottom: 1px solid var(--border-hairline); }
.faq__item:first-child { border-top: 1px solid var(--border-hairline); }

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  text-align: start;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: var(--fw-strong);
  color: var(--text-strong);
  cursor: pointer;
  transition: color var(--dur-slow) var(--ease-out);
}
.faq__q:hover { color: var(--accent-hover); }
.faq__q span { flex: 1; }
.faq__q .icon {
  width: 22px; height: 22px;
  color: var(--lemon-500);
  transition: transform var(--dur-slow) var(--ease-out);
}
.faq__item.is-open .faq__q .icon { transform: rotate(45deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
/* The 0fr → 1fr collapse only works if the clipping element has NO padding of
   its own: an element cannot clip its own padding box, so padding here leaves
   a permanent sliver of open answer under every closed question. The bottom
   space goes on the LAST CHILD inside the clipper instead — which also means
   a two-paragraph answer gets no hole in the middle of it. */
.faq__a > div { overflow: hidden; }
.faq__a > div > *:last-child { padding-bottom: 26px; }
.faq__a p {
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}
.faq__a p + p { margin-top: 12px; }

/* A quiet aside under an answer: smaller, lemon, and never a whole sentence
   of consequence — the answer above it has to stand on its own.
   Scoped under .faq__a on purpose: `.faq__a p` is one step more specific than
   a lone class, so an unscoped .faq__hint would silently render grey. */
.faq__a .faq__hint {
  font-size: var(--fs-xs);
  color: var(--lemon-500);
}

/* ---------------------------------------------------------------------------
   10. SITE FOOTER
   ------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule-accent); padding-block: var(--sp-7); }  /* surface set in sections.css */
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
/* The brand mark, same yellow as the header. It was a white mark held
   back to .85; dimming the yellow one just makes it look faded. */
.footer img.footer__logo { height: 40px; width: auto; }
.footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-he-label);
  color: var(--lemon-500);
  margin: 0 0 14px;
}
.footer p, .footer li { font-size: var(--fs-sm); color: var(--text-faint); }
.footer li { margin-bottom: 10px; }
.footer li a { color: var(--text-muted); }
.footer__social { display: flex; gap: 12px; margin-top: 4px; }
.footer__social a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: border-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}
.footer__social a:hover { border-color: var(--lemon-500); color: var(--accent-hover); }
.footer__social .icon { width: 20px; height: 20px; }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.footer__legal .spacer { margin-inline-start: auto; }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------------------------------------------------------------------------
   PRODUCT CARDS + THE CONTACT LINE
   The CTA lives inside this section now: the "talk to us" row sits above the
   cards so the option to ask is visible before anyone commits to a product.
   Everything here is sized to fit one desktop viewport.
   ------------------------------------------------------------------------- */

.products__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vh, 64px);
}
.products__head .lead { margin: 0 auto; }

.products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: stretch;
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-slow) var(--ease-out);
}
.product:hover { border-color: var(--border-strong); }   /* cards do not lift */

/* The image is taken out of flow so aspect-ratio actually governs the box —
   a percentage-height <img> in normal flow drags the parent to its own
   intrinsic ratio instead. */
.product__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-void);
  overflow: hidden;
}
.product__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(26px, 2.8vw, 40px);
}
.product__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-strong);
  font-size: clamp(21px, 1.9vw, 26px);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.product__brief { margin: 12px 0 0; color: var(--text-muted); }

.product__points { margin: clamp(20px, 2.4vh, 26px) 0 0; display: grid; gap: 10px; }
.product__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.product__points .icon {
  width: 16px; height: 16px;
  margin-top: 5px;
  color: var(--lemon-500);
  flex: none;
}

.product__spec {
  margin: clamp(20px, 2.4vh, 26px) 0 0;
  padding-top: clamp(18px, 2.2vh, 24px);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: clamp(22px, 3vh, 30px);
}
.product__from { font-size: var(--fs-sm); color: var(--text-muted); }
.product__from strong {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 26px;
  color: var(--lemon-500);
  margin-inline-start: 6px;
}

.products__foot {
  margin: clamp(36px, 5vh, 56px) auto 0;
  max-width: 80ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.products__foot .icon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -2px;
  margin-inline-end: 8px;
  color: var(--lemon-500);
}

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

/* ---------------------------------------------------------------------------
   ORDER POPUP
   The only other translucent surface besides the header — and only the
   backdrop, which is flat black. The panel itself is --surface-base.
   ------------------------------------------------------------------------- */

.order {
  position: fixed; inset: 0; z-index: 95;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(10px, 2vh, 32px) clamp(12px, 3vw, 48px);
  background: rgba(0,0,0,.90);
  overflow: auto;
  overscroll-behavior: contain;
}
.order.is-open { display: flex; }

/* The panel carries no padding of its own any more: on the form step it is a
   two-column frame, and each column pads itself. The confirmation step pads
   itself too. `overflow: hidden` is what clips the photograph to the corner
   radius. */
.order__panel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  background: var(--surface-base);
  border: 1px solid var(--rule-accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- landscape layout ---------------------------------------------------
   Pane first in the source, so in RTL it takes the right-hand track (the
   reading edge) and the photograph takes the left. The pane is the only
   thing that scrolls — the picture holds still, the way it does on a
   product page.
   ------------------------------------------------------------------------ */

/* A DEFINITE height, not a max-height. Grid rows size to their content, so a
   max-height would just clip the overflow instead of making the pane scroll —
   the row has to be told what height to resolve against, hence the explicit
   height plus `minmax(0, 1fr)` on the row.
   The number is picked so the photo column lands close to 3:4, the ratio the
   finish photographs are cut to, which means `cover` shows the whole piece
   rather than zooming into a face. */
.order__step--split {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  grid-template-rows: minmax(0, 1fr);
  /* Tall enough that the whole form fits without scrolling on a normal
     laptop. Everything inside is sized to that budget: paired email/phone,
     a two-row textarea, tight gaps, and the material line moved out to the
     photograph's caption. */
  /* 1010, not 980: English runs a little longer than Hebrew and the consent
     line wraps once more, which pushed a 1080px-tall screen 22px into
     scrolling. 1010 + the gutter still clears 1080. */
  height: min(calc(100vh - clamp(24px, 5vh, 72px)), 1010px);
  min-height: 520px;
}

/* min-height: 0 is load-bearing. A grid item defaults to min-height: auto, so
   without it the row refuses to shrink below the form's natural height and the
   whole dialog grows past the viewport instead of the pane scrolling. */
.order__pane {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 2.3vw, 36px);
  padding-bottom: 0;          /* the sticky foot carries the bottom space */
  display: flex;
  flex-direction: column;
}

.order__visual {
  position: relative;
  margin: 0;
  min-height: 0;
  background: var(--surface-void);
}
.order__visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.order__visual img.is-fresh { animation: order-fade var(--dur-slow) var(--ease-out); }
@keyframes order-fade { from { opacity: 0 } to { opacity: 1 } }

/* The caption sits on a bottom-up scrim — type never on bare photograph. */
.order__visual-cap {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.45) 46%, rgba(0,0,0,0));
}
.order__visual-label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-he-label);
  color: rgba(255,255,255,.62);
}
.order__visual-cap strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-strong);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--lemon-500);
}

/* Price and send hold the foot of the pane while the rest scrolls past. The
   gradient is what stops the last form field from appearing to touch the
   button as it slides underneath. */
.order__foot {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding: 18px 0 clamp(22px, 2.3vw, 36px);
  background: linear-gradient(to top, var(--surface-base) 0 86%, rgba(10,10,9,0) 100%);
  display: grid;
  gap: 14px;
}

.order__close {
  position: absolute;
  top: 16px; inset-inline-end: 16px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
  /* It floats over the photograph on the form step, so it needs its own
     ground rather than borrowing the panel's. */
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text-strong);
  z-index: 2;
  cursor: pointer;
  transition: color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.order__close:hover { color: var(--accent-hover); border-color: var(--lemon-500); }
.order__close .icon { width: 20px; height: 20px; }

.order__head {
  margin-bottom: clamp(16px, 2vh, 22px);
}
.order__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}
.order__brief { margin: 10px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
/* The material line, under the finish name on the photograph. */
.order__spec {
  margin: 8px 0 0;
  max-width: 42ch;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: rgba(255,255,255,.66);
}

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

.order__form { display: grid; gap: clamp(12px, 1.5vh, 18px); }

/* Two short fields on one line. Collapses on narrow screens. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 18px);
}

.field { display: grid; gap: 8px; }
.field__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-he-label);
  color: var(--text-muted);
}
.field__hint { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
.field__hint--accent { color: var(--lemon-500); }
.field__error { margin: 0; font-size: var(--fs-xs); color: var(--lemon-500); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }




.chip {
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-body);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-body);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.chip:hover:not(:disabled):not(.chip--static),
.chip:focus-visible:not(:disabled) { border-color: var(--lemon-500); color: var(--accent-hover); }
.chip:active:not(:disabled) { transform: scale(var(--press-scale)); }
.chip[aria-pressed="true"] {
  border-color: var(--lemon-500);
  color: var(--lemon-500);
  font-weight: var(--fw-medium);
  box-shadow: var(--glow-cta);
}
/* Not offered — dimmed with colour, never with opacity. */
.chip:disabled {
  border-color: rgba(255,255,255,.08);
  border-style: dashed;
  color: var(--ink-500);
  cursor: not-allowed;
  box-shadow: none;
}
/* A single fixed size is stated, not offered as a choice. */
.chip--static {
  display: inline-flex;
  align-items: center;
  border-color: var(--lemon-500);
  color: var(--lemon-500);
  font-weight: var(--fw-medium);
  cursor: default;
}

.input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-void);
  color: var(--text-body);
  font-family: inherit;
  font-size: 16px;                     /* 16px stops iOS zooming on focus */
  line-height: 1.5;
  transition: border-color var(--dur-slow) var(--ease-out);
}
.input::placeholder { color: var(--ink-500); }
.input:hover { border-color: rgba(255,255,255,.34); }
.input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: transparent; }
.input[aria-invalid="true"] { border-color: var(--lemon-500); }
textarea.input { resize: vertical; min-height: 96px; }

/* the honeypot must be unreachable, not merely invisible */
.order__hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.order__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: 14px;
  border-top: 1px solid var(--rule-accent);
}
.order__total-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-he-label);
  color: var(--text-muted);
}
.order__price {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  /* The pane is narrower than the old single-column dialog, so the total is
     sized to sit on one line beside its label rather than to shout. */
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--lemon-500);
}

.order__error { margin: 0; font-size: var(--fs-sm); color: var(--lemon-500); text-align: center; }
.order__legal { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }

/* --- confirmation: black panel, grey details card ------------------------
   The grey below is the ONE deliberate exception to the two-background rule
   in tokens.css. It exists because the confirmation panel goes fully black,
   and the order details need to lift off it. Change it in one place. */

/* --- fitting the form on one screen --------------------------------------
   The dialog is sized so nothing needs scrolling on a normal laptop. These
   rules buy back the last of the height: a mouse does not need the 44px touch
   floor, and on a short viewport the product blurb is the first thing that can
   go — the card the visitor just clicked said the same sentence.
   Below roughly 760px of viewport a little scrolling is unavoidable; the form
   simply has more rows than that has room for.
   ------------------------------------------------------------------------ */

@media (pointer: fine) {
  .order__form .chip { min-height: 40px; padding: 9px 20px; }
}

@media (max-height: 1000px) {
  .order__brief { display: none; }
  /* The same reassurance is in the FAQ; on a short screen the consent lines
     earn this space more than the hint does. */
  .order__form .field__hint { display: none; }
  .order__head { margin-bottom: 14px; }
  .order__head h3 { font-size: clamp(22px, 2vw, 28px); }
  .order__pane { padding-top: clamp(18px, 2vw, 28px); }
  .order__form textarea.input { min-height: 58px; }
  .order__legal { font-size: 11px; }
}

/* Shortest screens: the legal reassurance line goes too. The terms link two
   rows above it now carries the same promise, and at this height every row
   has to justify itself. */
@media (max-height: 820px) {
  .order__legal { display: none; }
}

/* CONFIRMATION. The form step needs a wide window; this one does not — at
   1200px the details card stretched into a mostly-empty slab with the label
   and its value pinned to one edge. It goes back to the width it had before
   the dialog grew, so each row reads as one horizontal label–value pair. */
.order__panel.is-done { background: var(--surface-void); max-width: 660px; }
.order__panel.is-done .summary { background: var(--order-summary-bg); border-color: transparent; }

/* --- confirmation ------------------------------------------------------- */

.order__done { text-align: center; padding: clamp(28px, 4vw, 48px); }
.order__done-mark {
  width: 64px; height: 64px;
  margin: 0 auto clamp(20px, 3vh, 28px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lemon-500);
  border-radius: 50%;
  color: var(--lemon-500);
  box-shadow: var(--glow-cta);
}
.order__done-mark .icon { width: 28px; height: 28px; }
.order__done h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}
.order__done-lead { margin: 14px auto 0; max-width: 42ch; color: var(--text-muted); font-size: var(--fs-sm); }

.summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  margin: clamp(24px, 3.4vh, 34px) 0;
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  text-align: start;
  font-size: var(--fs-sm);
}
.summary dt { color: var(--text-faint); }
/* Label at one edge, value at the other, so each row reads as one horizontal
   pair instead of both hugging the same side with dead space beside them. */
.summary dd { margin: 0; justify-self: end; text-align: end; color: var(--text-body); overflow-wrap: anywhere; }

.order__done-intro {
  margin: clamp(22px, 3vh, 30px) 0 -10px;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-he-label);
  color: var(--text-faint);
  text-align: start;
}
.order__done-note { margin: 0 auto; max-width: 44ch; font-size: var(--fs-sm); color: var(--lemon-500); }
.order__done-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(24px, 3.4vh, 32px);
}
.order__done-actions .btn { width: 100%; }

/* Below this the two columns cannot both earn their width, so they stack and
   the photograph is lifted above the pane. */
@media (max-width: 860px) {
  .order__step--split { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 0; }
  .order__visual { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .order__pane { overflow: visible; }
  .order__pane { padding-bottom: clamp(22px, 2.3vw, 36px); }
  .field-row { grid-template-columns: 1fr; }
  .order__foot { position: static; padding-bottom: 0; background: none; }
}

@media (max-width: 560px) {
  .order { padding: 0; }
  .order__panel { border-radius: 0; border-inline: 0; min-height: 100%; }
  .chip { padding: 11px 18px; }
}


/* ---------------------------------------------------------------------------
   CONSENT TICKBOXES  (order popup)

   A native checkbox, visually replaced by a square that matches the chips:
   hairline border, lemon when ticked. The input keeps its own focus ring and
   stays in the tab order — it is the real control, not a decoration.
   The required one and the optional one look identical on purpose; the
   difference is stated in words, not implied by styling.
   ------------------------------------------------------------------------- */

.consent { display: grid; gap: 10px; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  cursor: pointer;
  /* Fine print, sized as fine print: the detail lives on the linked page and
     this line only has to be readable and unambiguous. */
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-body);
}

/* The real input sits under the drawn box, full size, so the hit area and the
   focus ring are the browser's own. */
.check input {
  grid-area: 1 / 1;
  width: 20px; height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check__box {
  grid-area: 1 / 1;
  width: 20px; height: 20px;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--ink-1000);
  pointer-events: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.check__box .icon { width: 13px; height: 13px; stroke-width: 3.5; opacity: 0; }

.check input:checked + .check__box {
  background: var(--lemon-500);
  border-color: var(--lemon-500);
}
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.check:hover .check__box { border-color: var(--lemon-500); }

.check__text { grid-column: 2; }
.check__text a { color: var(--lemon-500); text-decoration: underline; text-underline-offset: .18em; }
.check__text a:hover { color: var(--accent-hover); }
.check__opt { color: var(--text-faint); }

/* An invalid required box reads as an error without turning red, which the
   palette does not have — the lemon error text below it carries the message. */
.check input[aria-invalid="true"] + .check__box { border-color: var(--lemon-500); }


/* ---------------------------------------------------------------------------
   LEGAL PAGE  (terms.html)

   One narrow column of running text on the base surface. No photography, no
   reveal animation — it is a document, and it should read like one.
   ------------------------------------------------------------------------- */

.legal-page { background: var(--surface-base); }

/* The legal header does not stick: on a long document a fixed bar steals
   height from every screen of reading. */
.header--legal { position: static; }

.legal { padding-top: clamp(32px, 5vh, 56px); }

.legal__head { margin-bottom: clamp(32px, 5vh, 52px); }
.legal__head h1 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.legal__meta {
  margin: 14px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.legal__sep { margin-inline: 8px; }

/* --- the summary box ----------------------------------------------------- */

.legal__tldr {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--rule-accent);
  border-radius: var(--radius-lg);
  background: var(--surface-void);
  margin-bottom: clamp(36px, 5vh, 60px);
}
.legal__tldr h2 {
  font-size: var(--fs-h3);
  margin-bottom: 18px;
}
.legal__tldr ul { display: grid; gap: 13px; }
.legal__tldr li {
  /* NOT a grid or a flex container. These bullets contain <b> inside running
     text, and in a grid every element child becomes its own grid item — the
     <b> fragments were being torn out of the sentence and dropped onto their
     own rows. The icon sits in a gutter instead, and the text stays inline. */
  position: relative;
  padding-inline-start: 27px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-body);
}
.legal__tldr li .icon {
  position: absolute;
  inset-inline-start: 0;
  top: .38em;
  width: 16px; height: 16px;
  color: var(--lemon-500);
}
.legal__tldr li b { color: var(--text-strong); font-weight: var(--fw-medium); }
.legal__tldr-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --- the clauses --------------------------------------------------------- */

.legal__body { display: grid; gap: clamp(30px, 4.4vh, 44px); }
.legal__body h2 {
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: 0;
  margin-bottom: 14px;
}
.legal__body p {
  margin: 0 0 13px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.85;
}
.legal__body p:last-child { margin-bottom: 0; }
.legal__body b { color: var(--text-body); font-weight: var(--fw-medium); }
.legal__body a { color: var(--lemon-500); text-decoration: underline; text-underline-offset: .18em; }

.legal__note {
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-xs) !important;
  color: var(--text-faint) !important;
}

/* --- the refund ladder --------------------------------------------------- */

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: var(--fs-sm);
}
.legal__table th,
.legal__table td {
  padding: 12px 0;
  text-align: start;
  border-bottom: 1px solid var(--border-hairline);
}
.legal__table thead th {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-he-label);
  color: var(--text-faint);
  padding-bottom: 8px;
}
.legal__table tbody th { color: var(--text-body); font-weight: var(--fw-body); }
.legal__table tbody td { color: var(--text-muted); text-align: end; }
.legal__table tbody td b { color: var(--lemon-500); }
.legal__table tbody tr:last-child th,
.legal__table tbody tr:last-child td { border-bottom: 0; }

/* --- the way back -------------------------------------------------------- */

.legal__foot {
  margin-top: clamp(44px, 7vh, 72px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--border-hairline);
}
.legal__foot p { margin: 0 0 20px; color: var(--text-muted); font-size: var(--fs-sm); }
.legal__foot-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

@media (max-width: 560px) {
  .legal__foot-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   25. LANGUAGE SWITCH  (עברית ⇄ English)

   The whole page mirrors itself from the dir attribute alone, because the
   layout is written in logical properties (inset-inline, margin-inline,
   text-align: start). The three rules under "LTR corrections" below are the
   only places that needed a hand — everything there is a shape that points
   somewhere, and a shape cannot be flipped by a logical property.
   ------------------------------------------------------------------------- */

.lang {
  display: inline-flex;
  flex: none;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
.lang__btn {
  min-width: 34px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.lang__btn:hover { color: var(--text-strong); }
.lang__btn.is-on {
  background: var(--lemon-500);
  color: var(--text-on-accent);
  /* 600, not 700: the body family (Assistant) ships 300/400/600, and asking
     it for 700 makes the browser synthesise a fake bold. */
  font-weight: var(--fw-medium);
}
/* The switch is a convenience, not a headline — it never out-shouts the CTA. */
@media (max-width: 420px) {
  .lang__btn { min-width: 28px; padding: 5px 6px; }
}

/* ---- LTR corrections ---------------------------------------------------- */

/* The step rail is a gradient that fades one way and an arrowhead built out
   of borders. Mirroring the element flips both at once, which is why there
   is no second arrowhead rule anywhere. */
[dir="ltr"] .steps-rail__line { transform: scaleX(-1); }

/* "Previous" and "next" swap sides with the reading direction; the buttons
   are already placed by logical properties, so only the glyphs mirror. */
[dir="ltr"] .lightbox__prev .icon,
[dir="ltr"] .lightbox__next .icon,
[dir="ltr"] .header--legal .btn .icon { transform: scaleX(-1); }

/* ---- the Hebrew-clauses notice on terms.html ---------------------------- */
/* Shown by CSS, not by JS, so it cannot get out of step with the language.
   Deliberately no hidden attribute on the element: the browser's own
   [hidden] rule beats an author display:block, so the notice would never
   have appeared. The default below is what keeps it out of the Hebrew view. */

.legal__en-note { display: none; }
[data-lang="en"] .legal__en-note {
  display: block;
  margin-bottom: 34px;
  padding: 20px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-void);
}
[data-lang="en"] .legal__en-note h2 {
  margin: 0 0 8px;
  font-size: var(--fs-h3);
  color: var(--lemon-500);
}
[data-lang="en"] .legal__en-note p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-body);
}

/* ---------------------------------------------------------------------------
   26. SHORT SCREENS — the consent rows

   This block has to sit at the very END of the file. The .consent and .check
   rules above are at the same specificity, so a media query placed before
   them loses on source order alone and the overrides silently do nothing.
   ------------------------------------------------------------------------- */

@media (max-height: 820px) {
  .consent { gap: 7px; }
  .check   { line-height: 1.45; }
}

/* ---------------------------------------------------------------------------
   27. PRODUCT BRIEF — the opening hook

   Both product briefs are built the same way: a short hook line, then two
   lines that say what the thing is and what it captures. The hook is a <b>
   inside the same <p>, not a separate element, so order.js still reads the
   whole brief from one node and the sentence stays one sentence for a
   screen reader.
   ------------------------------------------------------------------------- */

.product__hook {
  display: block;
  margin-bottom: 6px;
  color: var(--text-strong);
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------------
   28. SHORT SCREENS — reclaiming what the larger type cost

   The type scale went up a step for legibility, which pushed the order form
   back into scrolling on a 800px-tall laptop. The text itself stays big; what
   gives is the air between the rows. Must sit at the end of the file to beat
   the .order__form rule above on source order.
   ------------------------------------------------------------------------- */

@media (max-height: 820px) {
  /* The label has no bottom margin of its own — the .field grid gap spaces it
     — so adding one here made the form TALLER, not shorter. Measured: 33px of
     overflow became 41px. Only the row gap gives anything back. */
  .order__form { gap: 10px; }
}